import React, { Suspense } from 'react';

// Symuluje pobieranie danych (np. z API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Tworzy zasób, którego może użyć Suspense
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Komponent, który odczytuje dane z zasobu
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    Ładowanie danych użytkownika...

W tym przykładzie:

• `fetchData` symuluje asynchroniczną operację pobierania danych.
• `createResource` tworzy zasób, którego Suspense może użyć do śledzenia stanu ładowania danych.
• `UserProfile` odczytuje dane z zasobu za pomocą metody `read`. Jeśli dane nie są jeszcze dostępne, rzuca obietnicę (promise), co zawiesza komponent.
• Komponent `Suspense` opakowuje `UserProfile` i dostarcza prop `fallback`, który określa interfejs do wyświetlenia podczas zawieszenia komponentu.

Suspense z dzieleniem kodu (Code Splitting)

Suspense może być również używany z React.lazy do implementacji dzielenia kodu. Pozwala to na ładowanie komponentów tylko wtedy, gdy są potrzebne, co poprawia wydajność początkowego ładowania strony.

import React, { Suspense, lazy } from 'react';

// Leniwe ładowanie komponentu MyComponent
const MyComponent = lazy(() => import('./MyComponent'));

const App = () => {
  return (
    Ładowanie komponentu...}>
      
    
  );
};

export default App;

W tym przykładzie:

• `React.lazy` jest używane do leniwego ładowania komponentu `MyComponent`.
• Komponent `Suspense` opakowuje `MyComponent` i dostarcza prop `fallback`, który określa interfejs do wyświetlenia podczas ładowania komponentu.

Zrozumienie Error Boundaries (Granic Błędów)

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 zapasowy (fallback UI) zamiast powodować awarię całej aplikacji. Zapewniają one sposób na elegancką obsługę nieoczekiwanych błędów, poprawiając doświadczenie użytkownika i czyniąc aplikację bardziej odporną.

Kluczowe koncepcje Error Boundaries

• Przechwytywanie błędów: Error Boundaries przechwytują błędy podczas renderowania, w metodach cyklu życia oraz w konstruktorach całego drzewa komponentów znajdującego się poniżej nich.
• Interfejs zapasowy (Fallback UI): Interfejs, który jest wyświetlany w przypadku wystąpienia błędu. Zazwyczaj jest to komunikat o błędzie lub placeholder.
• Logowanie błędów: Error Boundaries pozwalają na logowanie błędów do serwisu lub konsoli w celach debugowania.
• Izolacja drzewa komponentów: Error Boundaries izolują błędy w określonych częściach drzewa komponentów, zapobiegając awarii całej aplikacji.

Podstawowa implementacja Error Boundaries

Oto prosty przykład tworzenia komponentu Error Boundary:

import React, { Component } from 'react';

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

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

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

  render() {
    if (this.state.hasError) {
      // Możesz wyrenderować dowolny niestandardowy interfejs zapasowy
      return 
Coś poszło nie tak.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

W tym przykładzie:

• Komponent `ErrorBoundary` definiuje metody `getDerivedStateFromError` i `componentDidCatch`.
• `getDerivedStateFromError` jest wywoływana, gdy w komponencie potomnym wystąpi błąd. Aktualizuje ona stan, aby wskazać, że wystąpił błąd.
• `componentDidCatch` jest wywoływana po przechwyceniu błędu. Pozwala na zalogowanie błędu do serwisu lub konsoli.
• Metoda `render` sprawdza stan `hasError` i wyświetla interfejs zapasowy, jeśli wystąpił błąd.

Używanie Error Boundaries

Aby użyć komponentu `ErrorBoundary`, po prostu opakuj nim komponenty, które chcesz chronić:

import React from 'react';
import ErrorBoundary from './ErrorBoundary';

const MyComponent = () => {
  // Symuluj błąd
  throw new Error('Wystąpił błąd!');
};

const App = () => {
  return (
    
      
    
  );
};

export default App;

W tym przykładzie, jeśli w `MyComponent` wystąpi błąd, komponent `ErrorBoundary` przechwyci go i wyświetli interfejs zapasowy.

Łączenie Suspense i Error Boundaries

Suspense i Error Boundaries można łączyć, aby zapewnić solidną i kompleksową strategię obsługi błędów dla operacji asynchronicznych. Opakowując komponenty, które mogą ulec zawieszeniu, zarówno w Suspense, jak i Error Boundaries, można elegancko obsłużyć zarówno stany ładowania, jak i nieoczekiwane błędy.

Przykład łączenia Suspense i Error Boundaries

import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

// Symuluje pobieranie danych (np. z API)
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Symuluj pomyślne pobranie danych
      // resolve({ name: 'John Doe', age: 30 });

      // Symuluj błąd podczas pobierania danych
      reject(new Error('Nie udało się pobrać danych użytkownika'));

    }, 2000);
  });
};

// Tworzy zasób, którego może użyć Suspense
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Komponent, który odczytuje dane z zasobu
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    
      Ładowanie danych użytkownika...}>
        
      
    
  );
};

export default App;

W tym przykładzie:

• Komponent `ErrorBoundary` opakowuje komponent `Suspense`.
• Komponent `Suspense` opakowuje komponent `UserProfile`.
• Jeśli funkcja `fetchData` odrzuci obietnicę z błędem, komponent `Suspense` przechwyci to odrzucenie, a `ErrorBoundary` przechwyci błąd rzucony przez Suspense.
• `ErrorBoundary` następnie wyświetli interfejs zapasowy.
• Jeśli dane zostaną pomyślnie pobrane, komponent `Suspense` wyświetli komponent `UserProfile`.

