Aufbau eines robusten Frontend-Fehlerbehandlungssystems mit Axios und benutzerdefinierten Hooks

Einführung

Eine effektive Fehlerbehandlung ist entscheidend für die Bereitstellung einer nahtlosen Benutzererfahrung und die Aufrechterhaltung sauberen, skalierbaren Codes. In komplexen Anwendungen führt die manuelle Fehlerverwaltung über Komponenten hinweg häufig zu unübersichtlichem und inkonsistentem Code. Dieser Leitfaden zeigt Ihnen, wie Sie mit Axios, einem benutzerdefinierten Hook (useApi) und modularen Serviceschichten ein modulares, skalierbares und zentralisiertes Fehlerbehandlungssystem in React aufbauen, um eine benutzerfreundliche, organisierte und effiziente Struktur zu erstellen.

Hook: Warum eine zentralisierte Fehlerbehandlung wichtig ist

Stellen Sie sich vor, Sie bauen eine E-Commerce-Plattform auf. Mehrere Komponenten rufen Daten von verschiedenen APIs ab und jede kann aus unterschiedlichen Gründen fehlschlagen – Netzwerkprobleme, Serverfehler oder ungültige Benutzereingaben. Ohne ein zentralisiertes Fehlerbehandlungssystem wird Ihr Code mit sich wiederholenden Fehlerprüfungen überladen und Benutzer erhalten inkonsistentes Feedback. Wie können Sie diesen Prozess optimieren, um Zuverlässigkeit und ein nahtloses Benutzererlebnis zu gewährleisten? Dieser Leitfaden zeigt Ihnen, wie.

Am Ende werden Sie Folgendes lernen:

• So richten Sie eine zentrale Fehlerbehandlung mit Axios-Interceptoren ein.
• Die Rolle eines benutzerdefinierten useApi-Hooks für die Verwaltung des API-Anfragestatus.
• Die Vorteile der Verwendung von Servicemodulen zur Organisation der API-Logik.
• Erweiterte Techniken für eine benutzerfreundliche Fehlerbehandlung, einschließlich Wiederholungsoptionen und Anforderungsabbruch.

Inhaltsverzeichnis

1. Warum zentralisierte Fehlerbehandlung?
2. Grundlegende Implementierung
3. Einrichten der Axios-Instanz mit Interceptors
4. Erstellen des benutzerdefinierten useApi-Hooks
5. Versprechen und Ablehnung von Versprechen verstehen
6. Servicemodule organisieren
7. Beispiel: Benutzerservice
8. Erweiterte Verbesserungen (optional)
   • Fehler beim Parsen der Anpassung
   • Wiederholungsmechanismus
   • Detaillierte Benachrichtigungen
   • Anfragen bei Komponenten-Unmount abbrechen
9. Verbindungspunkte
10. Visuelle Zusammenfassung
11. Alles zusammenfügen: Ein Beispiel aus der Praxis
12. Best Practices
13. Weiterführende Literatur
14. Fehlerbehebung
15. Umgebungskonfiguration
16. Fazit
17. Aufruf zum Handeln

Warum zentralisierte Fehlerbehandlung?

Zentrale Fehlerbehandlung bewältigt zwei häufige Herausforderungen:

Wiederkehrender Fehlercode

• Problem: Ohne einen zentralen Mechanismus sind Komponenten auf mehrere Try-Catch-Blöcke angewiesen.
• Auswirkung: Führt zu inkonsistenter Fehlerbehandlung und redundantem Code.

Inkonsistente Benutzererfahrung

• Problem: Fehlermeldungen können ohne Zentralisierung innerhalb der App variieren.
• Auswirkung: Schafft ein unzusammenhängendes Benutzererlebnis und kann Benutzer verwirren.

Die Verwendung eines zentralisierten Ansatzes mit Axios-Interceptoren, einem benutzerdefinierten Hook (useApi) und Servicemodulen löst diese Probleme durch:

