前言
上一章，介绍了，为啥前端需要线上bug追踪系统，以及简单的在sentry注册了一个账号，做了一个小demo，演示了初步的流程。
但是还有三个痛点没有解决
- [ ] 代码版本（release版本号）
- [ ] 出错的代码文件（source map）
- [ ] 还原用户操作
这章继续接上一章，如何解决前两个疼点。
设置每次发布项目的release
Sentry.init({
dsn: 'https://xxxx@sentry.io/1511376',
release: 'test@0.0.0',
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 <release名称> 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文件，防止这些上传到服务器。
设置上传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的一些高级用法了，下一章我们继续。
网友评论