原文首發(fā)于我的個人博客：?https://lonhon.top/

凡事只要有可能出錯,那就一定會出錯

對于任何一個項(xiàng)目而言，本地測試肯定做不到100%覆蓋，而且，我們也不能保證用戶能按照我們的預(yù)期進(jìn)行操作，其實(shí)對我而言，用戶才是最好的測試者，但是我們不能奢求每個用戶遇到問題時(shí)候都會主動向我們反饋。

故而，我們需要在項(xiàng)目出現(xiàn)異常時(shí)主動對其進(jìn)行收集上報(bào)，分析原因和影響后制定下一步解決方案。

任何人不能保證他寫的項(xiàng)目0bug（除非沒人用），但是如何更好、更快的解決項(xiàng)目的異常則是我們有能力追求的。所以，我們需要一款成熟的異常監(jiān)控系統(tǒng)來協(xié)助我們。

選擇Sentry的原因

Sentry是一款國外的異常監(jiān)控開源服務(wù)，名字翻譯過來就是“哨兵”。

有沒有感覺像《冰與火》里的守夜人，其實(shí)也差不多，把bug想成異鬼就行了。

最近在公司項(xiàng)目中部署了Sentry，用于項(xiàng)目中異常監(jiān)控，涵蓋了前端Vue、后端Django。
在部署之前也了解了下國內(nèi)的fundebug，但綜合考慮以下幾點(diǎn)最終決定用Sentry，

• 閉源，只能在該平臺上使用
• 只能監(jiān)控前端頁面
• 這個月開始收費(fèi)了

另外vue文檔中也提到了Sentry對vue的友好支持，本文主要從前端方向講一下Sentry的部署流程以及遇到的坑。

---

準(zhǔn)備工作

Sentry簡介

Sentry在git上面的簡介是：“跨平臺應(yīng)用監(jiān)控，關(guān)注錯誤報(bào)告”。

官網(wǎng)： https://sentry.io 文檔： https://docs.sentry.io/clients/javascript/install/ git倉庫： https://github.com/getsentry/sentry社區(qū)除了git issue外還可以關(guān)注 https://forum.sentry.io/

如果想先體驗(yàn)的話建議注冊賬號，在其SaaS平臺上練手。不自己搭建Sentry服務(wù)器的話也可以升級為付費(fèi)服務(wù)。

項(xiàng)目背景

前端Vue@2.5.9 + axios，暫時(shí)只用關(guān)注這倆就行。

---

部署

注冊賬號

創(chuàng)建項(xiàng)目

前端項(xiàng)目部署

自動捕捉異常

主動捕捉異常

如果是公司自己搭建的Sentry服務(wù)器，對前端方面來說改動的地方很少。

1.注冊賬號

步驟略...

PS:?創(chuàng)建完成后進(jìn)入dashbord點(diǎn)擊左下角頭像選擇account，然后在Appearance中調(diào)整至本地時(shí)區(qū)，不然后面看到監(jiān)控的bug創(chuàng)建時(shí)間會有差別。

2.創(chuàng)建項(xiàng)目

注冊好后我們可以通過右上角?New Project?來創(chuàng)建，然后選擇相應(yīng)的項(xiàng)目，這里還是以vue為例子，如下圖:

接下來會進(jìn)入到介紹頁面了，到這里第一步就算完成，請?jiān)敿?xì)閱讀該頁面。

3.前端項(xiàng)目部署

切回本地項(xiàng)目,通過以下命令安裝raven-js

npm i raven-js --save

然后打開main.js，如下圖進(jìn)行部署：

這里和介紹頁面有點(diǎn)差別的地方在于我將raven掛載到了window對象上，這是為了方便后續(xù)捕捉異步操作和接口中的異常。

記得把DSN（圖片打碼處）換成自己的，在介紹頁面中可以找到，如果已經(jīng)離開該頁面，可以在 project-settings 中找到它。

坑： 部署獨(dú)立服務(wù)器時(shí)在配置根目錄時(shí)習(xí)慣性加了個"/"導(dǎo)致DSN最后變成了"//2"從而引發(fā)了http error:403

4.自動捕捉異常 + 查看

ok，部署操作已經(jīng)完成，接下來我們主動上報(bào)一個bug試試水。

在App.vue的mounted中寫一個bug：

console.log(window.aaa.bbb());

然后刷新頁面觸發(fā)bug，這時(shí)可以通過chrome調(diào)試工具查看上報(bào)異常的網(wǎng)絡(luò)請求。

回到Sentry中，不出意外此時(shí)就可以看到相應(yīng)的錯誤信息提示。

點(diǎn)進(jìn)去后就能看到更多的錯誤信息還有用戶信息，包括瀏覽器、版本、ip等

5.主動捕捉異常

通過上面的操作我們已經(jīng)能成功監(jiān)控到vue中的錯誤、異常，但是還不能捕捉到異步操作、接口請求中的錯誤，比如接口返回404、500等信息，此時(shí)我們可以通過raven.caputureException()進(jìn)行主動上報(bào)。

接口異常

由于項(xiàng)目中用的axios進(jìn)行接口請求，axios提供了請求響應(yīng)的攔截器 axios.interceptors.response，示例：

axios.interceptors.response.use(data => {return data;}, error => {window.$Raven.captureException(error);})

異步操作異常

在異步操作中的異常也不能被自動捕捉，我們需要手動處理：

setTimeout(()=>{try {// do some} catch (err) {window.$Raven.captureException(err);}}, 1000)

另外，請?jiān)谥鲃訏伋龅漠惓r(shí)使用new error進(jìn)行創(chuàng)建，這樣能更好的定位異常所在位置。

// good throw new error()// bad throw "error"

至此，本篇文章要講的內(nèi)容已經(jīng)完成。

結(jié)語

Sentry其實(shí)還有很多可以挖掘的好東西，包括：

• 集成gitlab 一鍵創(chuàng)建issue
• 配置郵件通知
• 配置規(guī)則，添加郵件發(fā)送條件
• 配置版本號，為開發(fā)和線上配置不同的郵件發(fā)送規(guī)則
• sourcemap，直接查看報(bào)錯js代碼片段

總結(jié)

以上是生活随笔為你收集整理的Sentry异常监控方案部署-前端攻略的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。