13. Error Boundaries — obsługa błędów w React

Error Boundaries — graceful degradation

Error Boundaries to komponenty klasowe React przechwytujące błędy JavaScript w drzewie komponentów i wyświetlające fallback UI zamiast crashować całą aplikację. Zasada: jeden błąd nie powinien psuć reszty strony.

Bez Error Boundaries jeden błąd w komponencie powoduje białą stronę dla wszystkich użytkowników. W produkcji to niedopuszczalne. Error Boundaries to podstawa solidnych aplikacji.

1. Wyjaśnić co to jest Error Boundary i jaki problem rozwiązuje
2. Opisać implementację: getDerivedStateFromError, componentDidCatch
3. Omówić co Error Boundary łapie, a czego NIE łapie
4. Pokazać granularność — gdzie umieszczać Error Boundaries

1. Problem — błąd w jednym komponencie = biała strona całej aplikacji
2. Error Boundary — komponent klasowy, dwa lifecycle methods
3. getDerivedStateFromError — zmienia state gdy błąd złapany
4. componentDidCatch — logowanie błędu (np. do Sentry)
5. Fallback UI — co pokazać zamiast crashed komponentu

• Struktura minimalna

1. Wstęp — dlaczego obsługa błędów jest krytyczna
2. Rozdział 1: Error Boundary — implementacja, lifecycle methods
3. Rozdział 2: Fallback UI i granularność — gdzie umieszczać
4. Rozdział 3: Czego EB nie łapie — async, event handlers
5. Podsumowanie
6. Bibliografia

Solidna aplikacja obsługuje błędy elegancko!

Zacznij od dramatycznego przykładu: białej strony bez Error Boundary. Potem pokaż tę samą sytuację z EB — aplikacja nadal działa, tylko jeden panel pokazuje fallback.