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://examplePublicKey@o0.ingest.sentry.io/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://examplePublicKey@o0.ingest.sentry.io/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: 'user@example.com',
id: 'user123'
},
});