内容简介:这个不是很常用的功能, 但是想收集客户端的错误信息时却很有必要了解下。 捕获分为两个方面:最初的是想直接获取控制台的错误信息; 然而这并不大可行,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错误?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Types and Programming Languages
Benjamin C. Pierce / The MIT Press / 2002-2-1 / USD 95.00
A type system is a syntactic method for automatically checking the absence of certain erroneous behaviors by classifying program phrases according to the kinds of values they compute. The study of typ......一起来看看 《Types and Programming Languages》 这本书的介绍吧!
JSON 在线解析
在线 JSON 格式化工具
HSV CMYK 转换工具
HSV CMYK互换工具