Comprendre la gestion des erreurs dans Modern Next.js

Nous expliquons comment gérer les erreurs côté client et côté serveur, expliquant la gestion des erreurs et son processus ainsi que les types d’erreurs spécifiques aux applications Next.js.

La gestion efficace des erreurs est un aspect important du développement d’applications Web qui ne peut être ignoré. Pour offrir une expérience utilisateur simple et des performances optimales, les développeurs doivent apprendre à gérer les erreurs de manière efficace et efficiente dans leurs applications.

La gestion des erreurs définit la manière dont les applications logicielles réagissent et récupèrent des situations inattendues. Il s’agit du processus d’anticipation, de détection et de récupération des erreurs, également appelées exceptions pouvant survenir lors de l’exécution d’un programme. Il constitue une couche de protection renforcée, de sorte que lorsque des problèmes inattendus surviennent, ils puissent être traités avec élégance, préservant ainsi l’intégrité et la convivialité de l’application.

Dans cet article, nous examinerons les subtilités de la gestion des erreurs dans les systèmes modernes. Suivant.js candidatures. Next.js est un Réagir cadre pour créer des applications Web full-stack. Il offre deux manières de gérer les erreurs : la gestion des erreurs côté client et côté serveur. Comprendre cela nous aidera à créer des applications offrant une meilleure expérience utilisateur.

Le processus de gestion des erreurs

Le processus de gestion des erreurs comprend trois étapes principales : la détection, la gestion et la résolution. Chacune de ces étapes joue un rôle important pour maintenir la stabilité d’une application et améliorer son expérience utilisateur.

• Détection: Tout d’abord, le programme doit identifier le moment où une erreur s’est produite. Cela peut être fait à l’aide de blocs try-catch et de validations de données. La validation des données implique de vérifier si les entrées se situent dans la plage attendue.
• Rapports : Après avoir détecté une erreur, celle-ci doit être signalée. Cela signifie fournir des messages d’erreur ou des invites à l’utilisateur. Cela peut être fait à l’aide de journaux d’erreurs, qui impliquent de stocker des informations détaillées sur l’erreur dans un fichier pour un débogage futur tout en transmettant également des messages d’erreur informatifs ou des invites à l’utilisateur.
• Récupération: L’étape suivante du traitement des erreurs est la récupération ou la correction, essentiellement l’étape de « réparation » du processus. Selon le type d’erreur, le programme peut se corriger lui-même pour les erreurs attendues ou s’arrêter proprement pour éviter d’autres problèmes en cas d’erreurs inattendues.

Types d’erreurs dans Next.js

Next.js rencontre principalement deux grandes catégories d’erreurs : les erreurs côté client et côté serveur.

Erreurs côté client

Des erreurs côté client se produisent dans le navigateur de l’utilisateur après le téléchargement du HTML et du JavaScript initiaux à partir du serveur. Ces erreurs empêchent l’application de fonctionner comme prévu côté client. Désormais, différentes choses peuvent provoquer ce type d’erreur lors de l’exécution du code. Les sous-sections suivantes mettent en évidence certaines de ces causes :

Erreurs de syntaxe

Des erreurs de syntaxe se produisent lorsque le code ne suit pas les règles syntaxiques du langage de programmation. En JavaScript, ces erreurs peuvent résulter d’erreurs typographiques, de crochets ou de points-virgules manquants ou d’autres erreurs liées à la syntaxe. Ces erreurs empêchent le navigateur d’interpréter ou d’exécuter le code.

Voici un exemple d’erreur de syntaxe :