• Einziger Ort für Fehleranalyse und Nachrichtenübermittlung: Bietet einen einheitlichen Ort für die Behandlung aller Fehler und sorgt so für Konsistenz.
• Trennung von Belangen: Ermöglicht den Komponenten, sich ausschließlich auf die Datenpräsentation und Benutzerinteraktion zu konzentrieren, während die Fehlerbehandlung zentralisierten Modulen überlassen wird.

Grundlegende Implementierung

Einrichten der Axios-Instanz mit Interceptors

Axios-Interceptors sind Funktionen, die Axios für jede Anfrage oder Antwort aufruft. Durch das Einrichten von Antwort-Interceptoren können Sie Fehler global behandeln, Antworten analysieren und Aktionen wie Protokollierung oder Umleitung von Benutzern basierend auf bestimmten Bedingungen ausführen.

Schritt 1: Notwendige Module importieren

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

Schritt 2: Erstellen Sie die Axios-Instanz

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

Schritt 3: Fügen Sie einen Antwort-Interceptor hinzu

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);
  }
);

Erklärung:

• Fehleranalyse: Der Interceptor prüft, ob der Fehler eine Antwort hat. Wenn nicht, geht es von einem Netzwerkfehler aus und zeigt eine entsprechende Meldung an.
• Benutzerdefinierte Fehlermeldungen: Es wird versucht, benutzerdefinierte Fehlermeldungen basierend auf dem vom Server bereitgestellten Fehlertyp zu verwenden. Wenn keine verfügbar sind, wird auf vordefinierte Nachrichten zurückgegriffen.
• Benutzer-Feedback: Verwendet React-Toastify, um Toast-Benachrichtigungen anzuzeigen und das Benutzererlebnis durch sofortiges Feedback zu verbessern.
• Umleitung: Leitet Benutzer zur Anmeldeseite weiter, wenn ein 401-Unauthorized-Fehler auftritt, und sorgt so für Sicherheit, indem unbefugter Zugriff verhindert wird.

Schritt 4: Axios-Instanz exportieren

export default axiosInstance;

Benutzerdefinierte Fehlermeldungen

Definieren Sie Ihre benutzerdefinierten Fehlermeldungen in einer separaten Konfigurationsdatei, um Konsistenz und einfache Verwaltung zu gewährleisten.

// 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;

Kurze Zusammenfassung: Axios Interceptor-Konfiguration

Das Einrichten von Axios-Interceptoren bietet:

• Zentralisierte Fehleranalyse: Verwaltet Fehler an einem Ort und sorgt so für Konsistenz über alle API-Anfragen hinweg.
• Benutzer-Feedback: Nutzt React-Toastify, um Benutzer sofort über Probleme zu benachrichtigen.
• Umleitung und Sicherheit: Leitet nicht autorisierte Benutzer bei Bedarf zur Anmeldung weiter und sorgt so für die Sicherheit der App.

Diese zentralisierte Axios-Instanz ist der Schlüssel zum Aufbau einer zuverlässigen, benutzerfreundlichen API-Kommunikationsschicht, die eine konsistente Verwaltung aller API-Anfragen und Fehlerbehandlung in Ihrer gesamten Anwendung gewährleistet.

Erstellen des benutzerdefinierten useApi-Hooks

Der useApi-Hook zentralisiert die Bearbeitung von API-Anfragen und verwaltet Lade-, Daten- und Fehlerzustände. Durch die Abstraktion dieses Prozesses ermöglicht useApi den Komponenten, sich wiederholende Try-Catch-Blöcke zu vermeiden und sich auf die Datenpräsentation zu konzentrieren.

Parameter:

• apiFunc (Funktion): Die auszuführende API-Funktion, normalerweise von Servicemodulen.
• immediate (Boolean, optional): Bestimmt, ob der API-Aufruf sofort bei der Hook-Initialisierung erfolgen soll. Der Standardwert ist „false“.

Zurückgegebene Werte:

• Daten: Die Antwortdaten vom API-Aufruf.
• Laden: Zeigt an, ob der API-Aufruf ausgeführt wird.
• Fehler: Erfasst alle Fehlermeldungen von fehlgeschlagenen API-Aufrufen.
• Anfrage: Die Funktion zum Initiieren des API-Aufrufs, die mit den erforderlichen Parametern aufgerufen werden kann.

Durchführung:

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

Erläuterung:

• Staatsverwaltung:
  • Daten: Speichert die Antwortdaten.
  • Laden: Zeigt an, ob der API-Aufruf ausgeführt wird.
  • Fehler: Erfasst alle Fehlermeldungen.
• Anfragefunktion:
  • Initiiert den API-Aufruf.
  • Verwaltet Statusaktualisierungen basierend auf dem Ergebnis des API-Aufrufs.

Versprechen und Versprechensablehnung verstehen

Bevor wir tiefer eintauchen, ist es wichtig, Promises und Promise Rejection in JavaScript zu verstehen, da sie eine entscheidende Rolle bei der Handhabung asynchroner Vorgänge wie API-Aufrufe spielen.

• Promises: Ein Promise ist ein Objekt, das den eventuellen Abschluss oder Misserfolg eines asynchronen Vorgangs darstellt. Es ermöglicht Ihnen, Rückrufe anzuhängen, um den Erfolg (Auflösen) oder Misserfolg (Ablehnen) des Vorgangs zu verwalten.
• Promise-Ablehnung: Wenn eine Operation fehlschlägt, wird ein Promise „abgelehnt“, wodurch die .catch-Methode oder der zweite Parameter in .then ausgelöst wird.

Relevanz in Axios und useApi:

• Axios und Promises: Axios verwendet Promises, um HTTP-Anfragen zu verarbeiten. Wenn Sie mit Axios eine Anfrage stellen, wird ein Promise zurückgegeben, das mit den Antwortdaten aufgelöst oder mit einem Fehler abgelehnt wird.
• Promise-Ablehnung in Axios Interceptors: Wenn im Axios Interceptor ein Fehler auftritt, lehnt der Interceptor das Promise mit Promise.reject(error) ab. Diese Ablehnung breitet sich dorthin aus, wo der API-Aufruf erfolgt ist.
• Abfangen von Ablehnungen in useApi: Die Anforderungsfunktion des useApi-Hooks verwendet Try-Catch, um diese Ablehnungen zu verarbeiten. Wenn apiFunc(...args) ablehnt, erfasst der Catch-Block den Fehler und aktualisiert den Fehlerstatus entsprechend.

Bedeutung des Umgangs mit Versprechensablehnungen:

• Unbehandelte Ablehnungen verhindern: Wenn Promise-Ablehnungen nicht behandelt werden, können sie zu unerwartetem Verhalten führen und das Debuggen erschweren.
• Konsistente Fehlerverwaltung: Durch die Zentralisierung der Handhabung von Promise-Ablehnungen stellen Sie sicher, dass alle Fehler einheitlich verwaltet werden, wodurch die Codezuverlässigkeit und die Benutzererfahrung verbessert werden.

Was passiert, wenn der useApi-Hook nicht verwendet wird?

Ohne den useApi-Hook müssten Sie Try-Catch-Blöcke in jeder Komponente implementieren, die einen API-Aufruf durchführt. Dieser Ansatz führt zu:

• Repetitiver Code: Jede Komponente hätte eine ähnliche Fehlerbehandlungslogik, was die Coderedundanz erhöht.
• Inkonsistente Fehlerbehandlung: Verschiedene Komponenten können Fehler unterschiedlich behandeln, was zu einer inkonsistenten Benutzererfahrung führt.
• Erhöhter Wartungsaufwand: Die Aktualisierung der Fehlerbehandlungslogik würde Änderungen an mehreren Komponenten erfordern, was die Wartung umständlich machen würde.

Durch die Verwendung des useApi-Hooks abstrahieren Sie die sich wiederholende Fehlerbehandlungslogik und sorgen so für saubereren und wartbareren Code.

Beispielverwendung:

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

In diesem Beispiel verwaltet der useApi-Hook den API-Aufruf zum Abrufen von Produkten. Es verwaltet Ladezustände, erfasst etwaige Fehler und stellt die abgerufenen Daten der Komponente zum Rendern zur Verfügung.

Organisation von Servicemodulen

Dienstmodule definieren API-Endpunktfunktionen, organisiert nach Entität (z. B. Benutzer, Produkte). Diese Struktur hält die API-Logik vom Komponentencode getrennt und gewährleistet so Modularität und Wiederverwendung.

Beispiel: Produktservice

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

Beispiel: Benutzerdienst

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

Vorteile von Servicemodulen:

• Ermöglichen Sie Wiederverwendung und Modularität: API-Funktionen können über mehrere Komponenten hinweg wiederverwendet werden, wodurch Codeduplizierung reduziert wird.
• Sorgen Sie für die Trennung von Belangen: Hält Komponenten sauber, indem die API-Logik in Dienste verschoben wird, wodurch die Codeorganisation und Wartbarkeit verbessert wird.
• Einfacheres Testen: Servicemodule können unabhängig getestet werden, um sicherzustellen, dass API-Interaktionen wie erwartet funktionieren, bevor sie in Komponenten integriert werden.

Erweiterte Verbesserungen (optional)

Für diejenigen, die bereit sind, ihr Fehlerbehandlungssystem weiterzuentwickeln, sollten Sie die Implementierung dieser erweiterten Techniken in Betracht ziehen:

Fehler beim Parsen der Anpassung

Kategorisieren Sie Fehler (z. B. Netzwerk vs. Validierung) und stellen Sie umsetzbare Meldungen bereit, um Benutzern das Verständnis von Problemen und möglichen Lösungen zu erleichtern.

Umsetzung:

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);
  }
);

Erklärung:

• Fehlerkategorisierung: Der Interceptor überprüft die Typeigenschaft in der Fehlerantwort, um die Art des Fehlers zu bestimmen (z. B. Validierung oder Authentifizierung).
• Umsetzbare Meldungen: Bietet Benutzern spezifische Fehlermeldungen basierend auf dem Fehlertyp und verbessert so ihr Verständnis und ihre Fähigkeit, angemessen zu reagieren.

Wiederholungsmechanismus

Implementieren Sie Wiederholungsoptionen für fehlgeschlagene Anfragen, z. B. eine Wiederholungsschaltfläche in der Benutzeroberfläche oder automatische Wiederholungsversuche mit exponentiellem Backoff, um die Zuverlässigkeit zu erhöhen.

Umsetzung:

export default axiosInstance;

Erklärung:

• Wiederholungen: Konfiguriert Axios so, dass fehlgeschlagene Anfragen bis zu dreimal mit einer exponentiellen Backoff-Strategie wiederholt werden.
• Wiederholungsbedingungen: Wiederholungsversuche erfolgen bei Netzwerkfehlern, idempotenten Anfragen oder wenn der Server mit einem 500 Internal Server Error antwortet.
• Wiederholungsversuche protokollieren: Protokolliert jeden Wiederholungsversuch, was zum Debuggen und Überwachen nützlich sein kann.

Detaillierte Benachrichtigungen

Unterscheiden Sie Benachrichtigungen nach Schweregrad (Info, Warnung, Fehler), um Benutzern zu helfen, die Bedeutung des Fehlers zu verstehen.

Umsetzung:

// 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;

Erklärung:

• Benachrichtigungstypen: Bestimmt die Art der Toastbenachrichtigung (Info, Warnung, Fehler) basierend auf der Fehlerkategorie.
• Benutzer-Feedback: Bietet Benutzern kontextspezifisches Feedback und hilft ihnen, die Schwere und Art des Problems zu verstehen.

Stornieren Sie Anforderungen beim Aufheben der Bereitstellung einer Komponente

