js window.onerror 錯誤監聽，發到背景

window.onerror = function (message, url, lineNo, columnNo, error)

參數資訊

1、message {String} 錯誤資訊。直覺的錯誤描述資訊，不過有時候你确實無法從這裡面看出端倪，特别是壓縮後腳本的報錯資訊，可能讓你更加疑惑。

2、url {String} 發生錯誤對應的腳本路徑，比如是你的http://a.js報錯了還是http://b.js報錯了。

3、lineNo {Number} 錯誤發生的行号。

4、columnNo {Number} 錯誤發生的列号。

5、error {Object} 具體的 error 對象，包含更加詳細的錯誤調用堆棧資訊，這對于定位錯誤非常有幫助。

注意

1、對于跨域的JS資源，window.onerror拿不到詳細的資訊，需要往資源的請求添加額外的頭部。

靜态資源請求需要加多一個Access-Control-Allow-Origin頭部，也就是需要背景加一個Access-Control-Allow-Origin，同時script引入外鍊的标簽需要加多一個crossorigin的屬性。這樣就可以擷取準确的出錯資訊。

為了友善設定Header，可以把error.js做一個小改動，更名為：error-js.php

<?php 
  header('Access-Control-Allow-Origin:*'); 
  header('Content-type:text/javascript'); 
?> 
throw new Error('出錯了');

2、壓縮之後的代碼，我們得到錯誤的資訊，但是我們卻無法定位到錯誤的行數

執行個體1：

<!DOCTYPE html>
<html>
<head>
    <title>Js錯誤捕獲</title>
    <script type="text/javascript">
        var MaxErrorReportLimit = 10;
        window.onerror = function(msg,url,line,col,error){
            // 同一個頁面最多上報10次錯誤，防止某個循環錯誤頁面一直打開，不斷的報錯
            if (MaxErrorReportLimit-- < 0) return;
            //沒有URL不上報！上報也不知道錯誤
            if (msg != "Script error." && !url){
                return true;
            }
            //采用異步的方式
            //我遇到過在window.onunload進行ajax的堵塞上報
            //由于用戶端強制關閉webview導緻這次堵塞上報有Network Error
            //我猜測這裡window.onerror的執行流在關閉前是必然執行的
            //而離開文章之後的上報對于業務來說是可丢失的
            //是以我把這裡的執行流放到異步事件去執行
            //腳本的異常數降低了10倍
            setTimeout(function(){
                var data = {};
                //不一定所有浏覽器都支援col參數
                col = col || (window.event && window.event.errorCharacter) || 0;

                data.url = url;
                data.line = line;
                data.col = col;
                if (!!error && !!error.stack){
                    //如果浏覽器有堆棧資訊
                    //直接使用
                    data.msg = error.stack.toString();
                }else if (!!arguments.callee){
                    //嘗試通過callee拿堆棧資訊
                    var ext = [];
                    var f = arguments.callee.caller, c = 3;
                    //這裡隻拿三層堆棧資訊
                    while (f && (--c>0)) {
                        ext.push(f.toString());
                        if (f  === f.caller) {
                            break;//如果有環
                        }
                        f = f.caller;
                    }
                    ext = ext.join(",");
                    data.msg = error.stack.toString();
                }
                //把data上報到背景！
                console.log(data,'======data=====')
                var xhr=new XMLHttpRequest();
                xhr.open('POST','/get_error.php',false);
                // 添加http頭，發送資訊至伺服器時内容編碼類型
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                // xhr.setRequestHeader('Content-Type','application/json');
                xhr.onreadystatechange=function(){
                    if (xhr.readyState==4){
                        if (xhr.status==200 || xhr.status==304){
                            // console.log(xhr.responseText);
                        }
                    }
                }
                xhr.send(JSON.stringify(data));
            },0);
            var show_js_error = true;
            if(show_js_error != true){
                //關閉js報錯提示
                return true;
            }

        };
    </script>
</head>
<body>
<!--<script type="text/javascript" src="http://127.0.0.1/error.js"></script>-->
<script type="text/javascript" >
    aa      //故意報錯測試
    // throw new Error('出錯了');
</script>
</body>
</html>

get_error.php

<?php
echo '<pre>';
print_r($_REQUEST);

執行個體2（引入js插件）：

<!DOCTYPE html>
<html>
<head>
    <title>Js錯誤捕獲</title>
</head>
<body>
<script type="text/javascript" src="badJsReport.js"></script>
<SCRIPT>
    badJsReport({
        url:'get_error.php', //發送到背景的url *必須
    })
    aa       //故意報錯測試
    // throw new Error("出錯了！");
</SCRIPT>
</body>
</html>

badJsReport.js

js window.onerror 錯誤監聽，發到背景

/**
 * Name:    badJsReport.js
 * Version  1.1.0
 * Author   xiangyulaodi
 * Address: https://github.com/xianyulaodi/badJsReport
 * Released on: December 22, 2016
 */

