Obsługa błędów

Ładowanie kończy się niepowodzeniem. Baza danych nie działa, rekordu już nie ma, coś zgłasza wyjątek. Bez planu jedno nieudane await wyłącza cały ekran.

error.jsx jest lustrzanym odbiciem loading.jsx: ten sam pomysł, przeciwny rezultat. Umieść go obok strony, a przechwyci wszystko, co ta strona zgłosi podczas renderowania:

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

W przeciwieństwie do loading.jsx, ma jedno kluczowe wymaganie:

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

error.jsx musi być komponentem klienckim. Powód jest widoczny w samym JSX: onClick. Przycisk ponowienia próby zapewnia interaktywność, a interaktywność wymaga komponentu, który jest wysyłany do przeglądarki. Jeśli pominiesz 'use client', pojawi się błąd procedury obsługi zdarzenia z poprzedniego rozdziału — na stronie, której zadaniem było obsługiwanie błędów.

Otrzymuje dwa propsy:

• error: błąd, który został zgłoszony, dzięki czemu możesz go zapisać w logu
• reset: funkcja, która ponownie renderuje sekcję, w której wystąpił błąd. Wywołaj ją, a strona spróbuje ponownie

reset sprawia, że to coś więcej niż tylko ładniejszy ekran błędu. Zdarzenie, które raz zakończyło się niepowodzeniem, często zadziała za drugim razem, a użytkownik nie musiał niczego przeładowywać.

Podobnie jak inne specjalne pliki, error.jsx obejmuje swój folder i wszystko, co znajduje się w jego podfolderach, więc jeden plik blisko katalogu głównego stanowi zabezpieczenie dla całej sekcji witryny.