step1:让热心肠的后端小伙伴帮你搭建sentry服务
没有就别玩了,这不是前端该做的,或者自己去用vmware开个虚拟机,用docker安装。
step2:创建前端代码
搭建react前端代码。
step3:去后端小伙伴搭好的sentry服务创建react项目
先去修改语言、时区,生成API token,创建好后,直接复制对应代码进step2生成的项目中,安装sentry依赖,执行start指令,自己写点前端错误去触发,就可以在sentry后台看到错误了。sentry界面跟gitHub的风格很像啊。。
step4:上传souceMap
这步很多坑,上传sourceMap是打包构建才做的事情。对于react,需要先扩展webpack配置,配置好SentryWebpackPlug,创建好.sentryclirc文件,并填写好第三步生产的token跟对应内容就不用cli指令上传了
// config-overrides.js
const { override, addWebpackPlugin } = require('customize-cra');
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
const path = require('path')
const configOutput = () => config => { // 配置打包输出地址
config.output.path = path.resolve(__dirname, 'dist/');
return config;
}
module.exports = {
webpack: override(
addWebpackPlugin(new SentryWebpackPlugin({
release: 'v1.0.1', // 版本号,需要跟step3代码index.js->Sentry.init里面的release一致
include: "dist/static/js", // map文件地址
ignore: ["node_modules"],
configFile: "sentry.properties", // 配置文件
urlPrefix: '~/static/js' // 配置sourceMap文件前缀,否则容易出问题找不到
})),
configOutput()
),
};
最终打包run build,就能自动上传sourceMap,当Minified Scripts跟Source Maps地址对应起来,就没啥问题了:
附上vue版本,同时讲解更细的:https://juejin.cn/post/6954303116783124487
vue的vue.config.js配置:
chainWebpack (config) {
const isPord = process.env.NODE_ENV === 'production'
console.log('isPord', isPord)
config.when(isPord, config => {
const pjson = require('./package.json')
console.log('version', pjson.version)
const SentryCliPlugin = require('@sentry/webpack-plugin')
config.plugin('SentryCliPlugin').use(SentryCliPlugin, [{
release: pjson.version,
include: './dist/js',
urlPrefix: "~/js/",
configFile: "sentry.properties", // 配置文件
ignore: ['node_modules'],
}]
)
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 上传完删除sourceMap
config.plugin('CleanWebpackPlugin').use(CleanWebpackPlugin, [{
verbose: true,
cleanAfterEveryBuildPatterns: ['**/*.map'],
protectWebpackAssets: false,
}])
})
}
安装 @sentry/webpack-plugin日常阻塞导致报错,需要在.npmrc 文件下加入:
sentrycli_cdnurl=https://github.com/getsentry/sentry-cli/releases/download/
注意坑,vue报错无效的原因: