JS异常处理的一个想法(sofish)

 更新时间:2013年03月14日 09:40:05   作者:  
由于网络、浏览器问题、缓存等原因执行js的时候会抛出异常接下来分享一个想法,基本上涉及到两步:收集和使用,感兴趣的你可以参考下哈,希望对你有所帮助

可能由于网络、浏览器问题、缓存等原因,可能导致线上执行 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)和存储方式,是否继续,还需要时间和进一步考虑,先发出来,抛砖引玉。

相关文章

  • javascript的闭包介绍(司徒正美)

    javascript的闭包介绍(司徒正美)

    今天又在无忧看到闭包的使用了,整理一下闭包的东西。
    2011-09-09
  • 起点页面传值js,有空研究学习下

    起点页面传值js,有空研究学习下

    起点上的页面传值js,有空研究下
    2010-01-01
  • 前端算法题解leetcode114二叉树展开为链表

    前端算法题解leetcode114二叉树展开为链表

    这篇文章主要为大家介绍了前端算法题解leetcode114二叉树展开为链表,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • async/await让异步操作同步执行的方法详解

    async/await让异步操作同步执行的方法详解

    这篇文章主要给大家介绍了关于async/await让异步操作同步执行的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用async/await具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • JS随机洗牌算法之数组随机排序

    JS随机洗牌算法之数组随机排序

    这篇文章主要介绍了JS随机洗牌算法之给数组随机排序的相关资料,需要的朋友可以参考下
    2016-03-03
  • 随机生成10个不重复的0-100的数字(实例讲解)

    随机生成10个不重复的0-100的数字(实例讲解)

    下面小编就为大家带来一篇随机生成10个不重复的0-100的数字(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS从非数组对象转数组的方法小结

    JS从非数组对象转数组的方法小结

    这篇文章主要给大家介绍了关于JS从非数组对象转数组的一些方法,分别是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object.values(obj)等方法的详细实现方法,需要的朋友可以参考下。
    2018-03-03
  • JS实现可移动模态框

    JS实现可移动模态框

    这篇文章主要为大家详细介绍了JS实现可移动模态框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript支持firefox,ie7页面布局拖拽效果代码

    javascript支持firefox,ie7页面布局拖拽效果代码

    javascript 拖拽 页面拖拽 拖拽效果的页面 超级拖拽 javascript支持firefox,ie7页面布局拖拽效果代码 鼠标拖拽
    2007-12-12
  • JS中完美兼容各大浏览器的scrolltop方法

    JS中完美兼容各大浏览器的scrolltop方法

    最近用到scrolloTop()想去获取滚动条距离顶部的距离,结果只有chrome下面可以正常的获取scrollTop,ff和ie下这个值都等于0,使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题,今天我们就来详细探讨下。
    2015-04-04

最新评论