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就不会定位到相应的代码