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);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值