onerror及Error对象

最近弄前端的错误信息统计,顺带再了解一遍错误的相关事件。

1 onerror事件

onerror(GlobalEventHandlers.onerror)事件是error事件的事件处理程序。针对各种目标的不同类型的错误触发了Error事件:

  • 当JavaScript运行错误时(包括语法错误)发生时,window会触发一个ErrorEvent接口的error事件,并执行window.onerror()。
  • 当一项资源(如<img><script>)加载失败,加载资源的元素会触发一个Event接口的error事件,并执行该元素上的onerror()处理函数。这些error事件不会冒泡到window,不过能被单一的window.addEventListener捕获。

由于历史原因,window.onerror和element.onerror接受不同的参数。

window.onerror

语法:

1
2
3
window.onerror = function (message, source, lineno, colno, error) {
// ...
};

其中

  • message: String,错误信息。
  • source: String,发生错误的脚本URL。
  • lineno: Number,发生错误的行号。
  • colno: Number,发生错误的列号。
  • error:Error对象(后面会介绍)。

若该函数返回true,则阻止执行默认事件处理函数。

window.addEventListener(‘error’)

语法:

1
2
3
window.addEventListener('error', function (event) {
// ...
});

其中event包含有关事件和错误的所有信息。

element.onerror

语法:

1
2
3
element.onerror = function (event) {
// ...
};

其中event包含错误的所有信息。

解决onerror的跨域问题

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

解决:

  • 相关的js文件上加上Access-Control-Allow-Origin: *的response header(必须)
  • 引用相关的js文件时加上crossorigin属性(必须)

2 Error对象

当运行时错误产生时,Error的实例对象会被抛出,此外通过Error的构造器也可以创建一个错误对象。

构建

语法:

1
new Error([message [, fileName [, lineNumber]]]);

其中

  • message:可阅读的错误描述信息。(可选)
  • fileName: 被创建的Error对象的fileName属性值。默认是调用Error构造器代码所在的文件的名字。(可选)
  • lineNumber: 被创建的Error对象的lineNumber属性值。默认是调用Error构造器代码所在的文件的行号。(可选)

其他

除了通用的Error构造函数外,JavaScript还有6个其他类型的错误构造函数。

  • EvalError、InternalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError