sentry的线上代码监控

代码监控

为什么我们需要加前端线上代码监控

当我们的C端项目上线后，除了用户反馈和流量统计外是否还能做更多事情，类似于sentry的平台提供给我们的是捕捉线上前端的控制台报错信息，按浏览器、设备、受影响的用户或错误是否未处理等属性进行过滤。可以检查问题详细信息以更好地了解问题并有效地进行分类

创建项目

进入控制台创建项目

安装sentry

# Using yarn
yarn add @sentry/vue @sentry/tracing
# Using npm
npm install --save @sentry/vue @sentry/tracing

配置sentry

vue2

import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";
Vue.use(Router);
const router = new Router({
  // ...
});
Sentry.init({
  Vue,
  dsn: "https://3bcbfa2b771443978f3843f7eeebb1d1@o317998.ingest.sentry.io/6707654",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});
// ...
new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

vue3

import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";
const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});
Sentry.init({
  app,
  dsn: "https://3bcbfa2b771443978f3843f7eeebb1d1@o317998.ingest.sentry.io/6707654",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
});
app.use(router);
app.mount("#app");

个性化配置

Sentry.init({
    app,
    release: "defipay-payment@" + import.meta.env.VITE_BASE_WEB_VERSION,
    environment: import.meta.env.MODE,
    dsn: "https://3bcbfa2b771443978f3843f7eeebb1d1@o317998.ingest.sentry.io/6707654",
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
        tracingOrigins: ["localhost","https://www.defipay.biz", "https://test.defipay.biz", /^\//],
      }),
    ],
    //请将tracesSampleRate您的选项设置Sentry.init()为 0 到 1 之间的数字。设置此选项后，创建的每笔交易都将有一定百分比的机会发送到 Sentry。
    tracesSampleRate: 1.0,
  });