实现思路
前端
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.
