sentry-代码监控解决方案

vue项目配置方式

yarn add @sentry/browser @sentry/integrations

react参考

https://zhuanlan.zhihu.com/p/210765546

实践配置

main.js

import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations’
Sentry.init({
  dsn: 'https://9c2fccbc9da746a3824f15a4f4c64990@sentry.priv-shield.com/4',
  environment: process.env.NODE_ENV,
  integrations: [new Integrations.Vue({ Vue, attachProps: true, logErrors: true })]
})

sentry 文档补充

https://github.com/getsentry/sentry-javascript

import { init, captureMessage } from '@sentry/browser';
init({
  dsn: '__DSN__',
  environment: process.env.NODE_ENV,
  // ...
});
captureMessage('Hello, world!');

Vue3

https://docs.sentry.io/platforms/javascript/guides/vue/

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://examplePublicKey@o0.ingest.sentry.io/0",
  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,
});
app.use(router);
app.mount("#app");