Vue项目接入Sentry之第一步：安装

Sentry 的 SDK 可以自动报告错误和异常。

Install 安装

# npm
npm install --save @sentry/vue @sentry/tracing

# yarn
yarn add @sentry/vue @sentry/tracing

Configure 配置

配置应该在应用程序生命周期中尽早进行。

/**
* @description: 入口文件 main.js
* @update: 2021-09-25 11:33:55
* @author: Ada.H
*/

// Vue 2
import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

Vue.use(Router);

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

Sentry.init({
  Vue,
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Integrations.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");

Verify 校验

/**
* @description: 根组件 App.vue
* @update: 2021-09-25 11:45:13
* @author: Ada.H
*/

// ...
<button @click="throwError">Throw error</button>
// ...

export default {
  // ...
  methods: {
    throwError() {
      throw new Error('Sentry Error');
    }
  }
};

要查看并解决记录的错误，登录 sentry.io 并打开项目。单击错误标题将打开一个页面，您可以在其中查看详细信息并将其标记为已解决。