資訊專欄INFORMATION COLUMN
摘要：故而，我們需要在項目出現異常時主動對其進行收集上報，分析原因和影響后制定下一步解決方案。所以，我們需要一款成熟的異常監控系統來協助我們。最近在公司項目中部署了，用于項目中異常監控，涵蓋了前端后端。
原文首發于我的個人博客： 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最后變成了"http://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代碼片段
以上是自己發掘的一些功能，建議大家多看文檔，有新發現或問題可以一起交流，后面應該會寫一篇拓展版攻略。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94427.html
摘要：本地應用回到前端項目中，在添加對應的，指定版本后，每次上報的異常就會分類到該版本下。管理目前來說，前端項目基本都會壓縮混淆代碼，這樣導致捕捉到的異常堆棧無法理解。下篇打算寫一下前端異常監控的分類，也就是需要監控哪些異常，敬請期待 原文首發于我的個人博客： https://lonhon.top/ 之前的《基礎篇》主要介紹了Sentry和基本部署流程，在實際使用過程中你會發現Sentr...
摘要：官網地址推薦指數顆星推薦理由自動化部署和集成部署的好工具，操作簡單，顯示友好，具備多種插件，應有盡有，支持多類型語言的項目集成和部署。官網地址如果你有其他好用的工具，不妨也分享一下原博客鏈接前端開發團隊的工具鏈 匯集前端開發團隊中經常使用的好工具，分享給大家！ 注：都是開源工具 showImg(https://segmentfault.com/img/remote/1460000019...
摘要：注冊登錄登錄創建選擇安裝擴展使用方法來自配置獲取測試少寫個分號查看效果發送到對象當方法調用時執行資源你也可以本地搭建之部署到生產環境搭建自己的服務基于安裝自 注冊登錄 GitHub登錄showImg(https://segmentfault.com/img/bVbgcrL?w=1109&h=554); 創建project 選擇 laravelshowImg(https://segme...
摘要：我所在的美團酒店事業部去年月份成立，新的業務新的開發團隊，這一切使得我們的前后端分離推進的很徹底。日志監控平臺日志監控平臺是美團內部的一個日志收集系統，目前美團統一使用收集日志，具有接收格式日志的能力，而日志監控平臺也是以格式日志來收集。 轉自：美團技術團隊 作者：美團技術團隊 分享理由：很好的分享，可見，基于Node的前后端分離的架構是越顯流行和重要，前端攻城獅們，No...
閱讀 3881·2021-11-24 11:14
閱讀 3321·2021-11-22 13:53
閱讀 3883·2021-11-11 16:54
閱讀 1546·2021-10-13 09:49
閱讀 1211·2021-10-08 10:05
閱讀 3392·2021-09-22 15:57
閱讀 1754·2021-08-16 11:01
閱讀 965·2019-08-30 15:55
