js ajax 错误信息,Js error 监控

一个全局监控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);