前言
現(xiàn)在的前端項(xiàng)目痕钢，如果一旦發(fā)布上線表谊，代碼一般都會(huì)進(jìn)行混淆、壓縮甚至加密盖喷，如果線上沒(méi)有bug跟蹤系統(tǒng)爆办，客戶端一旦報(bào)錯(cuò)，前端就無(wú)法及時(shí)感知课梳，這個(gè)時(shí)候就需要使用人員上報(bào)距辆，一層層上報(bào)到技術(shù)這邊，技術(shù)如果要調(diào)試或者獲得更具體的信息暮刃，就沒(méi)有辦法了跨算，大部分情況下只有一張圖片，但光靠一張圖片椭懊，要追查bug產(chǎn)生的原因诸蚕，有的時(shí)候是蠻困難的，等真正查清楚了，黃花菜都涼了背犯。
沒(méi)有人可以保證寫(xiě)的代碼一定就沒(méi)有bug坏瘩，如果一個(gè)項(xiàng)目是一個(gè)團(tuán)隊(duì)寫(xiě)的，那就更不可能了漠魏，同樣的倔矾，再好的QA，在互聯(lián)網(wǎng)公司緊湊型排期的項(xiàng)目?jī)?nèi)柱锹，都無(wú)法保證覆蓋率哪自，所以有bug也是正常的。
關(guān)鍵是線上bug如何第一時(shí)間感知禁熏，分析原因壤巷，及時(shí)上線，這才是最重要的瞧毙，這個(gè)做好了可以最大限度的降低公司的損失胧华，避免事情進(jìn)一步惡化，提高技術(shù)團(tuán)隊(duì)在公司的影響力升筏，也省的每次都要?dú)⒁粋€(gè)產(chǎn)品祭天（??┓( ′?` )┏??）撑柔。
需求有了，那找解決方案吧您访，在互聯(lián)網(wǎng)這個(gè)領(lǐng)域铅忿，只要有痛點(diǎn)，特別是關(guān)于程序員的灵汪，肯定早都已經(jīng)有成熟的方案了檀训。
各種web bug追蹤系統(tǒng)
國(guó)內(nèi)這兩年比較火的frontjs、fundebug享言；國(guó)外stackoverflow用的trackjs峻凫，據(jù)說(shuō)微軟和谷歌也有部分系統(tǒng)在用；PayPal览露、雅虎在用的instabug荧琼；Uber、wework用的rollbar差牛；可以部署到自己系統(tǒng)內(nèi)并且開(kāi)源免費(fèi)的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
上述系統(tǒng)除了sentry可以選擇自建服務(wù)外，其他的大規(guī)模商用偏化，都需要錢(qián)脐恩。
把項(xiàng)目部署到sentry官方的系統(tǒng)內(nèi)，超過(guò)一定規(guī)模后侦讨，也是收費(fèi)的驶冒，當(dāng)然好處也很多：炫酷的圖表苟翻、直觀的數(shù)據(jù)、不需要投入人力去研發(fā)骗污、管理數(shù)據(jù)崇猫，反正給足錢(qián)（500-5000月），一切你想要的功能身堡，都不是問(wèn)題邓尤。
但很多中小公司拍鲤，不一定有這方面的預(yù)算贴谎，我們公司目前就沒(méi)有這方面的預(yù)算，所以自建了sentry系統(tǒng)季稳。
這些線上bug追蹤的系統(tǒng)到底解決了什么疼點(diǎn)擅这？
個(gè)人的理解，bug追蹤系統(tǒng)應(yīng)該要能解決以下問(wèn)題
- [ ] 第一時(shí)間通知
- [ ] 出錯(cuò)的url
- [ ] 具體的錯(cuò)誤文本景鼠、類(lèi)型
- [ ] 客戶端的一些信息（瀏覽器版本仲翎、操作系統(tǒng)、用戶行為）
- [ ] 代碼版本（release版本號(hào)）
- [ ] 出錯(cuò)的代碼文件（source map）
- [ ] 還原用戶操作
如果上述問(wèn)題都能解決铛漓，那還有什么bug不能及時(shí)解決的尼溯香？
接下來(lái)會(huì)以sentry，作為主體浓恶，談?wù)勅绾斡胹entry搭建bug追蹤體系玫坛。
進(jìn)入主題階段
第一步：注冊(cè)賬號(hào)、創(chuàng)建項(xiàng)目
為了快速的開(kāi)始包晰，我們可以利用github賬號(hào)快速的注冊(cè)一個(gè)sentry的賬號(hào)湿镀，然后創(chuàng)建一個(gè)基于VUE（公司用的VUE）【測(cè)試的項(xiàng)目】，如下圖所示
sentry官網(wǎng) https://sentry.io
第二步：前端部署勉痴，手動(dòng)觸發(fā)一個(gè)異常
按照官方【安裝指引】里面給出的代碼，把下面代碼部署到vue項(xiàng)目中
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})],
});
// 觸發(fā)異常
Sentry.captureException(new Error('第一個(gè)錯(cuò)誤'))
所有關(guān)于javascript項(xiàng)目的前端安裝指引 https://docs.sentry.io/platforms/javascript/
打開(kāi)Chrome瀏覽器輸入http://localhost:8080/index树肃，監(jiān)控network蒸矛，就可以看到以下數(shù)據(jù)
打開(kāi)sentry的后臺(tái)，可以看到已經(jīng)有信息了（郵箱應(yīng)該也收到了一封郵件）
默認(rèn)情況下胸嘴，sentry記錄信息是【按照url】來(lái)記錄的雏掠，比如先刷新Chrome，然后再用Safari打開(kāi)一次筛谚，再看sentry后臺(tái)統(tǒng)計(jì)信息磁玉，只有事件+1了，錯(cuò)誤并沒(méi)有加
可以清晰的看到蚊伞，信息只記錄了三次席赂。
這個(gè)時(shí)候如果變更url，比如輸入http://localhost:8080/时迫，sentry就會(huì)創(chuàng)建一個(gè)新的記錄
上面這張圖片可以看到，雖然報(bào)錯(cuò)的信息是一樣的掠拳，但是因?yàn)閡rl變更了癞揉，所以sentry認(rèn)為是另外一個(gè)錯(cuò)誤。
下面的信息是sentry收集的各種信息
是不是很強(qiáng)大溺欧，到目前為止喊熟，我們只不過(guò)是簡(jiǎn)單部署了sentry，然后就解決了4個(gè)重要的問(wèn)題
- [x] 第一時(shí)間通知
- [x] 出錯(cuò)的url
- [x] 具體的錯(cuò)誤文本姐刁、類(lèi)型
- [x] 客戶端的一些信息（瀏覽器版本芥牌、操作系統(tǒng)、用戶行為）
- [ ] 代碼版本（release版本號(hào)）
- [ ] 出錯(cuò)的代碼文件（source map）
- [ ] 還原用戶操作
后面三個(gè)問(wèn)題聂使，只要簡(jiǎn)單的為sentry增加一些配置壁拉，也可以很快的解決，下一章柏靶，我們?cè)賮?lái)細(xì)聊弃理。
線上bug追蹤之Sentry release+sourceMap（二)
線上bug追蹤之Sentry 定制錯(cuò)誤信息（三）
