Fehlerbehandlung

Ladevorgänge schlagen fehl. Die Datenbank ist offline, der Datensatz ist weg, irgendetwas wirft einen Fehler. Ohne einen Plan reißt ein einziger schlechter await-Aufruf den gesamten Bildschirm mit sich.

error.jsx ist das Spiegelbild von loading.jsx: gleiche Idee, gegenteiliges Ergebnis. Platzieren Sie es neben einer Seite, und es fängt alles ab, was diese Seite beim Rendern wirft:

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

Im Gegensatz zu loading.jsx hat es eine zwingende Voraussetzung:

'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 muss eine Client-Komponente sein. Der Grund steht direkt im JSX: onClick. Eine Schaltfläche zum erneuten Versuch ist Interaktivität, und Interaktivität benötigt eine Komponente, die an den Browser ausgeliefert wird. Lass 'use client' weg, und du erhältst den Ereignishandler-Fehler aus dem letzten Kapitel – und zwar auf genau der Seite, deren Aufgabe es war, Fehler zu behandeln.

Es empfängt zwei Props:

• error: der ausgelöste Fehler, damit du ihn protokollieren kannst
• reset: eine Funktion, die den fehlgeschlagenen Bereich erneut rendert. Rufe sie auf, und die Seite versucht es erneut

reset ist das, was dies zu mehr als nur einem schöneren Absturzbildschirm macht. Ein Fehler, der einmal aufgetreten ist, funktioniert beim zweiten Mal oft, und der Benutzer musste nie etwas neu laden.

Wie die anderen speziellen Dateien deckt error.jsx seinen eigenen Ordner und alle darunter verschachtelten Elemente ab, sodass eine einzige Datei nahe der Wurzel als Sicherheitsnetz für einen gesamten Bereich der Website dient.