console.log("Hello, world!";

En raison de la parenthèse manquante dans le code ci-dessus, le code ne s’exécutera pas tant qu’il ne sera pas corrigé.

Erreurs d’exécution

Des erreurs d’exécution se produisent lorsque le code, bien que syntaxiquement correct, rencontre un problème lors de l’exécution. Ces erreurs sont également appelées exceptions. Ils peuvent résulter de divers problèmes, tels que le référencement de variables non définies, la division par zéro ou l’appel de méthodes sur des objets nuls.

Voici un exemple d’erreur d’exécution :

let person = {};
console.log(person.name.toUpperCase());

Ici, nous essayons d’accéder à une propriété qui n’a pas été définie. Lorsque nous exécutons ce code, une erreur sera générée, comme le montre l’image ci-dessous :

Erreurs de récupération de données

Des erreurs de récupération de données se produisent lorsque les tentatives de récupération de données à partir de sources externes, telles que des API, échouent en raison de problèmes de réseau, de points de terminaison d’API non valides ou d’une gestion inappropriée des réponses.

Le code ci-dessous montre une instance d’erreur de récupération de données :

fetch("https://api.example.com/data")
  .then((response) => {
    if (!response.ok) {
      throw new Error("Failed to fetch data");
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Data fetching error:", error));

Erreurs côté serveur

Les erreurs côté serveur sont des problèmes qui se produisent du côté serveur d’une application, et non dans le navigateur de l’utilisateur ou dans l’environnement côté client. Ces erreurs impliquent généralement des problèmes de traitement des données, d’interactions avec la base de données ou de rendu côté serveur. Dans Next.js, les erreurs côté serveur se répartissent en deux catégories principales : les erreurs de routage API et les erreurs de résolution de mise en page.

Erreurs de route API

Dans Next.js, les routes API sont un type spécifique de route utilisé pour créer des points de terminaison côté serveur pour votre application. Ces points de terminaison gèrent la récupération de données, l’exécution de la logique et la communication entre votre frontend et votre backend. Cependant, des erreurs peuvent survenir au sein de ces routes API.

Des erreurs de route API se produisent en cas de problème de traitement des requêtes vers ces routes côté serveur. Des exemples de cette erreur incluent les erreurs de connexion à la base de données, telles que l’échec de la connexion à la base de données ou les erreurs de requête de base de données, ainsi que les erreurs lors de la récupération ou de la manipulation des données dans le code côté serveur.

Les erreurs de routage d’API peuvent entraîner l’échec de requêtes, une récupération de données incomplète ou incorrecte et une interruption des fonctionnalités des fonctionnalités côté serveur de l’application.

Erreurs de résolution de mise en page

Des erreurs de résolution de mise en page se produisent lorsque Next.js ne peut pas résoudre ou identifier les composants de mise en page spécifiés pour le rendu des pages. Les composants de mise en page sont utilisés pour définir la structure et les éléments communs des pages dans les applications Next.js.

Des exemples de ces erreurs peuvent être une tentative d’utilisation d’un composant de mise en page qui n’existe pas ou qui a été déplacé, une configuration incorrecte des composants de mise en page dans les composants de page, des erreurs dans la résolution des composants de mise en page dues à des problèmes de système de fichiers ou à une mauvaise configuration.

Les erreurs de résolution de mise en page peuvent entraîner le rendu des pages sans la structure de mise en page prévue, entraînant des mises en page incohérentes ou cassées dans l’application.

Gestion des erreurs côté client

Dans Next.js, les erreurs côté client telles que les erreurs de syntaxe, d’exécution et de récupération de données peuvent empêcher l’exécution de votre application si elles ne sont pas traitées efficacement. La meilleure façon d’empêcher et de réparer notre application contre le crash consiste à utiliser un limite d’erreur.

En règle générale, chaque fois qu’une erreur se produit lors du rendu dans votre application React, React supprime complètement l’interface utilisateur, provoquant ainsi le crash de l’ensemble de votre application. Une limite d’erreur agit comme un filet de sécurité pour votre application. Il détecte les erreurs qui se produisent n’importe où dans son arborescence de composants enfants, empêchant ainsi l’ensemble de l’application de planter. Lorsqu’une limite d’erreur détecte une erreur, elle fournit une interface utilisateur de secours et enregistre les informations sur l’erreur.

Dans les versions précédentes de Next.js, il a aidé les développeurs dans la gestion des erreurs grâce à l’utilisation de pages d’erreur personnalisées telles que les pages 404 et 500. Cependant, ces pages ont des limitations dans le Routeur de pages. tels qu’une personnalisation limitée, des informations sur les erreurs limitées et une prise en charge obsolète des limites d’erreur de React.

Avec la sortie du nouveau Routeur d’applicationla gestion des erreurs a grandement amélioré l’expérience du développeur.

Configuration du projet

Pour définir des limites d’erreur dans notre projet, nous devons d’abord créer un projet Next.js. Vous pouvez le faire en exécutant la commande suivante sur votre terminal :

npx create-next-app@latest my-nextjs-app

Après avoir configuré notre projet, nous avons besoin d’une page de route imbriquée pour implémenter les limites d’erreur dans notre application Next.js.

Tout d’abord, nous devons créer les pages des itinéraires. Créer un page.jsdéposez dans votre app/adminDashboard dossier et ajoutez-y ce qui suit :

export default function Admin() {
  return (
    <div className="items-center flex flex-col justify-center mb-4">
      This is the Admin page!
    </div>
  );
}

Ensuite, pour votre itinéraire imbriqué, créez un autre page.js fichier dans votre app/adminDashboard/profile dossier et ajoutez-y le code suivant :

export default function Profile() {
  return (
    <div className=" items-center flex justify-center mb-4">
      This is Profile Page!
    </div>
  );
}

Désormais, pour pouvoir gérer les erreurs dans notre application, nous allons intentionnellement simuler une erreur réseau dans le parcours de la page de profil. Mettre à jour le app/adminDashboard/profile.js fichier avec le code suivant :

"use client";
import { useEffect, useState } from "react";

function simulateNetworkError(delay = 1000) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error("Network Error"));
    }, delay);
  });
}

