Window: error event
BaselineWidely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Theerror event is fired on aWindow object when a resource failed to load or couldn't be used — for example if a script has an execution error.
This event is only generated for script errors thrown synchronously, such as during initial loading or within event handlers. If a promise was rejected (including an uncaughtthrow within anasync function) and no rejection handlers were attached, anunhandledrejection event is fired instead.
Syntax
Use the event name in methods likeaddEventListener(), or set an event handler property.
addEventListener("error", (event) => { })onerror = (message, source, lineno, colno, error) => { }Note:For historical reasons,onerror onWindow andWorkerGlobalScope objects is the only event handler property that receives more than one argument.
Event type
The event object is aErrorEvent instance if it was generated from a user interface element, or anEvent instance otherwise.
Description
Event handler property
For historical reasons, theonerror event handler property, onWindow andWorkerGlobalScope objects only, has different behavior from other event handler properties.
Note that this only applies to handlers assigned toonerror, not to handlers added usingaddEventListener().
Cancellation
Most event handlers assigned to event handler properties can cancel the event's default behavior by returningfalse from the handler:
textarea.onkeydown = () => false;However, for an event handler property to cancel the default behavior of theerror event ofWindow, it must instead returntrue:
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 betweenaddEventListener() andonerror. The event handler passed toWindow.addEventListener() receives a singleErrorEvent object, while theonerror handler receives five arguments, matching theErrorEvent object's properties:
messageA string containing a human-readable error message describing the problem. Same as
ErrorEvent.message.Note:In HTML, thecontent event handler attribute
onerroron the<body>element attacheserrorevent listeners towindow(not the<body>element). For this event handler, the first parameter is calledevent, notmessage, although it still contains a string; that is, you would use<body onerror="console.error(event)">to log the error message.sourceA string containing the URL of the script that generated the error.
linenoAn integer containing the line number of the script file on which the error occurred.
colnoAn integer containing the column number of the script file on which the error occurred.
errorThe error being thrown. Usually an
Errorobject.
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;};Note:These parameter names are observable with anHTML event handler attribute, where the first parameter is calledevent instead ofmessage.
This special behavior only happens for theonerror event handler onwindow. TheElement.onerror handler still receives a singleErrorEvent object.
Examples
Live example
HTML
<div> <button type="button">Generate script error</button> <img /></div><div> <label for="eventLog">Event log:</label> <textarea readonly rows="8" cols="30" ></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
Specifications
| Specification |
|---|
| HTML # event-error |
| HTML # handler-onerror |
Browser compatibility
See also
- This event on
Elementtargets:errorevent Window:unhandledrejectionevent