window.onerror的总结

作者: poxiao 分类: Javascript 发布时间: 2019-06-19 23:08

我们知道前端js错误监控主要是利用了window.onerror函数来实现,onerror函数会在页面发生js错误时被调用。

我们可以看到函数正常是可以收集到错误字符串信息、发生错误的js文件,错误所在的行数、列数、和Error对象(里面会有调用堆栈信息等)。

我们只需要把这些信息回传到server端即可,再配合sourcemap的话我们就可以知道是源码中的哪一行出错了,从而实现完美的错误实时监控系统了。然而要完美还是需要做很多工作的。

首先,我们的js文件一般都是和网站不同域的,这是为了提高页面的渲染速度以及架构的可维护性(单独CDN域名,充分利用浏览器http并发数)。这样的js文件中发生错误我们直接监控你会发现你啥信息都收集不到。

实验一:我们的站点是a.com,页面中引用了两个js文件,一个是a.com域名下的a.js,一个是b.com域名下的b.js,我们在a.js文件中添加window.onerror监控,在b.js文件中主动抛出错误

我们可以看到下图的结果,onerror函数拿到的信息是Script error, a 0 null,啥卵用都没有,你完全不知道发生了什么错误,哪个文件发生的错误。

这是浏览器所做的安全限制措施,当加载自不同域(协议、域名、端口三者任一不同)的脚本中发生语法(?)错误时,为避免信息泄露,语法错误的细节将不会报告,而代之简单的“Script error.”

但是我们确实是需要知道发生错误的具体信息啊,不然监控就没有意义了。既然又是类同源限制的问题,那肯定是可以通过CORS来解决了。

实验二:我们给b.js加上Access-Control-Allow-Origin:*的response header,后面我们会发现还是没啥变化。

实验三:我们继续给b.js加上crossorigin属性,发现可以了,想要的信息都收集到了,nice

结论:如果想通过onerror函数收集不同域的js错误,我们需要做两件事:

  1. 相关的js文件上加上Access-Control-Allow-Origin:*的response header
  2. 引用相关的js文件时加上crossorigin属性

注意: 以上两步缺一不可。实验二告诉我们,如果只是加上Access-Control-Allow-Origin:*的话,错误还是无法捕获。如果只加上crossorigin属性,浏览器会报无法加载的错误,如下图

可是。。。
如果你使用sentry的raven.js的话,你会发现你什么都不用做,他依然可以帮你捕获到一些错误的非常具体信息,确实是有点神奇啊,具体怎么做的?关键就是raven源码中的install方法中调用的_instrumentTryCatch函数起了作用,他通过tryCatch的方式wrap了一些关键函数,使得这些函数里的报错能够捕获,_instrumentTryCatch的具体实现原理我们后面再说

其实如果你真的什么都不做,raven也只是能捕获一些异步错误,同步错误还是无法捕获,所以你即使使用了sentry等第三方的错误收集库,你还是需要加上Access-Control-Allow-Origin:*和crossorigin属性

参考文献:
GlobalEventHandlers.onerror
What the heck is “Script error”?

来源:https://www.jianshu.com/p/315ffe6797b8

 

 

 

本文链接:window.onerror的总结

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:破晓(http://www.code2048.net),谢谢!^^


如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注