错误事件侦听器未处理负载资源错误答案

【问题标题】：Error event listener not handling load resource errors错误事件侦听器未处理负载资源错误
【发布时间】：2019-11-07 16:04:42
【问题描述】：

我到处寻找，但找不到有用的东西。这真的让我很恼火，因为我实际上在几周前测试了我正在做的事情，然后它就奏效了。

这是我的代码：

var error_handler = function(e) {
    console.error(e);
    e.preventDefault();
}
window.addEventListener('error', error_handler);

这适用于处理错误，但它不能处理这样的错误：

Failed to load resource: the server responded with a status of 404 ()

当我之前编写代码时，它确实发现了这些错误。知道我在这里做错了什么吗？

【问题讨论】：

此错误消息是否在页面加载之前出现？
抛出 404 的原因是什么？似乎不是 JavaScript 错误。
@bflemi3 不，事件侦听器能够拾取之前发生的错误。
@epascarello 这是一个 JavaScript 错误，它正在发生，因为我正在尝试加载一个不存在的脚本。错误本身并不困扰我，我确切地知道是什么原因造成的，我关心的是有一个错误处理程序来处理它。
head中是否引用了资源？

标签： javascript error-handling http-status-code-404 addeventlistener

【解决方案1】：

加载外部文件不是 JavaScript 错误，因此除非错误来自试图执行的脚本文件，否则不会被捕获。您可以将错误事件添加到脚本标记，但您不会从中获取错误消息。

function handleError(evt){
  console.log(evt);
}

var scr = document.createElement("script");
scr.src="error.js";
scr.onerror = handleError
document.body.appendChild(scr);

【讨论】：

【解决方案2】：

当资源（例如<img> 或<script>）加载失败时，使用接口Event 的错误事件会在启动加载的元素上触发，并调用元素上的onerror() 处理程序。这些错误事件不会冒泡到窗口，但可以通过将useCapture 设置为true 的EventTarget.addEventListener 进行处理。

更多详情请参考documentation

【讨论】：