Window: error event

The error event is fired on a Window object when a resource failed to load or couldn't be used — for example if a script has an execution error.

Syntax

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

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

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

Note: Due to historical reasons, onerror on window is the only event handler property that receives more than one argument.

Event type

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

Event UIEvent

Usage notes

Unlike other events, the error event is canceled by returning true from the handler instead of returning false. When canceled, the error won't appear in the console, but the current script will still stop executing.

The event handler's signature is asymmetric between addEventListener() and onerror. The event handler passed to addEventLister 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.

Note: These parameter names are observable with an HTML event handler attribute, where the first parameter is called event instead of message.

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

Examples

Live example

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>

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

Specifications

Specification
HTML Standard
# event-error
HTML Standard
# handler-onerror

Browser compatibility

BCD tables only load in the browser

See also

  • This event on Element targets: error event