JavaScript Benutzerdefinierte Fehler

Benutzerdefinierte Fehler in JavaScript

JavaScript erlaubt es Ihnen, eigene Fehlertypen durch Erweiterung der eingebauten Error-Klasse zu erstellen. Ein benutzerdefinierter Fehler ist eine Klasse, die von Error (oder einem anderen Fehlertyp) erbt und einen aussagekräftigen name sowie zusätzliche Daten enthält, die die Situation erfordert.

Diese Seite erläutert, warum Sie benutzerdefinierte Fehler verwenden sollten, wie Sie sie korrekt definieren, wie Sie Fehlertypen mit instanceof unterscheiden, wie Sie Kontext anhängen (Statuscodes, Feldnamen, die ursprüngliche cause) und wie Sie eine Fehlerhierarchie für eine echte Anwendung organisieren.

Warum benutzerdefinierte Fehler erstellen?

Das Werfen eines einfachen new Error("...") funktioniert, gibt dem Aufrufer jedoch nur einen String zur Inspektion. Benutzerdefinierte Fehler lösen drei Probleme:

Typbasierte Behandlung. Mit instanceof ValidationError können Sie auf eine bestimmte Art von Fehler reagieren, ohne den Nachrichtentext zu parsen, was fragil und sprachabhängig ist.
Zusätzlicher Kontext. Eine benutzerdefinierte Klasse kann strukturierte Felder enthalten — einen HTTP-statusCode, das betroffene field, einen Wiederholungshinweis — anstatt alles in die Nachricht zu packen.
Klare Hierarchien. Eine gemeinsame Basisklasse (zum Beispiel AppError) erlaubt es einem übergeordneten Handler, alle Fehler Ihrer Anwendung an einer Stelle abzufangen, während der innere Code dennoch spezifische Subtypen werfen kann.

Wenn Sie zunächst nur die Mechanismen des Werfens und Fangens erlernen möchten, lesen Sie Fehlerbehandlung: try...catch. Benutzerdefinierte Fehler bauen direkt auf Klassenvererbung und Erweiterung eingebauter Klassen auf.

Grundlagen der Erweiterung der Error-Klasse

Um einen benutzerdefinierten Fehler zu erstellen, extendieren Sie die Error-Klasse. Die neue Klasse erbt message, stack und toString() von Error, und Sie fügen alles Weitere hinzu, was Sie benötigen.

Erstellen einer benutzerdefinierten Fehlerklasse

Hier ist das minimale Muster:

class ValidationError extends Error {
  constructor(message) {
    super(message);  // Pass the message to the Error constructor (sets this.message)
    this.name = "ValidationError";  // Override the default name "Error"
  }
}

Zwei Details sind wichtig:

super(message) muss zuerst aufgerufen werden. In einem Subklassen-Konstruktor können Sie this nicht verwenden, bevor super() aufgerufen wird. Der Konstruktor von Error setzt this.message und erfasst den Stack-Trace.
this.name setzen. Ohne dies wird der Fehler in Nachrichten und toString() als "Error" angezeigt. Das Setzen von name macht Logs und das Muster switch (error.name) lesbar.

In manchen Beispielen sehen Sie auch Object.setPrototypeOf(this, new.target.prototype). Mit modernen Transpilern und nativen Klassen ist dies meist unnötig, schadet aber nicht und garantiert, dass instanceof funktioniert, selbst wenn Code auf ES5 kompiliert oder über Realms hinweg (iframes/Worker-Grenzen) geteilt wird. Die folgenden Beispiele verwenden es der Sicherheit halber.

Einmal erstellt, verhält sich der Fehler wie jeder andere:

const e = new ValidationError("bad input");
e.name;               // "ValidationError"
e instanceof Error;   // true  — it is still a real Error
e.toString();         // "ValidationError: bad input"

Benutzerdefinierte Fehler verwenden

Sobald Sie einen benutzerdefinierten Fehler definiert haben, können Sie ihn in Ihrer Anwendung wie jeden Standardfehler werfen:

javascript— editable

In diesem Beispiel wird eine E-Mail-Adresse gegen einen regulären Ausdruck validiert. Schlägt die Validierung fehl, wird ein ValidationError geworfen. Dieser Fehler wird dann im try...catch-Block abgefangen, und wenn es sich um eine Instanz von ValidationError handelt, wird eine spezifische Nachricht protokolliert.

