js捕获错误信息

栏目: 编程语言 · AngularJS · 发布时间: 5年前

内容简介:这个不是很常用的功能, 但是想收集客户端的错误信息时却很有必要了解下。 捕获分为两个方面:最初的是想直接获取控制台的错误信息; 然而这并不大可行,JS并没有这样的功能。转换下思路

这个不是很常用的功能, 但是想收集客户端的错误信息时却很有必要了解下。 捕获分为两个方面:

收集JS语法、执行错误

最初的是想直接获取控制台的错误信息; 然而这并不大可行,JS并没有这样的功能。

转换下思路

在错误发生时,将错误进行存储。

原生JS实现方式:

通过重载 window 对象下的 onerror 函数, 可以截取到这些信息。

window.onerror = function(errorMessage, scriptURI, lineNumber,columnNumber,errorObj) {
   console.log("错误信息:" , errorMessage);
   console.log("出错文件:" , scriptURI);
   console.log("出错行号:" , lineNumber);
   console.log("出错列号:" , columnNumber);
   console.log("错误详情:" , errorObj);
}

框架实现方式:

只在angular 下做了实现,没有实现过的框架没有发言权;接下来将以angular为例。但要注意的是在部分框下这种方式是不生效的,原因是在框架解析代码前,所有的代码可以理解为都是文本而非js文件。

angular 环境下无法使用window.ondrror. 原因是angular体制内的代码通过$even 解析后并不会将错误移交给 window.onerror 函数

但是 angular 在解析时会将所有的语法、执行错误时将会触发 $ExceptionHandlerProvider 函数:

function $ExceptionHandlerProvider() {
  this.$get = ['$log', function($log) {
    return function(exception, cause) {
      $log.error.apply($log, arguments);
    };
  }];
}

$ExceptionHandlerProvider 函数将会调用 consoleLog('error') 函数

this.$get = ['$window', function($window) {
return {
  /**
   * @ngdoc method
   * @name $log#log
   *
   * @description
   * Write a log message
   */
  log: consoleLog('log'),
  /**
   * @ngdoc method
   * @name $log#info
   *
   * @description
   * Write an information message
   */
  info: consoleLog('info'),
  /**
   * @ngdoc method
   * @name $log#warn
   *
   * @description
   * Write a warning message
   */
  warn: consoleLog('warn'),
  /**
   * @ngdoc method
   * @name $log#error
   *
   * @description
   * Write an error message
   */
  error: consoleLog('error'),
  /**
   * @ngdoc method
   * @name $log#debug
   *
   * @description
   * Write a debug message
   */
  debug: (function() {
    var fn = consoleLog('debug');
    return function() {
      if (debug) {
        fn.apply(self, arguments);
      }
    };
  }())
};
function consoleLog(type) {
  var console = $window.console || {},
      logFn = console[type] || console.log || noop,
      hasApply = false;
  // Note: reading logFn.apply throws an error in IE11 in IE8 document mode.
  // The reason behind this is that console.log has type "object" in IE8...
  try {
    hasApply = !!logFn.apply;
  } catch (e) {}
  if (hasApply) {
    return function() {
      var args = [];
      forEach(arguments, function(arg) {
        args.push(formatError(arg));
      });
      return logFn.apply(console, args);
    };
  }
  // we are IE which either doesn't have window.console => this is noop and we do nothing,
  // or we are IE where console.log doesn't have apply so we log at least first 2 args
  return function(arg1, arg2) {
    logFn(arg1, arg2 == null ? '' : arg2);
  };
}

最终这些错误会流入原生console.error内, 所以在angular下捕获这些错误将变的异常简单。仅仅需要重置console.error方法,如下所示:

resetConsole() {
    window.console._error = window.console.error;
    window.console.error = info => {
        // 在这里执行错误存储或发送
        window.console._error(info);
    };
}

angular 在解析错误时, 会通过$log.error.apply $window.console.error方法. 所以在这里将 console.error 进行重置后, 语法、执行错误也会一并收集到。

收集请求错误

各框架都会将 XMLHttpRequest 进行封装, 可以找到对应的errror函数内将错误进行捕获。

原生实现收集请求错前, 需要先对XMLHttpRequest进行封装,示例如下:

var ajax = function(type, url, callback){
    var xhr = new XMLHttpRequest();
    xhr.open(type, url);
    xhr.onreadystatechange = function() {
        if (xhr.readyState !== 4) {
            return;
        }
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
            callback();
        } else {
            console.log('收集到一条错误');// 在这里收集错误信息
        }
    };
    xhr.send(null);
}
// 因为.ccccccom这个路径是不存在的, 所以会执行收集区域的代码。
ajax('GET', 'http://www.lovejavascript.ccccccom', function(a){console.log(a)});

如果对 XMLHttpRequest 封装感兴趣, 可以看下我写的 jTool 类库中的 ajax 对象


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从问题到程序

从问题到程序

裘宗燕 / 机械工业出版社 / 2011-5 / 39.00元

《从问题到程序:程序设计与C语言引论(第2版)》以C作为工具语言,讨论了基本程序设计的各方面内容,详细解释了与c语言和程序设计有关的问题。在新版中,特别加强了针对近年日益受到业界和学术界广泛重视的问题的讨论,并通过详细地分析和讨论大量符合C99标准的实例,给出了分析和分解问题、找出解决问题的主要步骤、确定函数抽象、找出循环、选择语言结构直至最后做出所需程序的完整过程。 《从问题到程序:程序设......一起来看看 《从问题到程序》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具
html转js在线工具

html转js在线工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具