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

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

赞 (0)

相关推荐

  • JS中的异常处理方法分享

    js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要不用户体验不好) 复制代码 代码如下: window.onerror=function(){return true;} 下面是为了获取js异常信息,方便开发者找回问题 1,try...catch... 复制代码 代码如下: <script type="text/javascript">var txt=""function message(){try   {   adddlert

  • js异常捕获方法介绍

    复制代码 代码如下: <script type="text/javascript"> try{ ...some code... }catch(e){ ...some code... //处理错误 throw(e.name); //抛出异常 }finally{<BR> // 完成后执行的语句块,非必须<BR>} </script> javascript Error 对象: name: 错误名称number: 错误号description:

  • js中的异常处理try...catch使用介绍

    在JavaScript可以使用try...catch来进行异常处理.例如: 复制代码 代码如下: try { foo.bar();} catch (e) { alert(e.name + ": " + e.message);} 目前我们可能得到的系统异常主要包含以下6种: EvalError: raised when an error occurs executing code in eval() RangeError: raised when a numeric variable o

  • 跟我学习javascript解决异步编程异常方案

    一.JavaScript异步编程的两个核心难点 异步I/O.事件驱动使得单线程的JavaScript得以在不阻塞UI的情况下执行网络.文件访问功能,且使之在后端实现了较高的性能.然而异步风格也引来了一些麻烦,其中比较核心的问题是: 1.函数嵌套过深 JavaScript的异步调用基于回调函数,当多个异步事务多级依赖时,回调函数会形成多级的嵌套,代码变成 金字塔型结构.这不仅使得代码变难看难懂,更使得调试.重构的过程充满风险. 2.异常处理 回调嵌套不仅仅是使代码变得杂乱,也使得错误处理更复杂.这

  • JSP上传图片产生 java.io.IOException: Stream closed异常解决方法

    在做 jsp 上传图片时,把 java 代码直接改成 jsp,上传时产生 如下异常: 2012-12-31 8:59:21 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.service() for servlet jsp threw exception java.io.IOException: Stream closed ... 百思不得其解,翻出 jsp 转成 servlet 后的代码.如下(很很的醒目一下):

  • 详解JavaScript中的异常处理方法

    有三种类型的编程错误:(1)语法错误和(2)运行时错误(3)逻辑错误: 语法错误: 语法错误,也被称为解析错误,在编译时进行传统的编程语言,并出现在JavaScript解释时. 例如,下面一行将导致一个语法错误,因为它缺少一个右括号: <script type="text/javascript"> <!-- window.print(; //--> </script> 当一个语法错误在JavaScript中出现,只有在同一个线程中包含的语法错误的影响

  • javascript 异常处理使用总结

    javascript 异常处理使用总结

    JavaScript中的异常可以用try..catch..finally语句来处理,也可以手动的来抛出异常. 1.使用try..catch..finally语句来处理异常 js代码在执行过程中如果出现异常,会手动创建一个异常类对象,该异常类对象将被提交给浏览器,这个过程称为"抛出异常".当浏览器接收到一场对象时,会寻找能处理这一异常的代码并把当前异常对象提交给其处理,这一过程被称为"捕获异常".try..catch..finally语句的基本语法格式为: 复制代码

  • 详解js前端代码异常监控

    详解js前端代码异常监控

    阅读目录 什么是前端代码异常 window.onerror 写一个js报错的上报库 注意点: 缺点: 在平时的工作,js报错是比较常见的一个情景,尤其是有一些错误可能我们在本地测试的时候测试不出来,当发布到线上之后才可以发现,如果抢救及时,那还好,假如很晚才发 现,那就可能造成很大的损失了.如果我们前端可以监控到这种报错,并及时上报的话,那我们的问题就比较好解决了.所以我们今天来聊聊前端代码的异常监控 什么是前端代码异常  一般语法错误以及运行时错误,浏览器都会在console里边体现出错误信息

  • JavaScript中的异常捕捉介绍

    与Java语言相同,JavaScript可以通过throw语句来抛出异常.与Java语言不同的是,JavaScript中可以通过throw语句抛出所有类型的值,而不仅止于抛出错误对象. 复制代码 代码如下: //Throw an Error object. try{   throw new Error("Message in Error Object"); }catch(e){     console.log(e);//Error: Message in Error Object }

  • tomcat6下jsp出现getOutputStream() has already been called for this response异常的原因和解决方法

    1.在tomcat6.0下jsp出现getOutputStream() has already been called for this response异常的原因和解决方法 在tomcat6.0下jsp中出现此错误一般都是在jsp中使用了输出流(如输出图片验证码,文件下载等),没有妥善处理好的原因. 具体的原因就是: 在tomcat中jsp编译成servlet之后在函数_jspService(HttpServletRequest request, HttpServletResponse res

随机推荐