Umgang mit mehreren Typen benutzerdefinierter Fehler

Möglicherweise möchten Sie verschiedene Fehlertypen für unterschiedliche Teile Ihrer Anwendung erstellen. So können Sie mehrere benutzerdefinierte Fehler behandeln:

javascript— editable

Diese Struktur ermöglicht eine separate Behandlung verschiedener Fehlertypen, was die Anwendung robuster und einfacher zu debuggen macht.

Bevorzugen Sie instanceof gegenüber dem Vergleich von error.name-Strings, wenn möglich: instanceof trifft auch Subklassen und übersteht Refaktorierungen daher besser.

Aufbau einer Fehlerhierarchie mit einer Basisklasse

In echten Anwendungen lohnt es sich, allen Fehlern einen gemeinsamen Vorfahren zu geben. Ein übergeordneter Handler kann dann alle „erwarteten" Anwendungsfehler an einer Stelle abfangen, während der tiefere Code dennoch präzise Subtypen werfen kann. Die cause-Option (ES2022) erlaubt es einem Fehler auf höherer Ebene, den auslösenden Fehler auf niedrigerer Ebene einzuschließen und so das Original für das Debugging zu erhalten.

javascript— editable

// Shared base class for all application errors
class AppError extends Error {
  constructor(message, options) {
    super(message, options);            // options can include { cause }
    this.name = this.constructor.name;  // name matches the subclass automatically
  }
}

// Specific subtypes — no boilerplate needed
class NotFoundError extends AppError {}
class ConflictError extends AppError {}

function loadUser(id) {
  try {
    // Pretend a low-level operation failed:
    throw new Error("connection reset");
  } catch (low) {
    // Wrap it, keeping the original as `cause`
    throw new NotFoundError(`Could not load user ${id}`, { cause: low });
  }
}

try {
  loadUser(42);
} catch (err) {
  if (err instanceof AppError) {
    console.log(err.name);              // NotFoundError
    console.log(err.message);           // Could not load user 42
    console.log("caused by:", err.cause.message); // caused by: connection reset
  } else {
    throw err; // unknown error — let it propagate
  }
}

Hier entfernt this.name = this.constructor.name die Notwendigkeit, den Namen in jeder Subklasse zu wiederholen, und die einzelne instanceof AppError-Prüfung erfasst NotFoundError, ConflictError und jeden zukünftigen Subtyp.

Erweiterte benutzerdefinierte Fehlerbehandlung in JavaScript

Aufbauend auf den Grundlagen können wir benutzerdefinierte Fehler auf komplexere Szenarien anwenden, wie asynchrone Operationen und spezifische Geschäftslogik-Fälle.

Beispiel 1: Benutzerdefinierte API-Fehlerbehandlung

Dieses Beispiel zeigt, wie ein benutzerdefinierter Fehler für die Behandlung von API-Anfrageproblemen erstellt und verwendet wird, beispielsweise wenn eine angeforderte Ressource nicht gefunden wird oder der Server einen Fehler zurückgibt. Der async/await-Ablauf hier ergänzt die Fehlerbehandlung mit Promises.

javascript— editable

// Define a custom error for API-related issues
class ApiError extends Error {
  constructor(message, statusCode) {
    super(message);
    Object.setPrototypeOf(this, new.target.prototype);
    this.name = "ApiError";
    this.statusCode = statusCode;
  }
}

// Function to fetch data and handle errors specifically for API requests
async function fetchData(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new ApiError(`Failed to fetch data: ${response.statusText}`, response.status);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    if (error instanceof ApiError) {
      console.log(`API Error (${error.statusCode}): ${error.message}`);
    } else {
      console.log('Unexpected error:', error);
    }
    return null; // Optional: Return null or handle the error as needed
  }
}

// Example usage of the fetchData function
fetchData('https://jsonplaceholder.typicode.com/todos/9999999')
  .then(data => {
    if (data) {
      console.log('Fetched data:', data);
    }
  });

Erklärung

