前言
现在的前端项目，如果一旦发布上线，代码一般都会进行混淆、压缩甚至加密，如果线上没有bug跟踪系统，客户端一旦报错，前端就无法及时感知，这个时候就需要使用人员上报，一层层上报到技术这边，技术如果要调试或者获得更具体的信息，就没有办法了，大部分情况下只有一张图片，但光靠一张图片，要追查bug产生的原因，有的时候是蛮困难的，等真正查清楚了，黄花菜都凉了。
没有人可以保证写的代码一定就没有bug，如果一个项目是一个团队写的，那就更不可能了，同样的，再好的QA，在互联网公司紧凑型排期的项目内，都无法保证覆盖率，所以有bug也是正常的。
关键是线上bug如何第一时间感知，分析原因，及时上线，这才是最重要的，这个做好了可以最大限度的降低公司的损失，避免事情进一步恶化，提高技术团队在公司的影响力，也省的每次都要杀一个产品祭天（😂┓( ´∀` )┏😂）。
需求有了，那找解决方案吧，在互联网这个领域，只要有痛点，特别是关于程序员的，肯定早都已经有成熟的方案了。
各种web bug追踪系统
国内这两年比较火的frontjs、fundebug；国外stackoverflow用的trackjs，据说微软和谷歌也有部分系统在用；PayPal、雅虎在用的instabug；Uber、wework用的rollbar；可以部署到自己系统内并且开源免费的sentry。
- frontjs https://www.frontjs.com/pricing
- fundebug https://www.fundebug.com/
- trackjs https://trackjs.com/
- instabug https://instabug.com/
- rollbar https://rollbar.com/
- sentry https://sentry.io
上述系统除了sentry可以选择自建服务外，其他的大规模商用，都需要钱。
把项目部署到sentry官方的系统内，超过一定规模后，也是收费的，当然好处也很多：炫酷的图表、直观的数据、不需要投入人力去研发、管理数据，反正给足钱（500-5000月），一切你想要的功能，都不是问题。
但很多中小公司，不一定有这方面的预算，我们公司目前就没有这方面的预算，所以自建了sentry系统。
这些线上bug追踪的系统到底解决了什么疼点？
个人的理解，bug追踪系统应该要能解决以下问题
- [ ] 第一时间通知
- [ ] 出错的url
- [ ] 具体的错误文本、类型
- [ ] 客户端的一些信息（浏览器版本、操作系统、用户行为）
- [ ] 代码版本（release版本号）
- [ ] 出错的代码文件（source map）
- [ ] 还原用户操作
如果上述问题都能解决，那还有什么bug不能及时解决的尼？
接下来会以sentry，作为主体，谈谈如何用sentry搭建bug追踪体系。
进入主题阶段
第一步：注册账号、创建项目
为了快速的开始，我们可以利用github账号快速的注册一个sentry的账号，然后创建一个基于VUE（公司用的VUE）【测试的项目】，如下图所示
sentry官网 https://sentry.io
这是创建一个【项目名】为Vue，【选择团队】为test001的vue的项目
第二步：前端部署，手动触发一个异常
按照官方【安装指引】里面给出的代码，把下面代码部署到vue项目中
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
Sentry.init({
dsn: 'https://xxxxx@sentry.io/xxx',
integrations: [new Integrations.Vue({Vue, attachProps: true})],
});
// 触发异常
Sentry.captureException(new Error('第一个错误'))
所有关于javascript项目的前端安装指引 https://docs.sentry.io/platforms/javascript/
打开Chrome浏览器输入http://localhost:8080/index，监控network，就可以看到以下数据
network数据
打开sentry的后台，可以看到已经有信息了（邮箱应该也收到了一封邮件）
默认情况下，sentry记录信息是【按照url】来记录的，比如先刷新Chrome，然后再用Safari打开一次，再看sentry后台统计信息，只有事件+1了，错误并没有加
只有事件+1了，错误并没有加
可以清晰的看到，信息只记录了三次。
这个时候如果变更url，比如输入http://localhost:8080/，sentry就会创建一个新的记录
错误信息一样，url不一样
上面这张图片可以看到，虽然报错的信息是一样的，但是因为url变更了，所以sentry认为是另外一个错误。
下面的信息是sentry收集的各种信息
sentry收集的各种信息
是不是很强大，到目前为止，我们只不过是简单部署了sentry，然后就解决了4个重要的问题
- [x] 第一时间通知
- [x] 出错的url
- [x] 具体的错误文本、类型
- [x] 客户端的一些信息（浏览器版本、操作系统、用户行为）
- [ ] 代码版本（release版本号）
- [ ] 出错的代码文件（source map）
- [ ] 还原用户操作
后面三个问题，只要简单的为sentry增加一些配置，也可以很快的解决，下一章，我们再来细聊。
线上bug追踪之Sentry release+sourceMap（二)
线上bug追踪之Sentry 定制错误信息（三）
网友评论