Création d'un système robuste de gestion des erreurs frontales avec Axios et des hooks personnalisés

Introduction

Une gestion efficace des erreurs est cruciale pour offrir une expérience utilisateur transparente et maintenir un code propre et évolutif. Dans les applications complexes, la gestion manuelle des erreurs entre les composants conduit souvent à un code encombré et incohérent. Ce guide vous montrera comment créer un système de gestion des erreurs modulaire, évolutif et centralisé dans React à l'aide d'Axios, d'un hook personnalisé (useApi) et de couches de service modulaires pour créer une structure conviviale, organisée et efficace.

Hook : Pourquoi la gestion centralisée des erreurs est importante

Imaginez que vous construisez une plateforme de commerce électronique. Plusieurs composants récupèrent les données de diverses API, et chacun peut échouer pour différentes raisons : problèmes de réseau, erreurs de serveur ou saisie utilisateur non valide. Sans un système centralisé de gestion des erreurs, votre code devient encombré de contrôles d'erreurs répétitifs et les utilisateurs reçoivent des commentaires incohérents. Comment pouvez-vous rationaliser ce processus pour garantir la fiabilité et une expérience utilisateur transparente ? Ce guide vous montrera comment.

À la fin, vous apprendrez :

• Comment configurer une gestion centralisée des erreurs avec les intercepteurs Axios.
• Le rôle d'un hook useApi personnalisé pour gérer l'état des requêtes API.
• Les avantages de l'utilisation de modules de service pour organiser la logique API.
• Techniques avancées pour une gestion conviviale des erreurs, y compris des options de nouvelle tentative et d'annulation de demande.

Table des matières

1. Pourquoi une gestion centralisée des erreurs ?
2. Mise en œuvre de base
3. Configuration de l'instance Axios avec des intercepteurs
4. Création du hook useApi personnalisé
5. Comprendre les promesses et le rejet des promesses
6. Organisation des modules de service
7. Exemple : Service utilisateur
8. Améliorations avancées (facultatif)
   • Personnalisation de l'analyse des erreurs
   • Mécanisme de nouvelle tentative
   • Notifications détaillées
   • Annuler les demandes de démontage de composant
9. Points de connexion
10. Résumé visuel
11. Rassembler tout cela : un exemple concret
12. Bonnes pratiques
13. Lectures complémentaires
14. Dépannage
15. Configuration de l'environnement
16. Conclusion
17. Appel à l'action

Pourquoi une gestion centralisée des erreurs ?

La gestion centralisée des erreurs répond à deux défis courants :

Code d'erreur répétitif

• Problème : Sans mécanisme central, les composants s'appuient sur plusieurs blocs try-catch.
• Impact : entraîne une gestion des erreurs incohérente et un code redondant.

Expérience utilisateur incohérente

• Problème : Les messages d'erreur peuvent varier à travers l'application sans centralisation.
• Impact : crée une expérience utilisateur décousue et peut dérouter les utilisateurs.

L'utilisation d'une approche centralisée avec les intercepteurs Axios, un hook personnalisé (useApi) et des modules de service résout ces problèmes en :

• Emplacement unique pour l'analyse des erreurs et la messagerie : fournit un endroit unifié pour gérer toutes les erreurs, garantissant ainsi la cohérence.
• Séparation des préoccupations : permet aux composants de se concentrer uniquement sur la présentation des données et l'interaction de l'utilisateur, laissant la gestion des erreurs aux modules centralisés.

Implémentation de base

Configuration de l'instance Axios avec des intercepteurs

Les intercepteurs Axios sont des fonctions qu'Axios appelle pour chaque demande ou réponse. En configurant des intercepteurs de réponses, vous pouvez gérer globalement les erreurs, analyser les réponses et effectuer des actions telles que la journalisation ou la redirection des utilisateurs en fonction de conditions spécifiques.

Étape 1 : Importer les modules nécessaires

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Étape 2 : Créer l'instance Axios

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

Étape 3 : Ajouter un intercepteur de réponse

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

Explication :

• Error Parsing : L'intercepteur vérifie si l'erreur a une réponse. Sinon, il suppose une erreur réseau et affiche un message correspondant.
• Messages d'erreur personnalisés : il tente d'utiliser des messages d'erreur personnalisés en fonction du type d'erreur fourni par le serveur. Si aucun n'est disponible, il revient aux messages prédéfinis.
• Commentaires des utilisateurs : utilise React-toastify pour afficher les notifications Toast, améliorant ainsi l'expérience utilisateur en fournissant des commentaires immédiats.
• Redirection : redirige les utilisateurs vers la page de connexion si une erreur 401 non autorisée se produit, garantissant ainsi la sécurité en empêchant tout accès non autorisé.

