Kategoryzacja błędów w React Error Boundary: Kompleksowy przewodnik

Obsługa błędów jest kluczowym aspektem tworzenia solidnych i łatwych w utrzymaniu aplikacji React. Chociaż Error Boundaries w React zapewniają mechanizm do łagodnego obsługiwania błędów występujących podczas renderowania, zrozumienie jak kategoryzować i reagować na różne typy błędów jest kluczowe dla stworzenia prawdziwie odpornej aplikacji. Ten przewodnik omawia różne podejścia do kategoryzacji błędów w Error Boundaries, oferując praktyczne przykłady i użyteczne wskazówki, które pomogą ulepszyć Twoją strategię zarządzania błędami.

Czym są React Error Boundaries?

Wprowadzone w React 16, Error Boundaries to komponenty React, które przechwytują błędy JavaScript w dowolnym miejscu drzewa komponentów potomnych, logują te błędy i wyświetlają interfejs zastępczy (fallback UI) zamiast powodować awarię całego drzewa komponentów. Działają podobnie do bloku try...catch, ale dla komponentów.

Kluczowe cechy Error Boundaries:

• Obsługa błędów na poziomie komponentu: Izolowanie błędów w obrębie określonych poddrzew komponentów.
• Łagodna degradacja: Zapobieganie awarii całej aplikacji z powodu błędu w jednym komponencie.
• Kontrolowany interfejs zastępczy: Wyświetlanie przyjaznego dla użytkownika komunikatu lub alternatywnej treści, gdy wystąpi błąd.
• Logowanie błędów: Ułatwianie śledzenia i debugowania błędów poprzez logowanie informacji o nich.

Dlaczego warto kategoryzować błędy w Error Boundaries?

Samo przechwytywanie błędów nie wystarczy. Skuteczna obsługa błędów wymaga zrozumienia, co poszło nie tak i odpowiedniego reagowania. Kategoryzowanie błędów w Error Boundaries oferuje kilka korzyści:

• Ukierunkowana obsługa błędów: Różne typy błędów mogą wymagać różnych reakcji. Na przykład błąd sieciowy może wymagać mechanizmu ponawiania próby, podczas gdy błąd walidacji danych może wymagać od użytkownika poprawienia wprowadzonych danych.
• Lepsze doświadczenie użytkownika: Wyświetlanie bardziej informacyjnych komunikatów o błędach w zależności od ich typu. Ogólny komunikat „Coś poszło nie tak” jest mniej pomocny niż konkretna wiadomość wskazująca na problem z siecią lub nieprawidłowe dane.
• Usprawnione debugowanie: Kategoryzacja błędów dostarcza cennego kontekstu do debugowania i identyfikowania pierwotnej przyczyny problemów.
• Proaktywne monitorowanie: Śledzenie częstotliwości występowania różnych typów błędów w celu identyfikacji powtarzających się problemów i priorytetyzacji poprawek.
• Strategiczny interfejs zastępczy: Wyświetlanie różnych interfejsów zastępczych w zależności od błędu, dostarczając użytkownikowi bardziej trafnych informacji lub akcji.

Podejścia do kategoryzacji błędów

Można zastosować kilka technik do kategoryzacji błędów w React Error Boundaries:

1. Użycie instanceof

Operator instanceof sprawdza, czy obiekt jest instancją określonej klasy. Jest to przydatne do kategoryzowania błędów na podstawie ich wbudowanych lub niestandardowych typów błędów.

Przykład:

class NetworkError extends Error {
  constructor(message) {
    super(message);
    this.name = "NetworkError";
  }
}

