Fehlerbehandlung für Einsteiger

Fehler passieren in der Programmierung – das ist völlig normal! Die Kunst liegt darin, diese Fehler zu verstehen, zu finden und zu beheben. In diesem Kapitel lernen Sie, wie Sie mit Fehlern in JavaScript umgehen können.

Arten von Fehlern

In JavaScript begegnen Ihnen hauptsächlich drei Arten von Fehlern:

1. Syntaxfehler

Diese treten auf, wenn Ihr Code nicht den Regeln der JavaScript-Sprache entspricht. Der Code wird dann gar nicht erst ausgeführt.

// Syntaxfehler - fehlende Klammer
if (alter >= 18 {
    console.log("Volljährig");
}

2. Laufzeitfehler

Diese passieren während der Ausführung des Programms. Der Code beginnt zu laufen, bricht aber ab, wenn ein Problem auftritt.

// Laufzeitfehler - auf eine nicht existierende Methode zugreifen
let text = "Hallo";
text.nichtExistierendeMethode();

3. Logische Fehler

Diese sind die schwierigsten Fehler! Der Code läuft ohne Fehlermeldung, macht aber nicht das, was er soll.

// Logischer Fehler - berechnet Fläche falsch
function berechneFläche(breite, höhe) {
  return breite + höhe; // sollte breite * höhe sein!
}

Häufige JavaScript-Fehler und ihre Bedeutung

Fehler	Bedeutung	Beispiel
SyntaxError	Fehler in der Schreibweise	Fehlende Klammer oder Semikolon
ReferenceError	Zugriff auf nicht existierende Variable	Verwendung einer nicht deklarierten Variable
TypeError	Operation auf einem Wert des falschen Typs	Eine Zahl als Funktion aufrufen
RangeError	Wert ausserhalb des gültigen Bereichs	Array mit negativer Länge erstellen
URIError	Fehler bei URI-Handhabung	Falsche Parameter für encodeURI()

Fehler in der Browserkonsole verstehen

Wenn ein Fehler auftritt, gibt der Browser in der Konsole Informationen dazu aus:

Eine typische Fehlermeldung enthält:

1. Fehlertyp (z.B. “TypeError”)
2. Fehlerbeschreibung (z.B. “Cannot read property ‘length’ of undefined”)
3. Datei und Zeilennummer, wo der Fehler aufgetreten ist
4. Stack Trace - der Aufrufpfad zum Fehler

Fehler abfangen mit try-catch

Mit try-catch können Sie Fehler abfangen, ohne dass Ihr Programm abstürzt:

try {
  // Potenziell problematischer Code
  let ergebnis = nichtExistierendeVariable + 5;
} catch (fehler) {
  // Code, der ausgeführt wird, wenn ein Fehler auftritt
  console.log("Ein Fehler ist aufgetreten:", fehler.message);
}

try-catch-finally

Sie können auch einen finally-Block hinzufügen, der immer ausgeführt wird, egal ob ein Fehler auftritt oder nicht:

try {
  console.log("Versuche etwas...");
  // Fehler provozieren
  throw new Error("Etwas ist schiefgelaufen!");
} catch (fehler) {
  console.log("Fehler abgefangen:", fehler.message);
} finally {
  console.log("Dieser Code wird immer ausgeführt.");
}

Eigene Fehler werfen

Mit dem throw-Statement können Sie eigene Fehler auslösen:

function teilen(a, b) {
  if (b === 0) {
    throw new Error("Division durch Null ist nicht erlaubt!");
  }
  return a / b;
}

try {
  console.log(teilen(10, 0));
} catch (fehler) {
  console.log("Fehler abgefangen:", fehler.message);
}

Fehlertypen erstellen

Sie können auch spezifische Fehlertypen erstellen:

// Eigenen Fehlertyp definieren
function ValidiereAlter(nachricht) {
  this.name = "ValidiereAlter";
  this.message = nachricht;
}
ValidiereAlter.prototype = Error.prototype;

// Funktion mit eigenem Fehlertyp
function prüfeAlter(alter) {
  if (alter < 0) {
    throw new ValidiereAlter("Alter kann nicht negativ sein!");
  }
  if (alter > 120) {
    throw new ValidiereAlter("Alter scheint unrealistisch hoch!");
  }
  return true;
}

// Verwendung
try {
  prüfeAlter(150);
} catch (fehler) {
  if (fehler instanceof ValidiereAlter) {
    console.log("Altersvalidierungsfehler:", fehler.message);
  } else {
    console.log("Anderer Fehler:", fehler.message);
  }
}

Best Practices für die Fehlerbehandlung

1. Spezifisch sein: Fangen Sie nur die Fehler ab, die Sie erwarten und behandeln können.
2. Informative Fehlermeldungen: Geben Sie hilfreiche Informationen zurück, die beim Debuggen helfen.
3. An der richtigen Stelle abfangen: Behandeln Sie Fehler so nah wie möglich an ihrer Quelle.
4. Aus Fehlern lernen: Protokollieren Sie Fehler, um Muster zu erkennen und zukünftige Probleme zu vermeiden.
5. Graceful Degradation: Lassen Sie Ihre Anwendung bei Fehlern elegant reagieren, anstatt komplett zu versagen.

Debugging-Techniken

console.log Debugging

Die einfachste Methode ist, console.log zu verwenden, um Werte während der Ausführung auszugeben:

function berechneSumme(a, b) {
  console.log("a =", a);
  console.log("b =", b);

  let ergebnis = a + b;
  console.log("Ergebnis =", ergebnis);

  return ergebnis;
}

Weitere nützliche Konsolenmethoden

// Warnung ausgeben
console.warn("Dies ist eine Warnung");

// Fehler ausgeben
console.error("Dies ist ein Fehler");

// Daten in Tabellenform anzeigen
console.table([
  { name: "Max", alter: 30 },
  { name: "Anna", alter: 25 },
]);

// Code-Ausführungszeit messen
console.time("Schleifenzeit");
for (let i = 0; i < 1000000; i++) {
  // Irgendwas machen
}
console.timeEnd("Schleifenzeit");

Browser-Debugger verwenden

Die effektivste Methode zum Debuggen ist der integrierte Debugger in den Entwicklertools des Browsers:

1. Öffnen Sie die Entwicklertools (F12 oder Rechtsklick > Untersuchen)
2. Wechseln Sie zum Tab “Sources” (Chrome) oder “Debugger” (Firefox)
3. Setzen Sie Breakpoints, indem Sie auf die Zeilennummer klicken
4. Führen Sie Ihren Code aus und untersuchen Sie Variablen, wenn der Code anhält

Übung: Fehlerbehandlung in der Praxis

Aufgabe: Fehlerbehandlung üben

In dieser Übung werden Sie verschiedene Arten der Fehlerbehandlung und Debugging-Techniken anwenden. Öffnen Sie die Konsole Ihres Browsers oder einen Code-Editor und probieren Sie folgende Aufgaben aus:

1. Grundlegende try-catch-Anwendung:

   • Schreiben Sie eine Funktion divideNumbers(a, b), die zwei Zahlen dividiert
   • Verwenden Sie try-catch, um den Fall abzufangen, wenn b gleich 0 ist
   • Die Funktion soll eine freundliche Fehlermeldung zurückgeben statt abzustürzen

2. Validierung mit eigenen Fehlern:

   • Erstellen Sie eine Funktion validateUsername(username), die einen Benutzernamen validiert
   • Der Benutzername muss mindestens 3 und höchstens 15 Zeichen lang sein
   • Werfen Sie einen eigenen Fehler mit einer passenden Nachricht, wenn die Validierung fehlschlägt
   • Testen Sie die Funktion mit verschiedenen Eingaben

3. Fehlertypen unterscheiden:

   • Erstellen Sie einen try-catch-Block, der verschiedene Arten von Fehlern abfängt
   • Provozieren Sie darin absichtlich verschiedene Fehler (ReferenceError, TypeError, etc.)
   • Verwenden Sie instanceof im catch-Block, um die Fehlertypen zu unterscheiden und unterschiedliche Nachrichten auszugeben

4. Debugging mit console:

   • Schreiben Sie eine Funktion, die ein Array von Zahlen nimmt und die Summe aller geraden Zahlen berechnet
   • Fügen Sie console.log-Anweisungen ein, um den Fortschritt zu verfolgen
   • Verwenden Sie console.time und console.timeEnd, um die Ausführungszeit zu messen

5. try-catch-finally anwenden:

   • Erstellen Sie eine Funktion, die simuliert, eine Datei zu öffnen, zu lesen und zu schliessen
   • Verwenden Sie console.log, um die Aktionen anzuzeigen
   • Verwenden Sie try-catch-finally, um sicherzustellen, dass die Datei immer “geschlossen” wird, auch wenn ein Fehler auftritt
   • Testen Sie den Code mit und ohne Fehler

Zusammenfassung

• Fehlertypen verstehen: Syntax-, Laufzeit- und logische Fehler
• Fehler abfangen mit try-catch(-finally)
• Eigene Fehler werfen mit throw
• Debugging-Techniken wie console.log und Browser-Debugger
• Best Practices für effektive Fehlerbehandlung

Fehlerbehandlung ist ein wichtiger Teil des Programmierens. Gute Fehlerbehandlung macht Ihre Anwendungen robuster und verbessert die Benutzererfahrung. Je mehr Sie üben, desto besser werden Sie darin, Fehler vorherzusehen, zu finden und zu beheben.