Étape 4 : Exporter l'instance Axios

export default axiosInstance;

Messages d'erreur personnalisés

Définissez vos messages d'erreur personnalisés dans un fichier de configuration distinct pour maintenir la cohérence et la facilité de gestion.

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

Résumé rapide : configuration de l'intercepteur Axios

La configuration des intercepteurs Axios permet :

• Analyse centralisée des erreurs : gère les erreurs en un seul endroit, garantissant ainsi la cohérence entre toutes les requêtes API.
• Commentaires des utilisateurs : utilise React-toastify pour informer immédiatement les utilisateurs des problèmes.
• Redirection et sécurité : redirige les utilisateurs non autorisés vers une connexion en cas de besoin, garantissant ainsi la sécurité de l'application.

Cette instance Axios centralisée est essentielle pour créer une couche de communication API fiable et conviviale qui garantit une gestion cohérente de toutes les requêtes API et la gestion des erreurs dans votre application.

Création du hook useApi personnalisé

Le hook useApi centralise la gestion des requêtes API, la gestion du chargement, des données et des états d'erreur. En faisant abstraction de ce processus, useApi permet aux composants d'éviter les blocs try-catch répétitifs et de se concentrer sur la présentation des données.

Paramètres :

• apiFunc (Function) : La fonction API à exécuter, généralement à partir de modules de service.
• immédiat (booléen, facultatif) : détermine si l'appel d'API doit être effectué immédiatement après l'initialisation du hook. La valeur par défaut est false.

Valeurs renvoyées :

• data : les données de réponse de l'appel API.
• loading : Indique si l'appel API est en cours.
• erreur : capture tous les messages d'erreur provenant des appels d'API ayant échoué.
• request : la fonction pour lancer l'appel API, qui peut être appelée avec les paramètres nécessaires.

Mise en œuvre:

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Explication:

• Gestion de l'État :
  • données : stocke les données de réponse.
  • loading : Indique si l'appel API est en cours.
  • erreur : capture tous les messages d'erreur.
• Fonction de requête :
  • Initie l'appel API.
  • Gère les mises à jour d'état en fonction du résultat de l'appel API.

Comprendre les promesses et le rejet des promesses

Avant d'approfondir, il est essentiel de comprendre les promesses et le rejet de promesses en JavaScript, car ils jouent un rôle central dans la gestion des opérations asynchrones telles que les appels d'API.

• Promesses : Une promesse est un objet représentant l'achèvement ou l'échec éventuel d'une opération asynchrone. Il vous permet de joindre des rappels pour gérer le succès (résolution) ou l'échec (rejet) de l'opération.
• Rejet de la promesse : Lorsqu'une opération échoue, une promesse est "rejetée", déclenchant la méthode .catch ou le deuxième paramètre de .then.

Pertinence dans Axios et useApi :

• Axios et Promises : Axios utilise Promises pour gérer les requêtes HTTP. Lorsque vous effectuez une demande à l'aide d'Axios, elle renvoie une promesse qui se résout avec les données de réponse ou la rejette avec une erreur.
• Rejet de la promesse dans les intercepteurs Axios : Dans l'intercepteur Axios, lorsqu'une erreur se produit, l'intercepteur rejette la promesse en utilisant Promise.reject(error). Ce rejet se propage là où l'appel API a été effectué.
• Attraper les rejets dans useApi : la fonction de requête du hook useApi utilise try-catch pour gérer ces rejets. Lorsque apiFunc(...args) rejette, le bloc catch capture l'erreur, mettant à jour l'état d'erreur en conséquence.

Importance de gérer les rejets de promesses :

• Empêcher les rejets non gérés : si les rejets de promesse ne sont pas gérés, ils peuvent entraîner des comportements inattendus et rendre le débogage difficile.
• Gestion cohérente des erreurs : en centralisant la gestion des rejets de promesse, vous vous assurez que toutes les erreurs sont gérées de manière uniforme, améliorant ainsi la fiabilité du code et l'expérience utilisateur.

Que se passe-t-il si le hook useApi n’est pas utilisé ?