class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = "ValidationError";
  }
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Zaktualizuj stan, aby następne renderowanie pokazało interfejs zastępczy.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // Możesz również zalogować błąd do serwisu raportowania błędów
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      // Możesz wyrenderować dowolny niestandardowy interfejs zastępczy
      let errorMessage = "Coś poszło nie tak.";
      if (this.state.error instanceof NetworkError) {
        errorMessage = "Wystąpił błąd sieci. Sprawdź połączenie i spróbuj ponownie.";
      } else if (this.state.error instanceof ValidationError) {
        errorMessage = "Wystąpił błąd walidacji. Sprawdź wprowadzone dane.";
      }

      return (
        <div>
          <h2>Błąd!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Wyjaśnienie:

• Zdefiniowano niestandardowe klasy NetworkError i ValidationError, które rozszerzają wbudowaną klasę Error.
• W metodzie render komponentu MyErrorBoundary operator instanceof jest używany do sprawdzania typu przechwyconego błędu.
• Na podstawie typu błędu w interfejsie zastępczym wyświetlany jest określony komunikat o błędzie.

2. Użycie kodów lub właściwości błędów

Innym podejściem jest dołączanie kodów lub właściwości błędów do samego obiektu błędu. Pozwala to na bardziej szczegółową kategoryzację w oparciu o konkretne scenariusze błędów.

Przykład:

function fetchData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          const error = new Error("Network request failed");
          error.code = response.status; // Dodaj niestandardowy kod błędu
          reject(error);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Zaktualizuj stan, aby następne renderowanie pokazało interfejs zastępczy.
    return { hasError: true, error: error };
  }

  componentDidCatch(error, errorInfo) {
    // Możesz również zalogować błąd do serwisu raportowania błędów
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      let errorMessage = "Coś poszło nie tak.";
      if (this.state.error.code === 404) {
        errorMessage = "Nie znaleziono zasobu.";
      } else if (this.state.error.code >= 500) {
        errorMessage = "Błąd serwera. Spróbuj ponownie później.";
      }

      return (
        <div>
          <h2>Błąd!</h2>
          <p>{errorMessage}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

Wyjaśnienie:

• Funkcja fetchData dodaje właściwość code do obiektu błędu, reprezentującą kod statusu HTTP.
• Komponent MyErrorBoundary sprawdza właściwość code, aby określić konkretny scenariusz błędu.
• W zależności od kodu błędu wyświetlane są różne komunikaty o błędach.

3. Użycie scentralizowanego mapowania błędów

W złożonych aplikacjach utrzymywanie scentralizowanego mapowania błędów może poprawić organizację kodu i łatwość konserwacji. Polega to na stworzeniu słownika lub obiektu, który mapuje typy lub kody błędów na konkretne komunikaty o błędach i logikę obsługi.

Przykład:

const errorMap = {
  "NETWORK_ERROR": {
    message: "Wystąpił błąd sieci. Sprawdź połączenie.",
    retry: true,
  },
  "INVALID_INPUT": {
    message: "Nieprawidłowe dane. Sprawdź wprowadzone informacje.",
    retry: false,
  },
  404: {
    message: "Nie znaleziono zasobu.",
    retry: false,
  },
  500: {
    message: "Błąd serwera. Spróbuj ponownie później.",
    retry: true,
  },
  "DEFAULT": {
    message: "Coś poszło nie tak.",
    retry: false,
  },
};

function handleCustomError(errorType) {
    const errorDetails = errorMap[errorType] || errorMap["DEFAULT"];
    return errorDetails;
}

class MyErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Zaktualizuj stan, aby następne renderowanie pokazało interfejs zastępczy.
    const errorDetails = handleCustomError(error.message);
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    // Możesz również zalogować błąd do serwisu raportowania błędów
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message } = this.state.errorDetails;
      return (
        <div>
          <h2>Błąd!</h2>
          <p>{message}</p>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.errorDetails.message}<br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

function MyComponent(){
    const [data, setData] = React.useState(null);

    React.useEffect(() => {
      try {
        throw new Error("NETWORK_ERROR");
      } catch (e) {
        throw e;
      }
    }, []);

    return <div></div>;
}

Wyjaśnienie:

• Obiekt errorMap przechowuje informacje o błędach, w tym komunikaty i flagi ponawiania, w oparciu o typy lub kody błędów.
• Funkcja handleCustomError pobiera szczegóły błędu z errorMap na podstawie komunikatu błędu i zwraca wartości domyślne, jeśli nie znaleziono określonego kodu.
• Komponent MyErrorBoundary używa handleCustomError, aby uzyskać odpowiedni komunikat o błędzie z errorMap.

Dobre praktyki kategoryzacji błędów

• Definiuj jasne typy błędów: Ustal spójny zestaw typów lub kodów błędów dla swojej aplikacji.
• Dostarczaj informacje kontekstowe: Dołączaj istotne szczegóły do obiektów błędów, aby ułatwić debugowanie.
• Centralizuj logikę obsługi błędów: Używaj scentralizowanego mapowania błędów lub funkcji pomocniczych, aby zarządzać obsługą błędów w spójny sposób.
• Efektywnie loguj błędy: Zintegruj aplikację z serwisami do raportowania błędów, aby śledzić i analizować błędy w środowisku produkcyjnym. Popularne usługi to Sentry, Rollbar i Bugsnag.
• Testuj obsługę błędów: Pisz testy jednostkowe, aby zweryfikować, czy Twoje Error Boundaries poprawnie obsługują różne typy błędów.
• Zwracaj uwagę na doświadczenie użytkownika: Wyświetlaj informacyjne i przyjazne dla użytkownika komunikaty o błędach, które pomogą mu rozwiązać problem. Unikaj technicznego żargonu.
• Monitoruj wskaźniki błędów: Śledź częstotliwość występowania różnych typów błędów, aby identyfikować powtarzające się problemy i priorytetyzować poprawki.
• Internacjonalizacja (i18n): Prezentując komunikaty o błędach użytkownikowi, upewnij się, że są one odpowiednio zinternacjonalizowane, aby wspierać różne języki i kultury. Używaj bibliotek takich jak i18next lub Context API Reacta do zarządzania tłumaczeniami.
• Dostępność (a11y): Upewnij się, że komunikaty o błędach są dostępne dla użytkowników z niepełnosprawnościami. Używaj atrybutów ARIA, aby dostarczyć dodatkowego kontekstu czytnikom ekranu.
• Bezpieczeństwo: Uważaj na informacje wyświetlane w komunikatach o błędach, szczególnie w środowiskach produkcyjnych. Unikaj ujawniania wrażliwych danych, które mogłyby zostać wykorzystane przez atakujących. Na przykład, nie wyświetlaj użytkownikom końcowym surowych śladów stosu (stack trace).

Przykładowy scenariusz: Obsługa błędów API w aplikacji e-commerce

Rozważmy aplikację e-commerce, która pobiera informacje o produktach z API. Potencjalne scenariusze błędów obejmują:

• Błędy sieciowe: Serwer API jest niedostępny lub połączenie internetowe użytkownika zostało przerwane.
• Błędy uwierzytelniania: Token uwierzytelniający użytkownika jest nieprawidłowy lub wygasł.
• Błędy braku zasobu: Żądany produkt nie istnieje.
• Błędy serwera: Serwer API napotkał wewnętrzny błąd.

Używając Error Boundaries i kategoryzacji błędów, aplikacja może obsłużyć te scenariusze w łagodny sposób:

// Przykład (uproszczony)
async function fetchProduct(productId) {
  try {
    const response = await fetch(`/api/products/${productId}`);
    if (!response.ok) {
      if (response.status === 404) {
        throw new Error("PRODUCT_NOT_FOUND");
      } else if (response.status === 401 || response.status === 403) {
        throw new Error("AUTHENTICATION_ERROR");
      } else {
        throw new Error("SERVER_ERROR");
      }
    }
    return await response.json();
  } catch (error) {
    if (error instanceof TypeError && error.message === "Failed to fetch") {
      throw new Error("NETWORK_ERROR");
    }
    throw error;
  }
}

class ProductErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorDetails: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    const errorDetails = handleCustomError(error.message); // Użyj errorMap jak pokazano wcześniej
    return { hasError: true, errorDetails: errorDetails };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error:", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      const { message, retry } = this.state.errorDetails;
      return (
        <div>
          <h2>Błąd!</h2>
          <p>{message}</p>
          {retry && <button onClick={() => window.location.reload()}>Spróbuj ponownie</button>}
        </div>
      );
    }

    return this.props.children;
  }
}

