sentry记录前端报错，也可主动发送消息

sentry记录前端报错，也可主动发送消息
安装：

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

vue2

import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";

Vue.use(Router);

const router = new Router({
  // ...
});

Sentry.init({
  Vue,
  dsn: "https://[email protected]/0",
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
    }),
    new Sentry.Replay(),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 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";

const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});

Sentry.init({
  app,
  dsn: "https://[email protected]/0",
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
    }),
    new Sentry.Replay(),
  ],

  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,

  // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],

  // Capture Replay for 10% of all sessions,
  // plus for 100% of sessions with an error
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

app.use(router);
app.mount("#app");

以上方法引入后，js报错就会被记录。

主动记录：

import { captureMessage, captureException, captureEvent } from "@sentry/vue";

// 主动捕获和发送错误信息
try {
// 你的代码
    ccccc.a()
} catch (error) {
    console.log(error)
    captureException('我是谁？我在哪儿？');
}

// 发送自定义消息日志
captureMessage('你在布吉岛！');

// 发送用户反馈
captureEvent({
    message: '用户反馈',
    user: {
    email: '[email protected]',
    id: 'user123'
    },
});

参考：https://docs.sentry.io/platforms/javascript/guides/vue/