資訊專欄INFORMATION COLUMN
摘要：故而，我們需要在項目出現(xiàn)異常時主動對其進行收集上報，分析原因和影響后制定下一步解決方案。所以，我們需要一款成熟的異常監(jiān)控系統(tǒng)來協(xié)助我們。最近在公司項目中部署了，用于項目中異常監(jiān)控，涵蓋了前端后端。
原文首發(fā)于我的個人博客： https://lonhon.top/
凡事只要有可能出錯,那就一定會出錯
對于任何一個項目而言，本地測試肯定做不到100%覆蓋，而且，我們也不能保證用戶能按照我們的預(yù)期進行操作，其實對我而言，用戶才是最好的測試者，但是我們不能奢求每個用戶遇到問題時候都會主動向我們反饋。
故而，我們需要在項目出現(xiàn)異常時主動對其進行收集上報，分析原因和影響后制定下一步解決方案。
任何人不能保證他寫的項目0bug（除非沒人用），但是如何更好、更快的解決項目的異常則是我們有能力追求的。所以，我們需要一款成熟的異常監(jiān)控系統(tǒng)來協(xié)助我們。
選擇Sentry的原因Sentry是一款國外的異常監(jiān)控開源服務(wù)，名字翻譯過來就是“哨兵”。
有沒有感覺像《冰與火》里的守夜人，其實也差不多，把bug想成異鬼就行了。
最近在公司項目中部署了Sentry，用于項目中異常監(jiān)控，涵蓋了前端Vue、后端Django。
在部署之前也了解了下國內(nèi)的fundebug，但綜合考慮以下幾點最終決定用Sentry，
閉源，只能在該平臺上使用
只能監(jiān)控前端頁面
這個月開始收費了
另外vue文檔中也提到了Sentry對vue的友好支持，本文主要從前端方向講一下Sentry的部署流程以及遇到的坑。
準備工作 Sentry簡介Sentry在git上面的簡介是：“跨平臺應(yīng)用監(jiān)控，關(guān)注錯誤報告”。
官網(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/
如果想先體驗的話建議注冊賬號，在其SaaS平臺上練手。不自己搭建Sentry服務(wù)器的話也可以升級為付費服務(wù)。
項目背景前端Vue@2.5.9 + axios，暫時只用關(guān)注這倆就行。
部署注冊賬號
創(chuàng)建項目
前端項目部署
自動捕捉異常
主動捕捉異常
如果是公司自己搭建的Sentry服務(wù)器，對前端方面來說改動的地方很少。
1.注冊賬號步驟略...
PS: 創(chuàng)建完成后進入dashbord點擊左下角頭像選擇account，然后在Appearance中調(diào)整至本地時區(qū)，不然后面看到監(jiān)控的bug創(chuàng)建時間會有差別。
2.創(chuàng)建項目注冊好后我們可以通過右上角 New Project 來創(chuàng)建，然后選擇相應(yīng)的項目，這里還是以vue為例子，如下圖:
接下來會進入到介紹頁面了，到這里第一步就算完成，請詳細閱讀該頁面。
3.前端項目部署切回本地項目,通過以下命令安裝raven-js
npm i raven-js --save
然后打開main.js，如下圖進行部署：
這里和介紹頁面有點差別的地方在于我將raven掛載到了window對象上，這是為了方便后續(xù)捕捉異步操作和接口中的異常。
記得把DSN（圖片打碼處）換成自己的，在介紹頁面中可以找到，如果已經(jīng)離開該頁面，可以在 project-settings 中找到它。
坑： 部署獨立服務(wù)器時在配置根目錄時習(xí)慣性加了個"/"導(dǎo)致DSN最后變成了"http://2"從而引發(fā)了http error:403
4.自動捕捉異常 + 查看ok，部署操作已經(jīng)完成，接下來我們主動上報一個bug試試水。
在App.vue的mounted中寫一個bug：
console.log(window.aaa.bbb());
然后刷新頁面觸發(fā)bug，這時可以通過chrome調(diào)試工具查看上報異常的網(wǎng)絡(luò)請求。
回到Sentry中，不出意外此時就可以看到相應(yīng)的錯誤信息提示。
點進去后就能看到更多的錯誤信息還有用戶信息，包括瀏覽器、版本、ip等
5.主動捕捉異常通過上面的操作我們已經(jīng)能成功監(jiān)控到vue中的錯誤、異常，但是還不能捕捉到異步操作、接口請求中的錯誤，比如接口返回404、500等信息，此時我們可以通過raven.caputureException()進行主動上報。
接口異常
由于項目中用的axios進行接口請求，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)
另外，請在主動拋出的異常時使用new error進行創(chuàng)建，這樣能更好的定位異常所在位置。
// good throw new error() // bad throw "error"
至此，本篇文章要講的內(nèi)容已經(jīng)完成。
結(jié)語Sentry其實還有很多可以挖掘的好東西，包括：
集成gitlab 一鍵創(chuàng)建issue
配置郵件通知
配置規(guī)則，添加郵件發(fā)送條件
配置版本號，為開發(fā)和線上配置不同的郵件發(fā)送規(guī)則
sourcemap，直接查看報錯js代碼片段
以上是自己發(fā)掘的一些功能，建議大家多看文檔，有新發(fā)現(xiàn)或問題可以一起交流，后面應(yīng)該會寫一篇拓展版攻略。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/94427.html
摘要：本地應(yīng)用回到前端項目中，在添加對應(yīng)的，指定版本后，每次上報的異常就會分類到該版本下。管理目前來說，前端項目基本都會壓縮混淆代碼，這樣導(dǎo)致捕捉到的異常堆棧無法理解。下篇打算寫一下前端異常監(jiān)控的分類，也就是需要監(jiān)控哪些異常，敬請期待 原文首發(fā)于我的個人博客： https://lonhon.top/ 之前的《基礎(chǔ)篇》主要介紹了Sentry和基本部署流程，在實際使用過程中你會發(fā)現(xiàn)Sentr...
摘要：官網(wǎng)地址推薦指數(shù)顆星推薦理由自動化部署和集成部署的好工具，操作簡單，顯示友好，具備多種插件，應(yīng)有盡有，支持多類型語言的項目集成和部署。官網(wǎng)地址如果你有其他好用的工具，不妨也分享一下原博客鏈接前端開發(fā)團隊的工具鏈 匯集前端開發(fā)團隊中經(jīng)常使用的好工具，分享給大家！ 注：都是開源工具 showImg(https://segmentfault.com/img/remote/1460000019...
摘要：注冊登錄登錄創(chuàng)建選擇安裝擴展使用方法來自配置獲取測試少寫個分號查看效果發(fā)送到對象當方法調(diào)用時執(zhí)行資源你也可以本地搭建之部署到生產(chǎn)環(huán)境搭建自己的服務(wù)基于安裝自 注冊登錄 GitHub登錄showImg(https://segmentfault.com/img/bVbgcrL?w=1109&h=554); 創(chuàng)建project 選擇 laravelshowImg(https://segme...
摘要：我所在的美團酒店事業(yè)部去年月份成立，新的業(yè)務(wù)新的開發(fā)團隊，這一切使得我們的前后端分離推進的很徹底。日志監(jiān)控平臺日志監(jiān)控平臺是美團內(nèi)部的一個日志收集系統(tǒng)，目前美團統(tǒng)一使用收集日志，具有接收格式日志的能力，而日志監(jiān)控平臺也是以格式日志來收集。 轉(zhuǎn)自：美團技術(shù)團隊 作者：美團技術(shù)團隊 分享理由：很好的分享，可見，基于Node的前后端分離的架構(gòu)是越顯流行和重要，前端攻城獅們，No...
閱讀 3961·2021-11-24 11:14
閱讀 3426·2021-11-22 13:53
閱讀 4014·2021-11-11 16:54
閱讀 1837·2021-10-13 09:49
閱讀 1309·2021-10-08 10:05
閱讀 3476·2021-09-22 15:57
閱讀 1841·2021-08-16 11:01
閱讀 1040·2019-08-30 15:55
