Vue 配置集成 Sentry

这是一个快速开始的指南。如果需要了解更多 Vue 集成 Sentry 的方法，请参阅官方完整文档

开始

需要以下依赖来收集 Vue 应用的错误和性能数据：

  • @sentry/vue (Sentry 的 Vue SDK)
  • @sentry/tracing (测算性能数据)

可以使用以下包管理器安装依赖或者直接使用CDN引入

使用 yarn 或者 npm

安装依赖:

1
2
3
4
5
# yarn
yarn add @sentry/vue @sentry/tracing

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

接下来，在 Vue app 根组件初始化之前初始化 Sentry

Vue 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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: '监控平台自动生成的基于token的链接',
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  release: "my-project-name@0.0.1",
  // 设置 traces-sample-rate 为 1.0 以捕获全部事务来进行性能监视
  // 建议在生产模式下调整此值
  tracesSampleRate: 1.0,
});

// ...

new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

Vue 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

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

Sentry.init({
  app,
  dsn: '监控平台自动生成的基于token的链接',
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  tracesSampleRate: 1.0,
});

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

关于 tracesSampleRate的配置，更多示例见官方文档

Vue 错误捕获器

请注意，如果使用了此集成，Vue将默认不会调用内部的 logError。这意味着在 Vue 渲染器中的发生的错误将不会显示在浏览器控制台中。如果你仍然希望保留这一功能，则需要传入配置 logErrors: true

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Sentry.init({
  Vue,
  dsn: '',
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ['localhost', 'my-site-url.com', /^\//]
    })
  ],
  logErrors: true,
  release: "my-project-name@0.0.1",
  // 设置 traces-sample-rate 为 1.0 以捕获全部事务来进行性能监视
  // 建议在生产模式下调整此值
  tracesSampleRate: 1.0
})

上传sourcemap

自动上传

如果使用webpack打包，官方提供了sentry-webpack-plugin自动上传source map

安装依赖

1
npm install --save-dev @sentry/webpack-plugin

引入plugin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// vue.config.js
const SentryWebpackPlugin = require('@sentry/webpack-plugin')
const packageJson = require('./package.json')

module.exports = {
  productionSourceMap: true, // 这一项需要为true
  // other configuration
  configureWebpack: () => ({
    // 其他配置
    plugins: [
      // 所有其他插件，如果sentry webpack plugin不是最后一个，则不能保证source map是一定正确的
      new SentryWebpackPlugin({
        authToken: '<auth-token>'
        org: '<org-slug>',
        project: '<project-slug>', 
        url: 'http://', // 具体的sentry服务地址，使用authToken则必须有此项
        urlPrefix: '~/app', // 具体的项目路径
        // 根据不同的平台灵活定义，如果此处定义了release，可以省略init时候的release
        release: 'my-app@0.0.1',
        include: './dist',
        ignore: ['node_modules', 'vue.config.js']
      })
    ]
  })
},

手动上传

1
2
3
4
5
# 新建版本
sentry-cli --url http://ipaddress:port --auth-token=<token> -o <org-slug> -p <project-slug> new <release-name>

# 上传source map
sentry-cli --url http://ipaddress:port --auth-token=<token> releases -o <org-slug> -p <project-slug> files <release-name> upload-sourcemaps ./dist

更多关于source map的内容参考官方文档