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


Posted in Javascript onMarch 14, 2013

可能由于网络、浏览器问题、缓存等原因,可能导致线上执行 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 prototype原型操作笔记
Dec 07 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 Javascript
javascript写的日历类(基于pj)
Dec 28 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
javascript中arguments,callee,caller详解
Mar 16 Javascript
jQuery获取select选中的option的value值实现方法
Aug 29 Javascript
JSON 对象未定义错误的解决方法
Sep 29 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
详解webpack+es6+angular1.x项目构建
May 02 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 #Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 #Javascript
document.createElement()用法
Mar 13 #Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 #Javascript
九种js弹出对话框的方法总结
Mar 12 #Javascript
瀑布流布局并自动加载实现代码
Mar 12 #Javascript
You might like
php 短链接算法收集与分析
2011/12/30 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
js中的cookie的读写操作示例详解
2014/04/17 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
javascript图片预加载实例分析
2015/07/16 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
JavaScript中双向数据绑定详解
2017/05/03 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
python怎么提高计算速度
2020/06/11 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
HTML5 用动画的表现形式装载图像
2016/03/08 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
百思买美国官网:Best Buy
2016/07/28 全球购物
德国网上宠物店:Zoobio
2018/05/23 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
公关关系专员的自我评价分享
2013/11/20 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
学法用法心得体会(2016推荐篇)
2016/01/21 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
编写python程序的90条建议
2021/04/14 Python
go语言中fallthrough的用法说明
2021/05/06 Golang