线上bug追踪之Sentry release+sourceMap（二）

线上bug追踪之Sentry初步尝试（一）

前言

上一章，介绍了，为啥前端需要线上bug追踪系统，以及简单的在sentry注册了一个账号，做了一个小demo，演示了初步的流程。

但是还有三个痛点没有解决

• [ ] 代码版本（release版本号）
• [ ] 出错的代码文件（source map）
• [ ] 还原用户操作

这章继续接上一章，如何解决前两个疼点。

设置每次发布项目的release

Sentry.init({
  dsn: 'https://[email protected]/1511376',
  release: '[email protected]',
  integrations: [new Integrations.Vue({ Vue, attachProps: true })]
})
Sentry.captureException(new Error('关于release'))

刷新浏览器，再次进入sentry后 可以看到【版本】这个按钮里面有了【指定的】版本号。

设置release版本号

现在每次线上报的bug，我们都能知道是哪个版本发布带上去的了。接下来就是如何把错误和sourceMap进行关联了。

上传sourceMap

我们只有在开发环境，才会用到sourceMap，线上环境如果加载sourceMap，不仅影响用户体验，而且也不安全，那sentry是如何解决的尼？

sentry，会要求用户把sourceMap上传到sentry的服务器，通过每次的release版本号来管理sourceMap，如果上传到sentry官网的服务器大家觉得不安全外，可以自建sentry服务（后面会说）。

sentry的官方提供了两种方式

• sentry-cli 命令行
• webpack插件

官方文档：https://docs.sentry.io/cli/configuration/#properties-files

第一种:sentry-cli

a. 生成.sentryclirc文件，

sentry-cli --url https://sentry.io/ login  

按照提示会生成下面文件

.sentryclirc文件

org、project这是手动设置的，命令不会自动产生

b. 输入命令开始上传

sentry-cli releases files  upload-sourcemaps --url-prefix <线上资源URI> <打包出来的js文件所在目录>  

sentry-cli releases files demo-test001 upload-sourcemaps --url-prefix '~/js' './dist/js' 

在控制台，如果成功了，会有如下显示

上传成功后的显示

这里有可能会上传失败，在文章的后面有解决方案

c. 打开sentry后台可以看到

relases版本号和soucemap一起上传了

d. 刷新浏览器，然后在看sentry的错误，我们已经可以知道代码具体出错在哪里了。

image.png

用命令行的方式实在太繁琐了，而且不是很适合前端工程化，好在官方有webpack插件，可以更好的结合。

第二种：通过webpack插件（@sentry/webpack-plugin）上传

配置如下

每次打包都会上传新的release版本号

打包时，自动上传，配合一些项目的工程化，更适合目前的前端项目。

但是这个插件有个弊端，就是生成的sourceMap不会自动删除，社区有人有人提供了另外一个插件（webpack-sentry-plugin），可以做到自动删除和设置project，不需要额外设置一份sentry的config file。

这个后面才看到，现在的方案还是用官方提供的，build之后记得还得再用命令删除source map文件，防止这些上传到服务器。

社区提供的方案 https://github.com/40thieves/webpack-sentry-plugin

设置上传source map遇到的坑

a. 发送sourceMap时总是报error: project not found，后面才发现是org名填写错误了

参考解决页面 https://github.com/getsentry/sentry-webpack-plugin/issues/119

b. 自己搭建完sentry之后，如果上传的sourceMap太多，有可能会导致413 Request Entity Too Large错误，如下

> Analyzing 180 sources
> Adding source map references
> Uploading source maps for release test01
error: API request failed
  caused by: sentry reported an error: unknown error (http status: 413)

参考解决页面 https://blog.csdn.net/fdipzone/article/details/45544497

c. 如果有重复的文件，那么用命令行必须强制指定--no-rewrite还是--rewrite，否则无法上传，会报错

现在release版本号和source map都可以做到自动化设置了，但是关于bug信息的上下文还没有说明，这个算sentry的一些高级用法了，下一章我们继续。

线上bug追踪之Sentry 定制错误信息（三）