Zaawansowane techniki i dobre praktyki

Optymalizacja wydajności Suspense

• Używaj memoizacji: Memoizuj komponenty renderowane wewnątrz granic Suspense, aby zapobiec niepotrzebnym ponownym renderowaniom.
• Unikaj głębokich drzew Suspense: Utrzymuj płytkie drzewo Suspense, aby zminimalizować wpływ na wydajność renderowania.
• Pobieraj dane z wyprzedzeniem (Prefetching): Pobieraj dane, zanim będą potrzebne, aby zmniejszyć prawdopodobieństwo zawieszenia.

Niestandardowe Error Boundaries

Możesz tworzyć niestandardowe komponenty Error Boundary do obsługi określonych typów błędów lub dostarczania bardziej informacyjnych komunikatów o błędach. Na przykład, można stworzyć Error Boundary, który wyświetla inny interfejs zapasowy w zależności od typu błędu, który wystąpił.

Renderowanie po stronie serwera (SSR) z Suspense

Suspense może być używany z renderowaniem po stronie serwera (SSR), aby poprawić wydajność początkowego ładowania strony. Używając SSR, można wstępnie wyrenderować początkowy stan aplikacji na serwerze, a następnie przesyłać strumieniowo pozostałą treść do klienta. Suspense pozwala na obsługę asynchronicznego pobierania danych podczas SSR i wyświetlanie wskaźników ładowania podczas strumieniowania danych.

Obsługa różnych scenariuszy błędów

Rozważ te różne scenariusze błędów i sposoby ich obsługi:

• Błędy sieciowe: Obsługuj błędy sieciowe w elegancki sposób, wyświetlając użytkownikowi informacyjny komunikat o błędzie.
• Błędy API: Obsługuj błędy API, wyświetlając komunikat o błędzie specyficzny dla błędu, który wystąpił.
• Nieoczekiwane błędy: Obsługuj nieoczekiwane błędy, logując je i wyświetlając użytkownikowi ogólny komunikat o błędzie.

Globalna obsługa błędów

Zaimplementuj globalny mechanizm obsługi błędów, aby przechwytywać błędy, które nie zostały złapane przez Error Boundaries. Można to zrobić, używając globalnego handlera błędów lub opakowując całą aplikację w Error Boundary.

Przykłady z życia wzięte i przypadki użycia

Aplikacja e-commerce

W aplikacji e-commerce Suspense może być używany do wyświetlania wskaźników ładowania podczas pobierania danych o produktach, a Error Boundaries do obsługi błędów występujących podczas procesu płatności. Wyobraźmy sobie na przykład użytkownika z Japonii przeglądającego sklep internetowy zlokalizowany w Stanach Zjednoczonych. Załadowanie zdjęć i opisów produktów może zająć trochę czasu. Suspense może wyświetlić prostą animację ładowania, podczas gdy te dane są pobierane z serwera znajdującego się być może na drugim końcu świata. Jeśli bramka płatności zawiedzie z powodu tymczasowego problemu z siecią (co jest częste przy różnych infrastrukturach internetowych na świecie), Error Boundary może wyświetlić przyjazny dla użytkownika komunikat zachęcający do ponownej próby później.

Platforma mediów społecznościowych

Na platformie mediów społecznościowych Suspense może być używany do wyświetlania wskaźników ładowania podczas pobierania profili użytkowników i postów, a Error Boundaries do obsługi błędów występujących podczas ładowania zdjęć lub filmów. Użytkownik przeglądający z Indii może doświadczać wolniejszego ładowania mediów hostowanych na serwerach w Europie. Suspense może pokazać placeholder, dopóki treść nie zostanie w pełni załadowana. Jeśli dane profilu konkretnego użytkownika są uszkodzone (rzadkie, ale możliwe), Error Boundary może zapobiec awarii całego feedu, wyświetlając zamiast tego prosty komunikat o błędzie, np. "Nie można załadować profilu użytkownika".

Aplikacja typu dashboard

W aplikacji typu dashboard Suspense może być używany do wyświetlania wskaźników ładowania podczas pobierania danych z wielu źródeł, a Error Boundaries do obsługi błędów występujących podczas ładowania wykresów. Analityk finansowy w Londynie, korzystający z globalnego dashboardu inwestycyjnego, może ładować dane z wielu giełd na całym świecie. Suspense może dostarczyć wskaźniki ładowania dla każdego źródła danych. Jeśli API jednej z giełd jest niedostępne, Error Boundary może wyświetlić komunikat o błędzie specyficzny dla danych z tej giełdy, zapobiegając unieruchomieniu całego dashboardu.

Podsumowanie

React Suspense i Error Boundaries to niezbędne narzędzia do tworzenia odpornych i przyjaznych dla użytkownika aplikacji React. Używając Suspense do zarządzania stanami ładowania i Error Boundaries do obsługi nieoczekiwanych błędów, można poprawić ogólne doświadczenie użytkownika i uprościć proces tworzenia oprogramowania. Ten przewodnik dostarczył kompleksowego przeglądu Suspense i Error Boundaries, obejmując wszystko od podstawowych koncepcji po zaawansowane techniki. Stosując się do najlepszych praktyk przedstawionych w tym artykule, można tworzyć solidne i niezawodne aplikacje React, które poradzą sobie nawet w najtrudniejszych scenariuszach.

W miarę jak React się rozwija, Suspense i Error Boundaries prawdopodobnie będą odgrywać coraz ważniejszą rolę w budowaniu nowoczesnych aplikacji internetowych. Opanowując te funkcje, można wyprzedzić konkurencję i dostarczać wyjątkowe doświadczenia użytkownika.