成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Sentry異常監(jiān)控方案部署-前端攻略

Lorry_Lu / 1089人閱讀

摘要：故而，我們需要在項(xiàng)目出現(xiàn)異常時(shí)主動(dòng)對(duì)其進(jìn)行收集上報(bào)，分析原因和影響后制定下一步解決方案。所以，我們需要一款成熟的異常監(jiān)控系統(tǒng)來協(xié)助我們。最近在公司項(xiàng)目中部署了，用于項(xiàng)目中異常監(jiān)控，涵蓋了前端后端。

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

凡事只要有可能出錯(cuò),那就一定會(huì)出錯(cuò)

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

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

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

選擇Sentry的原因

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

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

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

閉源，只能在該平臺(tái)上使用

只能監(jiān)控前端頁面

這個(gè)月開始收費(fèi)了

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

準(zhǔn)備工作 Sentry簡(jiǎn)介

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

官網(wǎng)： https://sentry.io 

文檔： https://docs.sentry.io/clients/javascript/install/ 

git倉(cāng)庫(kù)： https://github.com/getsentry/sentry

社區(qū)除了git issue外還可以關(guān)注 https://forum.sentry.io/

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

項(xiàng)目背景

前端[email protected] + axios，暫時(shí)只用關(guān)注這倆就行。

部署

注冊(cè)賬號(hào)

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

前端項(xiàng)目部署

自動(dòng)捕捉異常

主動(dòng)捕捉異常

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

1.注冊(cè)賬號(hào)

步驟略...

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

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

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

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

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

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

npm i raven-js --save

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

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

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

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

4.自動(dòng)捕捉異常 + 查看

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

在App.vue的mounted中寫一個(gè)bug：

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

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

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

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

5.主動(dòng)捕捉異常

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

接口異常

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

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

異步操作異常

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

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

另外，請(qǐng)?jiān)谥鲃?dòng)拋出的異常時(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ā)送條件

配置版本號(hào)，為開發(fā)和線上配置不同的郵件發(fā)送規(guī)則

sourcemap，直接查看報(bào)錯(cuò)js代碼片段

以上是自己發(fā)掘的一些功能，建議大家多看文檔，有新發(fā)現(xiàn)或問題可以一起交流，后面應(yīng)該會(huì)寫一篇拓展版攻略。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94427.html

相關(guān)文章

  • Sentry前端部署拓展篇（sourcemap關(guān)聯(lián)、issue關(guān)聯(lián)、release控制）

    摘要：本地應(yīng)用回到前端項(xiàng)目中，在添加對(duì)應(yīng)的，指定版本后，每次上報(bào)的異常就會(huì)分類到該版本下。管理目前來說，前端項(xiàng)目基本都會(huì)壓縮混淆代碼，這樣導(dǎo)致捕捉到的異常堆棧無法理解。下篇打算寫一下前端異常監(jiān)控的分類，也就是需要監(jiān)控哪些異常，敬請(qǐng)期待 原文首發(fā)于我的個(gè)人博客： https://lonhon.top/ 之前的《基礎(chǔ)篇》主要介紹了Sentry和基本部署流程，在實(shí)際使用過程中你會(huì)發(fā)現(xiàn)Sentr...

    Bamboy 評(píng)論0 收藏0

  • 前端開發(fā)團(tuán)隊(duì)的工具鏈

    摘要：官網(wǎng)地址推薦指數(shù)顆星推薦理由自動(dòng)化部署和集成部署的好工具，操作簡(jiǎn)單，顯示友好，具備多種插件，應(yīng)有盡有，支持多類型語言的項(xiàng)目集成和部署。官網(wǎng)地址如果你有其他好用的工具，不妨也分享一下原博客鏈接前端開發(fā)團(tuán)隊(duì)的工具鏈 匯集前端開發(fā)團(tuán)隊(duì)中經(jīng)常使用的好工具，分享給大家！ 注：都是開源工具 showImg(https://segmentfault.com/img/remote/1460000019...

    xcold 評(píng)論0 收藏0

  • laravel sentry

    摘要：注冊(cè)登錄登錄創(chuàng)建選擇安裝擴(kuò)展使用方法來自配置獲取測(cè)試少寫個(gè)分號(hào)查看效果發(fā)送到對(duì)象當(dāng)方法調(diào)用時(shí)執(zhí)行資源你也可以本地搭建之部署到生產(chǎn)環(huán)境搭建自己的服務(wù)基于安裝自 注冊(cè)登錄 GitHub登錄showImg(https://segmentfault.com/img/bVbgcrL?w=1109&h=554); 創(chuàng)建project 選擇 laravelshowImg(https://segme...

    tinysun1234 評(píng)論0 收藏0

  • [ 好文分享 ] 美團(tuán)酒店Node全棧開發(fā)實(shí)踐

    摘要：我所在的美團(tuán)酒店事業(yè)部去年月份成立，新的業(yè)務(wù)新的開發(fā)團(tuán)隊(duì)，這一切使得我們的前后端分離推進(jìn)的很徹底。日志監(jiān)控平臺(tái)日志監(jiān)控平臺(tái)是美團(tuán)內(nèi)部的一個(gè)日志收集系統(tǒng)，目前美團(tuán)統(tǒng)一使用收集日志，具有接收格式日志的能力，而日志監(jiān)控平臺(tái)也是以格式日志來收集。 轉(zhuǎn)自：美團(tuán)技術(shù)團(tuán)隊(duì) 作者：美團(tuán)技術(shù)團(tuán)隊(duì) 分享理由：很好的分享，可見，基于Node的前后端分離的架構(gòu)是越顯流行和重要，前端攻城獅們，No...

    wangdai 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<