;(function(){

    'use strict';

    if (window.badJsReport){ 

       return window.badJsReport 
    };

    /*
    *  預設上報的錯誤資訊
    */ 
    var defaults = {
        msg:'',  //錯誤的具體資訊
        url:'',  //錯誤所在的url
        line:'', //錯誤所在的行
        col:'',  //錯誤所在的列
        error:'', //具體的error對象
    };

    /*
    *ajax封裝
    */
    function ajax(options) {
        options = options || {};
        options.type = (options.type || "GET").toUpperCase();
        options.dataType = options.dataType || "json";
        var params = formatParams(options.data);

        if (window.XMLHttpRequest) {
           var xhr = new XMLHttpRequest();
        } else { 
           var xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        xhr.onreadystatechange = function () {
           if (xhr.readyState == 4) {
               var status = xhr.status;
               if (status >= 200 && status < 300) {
                   options.success && options.success(xhr.responseText, xhr.responseXML);
               } else {
                   options.fail && options.fail(status);
               }
           }
        }

        if (options.type == "GET") {
           xhr.open("GET", options.url + "?" + params, true);
           xhr.send(null);
        } else if (options.type == "POST") {
           xhr.open("POST", options.url, true);
           //設定表單送出時的内容類型
           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           xhr.send(params);
        }
    }

    /*
    *格式化參數
    */
    function formatParams(data) {
       var arr = [];
       for (var name in data) {
           arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
       }
       arr.push(("v=" + Math.random()).replace(".",""));
       return arr.join("&");
    }


    /*
    * 合并對象，将配置的參數也一并上報
    */
    function cloneObj(oldObj) { //複制對象方法
      if (typeof(oldObj) != 'object') return oldObj;
      if (oldObj == null) return oldObj;
      var newObj = new Object();
      for (var prop in oldObj)
        newObj[prop] = oldObj[prop];
      return newObj;
    };

    function extendObj() { //擴充對象
      var args = arguments;
      if (args.length < 2) {return;}
      var temp = cloneObj(args[0]); //調用複制對象方法
      for (var n = 1,len=args.length; n <len; n++){
        for (var index in args[n]) {
          temp[index] = args[n][index];
        }
      }
      return temp;
    }

   /**
   * 核心代碼區
   **/
   var badJsReport=function(params){
       var MaxErrorReportLimit = 10;
      if(!params.url){return}
      window.onerror = function(msg,url,line,col,error){
          // 同一個頁面最多上報10次錯誤，防止某個循環錯誤頁面一直打開，不斷的報錯
          if (MaxErrorReportLimit-- < 0) return;
          //采用異步的方式,避免阻塞
          setTimeout(function(){

              //不一定所有浏覽器都支援col參數，如果不支援就用window.event來相容
              col = col || (window.event && window.event.errorCharacter) || 0;

              defaults.url = url;
              defaults.line = line;
              defaults.col =  col;

              if (error && error.stack){
                  //如果浏覽器有堆棧資訊，直接使用
                  defaults.msg = error.stack.toString();

              }else if (arguments.callee){
                  //嘗試通過callee拿堆棧資訊
                  var ext = [];
                  var fn = arguments.callee.caller;
                  var floor = 3;  //這裡隻拿三層堆棧資訊
                  while (fn && (--floor>0)) {
                     ext.push(fn.toString());
                     if (fn  === fn.caller) {
                          break;//如果有環
                     }
                     fn = fn.caller;
                  }
                  defaults.msg = ext.join(",");
                }
                // 合并上報的資料，包括預設上報的資料和自定義上報的資料
                var reportData=extendObj(params.data || {},defaults);
                
                // 把錯誤資訊發送給背景
                ajax({
                    url: params.url,      //請求位址
                    type: "POST",         //請求方式
                    data: reportData,     //請求參數
                    dataType: "json",
                    success: function (response, xml) {
                        // 此處放成功後執行的代碼
                      params.successCallBack&&params.successCallBack(response, xml);
                    },
                    fail: function (status) {
                        // 此處放失敗後執行的代碼
                      params.failCallBack&&params.failCallBack(status);
                    }
                 });

          },0);

          return true;   //錯誤不會console浏覽器上,如需要，可将這樣注釋
      };

  }
    
  window.badJsReport=badJsReport;

})();

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

View Code

<?php
echo '<pre>';
print_r($_REQUEST);

js window.onerror 錯誤監聽，發到背景

參數資訊

繼續閱讀

【C# MySQL】第一次使用C#對MySQL進行操作的心得

C#基礎——與C#的第一次邂逅聲明：IDE：第一個C#果實：Console淺析：總結：

英文月日年日期格式的實作

II6 IIS7 下 asp.net的生命周期 ASP.NET Application Life Cycle Overview for IIS 5.0 and 6.0

2010年終總結--技術篇

如何成為一名.net 工程師?

C# 位元組數組 byte[] 快速比較算法

C# 位元組數組、字元串轉化位元組數組轉字元串字元串轉位元組數組位元組數組轉整數整數轉位元組數組字元串轉位元組字元串轉數值數值轉字元串

C#用Zlib壓縮或解壓縮位元組數組

C# 比較兩個位元組數組是否相等

對于VS中scanf報錯永久解決，建立源檔案自動添加#define _CRT_SECURE_NO_WARNINGS 1

《C#進階程式設計》讀書筆記 -索引

CQ V1.0分詞bates(基于雙數組tire樹)—應該是目前最快的中文分詞算法

C#多線程——前台線程和背景線程

C#+ArcEngine代碼檢測ArcEngine Runtime是否安裝以及是否授權

七牛雲-C#SDK-上傳-前期準備