Sans le hook useApi, vous devrez implémenter des blocs try-catch dans chaque composant qui effectue un appel API. Cette démarche conduit à :

• Code répétitif : chaque composant aurait une logique de gestion des erreurs similaire, augmentant la redondance du code.
• Gestion des erreurs incohérentes : différents composants peuvent gérer les erreurs différemment, conduisant à une expérience utilisateur incohérente.
• Effort de maintenance accru : la mise à jour de la logique de gestion des erreurs nécessiterait des modifications sur plusieurs composants, ce qui rendrait la maintenance fastidieuse.

En utilisant le hook useApi, vous éliminez la logique répétitive de gestion des erreurs, favorisant ainsi un code plus propre et plus maintenable.

Exemple d'utilisation :

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Dans cet exemple, le hook useApi gère l'appel API pour récupérer les produits. Il gère les états de chargement, capture toutes les erreurs et fournit les données récupérées au composant pour le rendu.

Organisation des modules de services

Les modules de service définissent les fonctions des points de terminaison de l'API, organisées par entité (par exemple, utilisateurs, produits). Cette structure sépare la logique de l'API du code des composants, garantissant ainsi la modularité et la réutilisation.

Exemple : Service produit

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Exemple : service utilisateur

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

Avantages des modules de services :

• Activer la réutilisation et la modularité : les fonctions API peuvent être réutilisées sur plusieurs composants, réduisant ainsi la duplication de code.
• Assurer la séparation des préoccupations : maintient les composants propres en déplaçant la logique de l'API dans les services, améliorant ainsi l'organisation et la maintenabilité du code.
• Tests plus faciles : les modules de service peuvent être testés indépendamment, garantissant que les interactions API fonctionnent comme prévu avant de les intégrer dans les composants.

Améliorations avancées (facultatif)

Pour ceux qui sont prêts à aller plus loin dans leur système de gestion des erreurs, envisagez de mettre en œuvre ces techniques avancées :

Personnalisation de l'analyse des erreurs

Catégorisez les erreurs (par exemple, réseau ou validation) et fournissez des messages exploitables pour aider les utilisateurs à comprendre les problèmes et les solutions possibles.

Mise en œuvre :

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

Explication :

• Catégorisation des erreurs : l'intercepteur vérifie la propriété de type dans la réponse d'erreur pour déterminer la nature de l'erreur (par exemple, validation ou authentification).
• Messages exploitables : fournit aux utilisateurs des messages d'erreur spécifiques en fonction du type d'erreur, améliorant ainsi leur compréhension et leur capacité à répondre de manière appropriée.

Mécanisme de nouvelle tentative

Implémentez des options de nouvelle tentative pour les demandes ayant échoué, telles qu'un bouton de nouvelle tentative dans l'interface utilisateur ou des tentatives automatiques avec une interruption exponentielle, pour améliorer la fiabilité.

Mise en œuvre :

export default axiosInstance;

Explication :

• Nouvelles tentatives : configure Axios pour réessayer les demandes ayant échoué jusqu'à trois fois avec une stratégie d'attente exponentielle.
• Conditions de nouvelle tentative : les nouvelles tentatives se produisent en cas d'erreurs réseau, de requêtes idempotentes ou lorsque le serveur répond avec une erreur interne du serveur 500.
• Journalisation des tentatives : enregistre chaque nouvelle tentative, ce qui peut être utile pour le débogage et la surveillance.

Notifications détaillées

Différenciez les notifications par gravité (informations, avertissement, erreur) pour aider les utilisateurs à comprendre l'importance de l'erreur.

Mise en œuvre :

// config/customErrors.js

const ERROR_MESSAGES = {
  NETWORK_ERROR: "Network error. Please check your connection and try again.",
  BAD_REQUEST: "There was an issue with your request. Please check and try again.",
  UNAUTHORIZED: "You are not authorized to perform this action. Please log in.",
  FORBIDDEN: "Access denied. You don't have permission to view this resource.",
  NOT_FOUND: "The requested resource was not found.",
  GENERIC_ERROR: "Something went wrong. Please try again later.",

  // You can add more messages here if you want
};

export default ERROR_MESSAGES;

Explication :

• Types de notification : Détermine le type de notification toast (info, avertissement, erreur) en fonction de la catégorie d'erreur.
• Commentaires des utilisateurs : fournit aux utilisateurs des commentaires spécifiques au contexte, les aidant à comprendre la gravité et la nature du problème.

Annuler les demandes lors du démontage du composant

