JavaScript小特性(5)——错误监控机制

错误监控,说白了,就是找Bug,然后Debug。

一般的IDE都能把大部分语法上的Bug给找出来,要Coder自个去找的Bug,大部分都是语义、语用上的Bug(例如变量类型错误),解决这种Bug最原始的方法就是一行行的看代码——这种方法我就不多介绍啦~ [大笑]

大部分语言都有一种try&catch的机制,可以让我们定位错误,输出错误日志,方便解决问题——这一点上,JavaScript肯定也是不例外的。

然而作为一个浏览器端的语言,JavaScript在错误监控上还是有些特殊性的,例如:

1、延时、异步触发事件不方便使用try&catch;

2、客户端型号版本繁多,网络情况也千差万别,运行时的特殊错误难以捕捉(总不能出了错就立刻飞到用户身边去看吧~);

3、错误信息是输出到浏览器,不能直接生成日志保存在服务器端(无法判断错误出现的频次、影响程度)……

要解决这些问题,先要弄清楚JavaScript是怎么处理错误的,见下图:

一个Error发生后,首先会被try&catch处理,如果没有被停止,则继续传递给window.onerror处理,如果没有被停止,则最终传递给浏览器控制台输出。

 

Try&Catch

相信学过C++、Java的娃子都知道这种方法,对于JS来说,可能出现的异常都最好捕捉下来自行解决,不要抛给浏览器解决,这也是提高用户体验的做法。

一种Try&Catch的最佳实践是提供一个debugMode的变量,判断代码是处于生产环境还是开发环境,进行不同处理,如下:

var doSomething = debugMode ?
    function(value){  //生产环境
        process(value);
    } :
    function(value){  //开发环境
        try {
            process(value);
        } catch (ex){
            log("doSomething(): " + ex.message);
        }
    };

虽然也可以在function里面进行try&catch,但是用这种三目运算可以减少调用时多余的if&else,也可以在写好函数文件后自动化编译成这种模式。

 

Window.onerror

try&catch能够捕捉到顺序执行代码中的错误,以及throw抛出的错误,但遗憾的是,它对于延时执行(或称异步执行,例如通过事件、计时器等触发的代码)代码却无能为力。这个时候就可以出动window.onerror了,这个API似乎已经成了html5的标准,之前只有IE和Firefox支持,现在基本在所有现代浏览器上都能使用了。而且利用window.onerror这个API就可以解决前面列的那3个问题了(似乎后两个问题可以当成一个,就是将客户端的运行时错误生成日志保存到服务端)。

 W3C说:window.onerror是一个可以捕获所有错误事件并进行处理的处理器,常见用法就是收集程序错误并发送给服务器(传送门)。

在所有的js写完之后,我们可以再写一个windowOnerror.js:

window.onerror = function(message, url, linenumber) {
    //接受三个参数,分别是错误信息,错误页面的url和错误行号
    //收集系统、浏览器信息,连同错误信息一起发给服务器
    //怎么发给服务器就随你啦,ajax/beacon都行
}

服务器端在写个程序收集所有客户端发来的错误信息,这样就方便错误的收集、分析和解决了。

使用window.onerror有几个要注意的地方:

1、可以在函数末尾加上return true,可以在函数出错时不会弹出系统的错误信息(IE);

2、如果页面出现多次错误,只捕获第一次错误并进行处理然后终止后面程序的执行(如果是异常则不会终止后面的程序)。

 

Console

(顺带说一下这部分吧,高手请自觉绕行)

我相信很多刚开始学JS的娃,调试起来就是一堆的alert(“Bug”),弹完一个又是一个,bug找完之后还要一个个把之前写的alert(“Bug”)找出来删掉,有些没找到的就潜伏着等日后去恶心用户……用alert()方法有个坏处,就是会阻断后面的JS运行,这种阻断可能也会掩盖某些运行效率、调用次序的Bug。

除了alert(“Bug”),还有document.title=”Bug”、window.status=”Bug”,其他的Bug就只能恕我孤陋寡闻不能一一罗列了……反正这些Bug在看了本文之后都改了吧~

一个比较好的方法便是用console.xxx方法(xxx可以是log、warn、error,不过常用的是log),现代浏览器基本都支持这种方法。

console.log(object[, object, …])

在控制台输出一条消息。如果有多个参数,输出时会用空格隔开这些参数。

第一个参数可以是一个包含格式化占位符输出的字符串,例如:

console.log("尊敬的%s,有%d个Bug等你修复", "华哥", 1);

console打出来的信息在控制台可以看见(什么?你不知道控制台是啥?问下Google吧),也不会阻断JS运行,也不会改变页面样式内容,是调试的最好方法。

 

最后推荐一个很牛逼的PPT: Enterprise JavaScript Error Handling,是《高性能Javascript》的作者写的,看完之后应该对Debug会有更深的认识。

发布者

Rolf

伪文艺IT攻城师,热爱前端,热爱互联。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

[喜欢] [嘻嘻] [奋斗] [问号] [鼓掌] [泪] [酷] [强] [耶] [握手] [心] [给力] [神马] [围观] [奥特曼] more »