全局監控js報錯的模塊

一個全局監控js報錯的模塊，前端須要監控的有三點：
1.js語法錯誤
2.ajax請求

這是一個js錯誤監控模塊（包括js語法錯誤，ajax請求，靜態資源加載錯誤），在頁面最開始加載對應的js，全局初始化jsErrorReport，頁面內的js錯誤信息將發送給後臺。

##引入方式

$ npm install js-error-report --save //安裝

 require('js-error-report')
 或者
 import 'js-error-report';
複製代碼

##初始化 在全部js的最開始進行初始化

jsErrorReport({
    url:'',//上報地址
    moduleName:'',//上報模塊名
    data:{}//自定義參數
});複製代碼

3.靜態資源加載錯誤// js錯誤監控處理複製代碼

/**
 * Created by hugh on 16/12/26.
 */

;(function(){

    'use strict';

    if (window.jsErrorReport){
        return window.jsErrorReport
    };

    /*
     *  默認上報的錯誤信息
     */
    var defaults = {
        t:'',	//發送數據時的時間戳
        n:'js',//模塊名,
        l:'ERROR',//js日誌錯誤級別，如warning, error, info, debug
        msg:'',  //錯誤的具體信息,
        a:navigator.appVersion,
        id:'1',
        data:{}
    };

    /*
     *格式化參數
     */
    function formatParams(data) {
        var arr = [];
        for (var name in data) {
            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
        }
        return arr.join("&");
    }
    /*
     * 上報函數
     */
    function report(url,data){
        var img = new Image();
        img.src = url+'?v=1&' +formatParams(data) ;
    }

    /**
     * js錯誤監控
     **/
    var jsErrorReport=function(params){

        if(!params.url){return}
        defaults.n = params.moduleName;
        var url = params.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)
                    }
                }
            }
        };

        //監控資源加載錯誤(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);

        //監控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);

            return true;   //錯誤不會console瀏覽器上,如須要，可將這樣註釋
        };

    }

    window.jsErrorReport=jsErrorReport;

})();

/*===========================
 jsErrorReport AMD Export
 ===========================*/
if (typeof(module) !== 'undefined'){
    module.exports = window.jsErrorReport;
}
else if (typeof define === 'function' && define.amd) {
    define([], function () {
        'use strict';
        return window.jsErrorReport;
    });
}複製代碼