Utilisez les jetons d'annulation Axios pour éviter les fuites de mémoire en annulant les requêtes en cours si un composant se démonte.

Mise en œuvre :

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Explication :

• Annuler les jetons : utilise les jetons d'annulation Axios pour annuler les requêtes API en cours lorsqu'une nouvelle requête est effectuée ou lorsque le composant est démonté.
• Prévenir les fuites de mémoire : garantit qu'aucune mise à jour d'état ne se produit sur les composants non montés, évitant ainsi les fuites de mémoire potentielles.
• Journalisation des demandes annulées : enregistre les demandes annulées à des fins de débogage.

Résumé des améliorations avancées

La mise en œuvre de ces techniques avancées fait passer votre système de gestion des erreurs au niveau supérieur :

• Personnalisation de l'analyse des erreurs : fournit des messages d'erreur plus spécifiques aux utilisateurs, les aidant à comprendre et à résoudre directement les problèmes.
• Mécanisme de nouvelle tentative : améliore la fiabilité en permettant aux demandes de réessayer automatiquement ou manuellement après certaines erreurs.
• Notifications détaillées : fait la différence entre les types d'erreurs, en affichant des notifications en fonction de leur gravité pour mieux informer les utilisateurs.
• Annuler les requêtes lors du démontage du composant : empêche les fuites de mémoire et les requêtes redondantes, garantissant ainsi des performances d'application stables et efficaces.

Ces améliorations sont facultatives mais très précieuses car elles ajoutent de la profondeur, de la flexibilité et des améliorations axées sur l'utilisateur à l'approche de gestion des erreurs de votre application.

Points de connexion

Lorsqu'un composant initie un appel API via useApi, le flux suivant est déclenché :

Les composants utilisent des modules de service :

Chaque module de service (par exemple, userService, productService) définit des fonctions pour des points de terminaison d'API spécifiques et utilise l'axiosInstance configurée. Les composants interagissent uniquement avec ces fonctions de service.

useApi déclenche Axios via le module de service :

Les composants transmettent une fonction de service (par exemple, productService.getProducts) à useApi. Lorsque la requête est appelée, useApi transmet la fonction au service, qui effectue ensuite la requête HTTP via axiosInstance.

Analyse d'erreurs personnalisée dans les intercepteurs Axios :

Les intercepteurs d'axiosInstance gèrent la journalisation des erreurs, analysent les messages d'erreur personnalisés prédéfinis et centralisent la gestion des erreurs.

Réponses structurées de useApi :

useApi renvoie des états structurés (données, chargement et erreur) au composant, lui permettant de se concentrer uniquement sur la présentation des données et la gestion des interactions.

Résumé visuel

Le schéma suivant décrit comment chaque composant du système de gestion des erreurs interagit au sein de l'application, depuis l'appel d'API initial jusqu'aux commentaires des utilisateurs :

1. Composant

   • Le composant lance les requêtes API à l'aide du hook useApi, qui élimine les complexités de la gestion des appels API, de la gestion des erreurs et des états de chargement.

2. utiliserApi Hook

   • useApi est un hook personnalisé qui reçoit la fonction pour la requête API (du module de service). Il gère l'état de chargement de la requête, gère les erreurs et renvoie des réponses structurées (données, chargement, erreur) au composant.

3. Module de services

   • Le module de service définit des fonctions spécifiques pour chaque point de terminaison de l'API (par exemple, getProducts, createProduct) et utilise l'axiosInstance centralisée pour toutes les requêtes, garantissant ainsi la cohérence dans toute l'application.

4. Instance Axios

   • L'axiosInstance gère les requêtes et les réponses HTTP, en appliquant toutes les configurations personnalisées telles que les URL de base et les en-têtes.

5. Réponse API

   • La réponse de l'API est traitée via les intercepteurs Axios, qui gèrent les erreurs de manière globale. Cela inclut l'analyse des messages d'erreur personnalisés et le déclenchement de notifications utilisateur.

6. Gestion des erreurs et notifications des utilisateurs

   • Les intercepteurs affichent des messages d'erreur à l'utilisateur via des notifications de réaction et peuvent gérer des actions supplémentaires, comme rediriger les utilisateurs vers la page de connexion en cas d'erreurs d'authentification.

Ce flux permet une gestion centralisée des erreurs et des commentaires cohérents des utilisateurs, permettant aux composants de se concentrer uniquement sur la présentation des données sans avoir à gérer une logique répétitive de vérification des erreurs.

Rassembler tout cela : un exemple concret

Composant Liste de produits

Cet exemple illustre l'ensemble du flux, depuis l'appel d'API jusqu'à l'affichage des données, avec une gestion centralisée des erreurs et des commentaires.

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Répartition des composants :

• Importer des relevés :

  • réagir-toastify : utilisé pour afficher les notifications toast.
  • productService : contient les fonctions API liées aux produits.
  • useApi : hook personnalisé pour gérer les appels d'API.

• Initialisation du crochet :

  • Initialise le hook useApi avec la fonction getProducts de productService. Le paramètre false indique que l'appel d'API ne doit pas avoir lieu immédiatement après l'initialisation du hook.

• Déclencheur d'appel API :

  • Utilise useEffect pour appeler la fonction de requête lorsque le composant est monté, récupérant la première page des produits.

• Gestion des erreurs :

  • Un autre useEffect écoute les changements dans l'état d'erreur. Si une erreur se produit, elle déclenche une notification toast pour informer l'utilisateur.

• Rendu conditionnel :

  • État de chargement : affiche un message de chargement pendant que l'appel API est en cours.
  • État d'erreur : affiche un message d'erreur si l'appel API échoue.
  • Rendu des données : une fois les données récupérées avec succès, une grille de produits est affichée avec leurs images, leurs noms et leurs prix.

Cet exemple montre comment la gestion centralisée des erreurs simplifie la logique des composants et garantit des commentaires cohérents des utilisateurs.

Meilleures pratiques

Le respect des meilleures pratiques garantit que votre système de gestion des erreurs est efficace, maintenable et convivial.

Séparation des préoccupations

• Description : Séparez la logique de l'API des composants de l'interface utilisateur en utilisant des modules de service. Cela améliore l'organisation et la maintenabilité du code.
• Exemple : Au lieu d'effectuer des appels d'API directement au sein des composants, déléguez-les à des modules de service comme productService.js.

Message d'erreur cohérent

• Description : gérez toutes les erreurs de manière uniforme pour simplifier le débogage et offrir une expérience utilisateur transparente.
• Exemple : L'utilisation de messages d'erreur prédéfinis dans customErrors.js garantit que les utilisateurs reçoivent des commentaires cohérents, quelle que soit l'origine de l'erreur.

Évitez le code répétitif

• Description : utilisez une gestion centralisée des erreurs et des hooks personnalisés pour éliminer les blocs try-catch répétitifs entre les composants.
• Exemple : Le hook useApi gère les états d'erreur et les notifications, permettant aux composants de se concentrer uniquement sur le rendu des données.

Messages d'erreur significatifs

• Description : fournissez des messages d'erreur conviviaux et exploitables pour améliorer la compréhension et réduire la frustration.
• Exemple : Au lieu d'afficher des messages génériques comme "Une erreur s'est produite", utilisez des messages spécifiques tels que "Erreur de validation : veuillez saisir une adresse e-mail valide."

Gérer les cas de bord

• Description : Anticipez et gérez les scénarios inattendus, tels que les pannes de réseau ou les erreurs de serveur, pour éviter que votre application ne plante.
• Exemple : L'intercepteur Axios gère les erreurs réseau en affichant un toast "Erreur réseau" et en empêchant l'application de se bloquer.

Gestion sécurisée des erreurs

• Description : Évitez d'exposer des informations sensibles dans les messages d'erreur. Fournissez des messages conviviaux tout en enregistrant les erreurs détaillées en toute sécurité sur le serveur.
• Exemple : affichez des messages d'erreur génériques aux utilisateurs tout en envoyant des journaux d'erreurs détaillés à un service de journalisation comme Sentry pour les développeurs.

Lectures complémentaires

Améliorez votre compréhension des concepts abordés dans ce guide avec les ressources suivantes :

• Documentation des intercepteurs Axios : découvrez comment utiliser les intercepteurs Axios pour gérer globalement les requêtes et les réponses.
• Documentation React Hooks : Comprendre les principes fondamentaux de React Hooks pour gérer l'état et les effets secondaires.
• Introduction à Redux Toolkit : Démarrez avec Redux Toolkit pour une gestion efficace de l'état dans les applications React.
• Documentation React-Toastify : Découvrez comment implémenter les notifications toast pour de meilleurs commentaires des utilisateurs.

Dépannage

