其他分享
首页 > 其他分享> > sentry 前端监控

sentry 前端监控

作者:互联网

step1:让热心肠的后端小伙伴帮你搭建sentry服务

没有就别玩了,这不是前端该做的,或者自己去用vmware开个虚拟机,用docker安装

step2:创建前端代码

搭建react前端代码。

step3:去后端小伙伴搭好的sentry服务创建react项目

先去修改语言、时区生成API token,创建好后,直接复制对应代码进step2生成的项目中,安装sentry依赖,执行start指令,自己写点前端错误去触发,就可以在sentry后台看到错误了。sentry界面跟gitHub的风格很像啊。。

step4:上传souceMap

这步很多坑,上传sourceMap是打包构建才做的事情。对于react,需要先扩展webpack配置,配置好SentryWebpackPlug,创建好sentry.properties和.sentryclirc文件,并填写好对应内容就不用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,给sourceMap文件前缀,但我配置了反而无效 })), configOutput() ), };

最终打包run build,就能自动上传sourceMap,当Minified Scripts跟Source Maps地址对应起来,就没啥问题了:

 

标签:const,上传,前端,sentry,监控,path,config
来源: https://www.cnblogs.com/wilsunson/p/15947227.html