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