一个全局监控js报错的模块，前端需要监控的有三点：
1.js语法错误
2.ajax请求
3.静态资源加载错误
js语法错误
通过window.onerror来捕获JavaScript异常
//监控js错误
window.onerror = function(msg,_url,line,col,error){
//采用异步的方式,避免阻塞
setTimeout(function(){
//不一定所有浏览器都支持col参数，如果不支持就用window.event来兼容
col = col || (window.event && window.event.errorCharacter) || 0;
if (error && error.stack){
//msg信息较少,如果浏览器有追溯栈信息,使用追溯栈信息
defaults.msg = error.stack.toString();
}else{
defaults.msg = msg;
}
defaults.data=JSON.stringify({
resourceUrl:_url,
pageUrl:location.href,
category:'js error',
line:line,
col:col
});
defaults.t=new Date().getTime();
defaults.level='error';
// 合并上报的数据，包括默认上报的数据和自定义上报的数据
var reportData=Object.assign({},params.data || {},defaults);
// 把错误信息发送给后台
report(url,reportData)
},0);
};
ajax请求
扩展XHR原型，重写send方法，检测返回的状态码，如404等，来检测ajax请求失败、错误，重写open方法，记录请求url。
//重写send方法,监控xhr请求
var s_ajaxListener = new Object();
s_ajaxListener.tempSend = XMLHttpRequest.prototype.send;//复制原先的send方法
s_ajaxListener.tempOpen= XMLHttpRequest.prototype.open;//复制原先的open方法
//重写open方法,记录请求的url
XMLHttpRequest.prototype.open = function(method,url,boolen){
s_ajaxListener.tempOpen.apply(this, [method,url,boolen]);
this.ajaxUrl = url;
};
XMLHttpRequest.prototype.send = function(_data){
s_ajaxListener.tempSend.apply(this, [_data]);
this.onreadystatechange = function(){
if (this.readyState==4) {
if (this.status >= 200 && this.status < 300) {
return true;
}
else {
defaults.t =new Date().getTime();
defaults.msg = 'ajax请求错误';
defaults.data = JSON.stringify({
resourceUrl:this.ajaxUrl,
pageUrl:location.href,
category:'ajax',
text:this.statusText,
status:this.status
})
// 合并上报的数据，包括默认上报的数据和自定义上报的数据
var reportData=Object.assign({},params.data || {},defaults);
// 把错误信息发送给后台
report(url,reportData)
}
}
}
};
静态资源加载错误
通过addEventListener('error')监控静态资源加载
//监控资源加载错误(img,script,css,以及jsonp)
window.addEventListener('error',function(e){
defaults.t =new Date().getTime();
defaults.msg =e.target.localName+' is load error';
defaults.data = JSON.stringify({
target: e.target.localName,
type: e.type,
resourceUrl:e.target.currentSrc,
pageUrl:location.href,
category:'resource'
});
if(e.target!=window){//抛去js语法错误
// 合并上报的数据，包括默认上报的数据和自定义上报的数据
var reportData=Object.assign({},params.data || {},defaults);
// 把错误信息发送给后台
report(url,reportData)
}
},true);
