Sentry異常監控方案部署-前端攻略

原文首發於個人我的博客： 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，暫時只用關注這倆就行。

---

部署

1. 註冊帳號
2. 建立項目
3. 前端項目部署
4. 自動捕捉異常
5. 主動捕捉異常

若是是公司本身搭建的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中的錯誤、異常，可是還不能捕捉到異步操做、接口請求中的錯誤，好比接口返回40四、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代碼片斷

以上是本身發掘的一些功能，建議你們多看文檔，有新發現或問題能夠一塊兒交流，後面應該會寫一篇拓展版攻略。