Angular項目接入Fundebug監控

Angular項目接入Fundebug

最近在公司內部的Angular項目中接入了Fundebug監控，用於線上bug實時追蹤。在此，跟你們分享一下相關內容，但願你們喜歡😍。

Fundebug簡介

Fundebug的口號是不放過每個BUG，它提供全棧JavaScript錯誤監控。其實，簡單理解就是全部跟JavaScript相關的監控，包括各類前端框架(Angular, Vue,js, React)，Node.js，微信小程序。

由於咱們使用Angular(Angular 5)框架，本文介紹接入Angular的大概使用方法。

接入方法

• 首先須要建立一個帳號

  建立帳號頁面使用極驗驗證，蠻好玩的一個東西。

  

• 帳號建立後會立馬跳轉到建立項目的界面。能夠看到，支持好幾個版本的Angular，因此千萬不要選錯了。

  

• 以後會有詳細的接入代碼，只要複製黏貼就能夠了

  推薦使用npm安裝！

  

  若是不清楚，還能夠直接點擊右下角的對話圖標，客服的解答都很專業。

報錯測試

當代碼都接入好之後，就能夠測試啦。在項目的控制檯輸入測試命令：
fundebug.notify("Test", "Hello, Fundebug!");

很快就收到了報警郵件：

點擊查看詳情，就能夠看到詳細的報錯信息啦。瀏覽器和操做系統的信息都會分析並展現出來。有時候某些錯誤只會在特定的安卓版本上出現，那麼有這樣的信息，對於幫助分析解BUG是頗有用的。

而用戶行爲也能夠稱得上是一項黑科技，它記錄了出錯前的用戶行爲、網絡請求、控制檯輸出。這個對於更好的理解用戶的操做流程，復現BUG很是有幫助。由於每每Debug的時間都是花在了分析爲何會出現這個bug，理解了用戶的使用場景，才能夠更好的搞清楚bug成因。

自定義報警規則

若是每一次出錯都報警的話，那將是一件很恐怖的事情。想象一下一個錯誤出一百萬次，確定不能發一百萬封郵件。不只郵件系統會掛掉，咱們本身也會被搞暈。Fundebug默認配置了報警規則來避免這一狀況的出現。而我特別喜歡的一個功能則是能夠自定義報警規則。相比於默認的根據同一個錯誤出現多少次報警，我更喜歡同一個錯誤影響多少用戶。

若是隻有一個用戶遇到，我大概會看一看，不重要的就暫時無論它。可是若是有5個用戶遇到同一個錯誤，就會很重視了。因此我把前面的報錯設置的比較頻繁，保證可以及時去發現嚴重問題。

結語

大體就介紹這麼多吧，若是想了解更詳細的信息，能夠去他們官網。

參考：

1. Fundebug:不放過每個BUG