Javascript中获取出错代码所在文件及行数的代码


Posted in Javascript onSeptember 23, 2010

原先使用的是try-catch的方式,在catch语句中,我们会收到一个Error对象(我们也可以抛出一个自定义异常对象)。Firefox中的Error对象拥有如下属性:

message —— 错误提示信息
fileName —— 表示出错代码所在文件
lineNumber —— 出错代码所在行数
stack —— 出错堆栈信息
name —— 异常对象名/类型
但是在IE下,Error对象只有如下属性:

name —— 异常对象名/类型,和Firefox中显示的名称可能不同
message —— 错误提示信息
description —— 和message属性相同
number —— ErrorCode,错误代码,对于普通开发人员来说基本没意义
也就是说在IE下我们无法获得最希望得到的错误代码所在文件名及出错行数的信息。后来在学校论坛求教之后知道了window(全局对象)下有一个onerror的对象。这个对象或者说window的属性绑定的是一个错误处理函数。脚本中任何未被捕获的错误最终都会扩散到window这一层,然后被onerror绑定的处理函数所处理。查了一下相关文档,发现绑定的错误处理函数会接受到三个参数:

view sourceprint?function onError(message,url,line){}

非常欣慰的是,这个机制兼容IE和Firefox。

下面举一个例子:

function doSomething(){ 
var lastErrorHandler = window.onerror; 
window.onerror = function(message,url,line){ 
// 汇报错误 
alert("执行" + url + "文件中的第" + line + "行代码出错,错误信息:" + message); 
window.onerror = lastErrorHandler; 
// 不希望此错误继续扩散 
return true; 
}; 
// 不小心出错了... 
sldfjlskdjflj; window.onerror = lastErrorHandler; 
} 
doSomething();

Javascript中获取出错代码所在文件及行数的代码
这里之所以没用attachEvent的方式,是因为detach比较不方便。如果希望此错误处理变成全局的,那么可以使用attachEvent(Firefox下是addEventListener)的方式。

需要注意,Safari(Chrome使用的也是一样的内核)和Opera都不支持此机制,这两个核心的浏览器都不支持全局的error事件,因此没法使用这种方式来捕获异常信息,只能使用try-catch的方式。

试验了一下,在Safari中的Error对象拥有如下属性:

message —— 错误提示信息
line —— 出错代码所在行数
sourceId —— 一个数字,不明白什么意思
sourceURL —— 表示出错代码所在文件
name —— 异常对象名/类型
Opera下的Error对象拥有如下属性:

message —— 错误提示信息
opera#sourceloc —— 出错代码所在行数
stacktrace —— 出错堆栈信息
这两个浏览器中的Error对象已经提供了足够的信息给我们调试使用了。下面要做的就是把这两种方式结合起来,使之在不同浏览器下都能很好的汇报这些错误。

下面这段代码封装了在不同浏览器之上汇报异常的功能:

<script type=”text/javascript”> 
function reportError(err){ 
var errMsg = []; 
for(var p in err){ 
if(err.hasOwnProperty(p)){ 
errMsg.push(p + "=" + err[p]); 
} 
} 
alert(errMsg.join("\n")); 
} 
function doSomething(){ 
var lastErrorHandler = window.onerror; 
window.onerror = function(message, url, line){ 
// 汇报错误 
reportError({ 
message: message, 
url: url, 
line: line 
}); 
window.onerror = lastErrorHandler; 
// 不希望此错误继续扩散 
return true; 
} // 不小心出错了... 
sldfjlskdjflj; 
window.onerror = lastErrorHandler; 
} 
try{ 
// 执行可能出错的代码 
doSomething(); 
}catch(e){ 
if("\v"=="v"){ 
// 对于IE直接让此错误扩散到最外层 
throw e; 
}else{ 
// 对于其他任意浏览器直接汇报此异常对象 
reportError(e); 
} 
} 
</script>
Javascript 相关文章推荐
ie支持function.bind()方法实现代码
Dec 27 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
jquery获取URL中参数解决中文乱码问题的两种方法
Dec 18 Javascript
javascript数组排序汇总
Jul 07 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
微信小程序绘制图片发送朋友圈
Jul 25 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
vue-cli3单页构建大型项目方案
Apr 07 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 #Javascript
用js模拟JQuery的show与hide动画函数代码
Sep 20 #Javascript
通过DOM脚本去设置样式信息
Sep 19 #Javascript
javscript对象原型的一些看法
Sep 19 #Javascript
Ext 今日学习总结
Sep 19 #Javascript
JS面向对象编程 for Cookie
Sep 19 #Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
Sep 19 #Javascript
You might like
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
用js做一个小游戏平台 (一)
2009/12/29 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
AngularJs Modules详解及示例代码
2016/09/01 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
vue实现员工信息录入功能
2020/06/11 Javascript
如何在postman测试用例中实现断言过程解析
2020/07/09 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
Python Requests库基本用法示例
2018/08/20 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
pytorch 修改预训练model实例
2020/01/18 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
工程招投标邀请书
2014/01/30 职场文书
房屋公证委托书
2014/04/03 职场文书
毕业生简历自我评价范文
2014/04/09 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2015秋季开学典礼致辞
2015/07/16 职场文书
个人工作总结怎么写?
2019/04/09 职场文书