zoukankan      html  css  js  c++  java
  • 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

    /**
     * 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

    get_error.php

    <?php
    echo '<pre>';
    print_r($_REQUEST);
  • 相关阅读:
    《程序设计与数据结构》(上)课程总结
    20172321 2017-2018-2 《程序设计与数据结构》实验五报告
    20172321 2017-2018-2 《程序设计与数据结构》实验4报告
    20172321 2017-2018-2 《程序设计与数据结构》第11周学习总结
    暑假App
    20172314 2018-2019-1《程序设计与数据结构》查找与排序实验报告
    团队作业——第二周
    安卓游戏开发——团队作业第一周
    20172314 2018-2019-1《程序设计与数据结构》第九周学习总结
    20172314 《程序设计与数据结构》实验报告——树
  • 原文地址:https://www.cnblogs.com/-mrl/p/12155194.html
Copyright © 2011-2022 走看看