react-error-boundary - nowoczesna biblioteka

Tworzenie Error Boundaries od zera wymaga pisania komponentów klasowych, co w dobie hookow może wydawac sie archaiczne. Na szczęście istnieje biblioteka

react-error-boundary

, która znacznie upraszcza prace z obsługą błędów.

Instalacja i podstawowe uzycie

1npm install react-error-boundary

Biblioteka udostępnia gotowy komponent

ErrorBoundary

z wieloma przydatnymi funkcjami:

1import { ErrorBoundary } from 'react-error-boundary';
2
3function ErrorFallback({ error, resetErrorBoundary }) {
4  return (
5    <div className="error-panel">
6      <h2>Awaria modulu!</h2>
7      <p>{error.message}</p>
8      <button onClick={resetErrorBoundary}>
9        Restart modulu
10      </button>
11    </div>
12  );
13}
14
15function App() {
16  return (
17    <ErrorBoundary
18      FallbackComponent={ErrorFallback}
19      onError={(error, info) => {
20        // Logowanie do serwisu monitoringu
21        console.error('Logged error:', error);
22      }}
23      onReset={() => {
24        // Reset stanu aplikacji po naprawie błędu
25        console.log('Error boundary reset');
26      }}
27    >
28      <SpaceStation />
29    </ErrorBoundary>
30  );
31}

FallbackComponent vs fallback vs fallbackRender

Biblioteka oferuje trzy sposoby definiowania zastepczego UI:

1. FallbackComponent (zalecane)

1function MyFallback({ error, resetErrorBoundary }) {
2  return (
3    <div>
4      <p>Błąd: {error.message}</p>
5      <button onClick={resetErrorBoundary}>Sprobuj ponownie</button>
6    </div>
7  );
8}
9
10<ErrorBoundary FallbackComponent={MyFallback}>
11  <App />
12</ErrorBoundary>

2. fallback (prosty JSX)

1<ErrorBoundary fallback={<p>Cos poszlo nie tak!</p>}>
2  <App />
3</ErrorBoundary>

3. fallbackRender (render prop)

1<ErrorBoundary
2  fallbackRender={({ error, resetErrorBoundary }) => (
3    <div>
4      <p>{error.message}</p>
5      <button onClick={resetErrorBoundary}>Reset</button>
6    </div>
7  )}
8>
9  <App />
10</ErrorBoundary>

Hook useErrorBoundary

Jeden z najpotezniejszych narzędzi biblioteki - hook

useErrorBoundary

pozwala programowo wywoływac błędy w Error Boundary z poziomu event handlerow i kodu asynchronicznego!

1import { useErrorBoundary } from 'react-error-boundary';
2
3function DataFetcher() {
4  const { showBoundary } = useErrorBoundary();
5  const [data, setData] = useState(null);
6
7  const fetchData = async () => {
8    try {
9      const response = await fetch('/api/missions');
10      if (!response.ok) {
11        throw new Error('Błąd pobierania danych misji');
12      }
13      const result = await response.json();
14      setData(result);
15    } catch (error) {
16      // Przekaz błąd do najblizszego Error Boundary!
17      showBoundary(error);
18    }
19  };
20
21  return (
22    <div>
23      <button onClick={fetchData}>Pobierz dane misji</button>
24      {data && <p>Misje: {data.length}</p>}
25    </div>
26  );
27}

resetKeys - automatyczny reset

Możesz skonfigurowac

resetKeys

- liste wartości, których zmiana automatycznie zresetuje Error Boundary:

1function App() {
2  const [selectedPlanet, setSelectedPlanet] = useState('Mars');
3
4  return (
5    <ErrorBoundary
6      FallbackComponent={ErrorFallback}
7      resetKeys={[selectedPlanet]}
8      onReset={() => {
9        // Czyszczenie po resecie
10        console.log('Boundary reset - nowa planeta:', selectedPlanet);
11      }}
12    >
13      <PlanetDetails planet={selectedPlanet} />
14    </ErrorBoundary>
15  );
16}
17// Gdy użytkownik zmieni planete, Error Boundary automatycznie sie zresetuje

Nested Error Boundaries

Możesz zagniezdac wiele Error Boundaries dla różnych poziomow obsługi:

1<ErrorBoundary FallbackComponent={AppCrashScreen}>
2  <Header />
3  <ErrorBoundary FallbackComponent={SectionError}>
4    <MissionControl />
5  </ErrorBoundary>
6  <ErrorBoundary FallbackComponent={SectionError}>
7    <CrewPanel />
8  </ErrorBoundary>
9</ErrorBoundary>

Jeśli błąd wystąpi w

MissionControl

, zostanie przechwycony przez wewnetrzny

ErrorBoundary

. Jeśli wewnetrzny sam rzuci błąd, przechwycony zostanie przez zewnetrzny.

Porownanie: wlasny Error Boundary vs react-error-boundary

| Cecha | Wlasny (klasowy) | react-error-boundary | |-------|-------------------|---------------------| | Reset | Recznie implementowany | Wbudowany (resetErrorBoundary) | | Auto-reset | Brak | resetKeys | | Hook | Brak | useErrorBoundary | | Logging | Recznie | Wbudowany (onError) | | Async errors | Nie przechwytuje | showBoundary() | | Boilerplate | Duzo | Minimum |

Kluczowa zaleta biblioteki to hook

useErrorBoundary

-- pozwala przechwytywac bledy z event handlerow i kodu asynchronicznego, czego natywne Error Boundaries nie potrafia. W praktyce, jesli budujesz powaznie aplikacje produkcyjna,

react-error-boundary

jest standardem branżowym -- tak jak ustandaryzowane systemy bezpieczenstwa na statkach kosmicznych.