Upload SourceMap using @sentry/webpack-plugin

The sentry monitoring error needs to be located in the code, and the SourceMap needs to be opened when the project is packaged. But it makes the code unsafe. For the security of the project, the SourceMap is uploaded separately to sentry, which can be closed when it is officially packaged.

1. Log in to sentry official website

create project 1
create project 2

2. Project access 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
})

So far sentry has successfully connected

3 Upload SourceMap

Need to generate information such as taken

token

org

Create a new .sentryclirc file in the following directory

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


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

configuration information

view.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相符
    }])
  }
}

package upload

npm run build

@sentry/webpack-plugin will not delete the sourceMap after uploading, you need to delete the .map code
package.json after building:

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

Notice:

Another way is to generate a sourceMap file from .map separately, in include: './dist/sourceMap', // specify the upload directory

The sourceMap file directory needs to be configured in vue.config.js

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

sentry view information

SourceMap

error message

If the SourceMap is not uploaded, the corresponding code will not be located
No SourceMap uploaded