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

github地址：https://github.com/hezhengjie/jsErrorReport.git