Window: error event

Use the event name in methods like addEventListener(), or set an event handler property.

addEventListener("error", (event) => {});

onerror = (event, source, lineno, colno, error) => {};

The event object is a ErrorEvent instance if it was generated from a user interface element, or an Event instance otherwise.

For historical reasons, the onerror event handler property, on Window objects only, has different behavior from other event handler properties.

Note that this only applies to handlers assigned to onerror, not to handlers added using addEventListener().

Cancelation

Most event handlers assigned to event handler properties can cancel the event's default behavior by returning false from the handler:

textarea.onkeydown = () => false;

However, for an event handler property to cancel the default behavior of the error event of Window, it must instead return true:

window.onerror = () => true;

When canceled, the error won't appear in the console, but the current script will still stop executing.

Arguments

The event handler's signature is asymmetric between addEventListener() and onerror. The event handler passed to Window.addEventListener() receives a single ErrorEvent object, while the onerror handler receives five arguments, matching the ErrorEvent object's properties:

event

A string containing a human-readable error message describing the problem. Same as ErrorEvent.message.

source

A string containing the URL of the script that generated the error.

lineno

An integer containing the line number of the script file on which the error occurred.

colno

An integer containing the column number of the script file on which the error occurred.

error

The error being thrown. Usually an Error object.

window.onerror = (a, b, c, d, e) => {
  console.log(`message: ${a}`);
  console.log(`source: ${b}`);
  console.log(`lineno: ${c}`);
  console.log(`colno: ${d}`);
  console.log(`error: ${e}`);

  return true;
};

This special behavior only happens for the onerror event handler on window. The Element.onerror handler still receives a single ErrorEvent object.

HTML

<div class="controls">
  <button id="script-error" type="button">Generate script error</button>
  <img class="bad-img" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="30"
    id="eventLog"></textarea>
</div>

body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}

JavaScript

const log = document.querySelector(".event-log-contents");

window.addEventListener("error", (event) => {
  log.textContent = `${log.textContent}${event.type}: ${event.message}\n`;
  console.log(event);
});

const scriptError = document.querySelector("#script-error");
scriptError.addEventListener("click", () => {
  const badCode = "const s;";
  eval(badCode);
});

Result

• This event on Element targets: error event