ApiError-Klasse: Diese benutzerdefinierte Klasse erfasst API-spezifische Fehler und speichert den HTTP-Statuscode zusammen mit einer benutzerdefinierten Nachricht.
fetchData-Funktion: Versucht, Daten von einer angegebenen URL abzurufen. Wenn die Antwort nicht erfolgreich ist, wird ein ApiError mit einer detaillierten Nachricht und einem Statuscode geworfen.
Fehlerbehandlung: Fehler werden abgefangen und entsprechend behandelt. API-bezogene Fehler werden mit detaillierten Informationen protokolliert, während unerwartete Fehler ebenfalls abgefangen und protokolliert werden.

Beispiel 2: Benutzerdefinierte Validierungsfehlerbehandlung

Verwenden Sie dieses Beispiel zur Behandlung von Fehlern im Zusammenhang mit der Datenvalidierung, wie der Überprüfung von Benutzereingaben.

javascript— editable

Erklärung

ValidationError-Klasse: Eine benutzerdefinierte Fehlerklasse, die dabei hilft, zu identifizieren, welches spezifische Feld der Eingabedaten die Validierungsprüfung nicht bestanden hat.
validateUser-Funktion: Überprüft die Gültigkeit von Benutzerdaten. Wenn die Daten bestimmte Kriterien nicht erfüllen, wird ein ValidationError geworfen.
Fehlerbehandlung: Fängt Validierungsfehler ab und protokolliert sie mit detaillierten Informationen. Andere Fehlertypen werden ebenfalls separat behandelt.

Best Practices und häufige Fallstricke

Rufen Sie super(message) immer zuerst auf, bevor Sie this verwenden.
Setzen Sie name, damit Logs und toString() lesbar sind; this.name = this.constructor.name erledigt dies einmalig für eine gesamte Hierarchie.
Bevorzugen Sie instanceof gegenüber error.name-Vergleichen — es trifft auch Subklassen.
Werfen Sie Unbekanntes erneut. Ein catch, das alles schluckt (catch (e) {}), verbirgt echte Fehler. Behandeln Sie Ihre bekannten Typen und verwenden Sie throw error für den Rest, wie es die Beispiele zeigen.
Verwenden Sie cause zum Einschließen, nicht zum Ersetzen. Wenn Sie einen Fehler auf niedriger Ebene abfangen und einen auf höherer Ebene werfen, übergeben Sie { cause: original }, damit der Stack-Trace und die Grundursache erhalten bleiben.
Verwenden Sie keine Subklassen von Error zur Ablaufsteuerung. Fehler sind für Ausnahmebedingungen gedacht, nicht für normale Verzweigungen.

Fazit

Das Erstellen benutzerdefinierter Fehlerklassen in JavaScript durch Erweiterung der Error-Klasse ist eine leistungsstarke Technik zur Behandlung spezifischer Fehlertypen auf granularere Weise. Es erhöht die Klarheit und Wartbarkeit der Fehlerbehandlung in Ihrem Code und ermöglicht es Ihnen, spezifischeres Feedback und spezifischere Aktionen basierend auf verschiedenen Fehlerbedingungen bereitzustellen. Diese Methode hilft nicht nur beim Debuggen, sondern verbessert auch die Zuverlässigkeit Ihrer Anwendungen, indem sichergestellt wird, dass jeder Fehlertyp ordnungsgemäß abgefangen und behandelt wird.

Übungen

Übung

Was ist der Zweck der Verwendung erweiterter Fehlerklassen in JavaScript?

Um neue Fehlertypen zu erstellenUm die Skriptausführung zu beschleunigenUm zusätzliche Details über einen Fehler bereitzustellenUm das Auftreten von Fehlern zu verhindern

Übung

Warum muss super(message) in einem benutzerdefinierten Fehler-Subklassen-Konstruktor vor der Verwendung von this aufgerufen werden?

this wird in einer abgeleiteten Klasse erst nach dem Aufruf von super() initialisiertEs setzt this.message und erfasst den Stack-TraceEs lässt den Fehler schneller laufenEs ist optional und kann übersprungen werden

Übung

Was ermöglicht die ES2022-Option cause beim Werfen eines benutzerdefinierten Fehlers?

Den ursprünglichen Fehler auf niedrigerer Ebene anhängen, der diesen ausgelöst hatDie Fehlerausbreitung verhindernDie fehlgeschlagene Operation automatisch wiederholenDie Grundursache für das Debugging aufbewahren