Traiter les erreurs de route

Une requête vers l’API du catalogue peut échouer : le service peut être indisponible ou renvoyer une réponse d’erreur. Sans interface adaptée, la personne qui consulte la page ne sait pas si elle doit attendre ou recommencer.

Vous allez ajouter une frontière d’erreur à la route du catalogue. Elle affiche un message et un bouton permettant de relancer le rendu, tandis que la lecture des données reste côté serveur comme dans les leçons précédentes.

Créer la frontière d’erreur du catalogue

Dans l’App Router, le fichier `app/error.tsx` définit une interface de récupération pour les erreurs survenant dans le segment concerné. Pour cette frontière, le composant doit être un composant client : la directive use client lui permet d’utiliser le bouton de récupération fourni par Next.js.

'use client';

export default function Error({ reset }: { error: Error; reset: () => void }) {
  return (
    <div className="rando-etat" role="alert">
      <p>Impossible de charger les données.</p>
      <button className="rando-bouton" onClick={reset}>
        Réessayer
      </button>
    </div>
  );
}

Le composant reçoit `reset`, une fonction que Next.js utilise pour tenter de rendre à nouveau le segment. Le bouton l’appelle après un clic ; si la nouvelle lecture réussit, la page normale s’affiche. Si elle échoue encore, l’interface d’erreur reste pertinente et la personne peut réessayer.

Laisser les erreurs de lecture remonter

La frontière ne remplace pas le traitement des réponses HTTP dans la fonction d’accès aux données. Cette fonction vérifie déjà le statut de la réponse et propage les erreurs de lecture : c’est cette propagation qui permet à Next.js d’activer l’interface définie dans `app/error.tsx`. Ne convertissez pas une erreur réseau ou HTTP en tableau vide, car cela ferait passer un échec pour une recherche sans résultat.

Le composant serveur de `app/page.tsx` n’a pas besoin de capturer l’erreur pour afficher ce message. Laissez l’exception remonter depuis la lecture des randonnées : la frontière prend en charge l’interface de récupération. Le cas d’une réponse réussie qui contient zéro randonnée sera traité dans une leçon ultérieure, séparément d’une erreur.

Vérifier le comportement

Démarrez le projet puis provoquez temporairement une erreur de lecture dans l’environnement de développement, par exemple en rendant l’API de données inaccessible. Vérifiez que le catalogue affiche le texte « Impossible de charger les données. » et que le bouton « Réessayer » est présent. Rétablissez ensuite l’accès et cliquez sur ce bouton : la tentative de nouveau rendu doit permettre d’afficher le catalogue si la source répond correctement.

À retenir

• `app/error.tsx` fournit l’interface de récupération de la route du catalogue.
• Cette frontière est un composant client et utilise `reset` pour tenter un nouveau rendu.
• Laissez remonter les erreurs de lecture : ne les confondez pas avec une réponse vide.
• Affichez un message utilisateur maîtrisé plutôt que les détails techniques de l’erreur.

La prochaine leçon distinguera explicitement une recherche réussie sans résultat d’un échec de lecture.