1.前言
目前我主要負(fù)責(zé)的是公司的營(yíng)銷活動(dòng)類項(xiàng)目耕姊，基本都是直接面向用戶端的桶唐，并且JS也沒(méi)有如后端一樣有完善的日志系統(tǒng)，因此線上的各種bug都非常難以迅速定位茉兰。在加入錯(cuò)誤日志收集前尤泽，每次報(bào)告bug都要?jiǎng)跓┯脩魠f(xié)助開發(fā)人員進(jìn)行bug定位，這一方面對(duì)用戶極不友好规脸，同時(shí)也加大了Bug定位的難度坯约；因此我們需要一個(gè)工具來(lái)幫我們收集錯(cuò)誤信息，如接口報(bào)錯(cuò)莫鸭，dom報(bào)錯(cuò)以及語(yǔ)法錯(cuò)誤等等闹丐。下面我就介紹一下sentry這個(gè)工具如何在項(xiàng)目中使用。
2.sentry介紹
Sentry 是一個(gè)實(shí)時(shí)事件日志記錄和匯集的平臺(tái)被因。其專注于錯(cuò)誤監(jiān)控以及提取一切事后處理所需信息而不依賴于麻煩的用戶反饋卿拴。它分為客戶端和服務(wù)端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語(yǔ)言)就嵌入在你的應(yīng)用程序中間梨与，程序出現(xiàn)異常就向服務(wù)端發(fā)送消息堕花，服務(wù)端將消息記錄到數(shù)據(jù)庫(kù)中并提供一個(gè)web頁(yè)方便查看。Sentry由python編寫粥鞋，源碼開放缘挽，性能卓越，易于擴(kuò)展，目前著名的用戶有Disqus, Path, mozilla, Pinterest等壕曼。
3.如何在項(xiàng)目中使用sentry
3.1 安裝
為了在vue項(xiàng)目中使用sentry,你需要同時(shí)使用Raven.js(Senrty的瀏覽器JsSDK)和Raven.js Vue插件苏研。Raven.js將自動(dòng)報(bào)告所有未被捕獲的異常，進(jìn)一步了解Raven.js的用請(qǐng)參考Raven.js窝稿。Raven.js Vue插件將會(huì)自動(dòng)捕捉拋出錯(cuò)誤的活動(dòng)組件狀態(tài)以及名稱楣富。
使用npm安裝:
npm install raven-js --save
然后在main.js里同時(shí)引入raven.js和Raven.js Vue plugin
import Vue from 'vue';
import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Raven
.config('https://08dc77f2b5dd42e490be150ad705ddd@sentry.io/123456')
.addPlugin(RavenVue, Vue)
.install()
3.2 在sentry上新建自己的項(xiàng)目
在Sentry上新建一個(gè)賬號(hào)，再新建一個(gè)組織伴榔，一個(gè)組織可以邀請(qǐng)多人參與到其中來(lái)纹蝴。然后創(chuàng)建一個(gè)新的項(xiàng)目，選中JavaScript項(xiàng)目踪少。左下角填寫項(xiàng)目名然后創(chuàng)建項(xiàng)目塘安。
創(chuàng)建完成之后，我們得到了一個(gè)Sentry DSN(在初始化的時(shí)候會(huì)用到),然后將得到的Sentry DSN替換到上面config里的內(nèi)容援奢。至此兼犯，sentry就完成了與項(xiàng)目的整合，之后就可以捕獲異常并發(fā)送到sentry集漾，我們可以在sentry監(jiān)控web頁(yè)(https://sentry.io/組織名/項(xiàng)目名/)看到具體的異常信息切黔。
3.3 關(guān)于DSN
在Sentry完成一個(gè)項(xiàng)目的設(shè)置后，您將獲得一個(gè)我們稱之為DSN或數(shù)據(jù)源名稱的值.它看起來(lái)很像一個(gè)標(biāo)準(zhǔn)的URL具篇，但它實(shí)際上只是Sentry SDK所需的配置的標(biāo)識(shí).它由幾個(gè)部分組成纬霞，包括協(xié)議，公共密鑰和密鑰驱显，服務(wù)器地址和項(xiàng)目標(biāo)識(shí)符诗芜。
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
它由5部分組成：
1. 使用的協(xié)議: http或https;
2. 驗(yàn)證sdk的公鑰和密鑰;
3. 目標(biāo)sentry服務(wù)器;
4. 驗(yàn)證用戶綁定的項(xiàng)目id.
生成好DSN后，將其塞入到初始化的配置中：
import Raven from 'raven-js'
Raven.config('https://08dc77f2b5dd42e490be150ad70527dd:38dded13008c4afca16c650854b73ce0@sentry.io/272180')
3.4 如何使用
1.最簡(jiǎn)單的方式是主動(dòng)觸發(fā)：
try {
doSomething(a[0])
} catch(e) {
Raven.captureException(e)
}
- window.onerror捕捉異常
window.onerror = function (e) {
Raven.captureException(e)
}
- 在vue里可以使用Vue.config.errorHandler 鉤子來(lái)捕捉
Vue.config.errorHandler = (err, vm, info) => {
Raven.captureException(err)
}
4.對(duì)于接口報(bào)錯(cuò)埃疫，可以在全局?jǐn)r截里實(shí)現(xiàn)
request.interceptors.response.use(null, error => {
axiosHelper.error(error)
Raven.captureException(error)
return Promise.reject(error)
})
4.使用過(guò)程中可能遇到的問(wèn)題
- 采集到的信息不全伏恐，沒(méi)有我們想要的用戶信息，如用戶guid和phone
解決方案：文檔里有提供方法setUserContext(),顧名思義該方法是設(shè)置全局上下文栓霜，因此我們可以在拿到用戶信息后執(zhí)行一次該方法翠桦。
request.interceptors.response.use(null, error => {
axiosHelper.error(error)
Raven.setUserContext({
phone: token.Phone || '',
guid: token.CustomerGuid || ''
})
Raven.captureException(error)
return Promise.reject(error)
})
2.當(dāng)異常信息過(guò)多時(shí)，在監(jiān)控后臺(tái)沒(méi)有有效的篩選條件叙淌，導(dǎo)致我要看指定的異常信息什么困難
解決方案：查詢文檔發(fā)現(xiàn)有新增標(biāo)簽的方法秤掌，標(biāo)簽可以幫助我們來(lái)篩選異常信息。
Raven.setTagsContext({
phone: token.Phone || '未登錄'
})
3.由于線上的代碼都是壓縮過(guò)的鹰霍，所以報(bào)錯(cuò)時(shí)很難定位到具體的哪一行代碼出錯(cuò)闻鉴。
解決方案： 上傳sourcemap,sentry會(huì)自動(dòng)匹配源碼(上傳sourcemap文檔)。
官方提供了幾種上傳sourcemap的方法茂洒，具體請(qǐng)查看文檔孟岛。
我選擇的是手動(dòng)上傳的方式，通過(guò)官方提供的工具sentry-cli,首先生成一個(gè)版本號(hào)并在sentry初始化的時(shí)候配置版本號(hào)：
Raven.config('https://08dc77f2b5dd42e490be150ad70527dd@sentry.io/272180', {
autoBreadcrumbs: {
xhr: true,
console: true
},
release: 'first'
})
.addPlugin(RavenVue, Vue)
.install()
然后通過(guò)sentry-cli將*.map.js文件上傳至sentry服務(wù)器，之后就可以在監(jiān)控平臺(tái)看到具體的錯(cuò)誤了渠羞。
5.搭建自己的sentry服務(wù)
由于官方提供的免費(fèi)服務(wù)有一定次數(shù)的限制斤贰，達(dá)到一定限制后想要再使用就需要收費(fèi)了，但是sentry是開源項(xiàng)目所以我們可以在本地搭建自己的服務(wù)次询，官方頁(yè)提供了具體的操作步驟荧恍。
Sentry的搭建主要有兩種
官方的推薦是使用Docker來(lái)進(jìn)行部署.在實(shí)際生產(chǎn)中,docker更為簡(jiǎn)潔易控.下面我們就來(lái)講講docker部署本地Sentry的步驟
1.安裝docker
本人使用的mac系統(tǒng)。直接從Docker官網(wǎng)下載屯吊。 官方下載地址
可以看到docker和docker-compose 已經(jīng)在運(yùn)行了送巡。
2.搭建服務(wù)
首先從github上拉去sentry的docker配置文件
git clone https://github.com/getsentry/onpremise.git
接著通過(guò)命令生成密鑰
docker-compose run --rm web config generate-secret-key
紅線畫出的就是生成好的密鑰，然后將其復(fù)制到docker-compose.yml文件中：
注意將前面的注釋'#'號(hào)去掉盒卸。
然后更新配置骗爆，創(chuàng)建管理員用戶：
docker-compose run --rm web upgrade
過(guò)程中會(huì)讓我們填寫郵箱和密碼
然后再修改docker-compose.yml 文件，為其中的web容器添加volumes卷.讓配置文件生效蔽介。
最后摘投，開啟所用容器：
docker-comose up -d
至此大功告成！此時(shí)訪問(wèn)http://localhost:9000即可登錄本地監(jiān)控平臺(tái)虹蓄。
后續(xù)操作如前文提到的一致犀呼。
6.總結(jié)
sentry是一款非常強(qiáng)大的工具，除了上面介紹的基本功能外薇组，捕獲到錯(cuò)誤信息后還會(huì)以郵件的方式告知圆凰，除此之外它還可以與github,jira等進(jìn)行整合達(dá)到令人意向不到的效果。它也提供了強(qiáng)大api供開發(fā)者來(lái)完善更加詳細(xì)的錯(cuò)誤采集体箕，并以圖表的形式展現(xiàn)數(shù)據(jù)，幫助開發(fā)者更好的分析問(wèn)題挑童。
總之在項(xiàng)目中使用sentry之后累铅，能快速的定位問(wèn)題所在，知道問(wèn)題所在之后解決起來(lái)也是什么方便的站叼。
