内容简介:这个不是很常用的功能, 但是想收集客户端的错误信息时却很有必要了解下。 捕获分为两个方面:最初的是想直接获取控制台的错误信息; 然而这并不大可行,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)});
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- golang中goroutine错误捕获讲解
- Golang学习笔记之错误处理error、panic (抛出错误),recover(捕获错误)
- C++ 中捕获整数除零错误
- ASP错误捕获的几种常规处理方式
- JqueryUI自动完成错误:未捕获TypeError:对象#的属性“结果”不是函数
- reactjs – 为什么我的http库的错误处理程序在应用程序中捕获* all * runtime错误?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。