Verwenden Sie Axios-Abbruchtokens, um Speicherlecks zu verhindern, indem Sie laufende Anforderungen abbrechen, wenn die Bereitstellung einer Komponente aufgehoben wird.

Umsetzung:

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

Erklärung:

• Abbruchtokens: Verwendet Axios-Abbruchtokens, um laufende API-Anfragen abzubrechen, wenn eine neue Anfrage gestellt wird oder wenn die Bereitstellung der Komponente aufgehoben wird.
• Speicherlecks verhindern: Stellt sicher, dass bei nicht gemounteten Komponenten keine Statusaktualisierungen erfolgen, wodurch potenzielle Speicherlecks verhindert werden.
• Abgebrochene Anfragen protokollieren: Protokolliert abgebrochene Anfragen zu Debugging-Zwecken.

Zusammenfassung der erweiterten Verbesserungen

Die Implementierung dieser fortschrittlichen Techniken bringt Ihr Fehlerbehandlungssystem auf die nächste Stufe:

• Anpassung der Fehleranalyse: Liefert spezifischere Fehlermeldungen an Benutzer und hilft ihnen, Probleme direkt zu verstehen und zu beheben.
• Wiederholungsmechanismus: Verbessert die Zuverlässigkeit, indem Anfragen nach bestimmten Fehlern automatisch oder manuell erneut versucht werden können.
• Detaillierte Benachrichtigungen: Unterscheidet zwischen Fehlertypen und zeigt Benachrichtigungen nach Schweregrad an, um Benutzer besser zu informieren.
• Anfragen beim Aufheben der Bereitstellung von Komponenten abbrechen: Verhindert Speicherlecks und redundante Anfragen und sorgt so für eine stabile und effiziente App-Leistung.

Diese Verbesserungen sind optional, aber äußerst wertvoll, da sie dem Fehlerbehandlungsansatz Ihrer App mehr Tiefe, Flexibilität und benutzerorientierte Verbesserungen verleihen.

Punkte verbinden

Wenn eine Komponente einen API-Aufruf über useApi initiiert, wird der folgende Ablauf ausgelöst:

Komponenten nutzen Servicemodule:

Jedes Servicemodul (z. B. userService, productService) definiert Funktionen für bestimmte API-Endpunkte und verwendet die konfigurierte axiosInstance. Komponenten interagieren nur mit diesen Servicefunktionen.

useApi löst Axios über das Servicemodul aus:

Komponenten übergeben eine Servicefunktion (z. B. productService.getProducts) an useApi. Wenn eine Anfrage aufgerufen wird, leitet useApi die Funktion an den Dienst weiter, der dann die HTTP-Anfrage über axiosInstance.

Benutzerdefinierte Fehleranalyse in Axios Interceptors:

Die Interceptoren in axiosInstance kümmern sich um die Fehlerprotokollierung, analysieren vordefinierte benutzerdefinierte Fehlermeldungen und zentralisieren die Fehlerbehandlung.

Strukturierte Antworten von useApi:

useApi gibt strukturierte Zustände (Daten, Laden und Fehler) an die Komponente zurück, sodass sie sich ausschließlich auf die Darstellung von Daten und die Verarbeitung von Interaktionen konzentrieren kann.

Visuelle Zusammenfassung

Die folgende Übersicht beschreibt, wie jede Komponente im Fehlerbehandlungssystem innerhalb der Anwendung interagiert, vom ersten API-Aufruf bis zum Benutzerfeedback:

1. Komponente

   • Die Komponente initiiert API-Anfragen mithilfe des useApi-Hooks, der die Komplexität der Verwaltung von API-Aufrufen, der Fehlerbehandlung und der Ladezustände abstrahiert.

2. Api-Hook verwenden

   • useApi ist ein benutzerdefinierter Hook, der die Funktion für die API-Anfrage (vom Servicemodul) empfängt. Es verwaltet den Ladestatus der Anfrage, behandelt Fehler und gibt strukturierte Antworten (Daten, Laden, Fehler) an die Komponente zurück.

