某產品: “哎呀，這個功能怎麼用不了呀”；然後某前端和某後台開始定位問題，然後發現是後台接口返回錯誤，某前端：“沒我啥事，虛驚一場 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、請求環境相關信息

具體代碼點擊 查看