聊一聊如何作監控——cgi監控

某產品: 「哎呀，這個功能怎麼用不了呀」；而後某前端和某後臺開始定位問題，而後發現是後臺接口返回錯誤，某前端：「沒我啥事，虛驚一場 o_O」，後面如此往復，致使某前端不經感嘆：「要是有能發現是不是後臺接口問題的告警就行了，一目瞭然，不再用一塊兒折騰」。筆者能夠開心的告訴某前端：這正是這篇文章的主題：如何作cgi監控。

cgi監控的意義

保證一個項目的質量，全面的測試時必要的；可是也不能保證萬無一失，上線的時候也許某些因素出現各類情況。若是能快速發現問題，對於產品的可用性會大大提升，也能夠加強用戶體驗。越快越精確的發現問題模塊，不只可讓開發者快速解決，也能夠使產品不可用時間減短。

基於以上的問題，作cgi監控是必不可少的，好比：某個兌換優惠券活動發現不能兌換，那麼可能致使其購買的慾望下降。越晚發現問題，影響的用戶數據越多。接入cgi監控後，開發者可以第一時間發現問題、解決問題，減小故障帶來的損失。

實現的基本思路

適用範圍： 在筆者的平常開發中發送請求是使用的ajax請求，其本質是調用 XMLHttpRequest 對象實現的，對 Fetch 因爲兼容性，並未涉及。

服務準備 : 須要有一個能進行監控上報而且發送通知(郵件、微信)等

實現步驟：

1.重寫 XMLHttpRequest.open 方法

• 獲取當前 xhr 實例請求的 url 相關信息
• 初始化當前請求的時間
• 調用 XMLHttpRequest.open 原始open方法發送請求

2.重寫 XMLHttpRequest.onreadystatechange

• 斷定是否須要監聽時上報的 url
• 調用工具定義的 onreadystatechange 函數，進行接口上報
• 調用開發者自定義的 onreadystatechange，實現業務邏輯

3.重寫 XMLHttpRequest.abort 上報相關請求中斷的錯誤碼

具體代碼實現

• src/index.js 入口文件，定義CgiAnalysisTool類供使用
• src/customXhr 實現相關 XMLHttpRequest函數重寫
• src/cgiReport 上報相關函數處理
• src/util.js 獲取請求 url、請求環境相關信息

具體代碼點擊 查看