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

 更新时间:2010年09月23日 18:42:51   作者:  
之前在做一个Javascript的日志控制台功能模块,希望能够在Javascript代码出错时捕获此错误,并将出错的文件及相应的行数打印到控制台并汇报给服务器。
原先使用的是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();


这里之所以没用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递归操作树形结构代码示例

    JavaScript递归操作树形结构代码示例

    前端树形结构一般用于网页的地理位置输入框,地理位置级联选择,人员的部门选择等,这篇文章主要给大家介绍了关于JavaScript递归操作树形结构的相关资料,需要的朋友可以参考下
    2024-01-01
  • Fetch超时设置与终止请求详解

    Fetch超时设置与终止请求详解

    这篇文章主要给大家介绍了关于Fetch超时设置与终止请求的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Fetch具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • javascript中的关于类型转换的性能优化

    javascript中的关于类型转换的性能优化

    类型转换是大家常犯的错误,因为JavaScript是动态类型语言,你不能指定变量的类型。
    2010-12-12
  • JS异步处理的进化史深入讲解

    JS异步处理的进化史深入讲解

    这篇文章主要给大家介绍了关于JS异步处理的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08
  • 微信小程序之侧边栏滑动实现过程解析(附完整源码)

    微信小程序之侧边栏滑动实现过程解析(附完整源码)

    这篇文章主要介绍了微信小程序之侧边栏滑动实现过程解析(附完整源码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-08-08
  • 在小程序中使用Echart图表的示例代码

    在小程序中使用Echart图表的示例代码

    这篇文章主要介绍了在小程序中使用Echart图表的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • 使用VSCode调试Electron主进程的方法步骤

    使用VSCode调试Electron主进程的方法步骤

    本文主要介绍了使用VSCode调试Electron主进程的方法步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JavaScript实现动态表格的示例代码

    JavaScript实现动态表格的示例代码

    动态表格是指在网页上显示的数据表格,可以根据用户输入或页面元素的变化动态更新内容,本文主要介绍了JavaScript实现动态表格的示例代码,感兴趣的可以了解一下
    2024-04-04
  • 老生常谈Javascript中的原型和this指针

    老生常谈Javascript中的原型和this指针

    下面小编就为大家带来一篇老生常谈Javascript中的原型和this指针。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-10-10
  • JavaScript加强之自定义callback示例

    JavaScript加强之自定义callback示例

    callback回调函数在本文以自定义的方式出现,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-09-09

最新评论