Maîtriser Next.js Gestion des erreurs avec le routeur de l'application

next.js 13.4 Guide de gestion des erreurs pour le routeur de l'application

Cet article expliquera comment utiliser la nouvelle convention de fichier d'erreur pour gérer les erreurs dans le routeur de l'application dans next.js.

La gestion des erreurs est un aspect clé de tout développement d'applications Web. Dans le passé, Next.js a aidé les développeurs à gérer les erreurs en personnalisant des pages d'erreur telles que 404 et 500 pages. Cependant, ces pages ont des limitations dans le routeur des pages, telles que la prise en charge limitée pour les intégrations d'interface utilisateur spécifiques, la prise en charge obsolète pour les limites d'erreur de réact et les fonctionnalités limitées de l'application lorsqu'une erreur se produit.

Après la sortie de Next.js version 13.4, le nouveau routeur de l'application a été officiellement mis en production. L'application Router améliore l'expérience du support et des développeurs pour la gestion des erreurs et d'autres parties de base de la création d'applications Web.

points clés

• Next.js version 13.4 présente App Router, qui améliore l'expérience du support et des développeurs pour la gestion des erreurs et d'autres parties importantes de votre application Web.
Le fichier
• app dans le répertoire error.tsx crée une limite d'erreur de réaction pour empêcher l'application de s'écraser lorsqu'une erreur se produit. Il peut également agir comme un composant de secours, rendant lorsqu'une erreur est jetée dans la frontière.
• Des exceptions personnalisées peuvent être créées pour abstraction des messages d'erreur sur plusieurs itinéraires de votre application. Par exemple, vous pouvez utiliser un AuthRequiredError personnalisé pour gérer les erreurs d'authentification dans divers itinéraires.
• Les erreurs peuvent se produire n'importe où dans l'application suivante.js. Ils bouillonneront à la limite d'erreur parentale la plus proche. Pour les erreurs de mise en page ou de modèle, le fichier global-error.tsx doit être utilisé. Si une erreur se produit dans le composant du serveur ou lors de l'acquisition de données, next.js transfère l'objet d'erreur correspondant à la limite error.tsx la plus proche.

scènes et paramètres

Pour faciliter la compréhension de la nouvelle API de gestion des erreurs, nous explorerons son implémentation dans l'application d'authentification utilisateur suivante.

L'authentification des utilisateurs est sujette à de nombreuses erreurs, donc lors de la création d'autres applications, il sera très avantageux d'apprendre à gérer les erreurs dans cette situation.

Avant de commencer, veuillez obtenir le code de l'application de démonstration que nous utiliserons dans cet article en clonant le référentiel lié ici (branche principale). Après avoir exécuté l'application, vous devriez voir l'erreur indiquée dans l'image ci-dessous.

Dans cette application de démonstration, la page principale (affichant le formulaire) ne peut être accessible que par l'utilisateur enregistré, mais certaines erreurs se sont produites (dans ce cas, elle est artificielle, mais cela peut également se produire légalement), provoque la session variable à attribuer à null.

Remarque: Pour la simplicité, l'authentification ne sera pas implémentée dans l'application de démonstration.

Cela conduit bien sûr à une erreur, et maintenant, l'application se bloque complètement car elle ne sait pas comment gérer l'erreur!

Maintenant, nous apprendrons à gérer cette erreur pour empêcher notre application de se bloquer, améliorant ainsi considérablement l'expérience utilisateur de l'application.

Créer une page d'erreur

Pour empêcher l'application de se bloquer, dans le répertoire app/, créez un fichier error.tsx. La création de ce fichier crée automatiquement une limite d'erreur de réact qui enveloppe la page principale. Ensuite, dans le fichier error.tsx, exportez la fonction suivante:

"use client";

export default function Error() {
  return (
    <div className="grid h-screen px-4 bg-white place-content-center">
      <div className="text-center">
        <h1 className="font-black text-gray-200 text-9xl">401</h1>
        <p className="text-2xl font-bold tracking-tight text-gray-900 sm:text-4xl">
          未授权！
        </p>
        <p className="mt-4 text-gray-500">
          您必须登录才能访问此页面
        </p>
        <button
          type="button"
          className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring"
        >
          重试
        </button>
      </div>
    </div>
  );
}

Remarque: Le composant d'erreur doit être un composant client! Assurez-vous de les marquer en tant que composants du client.

Les fonctions exportées agiront comme des composants de secours. Si une erreur est jetée dans la frontière, l'erreur est capturée et le composant de secours est rendu, qui devrait ressembler ci-dessous.

Lorsqu'une erreur se produit, deux accessoires sont transmis au composant de secours d'erreur - l'objet d'erreur lui-même et une fonction (généralement appelée réinitialisation) qui essaie de se remettre de l'erreur:

