Die Fehlerbehandlung gehört zu den Dingen, mit denen jeder JavaScript-Entwickler konfrontiert wird, aber nicht jeder meistert sie gründlich. Wenn Sie sich bisher auf einfache try...catch-Anweisungen verlassen haben, ist es an der Zeit, Ihr Spiel zu verbessern. Dieser Beitrag führt Sie durch den Weg von der grundlegenden Fehlerbehandlung bis zur Erstellung benutzerdefinierter Fehler, wodurch Ihr Code robuster und einfacher zu debuggen wird.

1. Die Grundlagen: versuchen...fangen

Beginnen wir mit dem klassischen try...catch:

try {
  const data = JSON.parse('{"name": "John"}');
  console.log(data.age.toUpperCase()); // This will cause an error
} catch (error) {
  console.error("Something went wrong:", error);
}

Das ist einfach und effektiv. Mit dem Try-Block können Sie Code ausführen, der möglicherweise einen Fehler auslöst, und der Catch-Block fängt ihn ab, sodass Sie ihn ordnungsgemäß behandeln können.

Wenn Ihre Anwendung jedoch wächst, kann es zu weniger informativen Fehlermeldungen führen, wenn Sie sich ausschließlich darauf verlassen, was das Debuggen zu einem Albtraum macht. Hier glänzt die benutzerdefinierte Fehlerbehandlung.

2. Native Fehlertypen verstehen

JavaScript verfügt über integrierte Fehlertypen, wie zum Beispiel:

• Fehler: Das generische Fehlerobjekt.
• TypeError: Wird ausgelöst, wenn eine Variable nicht den erwarteten Typ hat.
• SyntaxError: Wird ausgelöst, wenn der Code einen Syntaxfehler enthält.
• ReferenceError: Wird beim Verweisen auf eine nicht vorhandene Variable ausgelöst.

Beispiel:

try {
  let result = myUndefinedFunction();
} catch (error) {
  if (error instanceof ReferenceError) {
    console.error("ReferenceError detected:", error.message);
  } else {
    console.error("Unexpected error:", error);
  }
}

Durch die Verwendung dieser Typen können Sie damit beginnen, aussagekräftigere Fehlerbehandlungspfade zu erstellen. Was aber, wenn Sie Fehler speziell für Ihre Anwendungslogik definieren möchten? Hier kommen benutzerdefinierte Fehler ins Spiel.

3. Benutzerdefinierte Fehler erstellen

Warum benutzerdefinierte Fehler?

Benutzerdefinierte Fehler helfen bei der Identifizierung spezifischer Probleme in Ihrem Code und erleichtern so das Debuggen erheblich. Wenn Sie beispielsweise eine API erstellen, möchten Sie möglicherweise zwischen ValidationError, AuthenticationError oder DatabaseError unterscheiden.

So erstellen Sie benutzerdefinierte Fehler

Lassen Sie uns als Beispiel einen ValidationError erstellen:

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

try {
  const age = -5;
  if (age 



Durch die Erweiterung der Error-Klasse können wir einen aussagekräftigeren ValidationError erstellen. Dieser Ansatz verschafft Klarheit über die Art des Problems, erleichtert das Debuggen und macht Ihren Code sauberer.


  
  
  4. Anreichern benutzerdefinierter Fehler mit weiteren Informationen


Warum bei einer benutzerdefinierten Nachricht aufhören? Lassen Sie uns unseren benutzerdefinierten Fehler mit zusätzlichen Eigenschaften wie errorCode oder statusCode anreichern.



class HttpError extends Error {
  constructor(statusCode, message) {
    super(message);
    this.name = "HttpError";
    this.statusCode = statusCode;
  }
}

try {
  const response = { status: 404 };
  if (response.status === 404) {
    throw new HttpError(404, "Resource not found");
  }
} catch (error) {
  if (error instanceof HttpError) {
    console.error(`Error ${error.statusCode}: ${error.message}`);
  } else {
    console.error("Unexpected error:", error);
  }
}




Auf diese Weise können Sie mehr Kontext zum Fehler erfassen und so leichter darauf reagieren oder ihn effektiv protokollieren.


  
  
  5. Aufbau einer globalen Fehlerbehandlungsstrategie


Wenn Ihre Anwendung skaliert, benötigen Sie eine zentrale Möglichkeit zur Fehlerbehandlung. Ein Ansatz besteht darin, ein Dienstprogramm zur Fehlerbehandlung zu erstellen, das verschiedene Fehlertypen behandelt.



function handleError(error) {
  if (error instanceof ValidationError) {
    console.error("Validation failed:", error.message);
  } else if (error instanceof HttpError) {
    console.error(`HTTP error (${error.statusCode}):`, error.message);
  } else {
    console.error("An unexpected error occurred:", error);
  }
}

try {
  throw new HttpError(500, "Internal Server Error");
} catch (error) {
  handleError(error);
}




Diese zentralisierte Fehlerbehandlung trägt dazu bei, dass Ihr Code trocken bleibt (Don't Repeat Yourself) und gewährleistet eine konsistente Fehlerverarbeitung in Ihrer gesamten Anwendung.


  
  
  6. Endlich für die Bereinigung nutzen


Häufig müssen Sie möglicherweise Bereinigungsaufgaben durchführen, z. B. das Schließen einer Datenbankverbindung oder das Löschen von Zeitüberschreitungen. Da kommt endlich was zum Einsatz:



try {
  // Attempt to execute code
} catch (error) {
  // Handle errors
} finally {
  console.log("This will always execute, whether an error occurred or not.");
}




Die Verwendung von „final“ stellt sicher, dass dieser Block unabhängig davon ausgeführt wird, ob ein Fehler ausgelöst wurde oder nicht, was ihn ideal für Bereinigungsvorgänge macht.


  
  
  7. Integration mit Protokollierungsdiensten


Für Produktionsanwendungen ist es wichtig, Fehler zu protokollieren. Dienste wie Sentry, LogRocket oder Datadog können Fehler mit vollständigen Stack-Traces erfassen, was die Fehlerbehebung erheblich vereinfacht.

Beispiel:



import * as Sentry from '@sentry/browser';

Sentry.init({ dsn: 'YOUR_SENTRY_DSN' });

try {
  // Your code that might throw an error
} catch (error) {
  Sentry.captureException(error);
  handleError(error);
}




Diese Integration bietet einen besseren Einblick in Probleme und hilft Ihnen, den Zustand Ihrer Anwendung in Echtzeit zu überwachen.


  
  
  Letzte Gedanken


Indem Sie über die Grundlagen von try...catch hinausgehen und benutzerdefinierte Fehler integrieren, erstellen Sie besser wartbaren, lesbaren und robusteren JavaScript-Code. Die Implementierung dieser Vorgehensweisen macht nicht nur das Debuggen zum Kinderspiel, sondern verbessert auch die Gesamtzuverlässigkeit Ihrer Anwendung.


  
  
  Was kommt als nächstes?

• Experimentieren Sie mit benutzerdefinierten Fehlern in Ihrem aktuellen Projekt.
• Implementieren Sie einen zentralen Fehlerhandler.
• Integrieren Sie Fehlerprotokollierungsdienste in Ihre App.

Lassen Sie mich wissen, wie Sie mit Fehlern in Ihren Projekten umgehen oder ob Sie coole Tipps und Tricks mit uns teilen möchten!

Hat Ihnen dieser Beitrag gefallen? Folgen Sie mir für weitere JavaScript-Tipps und Tricks!