Wyjaśnienie:

• Funkcja fetchProduct sprawdza kod statusu odpowiedzi API i rzuca określone typy błędów w zależności od statusu.
• Komponent ProductErrorBoundary przechwytuje te błędy i wyświetla odpowiednie komunikaty.
• W przypadku błędów sieciowych i serwerowych wyświetlany jest przycisk „Spróbuj ponownie”, pozwalający użytkownikowi ponowić próbę żądania.
• W przypadku błędów uwierzytelniania użytkownik może zostać przekierowany na stronę logowania.
• W przypadku błędu braku zasobu wyświetlany jest komunikat informujący, że produkt nie istnieje.

Podsumowanie

Kategoryzacja błędów w React Error Boundaries jest niezbędna do budowania odpornych, przyjaznych dla użytkownika aplikacji. Stosując techniki takie jak sprawdzanie za pomocą instanceof, kody błędów i scentralizowane mapowania błędów, można skutecznie obsługiwać różne scenariusze błędów i zapewniać lepsze doświadczenie użytkownika. Pamiętaj, aby postępować zgodnie z najlepszymi praktykami dotyczącymi obsługi błędów, logowania i testowania, aby zapewnić, że Twoja aplikacja łagodnie radzi sobie z nieoczekiwanymi sytuacjami.

Wdrażając te strategie, możesz znacznie poprawić stabilność i łatwość utrzymania swoich aplikacji React, zapewniając płynniejsze i bardziej niezawodne doświadczenie dla użytkowników, niezależnie od ich lokalizacji czy pochodzenia.

Dodatkowe zasoby:

• Dokumentacja React Error Boundaries
• Przewodnik Sentry po Error Boundaries w React 16
• Samouczek React Error Boundary autorstwa Robina Wierucha