"use client";

type ErrorProps = {
  error: Error;
  reset: () => void;
};

export default function Error({ error, reset }: ErrorProps) {
  // ...
}

Nous pouvons désormais accéder au message d'erreur via l'hélice d'erreur et l'afficher à l'écran comme suit:

<p className="mt-4 text-gray-500">
  {error.message || "您必须登录才能访问此页面"}
</p>

Lorsque cette fonction est appelée, la fonction de réinitialisation tentera de relancer le contenu d'origine entouré de la limite d'erreur. En cas de succès, le composant d'erreur de secours sera remplacé par le contenu renvoyé.

Nous pouvons implémenter les appels de fonction de réinitialisation dans notre bouton à l'aide du gestionnaire OnClick:

<button
  type="button"
  onClick={() => reset()}
  className="inline-block px-5 py-3 mt-6 text-sm font-medium text-white bg-indigo-600 rounded hover:bg-indigo-700 focus:outline-none focus:ring cursor-pointer"
>
  重试
</button>

De cette façon, nous avons réussi à gérer nos erreurs!

Message d'erreur abstrait

Dans une application d'authentification utilisateur réelle, il peut y avoir de nombreux itinéraires qui doivent être protégés, et si une erreur d'authentification se produit, vous devez utiliser le même message d'erreur d'authentification dans plusieurs cas.

Pour résumer les messages d'erreur (et non écrits à plusieurs reprises), nous pouvons facilement créer une exception personnalisée liée à l'authentification.

Pour ce faire, créez un répertoire appelé lib et créez un fichier appelé exceptions.ts dans ce répertoire. Dans ce fichier, nous pouvons créer et exporter des exceptions d'erreur d'authentification personnalisée comme suit:

export class AuthRequiredError extends Error {
  constructor(message = "需要身份验证才能访问此页面") {
    super(message);
    this.name = "AuthRequiredError";
  }
}

Maintenant, nous pouvons lancer cette nouvelle personnalité AuthRequiredError sur la page principale au lieu de la Error:

régulière

export default function Home() {
  if (!session) throw new AuthRequiredError();
  // ...
}

Cette erreur nous donnera le message par défaut passé dans le constructeur, ou une erreur plus spécifique, nous devrons peut-être passer plus tard.

Plus d'informations sur la gestion des erreurs

Enfin, jetons un coup d'œil à certains extras pour les erreurs de mise en page et de serveur.

Erreur dans la mise en page

Les erreurs

peuvent se produire n'importe où dans l'application (pas seulement page.tsx fichiers), et le système de routage de fichiers utilisé par next.js affecte comment error.tsx les limites fonctionnent dans le routage et les dispositions imbriquées.

Les erreurs bouillonneront à la limite d'erreur parentale la plus proche, qui peut être vue dans l'image ci-dessous.

La nature de cette erreur qui bouillonne signifie que la limite error.tsx ne capture pas les erreurs dans le fichier de mise en page dans la même section, car la limite d'erreur enveloppe le fichier de mise en page.

Si une erreur se produit dans la disposition ou le modèle racine, utilisez le fichier global-error.tsx comme indiqué dans la figure ci-dessous.

global-error.tsx Les limites enveloppent toute l'application, alors assurez-vous d'ajouter vos propres balises et uniques lors de l'utilisation de ce fichier. Cette frontière d'erreur capture toutes les erreurs que les autres frontières imbriquées error.tsx ne sont pas capturées, donc elle ne sera pas souvent activée.

Erreur du serveur

Si une erreur se produit dans le composant du serveur ou pendant l'acquisition de données, next.js transfère l'objet d'erreur correspondant à la limite error.tsx la plus proche.

Conclusion et étapes suivantes

Bien que de nombreux développeurs pensent qu'il est lourd de mettre en œuvre la gestion des erreurs, c'est une partie importante de l'application et la mise en œuvre avec succès de la gestion des erreurs améliorera considérablement l'expérience utilisateur de l'application.

Next.js rend cela très facile avec le routeur de l'application et les conventions de fichiers error.tsx.

Vous pouvez consulter Next.js Documentation sur la gestion des erreurs pour plus d'informations sur la gestion des erreurs, et vous pouvez également afficher le code de complétion pour cet article sur GitHub.

FAQ sur la gestion des erreurs de maîtrise dans next.js à l'aide du routeur d'application

(La partie FAQ est omise ici parce que la partie FAQ du texte d'origine a un degré élevé de duplication avec le contenu de l'article, et certains problèmes sont faiblement corrélés avec le mécanisme de gestion des erreurs du routeur d'application. Si nécessaire, vous pouvez ajouter selon le texte d'origine.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!