博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
基于window.onerror事件 建立前端错误日志
阅读量:6946 次
发布时间:2019-06-27

本文共 1496 字,大约阅读时间需要 4 分钟。

  hot3.png

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

}

转载于:https://my.oschina.net/wzzz/blog/497080

你可能感兴趣的文章
《设计模式系列》---模板方法
查看>>
Facebook推出应用中心 划定主要合作伙伴
查看>>
Runtime.addShutdownHook()(译)
查看>>
yum安装(本地yum源&网络yum源)
查看>>
【209期推荐】HIS实施的尴尬,你到底这是要闹哪样啊?
查看>>
nginx 伪静态 rewrite
查看>>
分布式文件系统之MogileFS
查看>>
每日备份数据的脚本
查看>>
linux下vi命令
查看>>
常用的开源工具总结
查看>>
Citrix XenDesktop桌面登录VM提示Citrix Web插件错误
查看>>
centos 编译安装 python
查看>>
关于 获取 Android 本地手机 号码
查看>>
SpringCloud系列第01节之入门
查看>>
Android Framework 分析---3PackageManager 分析
查看>>
android权限大全
查看>>
SQLite数据库-execSQL()和rawQuery()方法
查看>>
View事件分发机制
查看>>
获取系统所有IP地址
查看>>
Parsing list of JSON objects with gson
查看>>