3. Servicemodul

   • Das Servicemodul definiert spezifische Funktionen für jeden API-Endpunkt (z. B. getProducts, createProduct) und verwendet die zentralisierte axiosInstance für alle Anfragen, um die Konsistenz in der gesamten Anwendung sicherzustellen.

4. Axios-Instanz

   • Die axiosInstance verwaltet HTTP-Anfragen und -Antworten und wendet alle benutzerdefinierten Konfigurationen wie Basis-URLs und Header an.

5. API-Antwort

   • Die Antwort von der API wird über Axios-Interceptors verarbeitet, die Fehler global behandeln. Dazu gehört das Parsen benutzerdefinierter Fehlermeldungen und das Auslösen von Benutzerbenachrichtigungen.

6. Fehlerbehandlung und Benutzerbenachrichtigungen

   • Abfangjäger zeigen dem Benutzer Fehlermeldungen über React-Toastify-Benachrichtigungen an und können zusätzliche Aktionen verwalten, wie etwa die Umleitung von Benutzern zur Anmeldeseite bei Authentifizierungsfehlern.

Dieser Ablauf ermöglicht eine zentrale Fehlerverwaltung und ein konsistentes Benutzerfeedback, sodass sich die Komponenten ausschließlich auf die Darstellung von Daten konzentrieren können, ohne sich mit der sich wiederholenden Fehlerprüflogik befassen zu müssen.

Alles zusammenfügen: Ein Beispiel aus der Praxis

ProductList-Komponente

Dieses Beispiel zeigt den gesamten Ablauf, von der Durchführung eines API-Aufrufs bis zur Anzeige von Daten, mit zentralisierter Fehlerbehandlung und Rückmeldung.

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

Komponentenaufschlüsselung:

• Anweisungen importieren:

  • React-Toastify: Wird zum Anzeigen von Toast-Benachrichtigungen verwendet.
  • productService: Enthält API-Funktionen im Zusammenhang mit Produkten.
  • useApi: Benutzerdefinierter Hook zum Verwalten von API-Aufrufen.

• Hook-Initialisierung:

  • Initialisiert den useApi-Hook mit der getProducts-Funktion von productService. Der Parameter „false“ gibt an, dass der API-Aufruf nicht sofort nach der Hook-Initialisierung erfolgen soll.

• API-Aufrufauslöser:

  • Verwendet useEffect, um die Anforderungsfunktion aufzurufen, wenn die Komponente bereitgestellt wird, und ruft die erste Seite der Produkte ab.

• Fehlerbehandlung:

  • Ein weiterer useEffect wartet auf Änderungen im Fehlerstatus. Wenn ein Fehler auftritt, wird eine Toastbenachrichtigung ausgelöst, um den Benutzer zu informieren.

• Bedingtes Rendern:

  • Ladestatus: Zeigt eine Lademeldung an, während der API-Aufruf ausgeführt wird.
  • Fehlerstatus: Zeigt eine Fehlermeldung an, wenn der API-Aufruf fehlschlägt.
  • Datenrendering: Sobald die Daten erfolgreich abgerufen wurden, wird ein Raster von Produkten mit ihren Bildern, Namen und Preisen gerendert.

Dieses Beispiel zeigt, wie eine zentralisierte Fehlerbehandlung die Komponentenlogik vereinfacht und ein konsistentes Benutzerfeedback gewährleistet.

Best Practices

Die Einhaltung von Best Practices stellt sicher, dass Ihr Fehlerbehandlungssystem effizient, wartbar und benutzerfreundlich ist.

Trennung von Belangen

• Beschreibung: Halten Sie die API-Logik durch die Verwendung von Servicemodulen von UI-Komponenten getrennt. Dies verbessert die Codeorganisation und Wartbarkeit.
• Beispiel: Anstatt API-Aufrufe direkt innerhalb von Komponenten durchzuführen, delegieren Sie sie an Servicemodule wie productService.js.

