处理 JS 异常的一个想法

标签: js error stacktrace JavaScript | 发表时间:2012-12-21 17:30 | 作者:sofish
出处:http://sofish.de

可能由于网络、浏览器问题、缓存等原因,可能导致线上执行 js 的时候与开发环境并不一样,会抛出异常。js 异常基本上是前端开发工程师的家常便饭。如何记录,并使用它,却很少人关注。最近在考虑一个想法,基本上涉及到两步:收集和使用。

一、收集

对于 error 收集这一块,还是比较方便的,因为在各浏览器中都有一个接口: window.onerror

window.onerror = function(errorMessage, scriptURL, lineNumber) {
  alert(errorMessage, scriptURL, lineNumber)
}

甚至中提供了 Stack Trace,比如在 try/catch 中还提供了 e.stack(各个浏览器不同,可以使用 eriwen/javascript-stacktrace 这个兼容库),试一下下面这段代码:

try {
  fn()
} catch(e) {
  alert(e.stack)
}

所以收集这些错误还是比较方便的,这里需要注意的事,使用 window.addEventListener('error', callback, isBubble)callback 的第一个参数并不是 event,而是一个 Error object。这样的话,为了方便,使用 window.onerror 是一个不错的选择,但通过 dot 操作符监听的事件是可以重载的,并且这段监听脚本理论上是放在所有 js 最前面的,所以需要考虑其中的风险。

二、使用

之前在支付宝的时候,线上 js 报错会变成一个邮件,发给前端开发 team,每个人自己认领、解决。其实这是一个不错的选择,也解决了最基本的问题:立即响应,修掉。不过也存在着一个问题,如果避免同样的错误?我的初步想法是这样的:

  • 以 URL 为单元,记录同一个页面的报错:方便统一解决
  • 记录错误包括:Page URL, User Agent, Script URL, Error Message 和 Line Number
  • 每个错误解决后,都可以在一个地方写解决方案,看到的人可以评论、加分,最终会存档起来,作为一个知识库,并用有方便的 api 可以使用这些知识库的内容
  • 在开发的时候,相同页面 window.onerror 的时候,通过插件,分析 Error Message 识别出类型,加上 URL 的判断,给予开发者提醒前人犯过的错误
  • 开发者可以订阅知识库上某些标签,自动接收邮件(当然也可以根据文件注释、mapping 等方式做更好的配对)

为什么这样做?主要是为了解决下面的一些问题:

  • 形成知识库,开发者可以从中得到学习,特别是新人
  • 工具保证效率的提升和避免重复错误重复解决
  • 订阅保证通知更具针对性

三、注意点

1. 收集的时候使用 POST 发送

有时候 Error Message 可能会比较长,而浏览器的 URL 长度是有限制的,如果存的错误不多的话,可以考虑用 GET 发送,但通常来说 POST 可以把所有数据都发送到后台。

2. 何时发送数据

建议在触发 onerror 的时候发送。在第一次有这个想法的时候,尝试着在 onbeforeonload 的时候发送,但 POST 请求还没 open 就已经被浏览器中断了。

3. 存于数据库以哪个作为索引比较好?

通常来说以 URL 可能会比较适合多数网站。但像百姓网、淘宝等 UGC 比较多的网站,可能需要变通一下以记录 URL。毕竟不同帖子不同 URL 都是同一套代码。

那以 Error 作为索引呢?其实无论是那种,看自己需求选择吧。

4. 是否记录所有错误

这个也比较合适根据需求来看。百姓网有各种乱七八糟的报错可能都是来自到 baidu / Google 的 ad 外链。

四、结语

目前初步实现了一个收集的工具( sofish/stacktrace.js)和 存储方式(以 URL 为索引),是否继续,还需要时间和进一步考虑,先发出来,抛砖引玉。

五、附录

相关 [js 异常 想法] 推荐:

处理 JS 异常的一个想法

- - 幸福收藏夹
可能由于网络、浏览器问题、缓存等原因,可能导致线上执行 js 的时候与开发环境并不一样,会抛出异常. js 异常基本上是前端开发工程师的家常便饭. 如何记录,并使用它,却很少人关注. 最近在考虑一个想法,基本上涉及到两步:收集和使用. 对于 error 收集这一块,还是比较方便的,因为在各浏览器中都有一个接口: window.onerror:.

WebView JS 交互

- - ITeye博客
WebView加jquery做页面会怎么样呢. // 创建WebView对象. // 把programList添加到js的全局对象window中,. // 这样就可以使用window.programList来获取数据. * 定义js回调java函数. // 绑定键盘的向上,向下按钮事件触发相应的js事件.

JS游戏引擎

- 米随随 - HTML5研究小组
If you don’t have anything better to do and want to help fellow redditors interested in JS game dev out, feel free to fork the list and modify it as you like.

來源請求.js

- 红烧鲤鱼 - Blog: timdream
很早以前就想講了,但講了大概又會被戰. 相較於英文維基百科,中文維基百科在社會和歷史條目充滿了 systemic bias. 但是那些主觀論述又不是編輯者有意加進去的,而是某種編輯者存在的社會所給予的暗示(Inception?)與集體共識,而不是原本百科全書應該有的可驗證的事實. 因為是暗示又是共識,所以有自覺的百科編輯者反而是少數;中文維基只好長成現在這個樣子了.

Js删除节点

- - JavaScript - Web前端 - ITeye博客
 方式一:传this参数调用方法:.  方式二:js方法中通过选择器获取节点:. //此处删除的是a节点 }. 方式三:通过jQuery方式获取节点:(尚未测试,有待测试. 此处a标签传this到js中,js通过this(即a节点)取parent(即p节点). (1)p.remove();可直接删除整个p节点.

JS游戏引擎列表

- sku - 酷壳 - CoolShell.cn
这里有一个网址收集了关于JS游戏引擎开发库的一个列表,转过来. 关于使用JS和HTML5做的一些小游戏,可参见《HTML5 小游戏展示》. Name Latest Release License Type Notes The Render Engine 1.5.3 MIT 跨浏览器; 大规模 API; 开源. 2 gameQuery 0.5.1 CC BY-SA 2.5 和 jQuery 一起使用 gTile 0.0.1 Tile based.

Deck JS: HTML5 幻灯片

- L - LinuxTOY
Deck.js 是一组开源的 JavaScript 类库,方便使用现代的 HTML5/CSS3/JS 技术创建幻灯片. 该软件十分适用于开源项目介绍,交互式的方式比单纯的文字说明更简洁易懂. 不废话了,赶紧前往该项目主页去体验 HTML5 时代的幻灯片吧. 分类: Productivity |. 收藏到 del.icio.us |.

JS三维模型库 Three.js

- Le - 开源中国社区最新软件
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象. 你可以在它的主页上看到许多精采的演示. 不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏) 演示:http://mrdoob.github.com/three.js/.

js Grid - 列表插件

- Bloger - 博客园-首页原创精华区
     js Grid - 列表插件.     1)Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后,缩略图会翻转,然后显示更多信息.      2)TableTree4J 是一个开源的基于javascript的树状菜单和表格控件,实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单.

Three js入门教程

- - 译言-电脑/网络/数码科技
译文来源: http://www.21haolou.com/articles/show/140. 我在自己的一些实验性项目中运用了 Three.js,它在处理浏览器3D效果方面表现优异. 通过Three js,你可以创建镜头(Cameras),物体(objects),光线(lights),材质(materials)等等,你还可以选择渲染器:可以使用HTML5的Canvas来绘制场景,也可选择使用WebGL或是SVG来渲染.