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

}

基于window.onerror事件 建立前端错误日志的更多相关文章

  1. [译]window.onerror事件

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  2. window.onerror事件用来自定义错误处理

    Event reference:      https://developer.mozilla.org/en-US/docs/Web/Events http://w3c.github.io/html/ ...

  3. 基于sentry的前端错误监控日志系统(部署sentry服务器/前端项目部署)-让前端最快的定位到生产问题

    背景 在这越来越发达的网络时代,web应用也是越来越复杂,尤其是前端的开发,也是越来越受重视. 所以在我们前端开发完成后,会有一些列的web应用的上线验证,如自测.QA测试.code review 等 ...

  4. window.onerror 应用实例

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp75   window.onerror = function(sMessa ...

  5. 前端异常日志监控 - 使用Sentry

    背景 现在的前端项目越来越复杂,在不同的客户端会产生各种在开发人员机器上不会出现的问题.当用户报告一个问题给开发人员的时候,开发人员无法直接定位问题.在此前,听过一次鹅厂的前端人员,他们对QQ里面的网 ...

  6. mvc里全局错误日志

    第一步在项目中找到App_Start文件夹下建立一个错误日志过滤器. 第二步在Global.asax文件中注册下日志过滤器 第三步: 继承一个ExceptionFilterAtrribute 第四步: ...

  7. 前端监控系统(二)JS错误日志收集篇

    前端监控系统 目前已经上线,欢迎使用! 服务器搭建好了,可以着手开发了. 其实前端需要分析的数据有很多,包括,PVUV, 接口请求统计,耗时统计,JS错误统计,用户使用设备统计,用户地域分布,页面用户 ...

  8. 前端js错误日志收集

    今天一个客户说他们的一个同事用OPPO R11的手机访问不了我们的项目,打开后一片空白,虽然后面发现你的手机网络断了,但是想起来毕竟手机端没有调试的工具可以查看抛出的错误信息,方便我们追踪问题,后端的 ...

  9. 运维开发实践——基于Sentry搭建错误日志监控系统

    错误日志监控也可称为业务逻辑监控, 旨在对业务系统运行过程中产生的错误日志进行收集归纳和监控告警.似乎有那么点曾相识?没错... 就是提到的“APM应用性能监控”.但它又与APM不同,APM系统主要注 ...

随机推荐

  1. (spring-第6回【IoC基础篇】)BeanDefinition——实例化Bean之前的第一大利器。

    上节讲了Bean实例化的内部机制,这里再复述一遍: ResourceLoader从系统中加载XML配置信息,并由Resource来表示. BeanDefinitionReader从Resource中读 ...

  2. css3 绘制优惠券

    今天偶然发现了一个css3制作动画的地方,发现css3的径向渐变好难理解,幸亏有这里的大神介绍http://www.daqianduan.com/5989.html,这是优惠券的介绍 还有这个http ...

  3. IOS 用正则表达式解析HTML等文件,得到所有文本

    获得网页内容 NSURL *url=[NSURL URLWithString:@"http://121.199.34.52/wordpress/?json=core.get_post_con ...

  4. NOIP2010 关押罪犯 (并查集)

    若x,y有关系 将x与y的补集, y与x的补集建立关系 ; maxm=; ..maxm,..] of longint; f:..maxn*] of longint; i,j,m,n,x,y,z:lon ...

  5. JQuery 实现倒计时

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. magento问题集

    magento产品页面价格出现2遍 In app\design\frontend\default\default\template\catalog\product\view\type\Simple.p ...

  7. java多线程向数据库中加载数据

    读取本地文件,每行为一条记录,文件大小550M,200万条数据.先将文件读取的内存中,再开启6个线程连接postgresql不同coordinator端口导入数据.代码如下: import java. ...

  8. Java BigInteger(大数,ACM比赛专用)

    用c或者C++处理大数比较麻烦,于是决心学习一下JAVA中大数运算. 先下载一个eclipse,具体的用法去问度娘吧 JAVA中有两个类BigInteger和BigDecimal分别表示大整数类和大浮 ...

  9. 简述HP iLO中的几种开关机选项

    ILO是intergrated Light-Out的缩写,是HP的远程管理功能,它可以实现远程开关机.远程安装.远程连接等功能. 笔者刚接触HP服务器时对四个关于开关机的选项非常困惑,不明其中区别.此 ...

  10. 图像处理之image stitching

    背景介绍 图像拼接是一项应用广泛的图像处理技术.根据特征点的相互匹配,可以将多张小视角的图像拼接成为一张大视角的图像,在广角照片合成.卫星照片处理.医学图像处理等领域都有应用.早期的图像拼接主要是运用 ...