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.
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.
Use the event name in methods like addEventListener()
, or set an event handler property.
js
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.
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()
.
Most event handlers assigned to event handler properties can cancel the event's default behavior by returning false
from the handler:
js
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
:
js
window.onerror = () => true;
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 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.
js
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 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.
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>
js
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); });
Specification |
---|
HTML Standard # event-error |
HTML Standard # handler-onerror |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
error_event |
10 | 12 | 6 | 9 | 15 | 5.1 | ≤37 | 18 | 6 | 14 | 5 | 1.0 |
Element
targets: error
event
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event