資訊專欄INFORMATION COLUMN
摘要：說起埋點又到了談起前端項目中數據收集與監控，那么今天來簡單的聊下前端報錯監控的埋點。錯誤監控的錯誤監控主要是為了發現服務接口返回值的問題。如果為，則偵聽器只在目標或冒泡階段處理事件。
說起埋點又到了談起前端項目中數據收集與監控，那么今天來簡單的聊下前端報錯監控的埋點。
首先先安利下自己做的報錯監控的項目 FE-Monitor 歡迎 issue 和 star 。
首先我們可以看下前端做報錯監控的意義在哪里：
幫助灰度測試發現問題
收集線上錯誤日志
幫助優化產品穩定性
收集錯誤數據用于分析
監控第三方資源/CDN 穩定性
總體來說前端監控的主要目的都是為了獲取用戶行為以及跟蹤產品在用戶端的使用情況，并以監控數據為基礎，指明產品優化方向。
常見監控方式try {
test code // throw error
} catch(e){
console.log(e);
}
上面的代碼在項目中很常見，一般用來捕獲某一段可能代碼拋出的錯誤信息。并且在try catch 中的錯誤并不會阻塞整個頁面，即使發生錯誤，頁面也可以繼續執行。
當然，我們不太可能對這個項目中的每一段代碼都添加 try catch，這樣不僅不利于線上定位問題產生的原因，也會讓代碼難以維護，目前主流的就是在項目中獨立引入一個報錯監控的 JS 來多帶帶的完成對整個項目的監控。
比如 FE-Monitor 就提供開源的項目報錯監控的能力，只需要將 SDK 引入自己的項目中，即可監控整個項目的js執行報錯，資源加載異常，ajax錯誤等信息了。
ajax 錯誤監控ajax 的錯誤監控主要是為了發現服務接口返回值的問題。
看了一些產品的實現都是對 window 下的 XMLHttpRequest 重寫，但是這樣直接重寫不僅會造成調用鏈的修改也會讓宿主頁面上的多個 ajax 庫產生沖突，如使用了 jquery 的話 jquery 中是直接使用 XMLHttpRequest 對象的。如果修改了全局的對象中的屬性可能會造成以外的影響。
用了一種特殊的方式去實現對 XMLHttpRequest 對象的監聽。
_initListenAjax: function () {
let self = this;
function ajaxEventTrigger(event) {
var ajaxEvent = new CustomEvent(event, { detail: this });
window.dispatchEvent(ajaxEvent);
}
var oldXHR = window.XMLHttpRequest;
function newXHR() {
var realXHR = new oldXHR();
realXHR.addEventListener("load", function ($event) {
ajaxEventTrigger.call(this, "ajaxLoad");
}, false);
realXHR.addEventListener("timeout", function () {
ajaxEventTrigger.call(this, "ajaxTimeout");
}, false);
realXHR.addEventListener("readystatechange", function() {
ajaxEventTrigger.call(this, "ajaxReadyStateChange");
}, false);
return realXHR;
}
window.XMLHttpRequest = newXHR;
self._startLintenAjax();
}
這樣做不僅可以一經調用就監控到頁面的錯誤，不會出現重寫 window.onerror 的時候第一次錯誤監控不到的情況還需要重寫 console.error 函數才可以監聽到。
error錯誤監控錯誤監控中對 error 事件的監控是最重要的，監聽 error 的事件主要是為了發現 js 執行中拋錯。
window.addEventListener("error", function(err) {
getError(err, self._config);
}, true);
監控 error 報錯的情況中，最 error 的處理中要判斷是否是我們設置的埋點接口的 URL 所拋錯的。主要是為了避免在埋點服務宕機的情況下出現重復請求上報，造成頁面卡死的情況。
監控資源加載異常頁面上有很多的外部的資源，一般來說對資源的加載的監控是在資源標簽添加 onerror 的方法來監聽加載錯誤信息。
支持onload的標簽：, ,