关于javascript错误捕获

```

javascript的出错我们应该都很熟悉,例如`xxx undefined`,`SyntaxError`等。

我们team将出现错误的javascript代码取名为badjs,也有一个开源的badjs项目,用于捕获和分析js错误,并提供了一些基础的报表数据分析。


#### 捕获错误一般有两种方式:

* 使用window.onerror()捕获全局的js错误信息
* 使用`try{...}catch(e){...}`包裹需要执行的代码,获取error对象的属性定位错误并上报


第一种方式最简单,但当执行的js代码和我们的站点在不同域即跨域时,由于浏览器的安全限制,onerror()方法只能捕获到一个固定的错误代码`Script error.`。
具体可参考这里:[点击查看](http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#runtime-script-errors)

我们团队目前的业务基本都会将静态资源部署到cdn服务器,和站点处于不同域,所以需要解决跨域问题。

跨域问题可以通过服务器端设置`access-control-allow-orgin:*`解决,但并不完美。这个问题更深入的信息可以参考这里:https://github.com/BetterJS/badjs-report/issues/3

第二种方式是手动包裹一些要检测的代码,没有跨域问题并且可以获取到err的对象的详细出错信息。
这种方式相对麻烦一些,但可以通过全局的hook,处理大部分情况,免除每次手动写try...catch的烦恼。

我们都知道js代码的执行是通过事件和定时器触发执行的,所以理论上将事件触发时的回调、定时器的回调包裹即可。

我们的badjs项目主要是通过第二种方式实现,并根据现有的业务,对以下几种方法进行了处理:

* `define()`,`require()`等方法
* jQuery封装的一些事件,如`$.event.add`,`$.event.remove`,ajax等
* setTimeout setInterval等

这里处理的原理比较简单,类似下面的代码:

function define(){ ... } var a = define; define = function(){ try{ a.apply(this,arguments); }catch(e){ ...错误上报 } };

这里还有一些兼容性的问题需要处理,例如在ie低版本中setTimtout和setInterval方法并不是`function`类型,而是`object`,所以无法使用改写`function`的方式进行包裹。类似的还有`document.attachEvent`方法也是`object`,不是`function`。


除了对以上方法的单独处理外,还有一些意外情况无法处理,例如:

* window.onload,Image.prototype.onerror等浏览器和dom的事件,这类方法无法直接改写function
* 第三方的插件的自定义事件,如flash播放器提供的一些用于播放控制的事件。
* 新的一些api,如FileReader.prototype.onload等

这些意外情况很难做全局的hook,所以只好手动try...catch。
我们的badjs也提供了一个便捷的api,例如源代码是这样:

var img = new Image(); img.onload = function(){ ... };

使用tryjs包裹

var img = new Image(); img.onload = tryJs.spyCustom(function(){ ... }); ```

除此之外,try...catch能获取的err对象在各不同的浏览器之间,也有一些差异。好在有人已经做一个页面展示详细的差异,参考url: http://broofa.com/tests/ErrorProperties.htm。

一些其他的补充

回到捕获js错误这件事本身,是为了更好的监控并定位错误,帮助我们改善代码质量,所以kael也提到另外一个思路,可以灰度一部分用户,直接使用主域而不是cdn的js,直接避免跨域问题,这个思路也值得一试。

另外,错误上报数据和访问量等数据如果到结合一起分析,不仅可以更快速的定位问题,甚至可以实现监控自动告警等,当然这个也非常复杂。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Fundebug

2020年如何写一个现代的JavaScript库

我写过一些开源项目,在开源方面有一些经验,最近开到了阮老师的微博,深有感触,现在一个开源项目涉及的东西确实挺多的,特别是对于新手来说非常不友好

954
来自专栏IMWeb前端团队

mvvm学习&vue实践小结

1 mvvm 学习 1.1 实现原理 mvvm类框架的实现原理不复杂,大致如下: 模板分析得到依赖的属性 通过某种变动监测手段监测这些依赖的属性 当属性变动的时...

2189
来自专栏屈定‘s Blog

Angular2学习记录-给后端程序员的经验分享

前几天刚下定决心把毕业设计改造下,因为毕业设计算是我学习的基石,学习到的东西都尽可能的在这个平台上施展,锻炼自己.改造为前后端分离,前端使用angular2,后...

452
来自专栏阮一峰的网络日志

文件上传的渐进式增强

文件上传是最古老的互联网操作之一。 20多年了,它几乎没变,还是原来的样子:操作麻烦、缺乏交互、用户体验不佳。在这个新技术日新月异的时代,显得非常落伍。 ? 网...

3466
来自专栏小灰灰

Quick-Task 动态脚本支持框架之使用介绍篇

文章链接:https://liuyueyi.github.io/hexblog/2018/07/19/180719-Quick-Task-动态脚本支持框架之使用...

672
来自专栏北京马哥教育

黑客们会用到哪些Python技术?

学Python最简单的方法是什么?推荐阅读:Python开发工程师成长魔法 Python已经成为漏洞开发领域的行业标准,读者会发现大多数概念验证工具都是用Pyt...

5648
来自专栏Jerry的SAP技术分享

Jerry和您聊聊Chrome开发者工具

Chrome开发者工具是Jerry日常工作使用的三大调试器之一。虽然工具名称前面带了个"开发者", 但是它对非开发人员仍然有用。不信?

3553
来自专栏枕边书

代码迁移之旅(二)- 渐进式迁移方案

说在前面 这是代码迁移的第二篇文章,也是最后一篇了,由于个人原因,原来的迁移我无法继续参与了,但完整的方案我已经准备好了,在测试环境也已经可以正常进行了。 上篇...

1738
来自专栏大魏分享(微信公众号:david-share)

实战:Bean的数据完整性验证方法| 从开发角度看应用架构11

Java应用程序将数据存储在Java对象中。这些Java对象通过网络,作为参数传递给方法,并存在于Java EE应用程序的不同层中。为了保持数据完整性,数据验证...

1003
来自专栏听雨堂

VB下中文URL编码问题的解决

        因为编码涉及的内容既多且烦,特别是vb的编码,又有诸多限制,所以在解决URL中文编码的时候走了很久的弯路。 问题:         我的VB...

3016

扫码关注云+社区