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
Abschnitt betitelt „Arten von Fehlern“In JavaScript begegnen Ihnen hauptsächlich drei Arten von Fehlern:
1. Syntaxfehler
Abschnitt betitelt „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 Klammerif (alter >= 18 { console.log("Volljährig");}2. Laufzeitfehler
Abschnitt betitelt „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 zugreifenlet text = "Hallo";text.nichtExistierendeMethode();3. Logische Fehler
Abschnitt betitelt „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 falschfunction berechneFläche(breite, höhe) { return breite + höhe; // sollte breite * höhe sein!}Häufige JavaScript-Fehler und ihre Bedeutung
Abschnitt betitelt „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
Abschnitt betitelt „Fehler in der Browserkonsole verstehen“Wenn ein Fehler auftritt, gibt der Browser in der Konsole Informationen dazu aus:

Eine typische Fehlermeldung enthält:
- Fehlertyp (z.B. “TypeError”)
- Fehlerbeschreibung (z.B. “Cannot read property ‘length’ of undefined”)
- Datei und Zeilennummer, wo der Fehler aufgetreten ist
- Stack Trace - der Aufrufpfad zum Fehler
Fehler abfangen mit try-catch
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „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
Abschnitt betitelt „Fehlertypen erstellen“Sie können auch spezifische Fehlertypen erstellen:
// Eigenen Fehlertyp definierenfunction ValidiereAlter(nachricht) { this.name = "ValidiereAlter"; this.message = nachricht;}ValidiereAlter.prototype = Error.prototype;
// Funktion mit eigenem Fehlertypfunction 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;}
// Verwendungtry { 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
Abschnitt betitelt „Best Practices für die Fehlerbehandlung“- Spezifisch sein: Fangen Sie nur die Fehler ab, die Sie erwarten und behandeln können.
- Informative Fehlermeldungen: Geben Sie hilfreiche Informationen zurück, die beim Debuggen helfen.
- An der richtigen Stelle abfangen: Behandeln Sie Fehler so nah wie möglich an ihrer Quelle.
- Aus Fehlern lernen: Protokollieren Sie Fehler, um Muster zu erkennen und zukünftige Probleme zu vermeiden.
- Graceful Degradation: Lassen Sie Ihre Anwendung bei Fehlern elegant reagieren, anstatt komplett zu versagen.
Debugging-Techniken
Abschnitt betitelt „Debugging-Techniken“console.log Debugging
Abschnitt betitelt „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
Abschnitt betitelt „Weitere nützliche Konsolenmethoden“// Warnung ausgebenconsole.warn("Dies ist eine Warnung");
// Fehler ausgebenconsole.error("Dies ist ein Fehler");
// Daten in Tabellenform anzeigenconsole.table([ { name: "Max", alter: 30 }, { name: "Anna", alter: 25 },]);
// Code-Ausführungszeit messenconsole.time("Schleifenzeit");for (let i = 0; i < 1000000; i++) { // Irgendwas machen}console.timeEnd("Schleifenzeit");Browser-Debugger verwenden
Abschnitt betitelt „Browser-Debugger verwenden“Die effektivste Methode zum Debuggen ist der integrierte Debugger in den Entwicklertools des Browsers:
- Öffnen Sie die Entwicklertools (F12 oder Rechtsklick > Untersuchen)
- Wechseln Sie zum Tab “Sources” (Chrome) oder “Debugger” (Firefox)
- Setzen Sie Breakpoints, indem Sie auf die Zeilennummer klicken
- Führen Sie Ihren Code aus und untersuchen Sie Variablen, wenn der Code anhält
Übung: Fehlerbehandlung in der Praxis
Abschnitt betitelt „Übung: Fehlerbehandlung in der Praxis“Zusammenfassung
Abschnitt betitelt „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.