Gestion des erreurs

Les chargements échouent. La base de données est indisponible, l'enregistrement a disparu, une exception est levée. Sans plan, un seul mauvais await emporte tout l'écran avec lui.

error.jsx est le miroir de loading.jsx : même idée, résultat opposé. Placez-le à côté d'une page et il intercepte tout ce que cette page renvoie comme erreur lors du rendu :

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

Contrairement à loading.jsx, il a une exigence stricte :

'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 doit être un composant client. La raison est indiquée directement dans le JSX : onClick. Un bouton de réessai est une interactivité, et l'interactivité nécessite un composant envoyé au navigateur. Si vous oubliez 'use client', vous obtiendrez l'erreur de gestionnaire d'événements du chapitre précédent, sur la page même dont le rôle était de gérer les erreurs.

Elle reçoit deux props :

• error : l'objet Error qui a été levé, afin que vous puissiez l'enregistrer
• reset : une function qui réaffiche la section qui a échoué. Appelez-la et la page essaiera à nouveau avec again

reset est ce qui fait de ceci plus qu'un écran de plantage amélioré. Une erreur temporaire qui a échoué une fois fonctionnera souvent la deuxième fois, et l'utilisateur n'a jamais eu besoin de tout recharger.

Comme les autres fichiers spéciaux, error.jsx couvre son propre dossier et tout ce qui y est imbriqué, de sorte qu'un seul fichier près de la racine sert de filet de sécurité pour toute une section du site.