Vue 如何配置 Sentry

Vue 如何配置 Sentry

文档配置环境：Vue-cli 3.0 、[email protected]、[email protected]

一、安装Sentry模块

"@sentry/vue": "^6.13.3",
"@sentry/tracing": "^6.13.3",
"@sentry/webpack-plugin": "^1.18.3", 

@sentry/webpack-plugin：默认错误信息是压缩后的，不能定位到代码的实际位置 ；采用自动上传策略 ，在build的同时自动上传 source-map

二、创建.sentryclirc文件

// 文件内容如下
[defaults]
project=zqdl
org=zqdl
url=https://sentry.io/

[auth]
token=37b76c773b5840b5940e94fa35671155bc2774ecad3345d794a0d8627d673e07

project：项目名称

org：注册时填写的组织

url：上传的服务器根目录，自己不搭建Sentry服务器不用改

token：授权的Token

三、配置入口文件(main.js)

// 添加下面的代码
import * as Sentry from "@sentry/vue";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  Vue,
  debug:false,
  attachStacktrace: true,
  release:'v_order_0.0.1',  // 错误日志对应版本号
  dsn: "https://[email protected]/5985848",
  integrations: [
    new Integrations.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  initialScope: {
    tags: {"systemName": "bms-mobile-h5"},
  },
  tracesSampleRate: 1.0,
});

四、配置打包文件(vue.config.js)

// 添加下面的代码
const SentryWebpackPlugin = require('@sentry/webpack-plugin');

module.exports = {
  productionSourceMap: true, // 开启生成映射文件
  chainWebpack: webpackConfig => {
    if (pwaFalg) {
      if (process.env.NODE_ENV === 'production') {
        webpackConfig.plugin('sentry').use(SentryWebpackPlugin, [
          {
            release: `v_${currentModuleName}_0.0.1`, // 错误日志对应版本号
            include: './dist', // 作用的文件夹
            ignore: ['node_modules', 'webpack.config.js'],
            configFile: 'sentry.properties',
            urlPrefix: `~/bm/`, // 线上项目的资源地址
          },
        ]);
      }
    }
  }
};