任何没有被try/catch 语句处理的错误都会在window 对象上触发error 事件。该事件是浏览器
早期支持的事件,为保持向后兼容,很多浏览器保持了其格式不变。在onerror 事件处理程序中,任何
浏览器都不会传入event 对象。相反,会传入3 个参数:错误消息、发生错误的URL 和行号。大多数情
况下,只有错误消息有用,因为URL 就是当前文档的地址,而行号可能指嵌入JavaScript 或外部文件中的
代码。另外,onerror 事件处理程序需要使用DOM Level 0 技术来指定,因为它不遵循DOM Level 2 Events
标准格式:
window.onerror = (message, url, line) => {
console.log(message);
};
在任何错误发生时,无论是否是浏览器生成的,都会触发error 事件并执行这个事件处理程序。
然后,浏览器的默认行为就会生效,像往常一样显示这条错误消息。可以返回false 来阻止浏览器默
认报告错误的行为,如下所示:
window.onerror = (message, url, line) => {
console.log(message);
return false;
};
通过返回false,这个函数实际上就变成了整个文档的try/catch 语句,可以捕获所有未处理的
运行时错误。这个事件处理程序应该是处理浏览器报告错误的最后一道防线。理想情况下,最好永远不
要用到。适当使用try/catch 语句意味着不会有错误到达浏览器这个层次,因此也就不会触发error
事件。
图片也支持error 事件。任何时候,如果图片src 属性中的URL 没有返回可识别的图片格式,就
会触发error 事件。这个事件遵循DOM格式,返回一个以图片为目标的event 对象。下面是个例子:
const image = new Image();
image.addEventListener(“load”, (event) => {
console.log(“Image loaded!”);
});
image.addEventListener(“error”, (event) => {
console.log(“Image not loaded!”);
});
image.src = “doesnotexist.gif”; // 不存在,资源会加载失败
在这个例子中,图片加载失败后会显示一个alert 警告框。这里的关键在于,当error 事件发生
时,图片下载过程已结束,不会再恢复。
错误处理策略
过去,Web 应用程序的错误处理策略基本上是在服务器上落地。错误处理策略涉及很多错误和错误
处理考量,包括日志记录和监控系统。这些主要是为了分析模式,以期找到问题的根源并了解有多少用
户会受错误影响。
在Web 应用程序的JavaScipt 层面落地错误处理策略同样重要。因为任何JavaScript 错误都可能导致
网页无法使用,所以理解这些错误会在什么情况下发生以及为什么会发生非常重要。绝大多数Web 应
用程序的用户不懂技术,在碰到页面出问题时通常会迷惑。为解决问题,他们可能会尝试刷新页面,也
可能会直接放弃。作为开发者,应该非常清楚自己的代码在什么情况下会失败,以及失败会导致什么结
果。另外,还要有一个系统跟踪这些问题。
04-09
1188
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-27
2063
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-01
209
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)