Lekcja 18: Obsługa błędów w JavaScript

Podczas pisania kodu nieuchronnie pojawiają się błędy. Mogą to być błędy składniowe (wykrywane przez interpreter przed uruchomieniem), błędy czasu wykonania (runtime errors, np. próba odwołania się do nieistniejącej zmiennej) lub błędy logiczne (kod działa, ale nie daje oczekiwanych rezultatów). W tej lekcji skupimy się na obsłudze błędów czasu wykonania za pomocą mechanizmów wbudowanych w JavaScript.

Blok try...catch

Podstawowym mechanizmem do obsługi błędów czasu wykonania jest blok try...catch. Pozwala on "spróbować" wykonać fragment kodu, który potencjalnie może rzucić błąd, i "złapać" ten błąd, jeśli wystąpi, aby program mógł kontynuować działanie lub zareagować w odpowiedni sposób.

Składnia:

try {
    // Kod, który może rzucić błąd
    console.log("Początek bloku try");
    // nieistniejacaFunkcja(); // To spowoduje błąd ReferenceError
    let wynik = 10 / 0; // To spowoduje Infinity, nie błąd
    if (wynik === Infinity) {
        // Możemy sami rzucić błąd, jeśli warunek jest niepożądany
        throw new Error("Dzielenie przez zero!");
    }
    console.log("Koniec bloku try (jeśli nie było błędu)");
} catch (error) {
    // Kod wykonywany, jeśli w bloku try wystąpił błąd
    console.error("Złapano błąd!");
    console.error("Nazwa błędu:", error.name);       // np. "ReferenceError", "Error"
    console.error("Wiadomość błędu:", error.message); // np. "nieistniejacaFunkcja is not defined", "Dzielenie przez zero!"
    // console.error("Stos wywołań:", error.stack); // Szczegółowe informacje o miejscu wystąpienia błędu
} finally {
    // Kod wykonywany zawsze, niezależnie od tego, czy wystąpił błąd, czy nie
    // Przydatne do operacji czyszczących (np. zamykanie plików, połączeń)
    console.log("Blok finally (wykonywany zawsze)");
}

console.log("Kod po bloku try...catch...finally");

• try: Zawiera kod, który chcemy monitorować pod kątem błędów. Jeśli w tym bloku wystąpi błąd, wykonanie try jest natychmiast przerywane, a sterowanie przechodzi do bloku catch.
• catch (error): Wykonywany tylko wtedy, gdy w bloku try zostanie rzucony błąd. Parametr error (nazwa jest dowolna, ale error lub e to konwencja) zawiera obiekt błędu z informacjami o nim (name, message, stack).
• finally (opcjonalny): Wykonywany zawsze po zakończeniu bloku try (i ewentualnie catch), niezależnie od tego, czy błąd wystąpił, czy nie, a nawet jeśli w try lub catch użyto return, break lub continue.

Obiekt Error

Gdy występuje błąd czasu wykonania lub gdy jawnie rzucamy błąd za pomocą throw, tworzony jest obiekt błędu, zazwyczaj instancja wbudowanego konstruktora Error lub jednego z jego podtypów.

Najważniejsze właściwości obiektu Error:

• name: Nazwa typu błędu (np. "Error", "SyntaxError", "ReferenceError", "TypeError").
• message: Wiadomość opisująca błąd.
• stack (niestandardowa, ale powszechnie dostępna): String zawierający stos wywołań funkcji prowadzący do miejsca wystąpienia błędu, bardzo pomocny przy debugowaniu.

JavaScript definiuje kilka standardowych typów błędów dziedziczących po Error:

• SyntaxError: Błąd składniowy w kodzie.
• ReferenceError: Próba odwołania się do nieistniejącej zmiennej.
• TypeError: Operacja wykonana na wartości nieodpowiedniego typu (np. wywołanie metody na undefined).
• RangeError: Wartość liczbowa jest poza dopuszczalnym zakresem (np. przy tworzeniu tablicy o ujemnej długości).
• URIError: Błąd związany z nieprawidłowym użyciem globalnych funkcji obsługujących URI (np. encodeURIComponent()).

Instrukcja throw

Możemy sami generować (rzucać) błędy w naszym kodzie za pomocą instrukcji throw. Pozwala to sygnalizować sytuacje wyjątkowe lub nieprawidłowe warunki, które powinny przerwać normalne wykonanie i zostać obsłużone.

Można rzucić dowolną wartość (liczbę, string, obiekt), ale najlepszą praktyką jest rzucanie instancji obiektu Error lub jego podtypów, ponieważ zawierają one standardowe właściwości (name, message, stack), które ułatwiają debugowanie i obsługę błędów.