export default function Profile() {
  const [error, setError] = useState(null);

  const fetchData = async () => {
    try {
      await simulateNetworkError();
    } catch (error) {
      setError(error);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="items-center flex justify-center mb-4">
      {error ? <div> {error}</div> : <div>This is Profile Page!</div>}
    </div>
  );
}

Dans le code ci-dessus, nous avons créé un simulateNetworkError fonction qui crée une promesse de simuler une erreur réseau après un deuxième délai. Cela créera une erreur d’exécution pour notre application, comme le montre l’image ci-dessous.

Pour gérer cette erreur avec une limite d’erreur, créez un error.js fichier dans votre app annuaire, app/error.jset ajoutez-y le code suivant :

"use client";
import { useEffect } from "react";
export default function Error({ error, reset }) {
  useEffect(() => {
    
    console.error(error);
  }, [error]);
  return (
    <div className="flex flex-col items-center justify-center mt-52">
      <h2 className="mb-8 text-xl-2">Something went wrong!</h2>
      <div className="mt-4">
        <button
          className="p-4 bg-red-500 rounded-md"
          
          onClick={() => reset()}
        >
          Try again
        </button>
      </div>
    </div>
  );
}

Dans le code ci-dessus, le error.js le fichier crée automatiquement un Limite d’erreur de réaction qui enveloppe un segment enfant imbriqué ou page.js composant. Si une erreur se produit dans le segment de route, le composant React exporté depuis le error.js Le fichier est utilisé comme interface utilisateur de secours au lieu de planter l’ensemble de l’application.

Certaines erreurs peuvent être temporaires et il suffit de réessayer pour résoudre le problème. C’est là que le reset La fonction entre en jeu. Elle invite l’utilisateur à récupérer de l’erreur en essayant de restituer le contenu de la limite d’erreur. En cas de succès, le composant d’erreur de repli est remplacé par le résultat du nouveau rendu, comme indiqué dans l’image ci-dessous.

Gestion des erreurs dans les mises en page

Dans Next.js, si une erreur se produit dans un composant enfant de la limite d’erreur, elle sera détectée. Cependant, les limites d’erreur définies dans error.js ne détectent pas les erreurs générées dans les composants layout.js du même segment.

Voyons cela dans notre application de démonstration. Créer un components dossier dans le app dossier. À l’intérieur du components dossier, créez un Navbar.js fichier et ajoutez-y le code suivant :

"use client";
import { useRouter } from "next/navigation";

export default function Navbar() {
  const router = useRouter();
  return (
    <nav className="bg-gray-800 h-full w-64 fixed top-0 left-0 flex flex-col justify-between">
      <ul className="flex flex-col mt-6">
        <li
          className="text-white py-2 px-4 cursor-pointer hover:bg-gray-700"
          onClick={() => router.push("https://www.telerik.com/")}
        >
          Home
        </li>
        <li
          className="text-white py-2 px-4 cursor-pointer hover:bg-gray-700"
          onClick={() => router.push("/dashboard")}
        >
          Admin
        </li>
        <li
          className="text-white py-2 px-4 cursor-pointer hover:bg-gray-700"
          onClick={() => router.push("/dashboard/profile")}
        >
          Profile
        </li>
      </ul>
    </nav>
  );
}

Dans le code ci-dessus, nous avons utilisé le useRouter crochet de next/navigation pour naviguer facilement entre nos itinéraires.

Créer un layout.js fichier dans votre app/dashboard dossier et ajoutez-y le code suivant :

"use client ";
import Navbar from "../components/Navbar";
export default function AdminDashboardLayout({ children }) {
  return (
    <>
      <Navbar />
      {children}
    </>
  );
}

Dans le code ci-dessus, nous avons rendu le Navbar composant dans la page du tableau de bord et a transmis le children soutenir. Désormais, lorsque vous accédez à la page du tableau de bord, cela fonctionne parfaitement, mais lorsque vous cliquez sur la page de profil, l’interface utilisateur de secours s’affiche et l’application entière se bloque. C’est parce que nous traitons l’erreur dans le même segment.

Pour résoudre ce problème, créez un error.js fichier dans votre app/dashboard/profile dossier et ajoutez-y le code suivant :

"use client";
import { useEffect } from "react";
export default function Error({ error, reset }) {
  useEffect(() => {
    
    console.error(error);
  }, [error]);
  return (
    <div className="flex flex-col items-center justify-center mt-52">
      <h2 className="mb-8 text-xl-2">Something went wrong!</h2>
      <div className="mt-4">
        <button
          className="p-4 bg-red-500 rounded-md"
          
          onClick={() => reset()}
        >
          Try again
        </button>
      </div>
    </div>
  );
}

Avec le error.js fichier dans la route imbriquée, nous pouvons détecter l’erreur plus tôt tout en conservant l’interactivité dans d’autres parties de notre application, comme le montre l’image ci-dessous.

Pour gérer les erreurs dans la disposition racine de votre application, créez un global-error.js déposer. Le global-error.js Le fichier enveloppe l’intégralité de l’application et le composant de secours remplace la disposition racine lorsqu’il est actif.

Gestion des erreurs côté serveur

Lorsqu’une erreur se produit dans un composant serveur, Next.js transmettra un objet Erreur au serveur le plus proche. error.js déposer. Pour des raisons de sécurité, Next.js envoie uniquement des messages génériques, afin d’éviter de divulguer des informations potentiellement sensibles au client.

Erreurs de route API

Nous pouvons gérer les erreurs de route API en utilisant try/catch blocs pour détecter les erreurs et renvoyer les réponses d’erreur appropriées au client.

import fetch from "node-fetch";
export default async function handler(req, res) {
  try {
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error("Failed to fetch data");
    }
    const data = await response.json();
    res.status(200).json(data);
  } catch (error) {
    console.error("Error fetching data:", error);
    res.status(500).json({ message: "Internal Server Error" });
  }
}

Dans l’exemple ci-dessus, nous avons utilisé fetch faire un GET demande à un point de terminaison d’API externe. Si la réponse échoue (!response.ok), nous renvoyons une erreur, et si cela réussit, nous renvoyons les données. Si une erreur se produit pendant l’opération de récupération, nous l’attrapons, la journalisons et renvoyons une réponse d’erreur interne du serveur 500.

Conclusion

Les développeurs doivent gérer efficacement les erreurs au sein de leurs applications pour offrir une meilleure expérience utilisateur. Dans cet article, nous avons expliqué comment gérer les erreurs côté client et côté serveur, expliquant la gestion des erreurs et son processus et détaillant les types d’erreurs spécifiques aux applications Next.js.