Skip to content

Instantly share code, notes, and snippets.

@neekey
Last active July 31, 2020 10:14
Show Gist options
  • Save neekey/4371159 to your computer and use it in GitHub Desktop.
Save neekey/4371159 to your computer and use it in GitHub Desktop.
浏览器错误捕捉总结

捕捉浏览器中的JS运行时错误,主要通过监听window.onerror来实现。但是对于不同的脚本执行方式以及不同的浏览器,能捕获到的信息会有区别。

window.onerror 讲接收3个参数:

  • msg:错误描述,比如:a is not defined
  • url:出错脚本所在的url
  • lineNumber:出错脚本的行数

本文将对不同浏览器和不同的脚本执行方式进行测试,并总结这些区别。

首先对于脚本的执行主要有下面几种:

  • 页面内嵌的<script>,需要执行的代码在<script>标签内
  • 使用<script src="external.js">的方式引入外部脚本,脚本为同域地址
  • 使用<script src="external.js">的方式引入外部脚本,脚本为不同域地址
  • 使用<script src="external.js">的方式引入外部脚本,脚本为本地地址
  • 使用eval方法来执行脚本
  • 动态地创建内嵌的<script>并设置其innerHTML为需要执行的代码

下面列一下各浏览器对与上面集中脚本执行的捕获情况(Markdown对于table的支持不是很好,我是直接在页面上copy HTML进来的,维护可以看下 https://www.evernote.com/shard/s43/sh/a36fc90e-9f72-43b5-8710-1476340d14ac/1160f515582d297f22f495924ba10d3d )

Chrome (23.0.1271.101)


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script
msg

✗(only Script error)
✗(only Script error)


url ✓(current page)

✗("")
✗("")
✓(current page)
✓(current page)
lineNumber ✓(from current page)

✗(0)
✗(0)
✓(from code)
✓(from its code)

Firefox (16.0.2)


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script
msg

✗(only Script error)
✗(only Script error)


url ✓(current page)



✓(file that call this eval)
✓(current page)
lineNumber ✓(from current page))

✗(0)
✗(0)
✓(position that calls this eval)
✓(from its code)

Safari (6.0.2 (8536.26.17))


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script
msg

✗(only Script error)



url ✓(current page)



✗(undefined)
✓(current page)
lineNumber ✓(from current page)

✗(0)

✓(from code)
✓(from its code)

Opera (12.11)


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script
msg

✗(only Script error)
-

url ✓(current page)

✗("")
- ✗("")
✓(current page)
lineNumber ✓(from current page)

✗(0)
- ✓(from code)
✓(from its code)

IE9


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script
msg





url ✓(current page)



✓(file path that call this eval)
✓(current page)
lineNumber ✓(from current page)



✓(position that calls this eval)
✓(from its code)

IE8


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script(not available)
msg




-
url ✓(current page)



✓(file path that call this eval)
-
lineNumber ✓(from current page)



✓(position that calls this eval)
-

IE7


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script(not available)
msg




-
url ✓(current page)



✓(file path that call this eval)
-
lineNumber ✓(from current page)



✓(position that calls this eval)
-

IE6


page script external script ( same origin ) external script ( cross domain ) external script ( local ) eval dynamic page script(not available)
msg




-
url ✓(current page)
✓(current page)
✓(current page)
✓(current page)
✓(current page)
-
lineNumber ✓(from current page)
✓(line number start from 1)
✓(line number start from 1)
✓(line number start from 1)
✓(position that calls this eval,line number start from 1)
-
@kylinzhao
Copy link

感谢分享。

最近也在公司项目上上了一个错误捕捉的系统,不过我这边的程序都属于external的并且不同域的JS文件,目前能捕获到的错误信息大量都是“对象不支持此属性或方法”、“Script error.” 此类,在代码被压缩的情况下很难定位,不知道您是否对此类错误有研究,希望博主能分享一下此类情况的查错经验,感激不尽。

@kylinzhao
Copy link

QQ:515197988 or 微博: Mr__OK

希望不吝赐教,非常感谢

@lin04com
Copy link

@kylinzhao 一样,错误统计里面80%左右都是“对象不支持此属性或方法”、“Script error.” 、"缺少对象",无从下手了。。。

@mopduan
Copy link

mopduan commented Mar 21, 2014

IE6等低版本确实很难捕捉到有效的信息,更大的作用可能是通过监控来发现哪个页面报错,有利于快速修复

@fanky-c
Copy link

fanky-c commented Apr 15, 2016

跨域解决方是有:前端script 要增加crossorigin属性(只兼容谷歌 火狐等现代浏览器,低版本ie好像没跨域问题),服务器那边要运行Access-Control-Allow-Origin:*

@dalinna
Copy link

dalinna commented Jul 22, 2017

我现在能获得错误信息,但是无法获得错误文件地址,在chrome上,您遇到过吗?

@gaterking
Copy link

@dalinna 我在chrome上都是script error,包括同源的外链脚本(除了inline的脚本外)

@Yalhu
Copy link

Yalhu commented May 9, 2018

页面嵌了一个iframe,是跨域的。 iframe中引用的脚本,里面有报错,怎么监听啊?
现在能在控制台中看到错误输出,地址也是iframe中引用的脚本报错。 我在iframe和top页面,都没监测到错误消息

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment