You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
ReferenceError: thisIsAbug is not defined
at Object.makeError (http://localhost:7001/public/js/traceKit.min.js:1:9435)
at http://localhost:7001/public/demo.html:28:12
错误监控
前言
作为一个前端,在开发过程即便十分小心,自测充分,在不同用户复杂的操作下也难免会出现程序员意想不到的问题,给公司或个人带来巨大的损失。
这时一款能够及时上报错误和能够帮助程序员很好的解决错误的前端错误监控系统就必不可少了。
接下来我们就聊聊常见的错误发生与处理。
本文主要围绕以下几点讨论:
问题:
常见错误
可以阅读监控类库源码 errorWatch 来加深理解,也可以直接用于项目。
语法错误
例如,英文字符写成中文字符。一般容易在开发时被发现。
语法错误无法被
try
catch
处理同步错误
JS引擎在执行脚本时,把任务分块压入事件栈,轮询取出执行,每个事件任务都有自己的上下文环境,
在当前上下文环境同步执行的代码发生错误都能被
try
catch
捕获,保证后续的同步代码被执行。异步错误
常见的
setTimeout
等方法会创建新的事件任务插入事件栈中,待后续执行。所以
try
catch
无法捕获其他上下文的代码错误。为了便于分析发生的错误,一般利用
window.onerror
事件来监听错误的发生。它比
try
catch
的捕获错误信息的能力要强大。window.onerror
可以捕获常见语法、同步、异步错误等错误;window.onerror
无法捕获Promise
错误、网络错误;window.onerror
应该在所有JS脚本之前被执行,以免遗漏;window.onerror
容易被覆盖,在处理回调时应该考虑,被人也在使用该事件监听。网络错误
由于网络请求异常不会冒泡,应此需要在事件捕获阶段才能获取到。
我们可以利用
window.addEventListener
。比如代码、图片等重要CDN
资源挂了,能及时获得反馈是极为重要的。对于这类资源加载错误,在事件对象中能获得足够的信息,配合短信、钉钉等第一时间通知开发者。
window.onerror
与window.addEventListener
window.addEventListener
的好处,不怕回调被覆盖,可以监听多个回调函数,但记得销毁避免内存泄漏与错误。但无法获取
window.onerror
那么丰富的信息。一般只用window.addEventListener
来监控资源加载错误。Promise 错误
如果你在使用
promise
时未catch
的话,那么onerror
也无能为力了。同样你可以利用
window.onunhandledrejection
或window.addEventListener("unhandledrejection")
来监控错误。接收一个PromiseError对象,可以解析错误对象中的
reason
属性,有点类似stack
。具体兼容处理在 TraceKit.js 可以看到。
上报方式
img
上报ajax
上报ajax
应使用的类库而已,大同小异。img
请求有长度限制,数据太大最好还是用ajax.post
。补充
Script error
引用不同域名的脚本,如果没有特殊处理,报错误了,一般浏览器处于安全考虑,不显示具体错误而是
Script error
.例如他人别有用心引用你的线上非开源业务代码,你的脚本报错信息当然不想让他知道了。
如果解决自有脚本的跨域报错问题?
CDN
的优势。HTTP response header
中设置CORS
。Access-Control-Allow-Origin: You-allow-origin
;crossorigin
属性,例如<script src="http://www.xxx.com/index.js" crossorigin></script>
响应头和
crossorigin
取值问题crossorigin="anonymous"
(默认),CORS
不等于You-allow-origin
,不能带cookie
crossorigin="use-credentials"
且Access-Control-Allow-Credentials: true
,CORS
不能设置为*
,能带cookie
。如果
CORS
不等于You-allow-origin
,浏览器不加载 js。当你对自由能掌握的资源做好了
cors
时,Script error
基本可以过滤掉,不上报。讲了这么多,还有一个非常重要的主题,如何分析我能捕获的错误信息?
JavaScript 错误剖析
一个
JavaScript
错误通常由一下错误组成开发者可以通过不同方式来抛出一个JavaScript 错误:
推荐使用第二种,第三四种浏览器无法就以上两种方式生成追溯栈。
如果能解析每行追溯栈中的错误信息,行列在配合
SourceMap
不就能定位到每行具体源代码了吗。问题在于不同浏览器在以上信息给出中,并没有一个通用标准的格式。难点就在于解决兼容性问题。
例如
window.onerror
第五个参数 error 对象是2013年加入到WHATWG
规范中的。早期Safari 和 IE10还没有,Firefox是从14版本加入Error对象的,chrome 也是 2013 年才新加的。
推荐做法
window.onerror
是捕获JS 错误最好的方法,当有一个合法的Error对象和追溯栈时才上报。也可以避免一些无法干扰的错误,例如插件错误和跨域等一些信息不全的错误。
try catch
增强,抛出的错误信息较全,可以弥补window.onerror
的不足。但就像先前说过的,try catch
无法捕获异步错误和promise
错误,也不利用V8
引擎性能优化。例如腾讯的 BadJS,对以下推荐进行了
try catch
包裹具体是否需要做到如此细粒度的包裹,还是视情况而定。
SourceMap
例如有以下错误追溯栈(stack trace)
能够解析成一下格式
在有了行列和对应的
SourceMap
文件就能解析获取源代码信息了。解析结果
处理代码如下:
大家根据
SourceMap
文件的格式,就能很好的理解这段代码了。参考网站
The text was updated successfully, but these errors were encountered: