M

MLOG

Polski

Opanuj Granice Błędów (Error Boundaries) w React, aby tworzyć odporne i przyjazne dla użytkownika aplikacje. Poznaj najlepsze praktyki, techniki implementacji i zaawansowane strategie obsługi błędów.

Granice Błędów w React: Techniki Eleganckiej Obsługi Błędów dla Solidnych Aplikacji

W dynamicznym świecie tworzenia aplikacji internetowych, budowanie solidnych i przyjaznych dla użytkownika aplikacji jest kluczowe. React, popularna biblioteka JavaScript do tworzenia interfejsów użytkownika, dostarcza potężny mechanizm do eleganckiej obsługi błędów: Granice Błędów (Error Boundaries). Ten kompleksowy przewodnik zagłębia się w koncepcję Granic Błędów, omawiając ich cel, implementację oraz najlepsze praktyki budowania odpornych aplikacji w React.

Zrozumienie potrzeby stosowania Granic Błędów

Komponenty React, jak każdy kod, są podatne na błędy. Błędy te mogą pochodzić z różnych źródeł, w tym:

Bez odpowiedniej obsługi błędów, błąd w komponencie React może spowodować awarię całej aplikacji, co skutkuje złym doświadczeniem użytkownika. Granice Błędów zapewniają sposób na przechwytywanie tych błędów i zapobieganie ich propagacji w górę drzewa komponentów, zapewniając, że aplikacja pozostaje funkcjonalna nawet w przypadku awarii poszczególnych komponentów.

Czym są Granice Błędów w React?

Granice Błędów to komponenty React, które przechwytują błędy JavaScript w dowolnym miejscu w drzewie swoich komponentów potomnych, logują te błędy i wyświetlają interfejs zastępczy (fallback UI) zamiast drzewa komponentów, które uległo awarii. Działają jak siatka bezpieczeństwa, zapobiegając awarii całej aplikacji.

Kluczowe cechy Granic Błędów:

Implementacja Granic Błędów

Przejdźmy przez proces tworzenia podstawowego komponentu Granicy Błędu:

1. Tworzenie komponentu Granicy Błędu

Najpierw utwórz nowy komponent klasowy, na przykład o nazwie ErrorBoundary:


import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

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

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

  render() {
    if (this.state.hasError) {
      // Możesz wyrenderować dowolny niestandardowy interfejs zastępczy
      return (
        <div>
          <h2>Coś poszło nie tak.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Wyjaśnienie:

2. Używanie Granicy Błędu

Aby użyć Granicy Błędu, po prostu owiń dowolny komponent, który może rzucić błąd, komponentem ErrorBoundary:


import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  // Ten komponent może rzucić błąd
  return (
    <ErrorBoundary>
      <PotentiallyBreakingComponent />
    </ErrorBoundary>
  );
}

export default MyComponent;

Jeśli PotentiallyBreakingComponent rzuci błąd, ErrorBoundary go przechwyci, zaloguje błąd i wyrenderuje interfejs zastępczy.

3. Przykłady Ilustracyjne w Kontekście Globalnym

Rozważmy aplikację e-commerce wyświetlającą informacje o produktach pobrane ze zdalnego serwera. Komponent, ProductDisplay, jest odpowiedzialny za renderowanie szczegółów produktu. Jednak serwer może czasami zwracać nieoczekiwane dane, co prowadzi do błędów renderowania.


// ProductDisplay.js
import React from 'react';

function ProductDisplay({ product }) {
  // Symuluj potencjalny błąd, jeśli product.price nie jest liczbą
  if (typeof product.price !== 'number') {
    throw new Error('Invalid product price');
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: {product.price}</p>
      <img src={product.imageUrl} alt={product.name} />
    </div>
  );
}

export default ProductDisplay;

Aby zabezpieczyć się przed takimi błędami, owiń komponent ProductDisplay komponentem ErrorBoundary:


// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ProductDisplay from './ProductDisplay';

function App() {
  const product = {
    name: 'Example Product',
    price: 'Not a Number', // Celowo niepoprawne dane
    imageUrl: 'https://example.com/image.jpg'
  };

  return (
    <div>
      <ErrorBoundary>
        <ProductDisplay product={product} />
      </ErrorBoundary>
    </div>
  );
}

export default App;

W tym scenariuszu, ponieważ product.price jest celowo ustawione na ciąg znaków zamiast liczby, komponent ProductDisplay rzuci błąd. ErrorBoundary przechwyci ten błąd, zapobiegając awarii całej aplikacji i wyświetli interfejs zastępczy zamiast uszkodzonego komponentu ProductDisplay.

4. Granice Błędów w Aplikacjach Międzynarodowych

Podczas tworzenia aplikacji dla globalnej publiczności, komunikaty o błędach powinny być zlokalizowane, aby zapewnić lepsze doświadczenie użytkownika. Granice Błędów mogą być używane w połączeniu z bibliotekami do internacjonalizacji (i18n) w celu wyświetlania przetłumaczonych komunikatów o błędach.


// ErrorBoundary.js (ze wsparciem i18n)
import React from 'react';
import { useTranslation } from 'react-i18next'; // Zakładając, że używasz react-i18next

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

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error,
    };
  }

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

  render() {
    if (this.state.hasError) {
      return (
        <FallbackUI error={this.state.error} errorInfo={this.state.errorInfo}/>
      );
    }

    return this.props.children;
  }
}

