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 ⁨Juli 2015⁩.

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

Dieses Ereignis wird nur für Skriptfehler generiert, die synchron ausgelöst werden, wie z.B. beim initialen Laden oder innerhalb von Ereignis-Handlern. Wenn ein Promise abgelehnt wurde (einschließlich eines nicht abgefangenen throw innerhalb einer async function) und keine Ablehnungshandler angefügt wurden, wird stattdessen ein unhandledrejection-Ereignis ausgelöst.

Syntax

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

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

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

Hinweis: Aus historischen Gründen ist onerror bei Window- und WorkerGlobalScope-Objekten die einzige Ereignis-Handler-Eigenschaft, die mehr als ein Argument erhält.

Ereignistyp

Das Ereignisobjekt ist eine Instanz von ErrorEvent, wenn es von einem Benutzeroberflächenelement generiert wurde, oder eine Instanz von Event ansonsten.

Beschreibung

Ereignis-Handler-Eigenschaft

Aus historischen Gründen hat die onerror-Ereignis-Handler-Eigenschaft bei Window- und WorkerGlobalScope-Objekten nur ein unterschiedliches Verhalten von anderen Ereignis-Handler-Eigenschaften.

Beachten Sie, dass dies nur für Handler gilt, die onerror zugewiesen sind, nicht für Handler, die addEventListener() verwenden.

Abbruch

Die meisten Ereignis-Handler, die Ereignis-Handler-Eigenschaften zugewiesen sind, können das Standardverhalten des Ereignisses abbrechen, indem sie false aus dem Handler zurückgeben:

textarea.onkeydown = () => false;

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

window.onerror = () => true;

Wenn es abgebrochen wird, erscheint der Fehler nicht in der Konsole, aber das aktuelle Skript wird trotzdem die Ausführung stoppen.

Argumente

Die Signatur des Ereignis-Handlers ist asymmetrisch zwischen addEventListener() und onerror. Der Ereignis-Handler, der Window.addEventListener() übergeben wird, erhält ein einzelnes 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, die das Problem beschreibt. Entspricht ErrorEvent.message.

Hinweis: Im HTML, das Inhaltsereignis-Handler-Attribut onerror auf dem <body>-Element fügt error-Ereignis-Listener zu window hinzu (nicht zum <body>-Element). Für diesen Ereignis-Handler wird der erste Parameter event genannt, nicht message, obwohl er immer noch 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 Ganzzahl, die die Zeilennummer der Skript-Datei enthält, in der der Fehler aufgetreten ist.
colno: Eine Ganzzahl, die die Spaltennummer der Skript-Datei enthält, in der der Fehler aufgetreten ist.
error: Der Fehler, der geworfen wird. In der Regel 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-Ereignis-Handler-Attribut beobachtbar, bei dem der erste Parameter event genannt wird anstelle von message.

Dieses spezielle Verhalten tritt nur für den onerror-Ereignis-Handler 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 src="bad-image.jpg" class="bad-img" alt="I don't exist" />
</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", () => {
  throw new Error("This is a script error");
});

Ergebnis

Spezifikationen

Specification
HTML # event-error
HTML # handler-onerror

Browser-Kompatibilität

Siehe auch

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

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden