首页 > Web传统技术, 代码库, 技术随笔 > Javascript中获取出错代码所在文件及行数

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

Web传统技术, 代码库, 技术随笔 ,

之前在做一个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绑定的处理函数所处理。查了一下相关文档,发现绑定的错误处理函数会接受到三个参数:

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();

image

这里之所以没用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>

 

—— Kevin Yang

本博客遵循CC协议2.5,即署名-非商业性使用-相同方式共享
写作很辛苦,转载请注明作者以及原文链接~
如果你喜欢我的文章,你可以订阅我的博客:-D点击订阅我的文章

  1. X﹏X 到现在还没有评论~
  1. 暂时没有trackbacks.