1.前言
目前我主要負責的是公司的營銷活動類項目，基本都是直接面向用戶端的，並且JS也沒有如后端一樣有完善的日志系統，因此線上的各種bug都非常難以迅速定位。在加入錯誤日志收集前，每次報告bug都要勞煩用戶協助開發人員進行bug定位，這一方面對用戶極不友好，同時也加大了Bug定位的難度；因此我們需要一個工具來幫我們收集錯誤信息，如接口報錯，dom報錯以及語法錯誤等等。下面我就介紹一下sentry這個工具如何在項目中使用。
2.sentry介紹
Sentry 是一個實時事件日志記錄和匯集的平台。其專注於錯誤監控以及提取一切事后處理所需信息而不依賴於麻煩的用戶反饋。它分為客戶端和服務端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應用程序中間，程序出現異常就向服務端發送消息，服務端將消息記錄到數據庫中並提供一個web頁方便查看。Sentry由python編寫，源碼開放，性能卓越，易於擴展，目前著名的用戶有Disqus, Path, mozilla, Pinterest等。
3.如何在項目中使用sentry
3.1 安裝
為了在vue項目中使用sentry,你需要同時使用Raven.js(Senrty的瀏覽器JsSDK)和Raven.js Vue插件。Raven.js將自動報告所有未被捕獲的異常，進一步了解Raven.js的用請參考Raven.js。Raven.js Vue插件將會自動捕捉拋出錯誤的活動組件狀態以及名稱。
使用npm安裝:
npm install raven-js --save
然后在main.js里同時引入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上新建自己的項目
在Sentry上新建一個賬號，再新建一個組織，一個組織可以邀請多人參與到其中來。然后創建一個新的項目，選中JavaScript項目。左下角填寫項目名然后創建項目。
創建完成之后，我們得到了一個Sentry DSN(在初始化的時候會用到),然后將得到的Sentry DSN替換到上面config里的內容。至此，sentry就完成了與項目的整合，之后就可以捕獲異常並發送到sentry，我們可以在sentry監控web頁( https://sentry.io/組織名/項目名/)看到具體的異常信息。
3.3 關於DSN
在Sentry完成一個項目的設置后，您將獲得一個我們稱之為DSN或數據源名稱的值.它看起來很像一個標准的URL，但它實際上只是Sentry SDK所需的配置的標識.它由幾個部分組成，包括協議，公共密鑰和密鑰，服務器地址和項目標識符。
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
它由5部分組成：
1. 使用的協議: http或https;
2. 驗證sdk的公鑰和密鑰;
3. 目標sentry服務器;
4. 驗證用戶綁定的項目id.
生成好DSN后，將其塞入到初始化的配置中：
import Raven from 'raven-js'
Raven.config('https://08dc77f2b5dd42e490be150ad70527dd:38dded13008c4afca16c650854b73ce0@sentry.io/272180')
3.4 如何使用
1.最簡單的方式是主動觸發：
try { doSomething(a[0]) } catch(e) { Raven.captureException(e) }
2.window.onerror捕捉異常
window.onerror = function (e) { Raven.captureException(e) }
3.在vue里可以使用Vue.config.errorHandler 鈎子來捕捉
Vue.config.errorHandler = (err, vm, info) => {
Raven.captureException(err)
}
4.對於接口報錯，可以在全局攔截里實現
request.interceptors.response.use(null, error => { axiosHelper.error(error) Raven.captureException(error) return Promise.reject(error) })
4.使用過程中可能遇到的問題
1.采集到的信息不全，沒有我們想要的用戶信息，如用戶guid和phone
解決方案：文檔里有提供方法setUserContext(),顧名思義該方法是設置全局上下文，因此我們可以在拿到用戶信息后執行一次該方法。
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.當異常信息過多時，在監控后台沒有有效的篩選條件，導致我要看指定的異常信息什么困難
解決方案：查詢文檔發現有新增標簽的方法，標簽可以幫助我們來篩選異常信息。
Raven.setTagsContext({ phone: token.Phone || '未登錄' })
3.由於線上的代碼都是壓縮過的，所以報錯時很難定位到具體的哪一行代碼出錯。
解決方案： 上傳sourcemap,sentry會自動匹配源碼(上傳sourcemap文檔)。
官方提供了幾種上傳sourcemap的方法，具體請查看文檔。
我選擇的是手動上傳的方式，通過官方提供的工具sentry-cli,首先生成一個版本號並在sentry初始化的時候配置版本號：
Raven.config('https://08dc77f2b5dd42e490be150ad70527dd@sentry.io/272180', {
autoBreadcrumbs: {
xhr: true,
console: true
},
release: 'first'
})
.addPlugin(RavenVue, Vue)
.install()
然后通過sentry-cli將*.map.js文件上傳至sentry服務器，之后就可以在監控平台看到具體的錯誤了。
5.搭建自己的sentry服務
由於官方提供的免費服務有一定次數的限制，達到一定限制后想要再使用就需要收費了，但是sentry是開源項目所以我們可以在本地搭建自己的服務，官方頁提供了具體的操作步驟。
Sentry的搭建主要有兩種
官方的推薦是使用Docker來進行部署.在實際生產中,docker更為簡潔易控.下面我們就來講講docker部署本地Sentry的步驟
1.安裝docker
本人使用的mac系統。直接從Docker官網下載。 官方下載地址
可以看到docker和docker-compose 已經在運行了。
2.搭建服務
首先從github上拉去sentry的docker配置文件
git clone https://github.com/getsentry/onpremise.git
接着通過命令生成密鑰
docker-compose run --rm web config generate-secret-key
紅線畫出的就是生成好的密鑰，然后將其復制到docker-compose.yml文件中：
注意將前面的注釋'#'號去掉。
然后更新配置，創建管理員用戶：
docker-compose run --rm web upgrade
過程中會讓我們填寫郵箱和密碼
然后再修改docker-compose.yml 文件，為其中的web容器添加volumes卷.讓配置文件生效。
最后，開啟所用容器：
docker-comose up -d
至此大功告成！此時訪問http://localhost:9000即可登錄本地監控平台。
后續操作如前文提到的一致。
6.總結
sentry是一款非常強大的工具，除了上面介紹的基本功能外，捕獲到錯誤信息后還會以郵件的方式告知，除此之外它還可以與github,jira等進行整合達到令人意向不到的效果。它也提供了強大api供開發者來完善更加詳細的錯誤采集，並以圖表的形式展現數據，幫助開發者更好的分析問題。
總之在項目中使用sentry之后，能快速的定位問題所在，知道問題所在之后解決起來也是什么方便的。
作者：max_wwwwww
鏈接：https://www.jianshu.com/p/66e00077fac3
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
喜歡這篇文章？歡迎打賞~~
