Granice błędów
Zaimplementuje Pan/Pani oparte na klasach granice błędów z componentDidCatch i getDerivedStateFromError, aby zapobiec awariom całej aplikacji wskutek nieobsłużonych błędów renderowania.
Granice błędów to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Dlaczego granice błędów?
Nieprzechwycony błąd podczas renderowania, w metodzie cyklu życia lub konstruktorze domyślnie powoduje awarię całego drzewa React. Granice błędów przechwytują takie błędy w poddrzewie i pozwalają wyrenderować ekran zastępczy.
Tylko komponenty klasowe
Granice błędów muszą być komponentami klasowymi (nadal w 2026 roku — wciąż nie ma odpowiednika w postaci hooka). Hook useErrorBoundary istnieje w bibliotekach takich jak react-error-boundary.
getDerivedStateFromError
Metoda statyczna wywoływana, gdy komponent potomny zgłosi błąd. Zwraca aktualizację stanu, która uruchamia renderowanie ekranu zastępczego.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}componentDidCatch do rejestrowania błędów
Za pomocą componentDidCatch należy rejestrować błąd w usłudze (Sentry, Datadog) — metoda otrzymuje zarówno błąd, jak i stos komponentów React.
componentDidCatch(error, errorInfo) {
Sentry.captureException(error, {
contexts: { react: { componentStack: errorInfo.componentStack } }
});
}Owijanie głównego komponentu aplikacji
Należy owinąć główny komponent App w granicę błędów, aby zapobiec białemu ekranowi śmierci.
<ErrorBoundary fallback={<GlobalErrorPage />}>
<App />
</ErrorBoundary>Granularne granice dla tras lub widżetów
Jedna globalna granica to minimum. Należy dodać granice dla poszczególnych tras, aby awaria jednej sekcji nie wyczyściła całej aplikacji.
<Routes>
<Route path="/" element={<Home />} />
<Route path="/dashboard" element={
<ErrorBoundary fallback={<DashboardError />}>
<Dashboard />
</ErrorBoundary>
} />
</Routes>Czego NIE przechwytują granice błędów
Granice NIE przechwytują: błędów w obsłudze zdarzeń, błędów w kodzie asynchronicznym (setTimeout, promises), błędów zgłoszonych podczas SSR ani błędów występujących w samej granicy. W tych miejscach należy używać try/catch.
Błędy w obsłudze zdarzeń
Proszę opakować obsługę zdarzeń w try/catch i wywołać ręczną funkcję reportError.
function Button() {
function onClick() {
try {
riskyOperation();
} catch (err) {
reportError(err);
toast.error('Something went wrong');
}
}
return <button onClick={onClick}>Click</button>;
}Biblioteka react-error-boundary
Społecznościowy pakiet react-error-boundary udostępnia interfejs API przyjazny komponentom funkcyjnym oraz obsługę resetowania.
import { ErrorBoundary } from 'react-error-boundary';
<ErrorBoundary
fallbackRender={({ error, resetErrorBoundary }) => (
<div>
<p>Error: {error.message}</p>
<button onClick={resetErrorBoundary}>Try again</button>
</div>
)}
onReset={() => refetch()}
>
<DataView />
</ErrorBoundary>Resetowanie po odzyskaniu działania
Należy zapewnić sposób odzyskania działania (przycisk ponowienia lub zmiana trasy). Granica powinna zresetować swój stan, aby przestać wyświetlać widok zastępczy.
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
reset = () => this.setState({ hasError: false });
render() {
if (this.state.hasError) {
return <button onClick={this.reset}>Retry</button>;
}
return this.props.children;
}
}Środowisko deweloperskie a produkcyjne
W środowisku deweloperskim React nadal wyświetla czerwony ekran błędu nawet w obecności granicy — jest to zamierzone. Na produkcji wyświetlany jest tylko widok zastępczy granicy.
Najlepsze praktyki
1) Globalna granica w głównym komponencie aplikacji. 2) Granice dla poszczególnych tras. 3) Granice o szczegółowym zakresie wokół niezależnych widżetów. 4) Zawsze należy rejestrować błędy w usłudze monitorowania. 5) Należy wyświetlać opcje odzyskania działania (ponowienie, powrót do strony głównej). 6) Nie należy po cichu ignorować błędów.
Szybkie sprawdzenie
Jakiego rodzaju błędów NIE przechwytują granice błędów React?
Podsumowanie: granice błędów
Komponent klasowy ze statyczną metodą getDerivedStateFromError oraz metodą componentDidCatch. Obejmuje poddrzewo, aby przechwytywać błędy występujące podczas renderowania. Nie przechwytuje błędów w obsłudze zdarzeń, błędów asynchronicznych ani błędów SSR. Należy umieścić globalną granicę w głównym komponencie aplikacji oraz dodać granice dla poszczególnych tras i widżetów. Błędy należy rejestrować w Sentry. Należy udostępnić opcję odzyskania działania. Biblioteka react-error-boundary zapewnia wygodniejszy interfejs.
Często zadawane pytania
Czy lekcja „Granice błędów” jest bezpłatna?
Tak — pełny tekst „Granice błędów” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Granice błędów”?
Zaimplementuje Pan/Pani oparte na klasach granice błędów z componentDidCatch i getDerivedStateFromError, aby zapobiec awariom całej aplikacji wskutek nieobsłużonych błędów renderowania. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Granice błędów”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.