線上bug追蹤之Sentry初步嘗試（一）
線上bug追蹤之Sentry release+sourceMap（二）
前兩章說(shuō)了sentry的基本用法和設(shè)置陡蝇，這章繼續(xù)用來(lái)說(shuō)明sentry的一些高級(jí)應(yīng)用膨报。
獲取bug的上下文信息
分析一個(gè)bug僵缺，如果知道了在哪行出錯(cuò)了踊挠，基本上就解決了70%的問題弄唧，但是在有些場(chǎng)景下啡专，還不夠险毁，比如說(shuō)一個(gè)api請(qǐng)求返回了奇怪的數(shù)據(jù)，這個(gè)時(shí)候報(bào)錯(cuò)了们童，但是我們bug信息如果沒有錯(cuò)誤的上下問畔况，那么我們要復(fù)原這個(gè)bug就比較麻煩了，所以sentry還提供了關(guān)于bug信息上下文的接口
https://docs.sentry.io/enriching-error-data/context/?platform=browser
主要就是關(guān)于user（責(zé)任人）慧库、tag（標(biāo)簽）跷跪、level（錯(cuò)誤級(jí)別）、extra（附加數(shù)據(jù)）
舉個(gè)例子：如果需要監(jiān)控一個(gè)比較重要的api齐板，每次出錯(cuò)了吵瞻，我們都需要告訴他，出錯(cuò)時(shí)覆积，返回的錯(cuò)誤信息听皿，請(qǐng)求的是什么數(shù)據(jù)？應(yīng)該怎么寫尼宽档？請(qǐng)看下面的代碼
Sentry.setUser({"email": "xx@xx.cn"});
Sentry.setTag('api', 'api/list/get')
Sentry.setLevel('error');
Sentry.setExtra('data', {
req: {a:1},
res: {b:1},
header:headers
})
Sentry.captureException(new Error('throw new api'))
sentry后臺(tái)接收到的信息
以上代碼就是定制錯(cuò)誤信息了尉姨。如果你的項(xiàng)目比較簡(jiǎn)單，甚至都不需要寫Sentry.captureException吗冤，只需要簡(jiǎn)單的init sentry又厉，它就可以自動(dòng)捕捉錯(cuò)誤了。
請(qǐng)繼續(xù)往下看椎瘟。
sentry自動(dòng)上傳錯(cuò)誤
到了這一階段覆致，sentry的主要核心應(yīng)用都介紹完了，但是有很多不好的地方肺蔚，比如說(shuō)
- [ ] 錯(cuò)誤需要手動(dòng)的調(diào)用captureException,是否可以自動(dòng)記錄
- [ ] 關(guān)于如何和vue結(jié)合煌妈，這里并沒有體現(xiàn)
直接上代碼
<template
<div class="sentry">
<button @click="handlerError">直接new一個(gè)錯(cuò)誤</button>
<button @click="handlerError2">程序內(nèi)不知名bug</button>
</div>
</template>
<script>
export default {
name: 'sentry',
methods: {
handlerError() {
throw new Error('throw new Error')
},
handlerError2() {
this.data.list = 1
}
}
}
</script>
代碼很簡(jiǎn)單，兩個(gè)按鈕
- 第一個(gè)按鈕直接 throw 一個(gè)錯(cuò)誤
- 第二個(gè)按鈕因?yàn)闆]有定義data宣羊，所以賦值肯定也會(huì)出錯(cuò)
當(dāng)我們點(diǎn)擊按鈕時(shí)璧诵，都會(huì)觸發(fā)錯(cuò)誤，這個(gè)時(shí)候仇冯，沒有顯式的調(diào)用sentry之宿，那么錯(cuò)誤是否會(huì)記錄尼？我們打開sentry的后臺(tái)記錄看看
很明顯是會(huì)的苛坚，為什么尼比被？
因?yàn)樵贎sentry/integrations（用于增強(qiáng)sentry的api）內(nèi)色难，它在初始化的時(shí)候，重新初始化了errorHandler等缀，所以我們不用寫captureException枷莉，也能記錄錯(cuò)誤信息
代碼：https://github.com/getsentry/sentry-javascript/blob/master/packages/integrations/src/vue.ts
雖然@sentry/integrations提供了這方面的支持，但是個(gè)人不建議使用项滑，因?yàn)樗@種方式強(qiáng)制綁定了errorHandler依沮，如果我們需要對(duì)錯(cuò)誤進(jìn)行進(jìn)一步定制，它就沒有辦法滿足了枪狂。
在實(shí)際商業(yè)環(huán)境中危喉，我們可能有多套系統(tǒng)，但是這些系統(tǒng)都是在一個(gè)體系下的州疾，如果不想每個(gè)系統(tǒng)都創(chuàng)建一個(gè)sentry項(xiàng)目辜限，有沒有辦法公用一個(gè)sentry項(xiàng)目，然后還能區(qū)分不同的系統(tǒng)嗎严蓖？
這個(gè)sentry雖然沒有直接提供解決方案薄嫡，但是它的設(shè)置environment的方式，我覺得可以間接解決這個(gè)問題颗胡，就是在代碼設(shè)置environment的時(shí)候毫深，不同的系統(tǒng)，給它一個(gè)標(biāo)識(shí)符毒姨，這樣哑蔫，release版本號(hào)的時(shí)候，也加上這個(gè)表示弧呐，就可以識(shí)別了闸迷。
// 初始化sentry，process.env.NODE_ENV有兩個(gè)值development俘枫、production
Sentry.init({
dsn: 'https://xxxxx@sentry.io/1511376',
environment: process.env.NODE_ENV,
integrations: [new Integrations.Vue({ Vue, attachProps: true })],
release: releaseConfig[releaseEnv].release || ''
})
這樣在sentry的后臺(tái)就可以看到不同系統(tǒng)之間的bug腥沽，我個(gè)人還是不推薦這樣的方式，但是目前團(tuán)隊(duì)內(nèi)有個(gè)很大的系統(tǒng)鸠蚪，這個(gè)系統(tǒng)內(nèi)都是各種各樣的小系統(tǒng)組成的今阳，如果每個(gè)系統(tǒng)都配置一個(gè)sentry項(xiàng)目，確實(shí)比較麻煩茅信。
好了酣栈，結(jié)束了。
sentry其實(shí)之前一直在用汹押，但是是8.x版本，在新的公司沒有bug追蹤系統(tǒng)起便，所以也需要安裝一套棚贾，但是發(fā)現(xiàn)sentry已經(jīng)更新到9.x版本了窖维，這個(gè)版本，不管從系統(tǒng)安裝還是到項(xiàng)目部署都和8x有很大不同妙痹，踩了一些坑铸史，寫一個(gè)教程，避免大家再踩坑怯伊。
目前這個(gè)系統(tǒng)唯一不好的是琳轿，不提供截圖，這個(gè)需要自己開發(fā)插件耿芹，還有就是官方提供上傳的sourcemap的webpack插件比較坑吧崭篡，還是社區(qū)提供的比較好。
關(guān)于如何安裝sentry
關(guān)于sentry的安裝最好讓運(yùn)維幫忙安裝吧秕，因?yàn)橐蕾嚨沫h(huán)境比較多(nginx琉闪、Redis、PostgreSQL砸彬、stmp服務(wù))颠毙，
- 官網(wǎng)的安裝方式(Python+Docker)，提供了兩種方式砂碉，一種Docker安裝蛀蜜，一種Python環(huán)境安裝。
- 社區(qū)從零開始安裝增蹭，從Docker滴某，到相關(guān)依賴，最終到安裝sentry沪铭，非常清晰明了壮池，適合小白選手
https://learnku.com/articles/4285/build-your-own-sentry-service
以上兩種方式，選用了官網(wǎng)推薦用Docker-compose進(jìn)行安裝杀怠， 具體方式就是fork一個(gè)官網(wǎng)推薦的Docker腳本椰憋，然后進(jìn)行配置定制，之后通過git的方式進(jìn)行版本更新赔退，如果有問題了修改下git橙依，然后遠(yuǎn)程拉下就好了，更方便硕旗，目前采用的就是這種方式
遇到的坑
a. 發(fā)送email的時(shí)候窗骑，一直沒有設(shè)置正確導(dǎo)致郵件收不到，主要原因有兩個(gè)
- 騰訊郵件的官方提供的SMTP的端口是465漆枚，但是實(shí)際上企業(yè)郵箱的端口是587创译，這個(gè)巨坑
- 現(xiàn)在最新版本是9.x版本，和之前8.x的配置有一定的區(qū)別墙基，然后我選的是Docker-compose的安裝方式软族，需要在.env單獨(dú)設(shè)置環(huán)境變量
參考解決頁(yè)面 https://learnku.com/articles/9405/the-deployment-of-sentry-into-the-production-environment
b. 8x版本客戶端的api(raven)都不適用刷喜，已經(jīng)廢棄了，任何和提到raven這方面文檔的都是過去式了立砸，不要看掖疮。
整體上這個(gè)bug追蹤系統(tǒng)還是很優(yōu)秀的，不僅支持js客戶端颗祝，還支持各類后端語(yǔ)言浊闪，關(guān)鍵免費(fèi)。
