前言

现在的前端项目，如果一旦发布上线，代码一般都会进行混淆、压缩甚至加密，如果线上没有bug跟踪系统，客户端一旦报错，前端就无法及时感知，这个时候就需要使用人员上报，一层层上报到技术这边，技术如果要调试或者获得更具体的信息，就没有办法了，大部分情况下只有一张图片，但光靠一张图片，要追查bug产生的原因，有的时候是蛮困难的，等真正查清楚了，黄花菜都凉了。

没有人可以保证写的代码一定就没有bug，如果一个项目是一个团队写的，那就更不可能了，同样的，再好的QA，在互联网公司紧凑型排期的项目内，都无法保证覆盖率，所以有bug也是正常的。

关键是线上bug如何第一时间感知，分析原因，及时上线，这才是最重要的，这个做好了可以最大限度的降低公司的损失，避免事情进一步恶化，提高技术团队在公司的影响力，也省的每次都要杀一个产品祭天（😂┓( ´∀` )┏😂）。

需求有了，那找解决方案吧，在互联网这个领域，只要有痛点，特别是关于程序员的，肯定早都已经有成熟的方案了。

各种web bug追踪系统

国内这两年比较火的frontjs、fundebug；国外stackoverflow用的trackjs，据说微软和谷歌也有部分系统在用；PayPal、雅虎在用的instabug；Uber、wework用的rollbar；可以部署到自己系统内并且开源免费的sentry。

上述系统除了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('第一个错误'))