const FallbackUI = ({error, errorInfo}) => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('error.title')}</h2>
      <p>{t('error.message')}</p>
      <details style={{ whiteSpace: 'pre-wrap' }}>
        {error && error.toString()}<br />
        {errorInfo?.componentStack}
      </details>
    </div>
  );
}


export default ErrorBoundary;

W tym przykładzie używamy react-i18next do tłumaczenia tytułu i wiadomości o błędzie w interfejsie zastępczym. Funkcje t('error.title') i t('error.message') pobiorą odpowiednie tłumaczenia w oparciu o wybrany przez użytkownika język.

5. Kwestie do Rozważenia przy Renderowaniu po Stronie Serwera (SSR)

Podczas używania Granic Błędów w aplikacjach renderowanych po stronie serwera, kluczowe jest odpowiednie obsłużenie błędów, aby zapobiec awarii serwera. Dokumentacja React zaleca unikanie używania Granic Błędów do odzyskiwania po błędach renderowania na serwerze. Zamiast tego, obsłuż błędy przed renderowaniem komponentu lub wyrenderuj statyczną stronę błędu na serwerze.

Najlepsze Praktyki Używania Granic Błędów

Zaawansowane Strategie Obsługi Błędów

1. Mechanizmy Ponawiania Prób

W niektórych przypadkach możliwe jest odzyskanie sprawności po błędzie poprzez ponowienie operacji, która go spowodowała. Na przykład, jeśli żądanie sieciowe zawiedzie, można je ponowić po krótkim opóźnieniu. Granice Błędów można łączyć z mechanizmami ponawiania prób, aby zapewnić bardziej odporne doświadczenie użytkownika.


// ErrorBoundaryWithRetry.js
import React from 'react';

class ErrorBoundaryWithRetry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      retryCount: 0,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

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

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      retryCount: prevState.retryCount + 1,
    }), () => {
      // To wymusza ponowne renderowanie komponentu.  Rozważ lepsze wzorce z kontrolowanymi propsami.
      this.forceUpdate(); // OSTRZEŻENIE: Używaj z ostrożnością
      if (this.props.onRetry) {
          this.props.onRetry();
      }
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Coś poszło nie tak.</h2>
          <button onClick={this.handleRetry}>Spróbuj ponownie</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundaryWithRetry;

Komponent ErrorBoundaryWithRetry zawiera przycisk ponawiania próby, który po kliknięciu resetuje stan hasError i ponownie renderuje komponenty potomne. Można również dodać retryCount, aby ograniczyć liczbę ponownych prób. To podejście może być szczególnie przydatne do obsługi błędów przejściowych, takich jak tymczasowe przerwy w działaniu sieci. Upewnij się, że prop onRetry jest odpowiednio obsługiwany i ponownie pobiera dane/wykonuje logikę, która mogła spowodować błąd.

2. Flagi Funkcji (Feature Flags)

Flagi funkcji pozwalają na dynamiczne włączanie lub wyłączanie funkcji w aplikacji bez wdrażania nowego kodu. Granice Błędów mogą być używane w połączeniu z flagami funkcji do eleganckiej degradacji funkcjonalności w przypadku błędu. Na przykład, jeśli dana funkcja powoduje błędy, można ją wyłączyć za pomocą flagi funkcji i wyświetlić użytkownikowi komunikat informujący, że funkcja jest tymczasowo niedostępna.

3. Wzorzec Wyłącznika Obwodu (Circuit Breaker)

Wzorzec wyłącznika obwodu (circuit breaker) to wzorzec projektowy oprogramowania używany do zapobiegania wielokrotnym próbom wykonania przez aplikację operacji, która prawdopodobnie zakończy się niepowodzeniem. Działa on poprzez monitorowanie wskaźników powodzenia i niepowodzenia operacji, a jeśli wskaźnik niepowodzeń przekroczy określony próg, "otwiera obwód" i zapobiega dalszym próbom wykonania operacji przez określony czas. Może to pomóc w zapobieganiu awariom kaskadowym i poprawie ogólnej stabilności aplikacji.

Granice Błędów mogą być używane do implementacji wzorca wyłącznika obwodu w aplikacjach React. Gdy Granica Błędu przechwyci błąd, może zwiększyć licznik niepowodzeń. Jeśli licznik niepowodzeń przekroczy próg, Granica Błędu może wyświetlić użytkownikowi komunikat informujący, że funkcja jest tymczasowo niedostępna i zapobiec dalszym próbom wykonania operacji. Po pewnym czasie, Granica Błędu może "zamknąć obwód" i ponownie zezwolić na próby wykonania operacji.

Podsumowanie

Granice Błędów w React są niezbędnym narzędziem do tworzenia solidnych i przyjaznych dla użytkownika aplikacji. By implementując Granice Błędów, możesz zapobiec awarii całej aplikacji, zapewnić użytkownikom elegancki interfejs zastępczy oraz logować błędy do serwisów monitorujących w celu debugowania i analizy. Stosując najlepsze praktyki i zaawansowane strategie opisane w tym przewodniku, możesz tworzyć aplikacje React, które są odporne, niezawodne i zapewniają pozytywne doświadczenie użytkownika, nawet w obliczu nieoczekiwanych błędów. Pamiętaj, aby skupić się na dostarczaniu pomocnych komunikatów o błędach, zlokalizowanych dla globalnej publiczności.

Granice Błędów w React: Techniki Eleganckiej Obsługi Błędów dla Solidnych Aplikacji | MLOG