使用@sentry/webpack-plugin上传SourceMap

sentry监控错误需要定位到代码，项目打包的时候需要SourceMap打开。但会导致代码不安全。为了项目的安全性，对sentry单独上传SourceMap，正式打包的时候可以关闭。

1、登入sentry官网

2、项目接入sentry

npm install @sentry/vue @sentry/tracing @sentry/webpack-plugin
main.js

import * as Sentry from '@sentry/vue'
import { Integrations } from '@sentry/tracing
Sentry.init({
  Vue,
  dsn: 'xxx',
  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
})

到此为止sentry 就接入成功了

3 上传SourceMap

需要生成taken 等信息

在跟目录下新建.sentryclirc 文件

[auth]
token=13179c0bbe74069180f270b4a7db61de2dbadedb4a1   // token 获取 图片所示


[defaults]
url=https://sentry.io/   // sentry地址
org=sentry-v0   // 获取org,上图所示
project=index-management   // 创建的项目名

配置信息

vue.config.js

const SentryCliPlugin = require('@sentry/webpack-plugin')
productionSourceMap: true 配置SourceMap

  configureWebpack(config) {
 if (process.env.NODE_ENV === 'production') {
    config.plugin('sentry').use(SentryCliPlugin, [{
      include: './dist',    // 指定上传目录
      ignoreFile: '.gitignore',  // 指定忽略文件配置
      release: process.env.VUE_APP_BASE_API,  // 指定发布版本
      ignore: ['node_modules', 'webpack.config.js'], 
      configFile: './.sentryclirc',   // 指定sentry上传配置
      urlPrefix: '~/'   // 保持与publicpath相符
    }])
  }
}

打包上传

npm run build

@sentry/webpack-plugin在上传后不会删除sourceMap, 需要子啊构建之后删除.map代码
package.json：

"scripts": {
   "build": "vue-cli-service build && rm -fr ./dist/js/*.map"
 }

注意：

还有一种方式就是将.map 单独生成一个sourceMap文件，在 include: ‘./dist/sourceMap’, // 指定上传目录

需要在vue.config.js中配置sourceMap文件目录

  configureWebpack(config) {
 config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js')
}

sentry 查看信息

如果没有上传SourceMap就不会定位到相应的代码