Konsistente Fehlermeldungen

• Beschreibung: Behandeln Sie alle Fehler einheitlich, um das Debuggen zu vereinfachen und eine nahtlose Benutzererfahrung zu bieten.
• Beispiel: Durch die Verwendung vordefinierter Fehlermeldungen in customErrors.js wird sichergestellt, dass Benutzer konsistentes Feedback erhalten, unabhängig davon, wo der Fehler seinen Ursprung hat.

Vermeiden Sie sich wiederholenden Code

• Beschreibung: Verwenden Sie eine zentralisierte Fehlerbehandlung und benutzerdefinierte Hooks, um sich wiederholende Try-Catch-Blöcke über Komponenten hinweg zu eliminieren.
• Beispiel: Der useApi-Hook verwaltet Fehlerzustände und Benachrichtigungen, sodass sich Komponenten ausschließlich auf das Rendern von Daten konzentrieren können.

Aussagekräftige Fehlermeldungen

• Beschreibung: Stellen Sie benutzerfreundliche, umsetzbare Fehlermeldungen bereit, um das Verständnis zu verbessern und Frustrationen zu reduzieren.
• Beispiel: Anstatt generische Meldungen wie „Fehler ist aufgetreten“ anzuzeigen, verwenden Sie spezifische Meldungen wie „Validierungsfehler: Bitte geben Sie eine gültige E-Mail-Adresse ein.“

Behandeln Sie Randfälle

• Beschreibung: Erwarten und verwalten Sie unerwartete Szenarien wie Netzwerkausfälle oder Serverfehler, um einen Absturz Ihrer Anwendung zu verhindern.
• Beispiel: Der Axios-Interceptor behandelt Netzwerkfehler, indem er einen „Netzwerkfehler“-Toast anzeigt und verhindert, dass die Anwendung abstürzt.

Sichere Fehlerbehandlung

• Beschreibung: Vermeiden Sie die Offenlegung vertraulicher Informationen in Fehlermeldungen. Stellen Sie benutzerfreundliche Nachrichten bereit und protokollieren Sie gleichzeitig detaillierte Fehler sicher auf dem Server.
• Beispiel: Zeigen Sie den Benutzern allgemeine Fehlermeldungen an, während Sie detaillierte Fehlerprotokolle an einen Protokollierungsdienst wie Sentry für Entwickler senden.

Weiterführende Literatur

Verbessern Sie Ihr Verständnis der in diesem Leitfaden behandelten Konzepte mit den folgenden Ressourcen:

• Axios Interceptors-Dokumentation: Erfahren Sie, wie Sie Axios Interceptors verwenden, um Anfragen und Antworten global zu verarbeiten.
• React Hooks-Dokumentation: Verstehen Sie die Grundlagen von React Hooks für die Verwaltung von Status und Nebenwirkungen.
• Redux Toolkit-Einführung: Beginnen Sie mit dem Redux Toolkit für eine effiziente Zustandsverwaltung in React-Anwendungen.
• React-Toastify-Dokumentation: Entdecken Sie, wie Sie Toastbenachrichtigungen für ein besseres Benutzerfeedback implementieren.

Fehlerbehebung

1. Toast-Benachrichtigungen werden nicht angezeigt

• Ursache: Der Die Komponente von „react-toastify“ fehlt möglicherweise in Ihrer Anwendung.
• Lösung: Stellen Sie sicher, dass ist in Ihrer Hauptanwendungskomponente enthalten, normalerweise in 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. API-Anfragen, die nicht von Abfangjägern abgefangen werden

• Ursache: Servicemodule importieren möglicherweise die Standard-Axios-Bibliothek anstelle der zentralisierten axiosInstance.
• Lösung: Stellen Sie sicher, dass alle Servicemodule die zentralisierte axiosInstance importieren.

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

3. Weiterleitungen funktionieren bei bestimmten Fehlern nicht

