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

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

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

故而，我們需要在項目出現異常時主動對其進行收集上報，分析原因和影響后制定下一步解決方案。

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

選擇Sentry的原因

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

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

最近在公司項目中部署了Sentry，用于項目中異常監控，涵蓋了前端Vue、后端Django。
在部署之前也了解了下國內的fundebug，但綜合考慮以下幾點最終決定用Sentry，

• 閉源，只能在該平臺上使用
• 只能監控前端頁面
• 這個月開始收費了

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

---

準備工作

Sentry簡介

Sentry在git上面的簡介是：“跨平臺應用監控，關注錯誤報告”。

官網： https://sentry.io 文檔： https://docs.sentry.io/clients/javascript/install/ git倉庫： https://github.com/getsentry/sentry社區除了git issue外還可以關注 https://forum.sentry.io/

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

項目背景

前端Vue@2.5.9 + axios，暫時只用關注這倆就行。

---

部署

注冊賬號

創建項目

前端項目部署

自動捕捉異常

主動捕捉異常

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

1.注冊賬號

步驟略...

PS:?創建完成后進入dashbord點擊左下角頭像選擇account，然后在Appearance中調整至本地時區，不然后面看到監控的bug創建時間會有差別。

2.創建項目

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

接下來會進入到介紹頁面了，到這里第一步就算完成，請詳細閱讀該頁面。

3.前端項目部署

切回本地項目,通過以下命令安裝raven-js

npm i raven-js --save

然后打開main.js，如下圖進行部署：

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

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

坑： 部署獨立服務器時在配置根目錄時習慣性加了個"/"導致DSN最后變成了"//2"從而引發了http error:403

4.自動捕捉異常 + 查看

ok，部署操作已經完成，接下來我們主動上報一個bug試試水。

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

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

然后刷新頁面觸發bug，這時可以通過chrome調試工具查看上報異常的網絡請求。

回到Sentry中，不出意外此時就可以看到相應的錯誤信息提示。

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

5.主動捕捉異常

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

接口異常

由于項目中用的axios進行接口請求，axios提供了請求響應的攔截器 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)

另外，請在主動拋出的異常時使用new error進行創建，這樣能更好的定位異常所在位置。

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

至此，本篇文章要講的內容已經完成。

結語

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。