Window: error event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das error Ereignis wird auf einem Window-Objekt ausgelöst, wenn eine Ressource nicht geladen oder verwendet werden konnte — zum Beispiel, wenn ein Skript einen Ausführungsfehler hat.

Dieses Ereignis wird nur für synchron ausgelöste Skriptfehler generiert, wie sie beim initialen Laden oder innerhalb von Event-Handlern auftreten. Wenn ein Versprechen abgelehnt wurde (einschließlich eines nicht abgefangenen throw in einer async function) und keine Ablehnungs-Handler angehängt wurden, wird stattdessen ein unhandledrejection-Ereignis ausgelöst.

Syntax

Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Ereignishandler-Eigenschaft.

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

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

Hinweis: Aus historischen Gründen ist onerror auf Window- und WorkerGlobalScope-Objekten die einzige Ereignishandler-Eigenschaft, die mehr als ein Argument empfängt.

Eventtyp

Das Ereignisobjekt ist eine ErrorEvent-Instanz, wenn es von einem Benutzeroberflächenelement erzeugt wurde, oder eine Event-Instanz anderweitig.

Beschreibung

Ereignishandler-Eigenschaft

Aus historischen Gründen zeigt die onerror-Ereignishandler-Eigenschaft auf Window- und WorkerGlobalScope-Objekten ein anderes Verhalten als andere Ereignishandler-Eigenschaften.

Beachten Sie, dass dies nur auf Handler zutrifft, die onerror zugewiesen sind, nicht auf Handler, die mit addEventListener() hinzugefügt werden.

Abbrechen

Die meisten Ereignishandler, die Ereignishandler-Eigenschaften zugewiesen sind, können das Standardverhalten des Ereignisses durch Rückgabe von false aus dem Handler abbrechen:

textarea.onkeydown = () => false;

Um jedoch das Standardverhalten des error-Ereignisses von Window abzubrechen, muss der Ereignishandler stattdessen true zurückgeben:

window.onerror = () => true;

Wenn das Ereignis abgebrochen wurde, erscheint der Fehler nicht in der Konsole, aber das aktuelle Skript wird trotzdem nicht weiter ausgeführt.

Argumente

Die Signatur des Ereignishandlers ist asymmetrisch zwischen addEventListener() und onerror. Der Ereignishandler, der zu Window.addEventListener() übergeben wird, erhält ein einziges ErrorEvent-Objekt, während der onerror-Handler fünf Argumente erhält, die den Eigenschaften des ErrorEvent-Objekts entsprechen:

message: Ein String, der eine lesbare Fehlermeldung enthält, welche das Problem beschreibt. Entspricht ErrorEvent.message.

Hinweis: Im HTML wird mit dem content event handler attribute onerror auf dem <body>-Element error-Ereignis-Hörer an den window (und nicht an das <body>-Element) angehängt. Für diesen Ereignishandler wird der erste Parameter event genannt, nicht message, obwohl er weiterhin einen String enthält; das heißt, Sie würden <body onerror="console.error(event)"> verwenden, um die Fehlermeldung zu protokollieren.
source: Ein String, der die URL des Skripts enthält, das den Fehler generiert hat.
lineno: Eine ganze Zahl, die die Zeilennummer der Skriptdatei enthält, in der der Fehler aufgetreten ist.
colno: Eine ganze Zahl, die die Spaltennummer der Skriptdatei enthält, in der der Fehler aufgetreten ist.
error: Der geworfene Fehler. Üblicherweise ein Error-Objekt.

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;
};

Hinweis: Diese Parameternamen sind mit einem HTML-Ereignishandler-Attribut beobachtbar, wobei der erste Parameter event genannt wird anstelle von message.

Dieses spezielle Verhalten tritt nur für den onerror-Ereignishandler auf window auf. Der Element.onerror-Handler erhält weiterhin ein einzelnes ErrorEvent-Objekt.

Beispiele

Live-Beispiel

HTML

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);
});

Ergebnis

Spezifikationen

Specification
HTML # event-error
HTML # handler-onerror

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Dieses Ereignis auf Element-Zielen: error Ereignis
Window: unhandledrejection-Ereignis