Leí este artículo de Ben Nadel sobre cómo aprovechar la fase de captura para capturar errores del evento de onload del elemento img , ya que mencionó que el evento de error no aparece.

Entonces lo que hizo fue

 refs.body.addEventListener( "error", handleErrorCapture, // According to the DOM (Document Object Model) specification, the ERROR and // LOAD events for Images do not BUBBLE up through the DOM tree. As such, we // have to use the CAPTURE phase, which starts at the top of the DOM and // descends down into the DOM toward the target element. true );

Mi primera pregunta es, ¿por qué no consideró usar window.onerror para capturar los errores? Parece que sería mucho más fácil.

Luego probé el mismo enfoque con un botón que, cuando se hacía clic más de 5 veces, arrojaba un error en su controlador onclick . Y luego adjunté un detector de eventos de error en document.body para capturar los eventos en la fase de captura de la propagación de eventos, tal como lo hizo el artículo.

 const btn = document.querySelector("#btn"); btn.addEventListener("click", () => { btn.textContent = Number(btn.textContent) + 1; if (Number(btn.textContent) > 5) { throw new Error("lol"); // 💣 } }); document.body.addEventListener( "error", function (event) { // 👇 this doesn't work console.log("Got an uncaught error: in body", event.error); }, true );

Sin embargo, no parece ser capaz de capturar los eventos de error. Entonces mi segunda pregunta es ¿por qué esto no funciona?

Finalmente, si adjunté un detector de error en window , entonces estaría funcionando.

Puede probar la demostración aquí https://codesandbox.io/s/dom-error-handling-oz66c?file=/src/index.js:254-424