QA不是万能的,用户的浏览环境非常复杂,很多情况无法靠测试用例去覆盖,所以最好建立一个前端错误日志,在真实用户端收集bug。
try&catch是一个捕获前端错误的常见方法,比如:
{
//给所有脚本设置一个统一入口,比如设置一个init函数
init();
}
catch
(e){
//处理错误,将错误信息上报给服务器
}
像上面这样,所有脚本统一用init作为入口,一旦发生错误就会被try捕获,然后交给catch去处理。
这种做法虽然能够收集错误信息,但弊端是必须统一一个脚本入口,并且把入口放在try里面,所以在实现时会比较麻烦。
理想情况下,处理错误信息的脚本应该尽可能做到无痕,为了实现这一点,可以借助window.onerror事件。
在W3C规范里,window.onerror是html5新定义的事件,但实际上,window.onerror从IE6开始就被支持了,而chrome、firefox、safari、opera,目前也都已经支持该事件。
// 基于window.onerror 收集前端错误信息
window.onerror =
function
(message, url, line) {
if
(!url)
return
;
var
msg = {};
//记录客户端环境
msg.ua = window.navigator.userAgent;
//只记录message里的message属性就好了,
//错误信息可能会比较晦涩,有些信息完全无用,应酌情过滤
msg.message = message.message;
msg.url = url;
msg.line = line;
msg.page = window.location.href;
var
s = [];
//将错误信息转换成字符串
for
(
var
key
in
msg){
s.push(key +
'='
+ msg[key]);
}
s = s.join(
'&'
);
//这里是用增加标签的方法调用日志收集接口,优点是比较简洁。
new
Image().src =
'/ajax-jserror.php?'
+ encodeURIComponent(s) +
'&t='
+ Math.random();
};
这段代码只要最好放到head标签里,放在所有script之前,这样当用户浏览时发生的JS错误就会上报到服务器了。
这里有几个点需要注意,一个是日志收集接口暴露在外,最好增加安全措施,比如设置token。
另外,脚本部署的时机、位置,以及日志过滤等条件,也需要根据具体情况进行设定。
onerror的事件绑定
如果想用事件绑定的方法处理window.onerror,有一点需要特别注意:
if
(window.addEventListener){
/*
需要特别注意addEventListener的第三个参数,是否在捕获阶段处理
这个参数,大多数时候用的都是false
在这里,chrome、firefox也都可以用false
但是opera用false时就无法处理error
必须设置为true,在捕获阶段处理error,脚本才能正常运行
*/
window.addEventListener(
"error"
,fn,
true
);
}
else
if
(window.attachEvent){
//ie在这里表示无压力
window.attachEvent(
"onerror"
,fn);
}