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 dafür liegt direkt im JSX: onClick. Ein Retry-button ist Interaktivität, und Interaktivität erfordert eine Komponente, die an den Browser gesendet wird. Lässt man 'use client' weg, erhält man den Event-Handler-error aus dem letzten Kapitel – und zwar genau auf der page, deren Aufgabe es war, Fehler zu behandeln.

Es erhält zwei Props:

• error: der geworfene Error, den Sie protokollieren können
• reset: eine Funktion, die den fehlgeschlagenen Bereich erneut rendert. Rufen Sie sie auf und die Seite versucht es again

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.