實現思路
前端
js報錯事件監聽+上報錯誤信息
后端
- 提供接口收集報錯
- 根據前端提供的sourcemap文件解析前端上傳報錯
- 整理存儲數據，通過郵箱即時把錯誤信息發送至前端同事
利用window.onerror方法
//如果之前其他代碼有綁定onerror,需要替換執行一下，如果沒有定義window.error===null。
var oldError = window.onerror;
window.onerror = function (msg, fileUrl, lineNo, columnNo, error) {//最后兩個參數有些部分瀏覽器拿不到,依然需要記錄
var args = Array.prototype.slice.call(arguments);
if (oldError) {
oldError.apply(window, args)
}
var stack = null;
if(error && error.stack) stack = error.stack;
var json = {
msg: msg || null,
fileUrl: fileUrl || null,
lineNo: lineNo || null,
columnNo: columnNo || null,
error: stack
}
var userAgent = navigator.userAgent;
if(XMLHttpRequest){
var xhr = new XMLHttpRequest();
xhr.open('post', 'urlxxx', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send("message="+JSON.stringify(json)+"&userAgent="+encodeURIComponent(userAgent))
}
}
可能存在跨域問題，不同域下的js需要配置script屬性 crossorigin="anonymous" 和后端配置 Access-Control-Allow-Origin.
