Kapitel 19: Fehlerbehandlung (Code-Absturz vermeiden)

Fehlerbehandlung ist wichtig, um Abstürze zu vermeiden. In diesem Kapitel lernen Sie try...catch und Debugging.

19.1 Häufige Fehlertypen

JavaScript hat verschiedene Arten von Fehlern.

1. SyntaxError (Syntaxfehler)

// FEHLER: Fehlendes Anführungszeichen
console.log("Hallo);

// FEHLER: Fehlender Schluss-Klammer
if (true {
    console.log("Hallo");
}

Lösung: Code auf Syntaxfehler prüfen (IDE hilft).

2. ReferenceError (Nicht definierte Variable)

// FEHLER: Variable nicht definiert
console.log(x);  // x ist nicht definiert

// RICHTIG
let x = 10;
console.log(x);

3. TypeError (Falscher Datentyp)

// FEHLER: Methode auf `null` aufrufen
let elem = null;
elem.textContent = "Hallo";  // Cannot read properties of null

// RICHTIG
let elem = document.getElementById("vorhanden");
if (elem) {
    elem.textContent = "Hallo";
}

4. RangeError (Ungültiger Wertebereich)

// FEHLER: Rekursion ohne Abbruchbedingung
function rekursion() {
    rekursion();
}
rekursion();  // Maximum call stack size exceeded

19.2 try...catch - Fehler abfangen

try...catch erlaubt Ihnen, Fehler abzufangen, ohne dass das Programm abstürzt.

Grundlegende Syntax

try {
    // Code, der einen Fehler verursachen könnte
    let ergebnis = 10 / 0;
    if (!isFinite(ergebnis)) {
        throw new Error("Ungültige Berechnung!");
    }
} catch (fehler) {
    // Wird ausgeführt, wenn ein Fehler auftritt
    console.error("Fehler aufgetreten:", fehler.message);
} finally {
    // Wird IMMER ausgeführt (egal ob Fehler oder nicht)
    console.log("Berechnung beendet.");
}

Einfaches Beispiel

try {
    let x = y + 10;  // y ist nicht definiert → Fehler
} catch (fehler) {
    console.log("Ein Fehler ist aufgetreten:", fehler.message);
}
// Ausgabe: "Ein Fehler ist aufgetreten: y is not defined"

finally - Immer ausführen

try {
    console.log("Versuche zu rechnen...");
    let ergebnis = 10 / 2;
    console.log("Ergebnis:", ergebnis);
} catch (fehler) {
    console.error("Fehler:", fehler);
} finally {
    console.log("Berechnung abgeschlossen.");  // Immer ausgeführt
}

19.3 Debugging-Tipps: Konsolen-Breakpoints

1. console.log() - Einfachste Methode

let x = 10;
let y = 20;
console.log("x:", x, "y:", y);  // Werte prüfen
let summe = x + y;
console.log("Summe:", summe);

2. debugger - Breakpoint in Code setzen

let x = 10;
debugger;  // Code hält hier an (wie ein Breakpoint)
let y = 20;
let ergebnis = x + y;

Verwendung:

1. debugger; in Code schreiben
2. Browser-Konsole öffnen (F12)
3. Seite neu laden → Code hält an debugger; an

3. Breakpoints in Browser-Entwicklertools setzen

Schritte:

1. F12 drücken → "Quellen" (Sources) Tab
2. JS-Datei öffnen
3. Auf Zeilennummer klicken → Breakpoint setzen
4. Seite neu laden → Code hält an

4. Variablen in "Überwachen" (Watch) hinzufügen

In den Browser-Entwicklertools:

1. Breakpoint setzen
2. Rechts auf "Überwachen" (Watch) klicken
3. Variablennamen eingeben (z.B. x, summe)
4. Werte werden in Echtzeit angezeigt

19.4 Praxis: Fehlerbehandlung in Formularvalidierung

Projekt 1: Sichere Division

function sichereDivision(a, b) {
    try {
        if (typeof a !== "number" || typeof b !== "number") {
            throw new Error("Beide Parameter müssen Zahlen sein!");
        }
        
        if (b === 0) {
            throw new Error("Division durch Null ist nicht erlaubt!");
        }
        
        return a / b;
    } catch (fehler) {
        console.error("Fehler bei Division:", fehler.message);
        return null;  // Fehlerwert zurückgeben
    }
}

console.log(sichereDivision(10, 2));   // 5
console.log(sichereDivision(10, 0));   // null (Fehler geloggt)
console.log(sichereDivision(10, "x")); // null (Fehler geloggt)

Projekt 2: JSON-Parsing mit Fehlerbehandlung

function sicheresJsonParsing(jsonString) {
    try {
        let daten = JSON.parse(jsonString);
        return daten;
    } catch (fehler) {
        console.error("JSON-Parsing fehlgeschlagen:", fehler.message);
        return null;
    }
}

let gueltigesJson = '{"name": "Max", "alter": 25}';
let ungueltigesJson = '{"name": "Max", "alter": 25';  // Fehlendes }

console.log(sicheresJsonParsing(gueltigesJson));    // { name: "Max", alter: 25 }
console.log(sicheresJsonParsing(ungueltigesJson));  // null (Fehler geloggt)

Projekt 3: Formularvalidierung mit try...catch

<form id="meinForm">
    <input type="text" id="name" placeholder="Name">
    <input type="email" id="email" placeholder="E-Mail">
    <input type="number" id="alter" placeholder="Alter">
    <button type="submit">Absenden</button>
</form>
<p id="fehlerMeldung" style="color: red;"></p>

<script>
    let form = document.getElementById("meinForm");
    let fehlerMeldung = document.getElementById("fehlerMeldung");

    form.addEventListener("submit", function(event) {
        event.preventDefault();
        fehlerMeldung.textContent = "";

        try {
            let name = document.getElementById("name").value;
            let email = document.getElementById("email").value;
            let alter = document.getElementById("alter").value;

            // Validierung
            if (name.trim() === "") {
                throw new Error("Name darf nicht leer sein!");
            }

            if (!email.includes("@")) {
                throw new Error("Ungültige E-Mail-Adresse!");
            }

            if (isNaN(alter) || alter < 0) {
                throw new Error("Ungültiges Alter!");
            }

            // Wenn alles okay ist
            alert("Formular erfolgreich abgesendet!");
            form.reset();

        } catch (fehler) {
            fehlerMeldung.textContent = fehler.message;
        }
    });
</script>

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

• ✅ Häufige Fehlertypen: SyntaxError, ReferenceError, TypeError
• ✅ try...catch...finally - Fehler abfangen
• ✅ throw - Eigene Fehler werfen
• ✅ Debugging: console.log(), debugger, Breakpoints
• ✅ Praxis-Projekte: Sichere Division, JSON-Parsing, Formularvalidierung

➡️ Nächster Schritt

Im nächsten Kapitel lernen wir Basis-Projekte - kleine Projekte zur Festigung des Wissens!

---

Übung:

1. Schreiben Sie eine Funktion, die einen String in eine Zahl umwandelt (mit Fehlerbehandlung)
2. Verwenden Sie try...catch, um JSON-Parsing-Fehler abzufangen
3. Setzen Sie einen debugger; in Ihrem Code und verwenden Sie die Browser-Entwicklertools zum Debuggen
4. Testen Sie alles im Browser