function obliczPierwiastek(liczba) {
    if (typeof liczba !== 'number') {
        throw new TypeError("Argument musi być liczbą!");
    }
    if (liczba < 0) {
        // Rzucenie standardowego obiektu Error z własną wiadomością
        throw new Error("Nie można obliczyć pierwiastka kwadratowego z liczby ujemnej.");
    }
    return Math.sqrt(liczba);
}

try {
    let wynik1 = obliczPierwiastek(16);
    console.log("Pierwiastek z 16:", wynik1); // 4

    // let wynik2 = obliczPierwiastek("abc"); // Rzuci TypeError
    let wynik3 = obliczPierwiastek(-9); // Rzuci Error
    console.log("Ten log się nie wykona");

} catch (error) {
    console.error(`Wystąpił błąd [${error.name}]: ${error.message}`);
}

console.log("Program kontynuuje działanie po obsłużeniu błędu.");

Tworzenie własnych typów błędów

Czasami przydatne jest zdefiniowanie własnych, bardziej specyficznych typów błędów, aby lepiej kategoryzować problemy w aplikacji. Można to zrobić, tworząc klasy dziedziczące po wbudowanej klasie Error.

// Definicja własnej klasy błędu
class BladWalidacji extends Error {
    constructor(message) {
        super(message); // Wywołanie konstruktora klasy nadrzędnej (Error)
        this.name = "BladWalidacji"; // Ustawienie nazwy błędu
    }
}

class BladApi extends Error {
    constructor(message, status) {
        super(message);
        this.name = "BladApi";
        this.status = status; // Dodanie własnej właściwości
    }
}

function walidujEmail(email) {
    if (!email || !email.includes('@')) {
        throw new BladWalidacji(`Nieprawidłowy format adresu email: ${email}`);
    }
    console.log(`Email "${email}" jest poprawny.`);
}

async function pobierzDaneZApi(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new BladApi(`Błąd pobierania danych z API`, response.status);
        }
        return await response.json();
    } catch (error) {
        // Jeśli błąd pochodzi z fetch (np. sieciowy), opakowujemy go w BladApi
        if (!(error instanceof BladApi)) {
            throw new BladApi(`Błąd sieciowy lub inny: ${error.message}`, 503);
        }
        throw error; // Rzucamy dalej oryginalny BladApi
    }
}

// Obsługa różnych typów błędów
try {
    walidujEmail("test@example.com");
    walidujEmail("niepoprawny-email"); // Rzuci BladWalidacji
} catch (error) {
    if (error instanceof BladWalidacji) {
        console.warn(`Problem z walidacją: ${error.message}`);
    } else {
        console.error(`Nieoczekiwany błąd: ${error.message}`);
    }
}

(async () => {
    try {
        const dane = await pobierzDaneZApi("https://httpbin.org/status/404"); // Celowy błąd 404
        console.log("Dane z API:", dane);
    } catch (error) {
        if (error instanceof BladApi) {
            console.error(`Błąd API (status ${error.status}): ${error.message}`);
        } else {
            console.error(`Inny błąd API: ${error.message}`);
        }
    }
})();

Użycie operatora instanceof w bloku catch pozwala na różnicowanie obsługi w zależności od typu rzuconego błędu.

function dziel(a, b) {
    if (typeof a !== 'number' || typeof b !== 'number') {
        throw new TypeError("Oba argumenty muszą być liczbami.");
    }
    if (b === 0) {
        throw new Error("Nie można dzielić przez zero!");
    }
    return a / b;
}

// Testowanie
console.log("Testowanie funkcji dziel:");

// Przypadek 1: Poprawne dzielenie
try {
    let wynik1 = dziel(10, 2);
    console.log("Wynik 10 / 2:", wynik1);
} catch (error) {
    console.error(`[${error.name}] ${error.message}`);
}

// Przypadek 2: Dzielenie przez zero
try {
    let wynik2 = dziel(5, 0);
    console.log("Wynik 5 / 0:", wynik2); // Ten log się nie wykona
} catch (error) {
    console.error(`[${error.name}] ${error.message}`);
}

// Przypadek 3: Nieprawidłowy typ argumentu
try {
    let wynik3 = dziel("abc", 3);
    console.log("Wynik 'abc' / 3:", wynik3); // Ten log się nie wykona
} catch (error) {
    console.error(`[${error.name}] ${error.message}`);
}

console.log("Zakończono testowanie.");