1. Les notifications Toast n'apparaissent pas

• Cause : Le Un composant de React-toastify est peut-être manquant dans votre application.
• Solution : assurez-vous que est inclus dans le composant principal de votre application, généralement dans pages/_app.js.

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

2. Requêtes API non interceptées par les intercepteurs

• Cause : Les modules de service importent peut-être la bibliothèque Axios par défaut au lieu de l'axiosInstance centralisée.
• Solution : Assurez-vous que tous les modules de service importent l'axiosInstance centralisée.

const axiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL || '',
  headers: {
    'Content-Type': 'application/json',
  },
});

3. Les redirections ne fonctionnent pas sur des erreurs spécifiques

• Cause : Le routeur de next/router peut ne pas être correctement importé ou utilisé en dehors des composants React.
• Solution : Assurez-vous que l'intercepteur Axios est utilisé dans un contexte où le routeur peut effectuer des redirections. Vous pouvez également gérer les redirections dans le hook useApi ou dans les composants.

Configuration de l'environnement

La gestion de différents environnements garantit que votre application interagit avec les points de terminaison d'API appropriés pendant le développement, les tests et la production.

Étape 1 : Définir les variables d'environnement

Créez un fichier .env.local dans le répertoire racine de votre projet et définissez l'URL de base de votre API :

axiosInstance.interceptors.response.use(
  (response) => response, // Pass through successful responses
  (error) => {
    if (!error.response) {
      toast.error(ERROR_MESSAGES.NETWORK_ERROR);
      return Promise.reject(error);
    }

    const { status, data } = error.response;
    let message = ERROR_MESSAGES[status] || ERROR_MESSAGES.GENERIC_ERROR;

    // Custom logic for specific error types
    if (data?.type === 'validation') {
      message = `Validation Error: ${data.message}`;
    } else if (data?.type === 'authentication') {
      message = `Authentication Error: ${data.message}`;
    }

    // Display error notification
    toast.error(message);

    // Handle unauthorized access by redirecting to login
    if (status === 401) {
      Router.push('/login');
    }

    return Promise.reject(error);
  }
);

Étape 2 : accéder aux variables d'environnement dans le code

Assurez-vous que votre instance Axios utilise la variable d'environnement :

// utils/axiosInstance.js
import axios from 'axios';
import ERROR_MESSAGES from '../config/customErrors';
import { toast } from 'react-toastify';
import Router from 'next/router';

Meilleures pratiques :

• Informations sensibles sécurisées : ne validez jamais de fichiers .env.local ou de variables d'environnement sensibles dans votre système de contrôle de version. Utilisez .gitignore pour exclure ces fichiers.
• Conventions de dénomination cohérentes : utilisez une dénomination claire et cohérente pour les variables d'environnement, généralement préfixées par NEXT_PUBLIC_ pour indiquer qu'elles sont exposées au frontend.
• Configuration séparée pour chaque environnement : conservez des fichiers .env distincts pour différents environnements (par exemple, .env.development, .env.production) afin de gérer efficacement les configurations.

Conclusion

En créant un système centralisé de gestion des erreurs, vous avez mis en place une structure propre, modulaire et conviviale qui améliore à la fois l'expérience des développeurs et la satisfaction des utilisateurs. Que vous débutiez ou cherchiez à améliorer la gestion des erreurs de votre application, cette approche constitue une base solide qui peut évoluer avec votre application.

Encouragez-vous à expérimenter les fonctionnalités décrites ici, en commençant par les bases et en ajoutant des améliorations à mesure que vous vous familiarisez. Une approche centralisée de la gestion des erreurs est une compétence et une pratique précieuses qui s'avéreront payantes à mesure que votre application évolue.

Appel à l'action

Prêt à améliorer vos applications React/Next.js avec une gestion centralisée des erreurs ?

Mettez en œuvre les stratégies décrites dans ce guide pour bénéficier d'un code plus propre, de notifications utilisateur cohérentes et d'une maintenabilité améliorée.

Partagez vos commentaires

Vous avez des questions, des suggestions ou des expériences à partager ? Interagissez avec la communauté en laissant des commentaires ou en contactant GitHub et Twitter.

Restez à l'écoute pour en savoir plus

Je travaille sur le développement d'un package npm basé sur ce système centralisé de gestion des erreurs. Restez à l'écoute des mises à jour ou suggérez des fonctionnalités que vous trouveriez utiles !

Bon codage ! ?✨

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!