• Ursache: Der Router von next/router wird möglicherweise nicht korrekt importiert oder außerhalb von React-Komponenten verwendet.
• Lösung: Stellen Sie sicher, dass der Axios-Interceptor in einem Kontext verwendet wird, in dem der Router Umleitungen durchführen kann. Alternativ können Sie Weiterleitungen innerhalb des useApi-Hooks oder innerhalb von Komponenten verarbeiten.

Umgebungskonfiguration

Durch die Verwaltung verschiedener Umgebungen wird sichergestellt, dass Ihre Anwendung während der Entwicklung, beim Testen und in der Produktion mit den richtigen API-Endpunkten interagiert.

Schritt 1: Umgebungsvariablen definieren

Erstellen Sie eine .env.local-Datei im Stammverzeichnis Ihres Projekts und definieren Sie Ihre API-Basis-URL:

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);
  }
);

Schritt 2: Zugriff auf Umgebungsvariablen im Code

Stellen Sie sicher, dass Ihre Axios-Instanz die Umgebungsvariable verwendet:

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

Best Practices:

• Sichern Sie vertrauliche Informationen: Übertragen Sie niemals .env.local-Dateien oder andere vertrauliche Umgebungsvariablen an Ihr Versionskontrollsystem. Verwenden Sie .gitignore, um diese Dateien auszuschließen.
• Konsistente Namenskonventionen: Verwenden Sie eine klare und konsistente Benennung für Umgebungsvariablen, normalerweise mit dem Präfix NEXT_PUBLIC_, um anzuzeigen, dass sie dem Frontend zugänglich gemacht werden.
• Separate Konfiguration für jede Umgebung: Pflegen Sie separate .env-Dateien für verschiedene Umgebungen (z. B. .env.development, .env.produktion), um Konfigurationen effektiv zu verwalten.

Abschluss

Durch den Aufbau eines zentralisierten Fehlerbehandlungssystems haben Sie eine saubere, modulare und benutzerfreundliche Struktur eingerichtet, die sowohl die Entwicklererfahrung als auch die Benutzerzufriedenheit verbessert. Unabhängig davon, ob Sie gerade erst anfangen oder das Fehlermanagement Ihrer App verbessern möchten, bietet dieser Ansatz eine solide Grundlage, die mit Ihrer Anwendung wachsen kann.

Ermutigen Sie sich, mit den hier beschriebenen Funktionen zu experimentieren, beginnen Sie mit den Grundlagen und fügen Sie Verbesserungen hinzu, wenn Sie sich damit vertraut machen. Ein zentralisierter Ansatz zur Fehlerbehandlung ist eine wertvolle Fähigkeit und Praxis, die sich mit der Skalierung Ihrer Anwendung auszahlt.

Aufruf zum Handeln

Sind Sie bereit, Ihre React/Next.js-Anwendungen durch eine zentralisierte Fehlerbehandlung zu erweitern?

Implementieren Sie die in diesem Leitfaden beschriebenen Strategien, um saubereren Code, konsistente Benutzerbenachrichtigungen und eine verbesserte Wartbarkeit zu erzielen.

Teilen Sie Ihr Feedback

Haben Sie Fragen, Anregungen oder Erfahrungen, die Sie teilen möchten? Treten Sie mit der Community in Kontakt, indem Sie Kommentare hinterlassen oder auf GitHub und Twitter Kontakt aufnehmen.

Bleiben Sie dran für mehr

Ich arbeite an der Entwicklung eines NPM-Pakets, das auf diesem zentralisierten Fehlerbehandlungssystem basiert. Bleiben Sie auf dem Laufenden, um Updates zu erhalten, oder schlagen Sie Funktionen vor, die Sie wertvoll finden würden!

Viel Spaß beim Codieren! ?✨

Das obige ist der detaillierte Inhalt vonAufbau eines robusten Frontend-Fehlerbehandlungssystems mit Axios und benutzerdefinierten Hooks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!