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 相关文章推荐
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
js字母大小写转换实现方法总结
Nov 13 Javascript
JS实现网页滚动条感应鼠标变色的方法
Feb 26 Javascript
jquery遍历json对象集合详解
May 18 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
localStorage实现便签小程序
Nov 28 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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实现有趣的人品测试程序实例
2015/06/08 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
2015/04/03 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python list 合并连接字符串的方法
2013/03/09 Python
Python中的异常处理学习笔记
2015/01/28 Python
从源码解析Python的Flask框架中request对象的用法
2016/06/02 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python实现Dijkstra算法
2018/10/17 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python操作redis数据库的三种方法
2020/09/10 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
详解css3 flex弹性盒自动铺满写法
2020/09/17 HTML / CSS
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
幼儿教师暑期培训方案
2014/08/27 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
2016年重阳节慰问信
2015/12/01 职场文书
自荐信大全
2019/03/21 职场文书