Dowiedz si臋, jak u偶ywa膰 React ErrorBoundaries do obs艂ugi b艂臋d贸w, zapobiegania awariom i poprawy UX dzi臋ki solidnym strategiom odzyskiwania.
React ErrorBoundary: Strategie Izolacji B艂臋d贸w i Odzyskiwania Aplikacji
W dynamicznym 艣wiecie front-end developmentu, zw艂aszcza podczas pracy ze z艂o偶onymi frameworkami opartymi na komponentach, takimi jak React, nieoczekiwane b艂臋dy s膮 nieuniknione. B艂臋dy te, je艣li nie zostan膮 poprawnie obs艂u偶one, mog膮 prowadzi膰 do awarii aplikacji i frustruj膮cego do艣wiadczenia u偶ytkownika. Komponent ErrorBoundary w React oferuje solidne rozwi膮zanie do eleganckiego obs艂ugiwania tych b艂臋d贸w, izolowania ich i dostarczania strategii odzyskiwania. Ten kompleksowy przewodnik zg艂臋bia moc ErrorBoundary, demonstruj膮c, jak skutecznie go implementowa膰, aby budowa膰 bardziej odporne i przyjazne dla u偶ytkownika aplikacje React dla globalnej publiczno艣ci.
Zrozumienie potrzeby stosowania Error Boundaries
Zanim przejdziemy do implementacji, zrozummy, dlaczego granice b艂臋d贸w (error boundaries) s膮 niezb臋dne. W React b艂臋dy wyst臋puj膮ce podczas renderowania, w metodach cyklu 偶ycia lub w konstruktorach komponent贸w potomnych mog膮 potencjalnie doprowadzi膰 do awarii ca艂ej aplikacji. Dzieje si臋 tak, poniewa偶 nieprzechwycone b艂臋dy propaguj膮 si臋 w g贸r臋 drzewa komponent贸w, cz臋sto prowadz膮c do pustego ekranu lub bezu偶ytecznego komunikatu o b艂臋dzie. Wyobra藕 sobie u偶ytkownika w Japonii, kt贸ry pr贸buje sfinalizowa膰 wa偶n膮 transakcj臋 finansow膮, tylko po to, by napotka膰 pusty ekran z powodu drobnego b艂臋du w pozornie niepowi膮zanym komponencie. To ilustruje krytyczn膮 potrzeb臋 proaktywnego zarz膮dzania b艂臋dami.
Error boundaries zapewniaj膮 spos贸b na przechwytywanie b艂臋d贸w JavaScript w dowolnym miejscu w drzewie ich komponent贸w potomnych, logowanie tych b艂臋d贸w i wy艣wietlanie interfejsu zast臋pczego (fallback UI) zamiast powodowania awarii drzewa komponent贸w. Pozwalaj膮 one izolowa膰 wadliwe komponenty i zapobiega膰 wp艂ywowi b艂臋d贸w w jednej cz臋艣ci aplikacji na inne, zapewniaj膮c bardziej stabilne i niezawodne do艣wiadczenie u偶ytkownika na ca艂ym 艣wiecie.
Czym jest React ErrorBoundary?
ErrorBoundary to komponent React, kt贸ry przechwytuje b艂臋dy JavaScript w dowolnym miejscu w drzewie swoich komponent贸w potomnych, loguje te b艂臋dy i wy艣wietla interfejs zast臋pczy. Jest to komponent klasowy, kt贸ry implementuje jedn膮 lub obie z nast臋puj膮cych metod cyklu 偶ycia:
static getDerivedStateFromError(error): Ta metoda cyklu 偶ycia jest wywo艂ywana po wyst膮pieniu b艂臋du w komponencie potomnym. Otrzymuje jako argument b艂膮d, kt贸ry zosta艂 zg艂oszony, i powinna zwr贸ci膰 warto艣膰 w celu zaktualizowania stanu komponentu.componentDidCatch(error, info): Ta metoda cyklu 偶ycia jest wywo艂ywana po wyst膮pieniu b艂臋du w komponencie potomnym. Otrzymuje dwa argumenty: zg艂oszony b艂膮d oraz obiektinfozawieraj膮cy informacje o tym, kt贸ry komponent zg艂osi艂 b艂膮d. Mo偶esz u偶y膰 tej metody do logowania informacji o b艂臋dach lub wykonywania innych efekt贸w ubocznych.
Tworzenie podstawowego komponentu ErrorBoundary
Stw贸rzmy podstawowy komponent ErrorBoundary, aby zilustrowa膰 fundamentalne zasady.
Przyk艂ad kodu
Oto kod prostego komponentu ErrorBoundary:
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
errorInfo: null,
};
}
static getDerivedStateFromError(error) {
// Zaktualizuj stan, aby nast臋pne renderowanie pokaza艂o interfejs zast臋pczy.
return {
hasError: true,
};
}
componentDidCatch(error, info) {
// Przyk艂adowy "componentStack":
// in ComponentThatThrows (created by App)
// in App
console.error("Caught an error:", error);
console.error("Error info:", info.componentStack);
this.setState({ error: error, errorInfo: info });
// Mo偶esz r贸wnie偶 zalogowa膰 b艂膮d do serwisu raportowania b艂臋d贸w
// logErrorToMyService(error, info.componentStack);
}
render() {
if (this.state.hasError) {
// Mo偶esz wyrenderowa膰 dowolny niestandardowy interfejs zast臋pczy
return (
Co艣 posz艂o nie tak.
B艂膮d: {this.state.error && this.state.error.toString()}
{this.state.errorInfo && this.state.errorInfo.componentStack}
);
}
return this.props.children;
}
}
export default ErrorBoundary;
Wyja艣nienie
- Konstruktor: Konstruktor inicjalizuje stan komponentu z
hasErrorustawionym nafalse. Przechowujemy r贸wnie偶 b艂膮d i informacje o b艂臋dzie w celach debugowania. getDerivedStateFromError(error): Ta statyczna metoda jest wywo艂ywana, gdy komponent potomny zg艂osi b艂膮d. Aktualizuje stan, aby wskaza膰, 偶e wyst膮pi艂 b艂膮d.componentDidCatch(error, info): Ta metoda jest wywo艂ywana po zg艂oszeniu b艂臋du. Otrzymuje b艂膮d i obiektinfozawieraj膮cy informacje o stosie komponent贸w. Tutaj logujemy b艂膮d do konsoli (zast膮p preferowanym mechanizmem logowania, takim jak Sentry, Bugsnag lub niestandardowe rozwi膮zanie wewn臋trzne). Ustawiamy r贸wnie偶 b艂膮d i informacje o b艂臋dzie w stanie.render(): Metoda renderowania sprawdza stanhasError. Je艣li jesttrue, renderuje interfejs zast臋pczy; w przeciwnym razie renderuje dzieci komponentu. Interfejs zast臋pczy powinien by膰 informacyjny i przyjazny dla u偶ytkownika. Do艂膮czanie szczeg贸艂贸w b艂臋du i stosu komponent贸w, cho膰 pomocne dla deweloper贸w, powinno by膰 renderowane warunkowo lub usuni臋te w 艣rodowiskach produkcyjnych ze wzgl臋d贸w bezpiecze艅stwa.
U偶ywanie komponentu ErrorBoundary
Aby u偶y膰 komponentu ErrorBoundary, po prostu opakuj nim dowolny komponent, kt贸ry mo偶e zg艂osi膰 b艂膮d.
Przyk艂ad kodu
import ErrorBoundary from './ErrorBoundary';
function MyComponent() {
return (
{/* Komponenty, kt贸re mog膮 zg艂osi膰 b艂膮d */}
);
}
function App() {
return (
);
}
export default App;
Wyja艣nienie
W tym przyk艂adzie MyComponent jest opakowany w ErrorBoundary. Je艣li jakikolwiek b艂膮d wyst膮pi w MyComponent lub jego dzieciach, ErrorBoundary go przechwyci i wyrenderuje interfejs zast臋pczy.
Zaawansowane strategie ErrorBoundary
Podczas gdy podstawowy ErrorBoundary zapewnia fundamentalny poziom obs艂ugi b艂臋d贸w, istnieje kilka zaawansowanych strategii, kt贸re mo偶na wdro偶y膰 w celu ulepszenia zarz膮dzania b艂臋dami.
1. Granularne Error Boundaries
Zamiast opakowywa膰 ca艂膮 aplikacj臋 w jeden ErrorBoundary, rozwa偶 u偶ycie granularnych granic b艂臋d贸w. Polega to na umieszczaniu komponent贸w ErrorBoundary wok贸艂 okre艣lonych cz臋艣ci aplikacji, kt贸re s膮 bardziej podatne na b艂臋dy lub gdzie awaria mia艂aby ograniczony wp艂yw. Na przyk艂ad, mo偶esz opakowa膰 poszczeg贸lne wid偶ety lub komponenty, kt贸re zale偶膮 od zewn臋trznych 藕r贸de艂 danych.
Przyk艂ad
function ProductList() {
return (
{/* Lista produkt贸w */}
);
}
function RecommendationWidget() {
return (
{/* Silnik rekomendacji */}
);
}
function App() {
return (
);
}
W tym przyk艂adzie RecommendationWidget ma sw贸j w艂asny ErrorBoundary. Je艣li silnik rekomendacji zawiedzie, nie wp艂ynie to na ProductList, a u偶ytkownik nadal b臋dzie m贸g艂 przegl膮da膰 produkty. To granularne podej艣cie poprawia og贸lne do艣wiadczenie u偶ytkownika, izoluj膮c b艂臋dy i zapobiegaj膮c ich kaskadowemu rozprzestrzenianiu si臋 po aplikacji.
2. Logowanie i raportowanie b艂臋d贸w
Logowanie b艂臋d贸w jest kluczowe dla debugowania i identyfikowania powtarzaj膮cych si臋 problem贸w. Metoda cyklu 偶ycia componentDidCatch jest idealnym miejscem do integracji z us艂ugami logowania b艂臋d贸w, takimi jak Sentry, Bugsnag czy Rollbar. Us艂ugi te dostarczaj膮 szczeg贸艂owych raport贸w o b艂臋dach, w tym 艣lad贸w stosu, kontekstu u偶ytkownika i informacji o 艣rodowisku, co pozwala szybko diagnozowa膰 i rozwi膮zywa膰 problemy. Rozwa偶 anonimizacj臋 lub redagowanie wra偶liwych danych u偶ytkownika przed wys艂aniem log贸w b艂臋d贸w, aby zapewni膰 zgodno艣膰 z przepisami o ochronie prywatno艣ci, takimi jak RODO.
Przyk艂ad
import * as Sentry from "@sentry/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, info) {
// Zaloguj b艂膮d do Sentry
Sentry.captureException(error, { extra: info });
// Mo偶esz r贸wnie偶 zalogowa膰 b艂膮d do serwisu raportowania b艂臋d贸w
console.error("Caught an error:", error);
}
render() {
if (this.state.hasError) {
// Mo偶esz wyrenderowa膰 dowolny niestandardowy interfejs zast臋pczy
return (
Co艣 posz艂o nie tak.
);
}
return this.props.children;
}
}
export default ErrorBoundary;
W tym przyk艂adzie metoda componentDidCatch u偶ywa Sentry.captureException do raportowania b艂臋du do Sentry. Mo偶esz skonfigurowa膰 Sentry, aby wysy艂a艂 powiadomienia do Twojego zespo艂u, co pozwoli Ci szybko reagowa膰 na krytyczne b艂臋dy.
3. Niestandardowy interfejs zast臋pczy (Fallback UI)
Interfejs zast臋pczy wy艣wietlany przez ErrorBoundary to okazja do zapewnienia przyjaznego dla u偶ytkownika do艣wiadczenia nawet w przypadku wyst膮pienia b艂臋d贸w. Zamiast pokazywa膰 og贸lny komunikat o b艂臋dzie, rozwa偶 wy艣wietlenie bardziej informacyjnej wiadomo艣ci, kt贸ra poprowadzi u偶ytkownika w kierunku rozwi膮zania. Mo偶e to obejmowa膰 instrukcje, jak od艣wie偶y膰 stron臋, skontaktowa膰 si臋 z pomoc膮 techniczn膮 lub spr贸bowa膰 ponownie p贸藕niej. Mo偶esz r贸wnie偶 dostosowa膰 interfejs zast臋pczy w zale偶no艣ci od rodzaju b艂臋du, kt贸ry wyst膮pi艂.
Przyk艂ad
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = {
hasError: false,
error: null,
};
}
static getDerivedStateFromError(error) {
// Zaktualizuj stan, aby nast臋pne renderowanie pokaza艂o interfejs zast臋pczy.
return {
hasError: true,
error: error,
};
}
componentDidCatch(error, info) {
console.error("Caught an error:", error);
// Mo偶esz r贸wnie偶 zalogowa膰 b艂膮d do serwisu raportowania b艂臋d贸w
// logErrorToMyService(error, info.componentStack);
}
render() {
if (this.state.hasError) {
// Mo偶esz wyrenderowa膰 dowolny niestandardowy interfejs zast臋pczy
if (this.state.error instanceof NetworkError) {
return (
B艂膮d sieci
Sprawd藕 swoje po艂膮czenie internetowe i spr贸buj ponownie.
);
} else {
return (
Co艣 posz艂o nie tak.
Spr贸buj od艣wie偶y膰 stron臋 lub skontaktuj si臋 z pomoc膮 techniczn膮.
);
}
}
return this.props.children;
}
}
export default ErrorBoundary;
W tym przyk艂adzie interfejs zast臋pczy sprawdza, czy b艂膮d jest typu NetworkError. Je艣li tak, wy艣wietla konkretny komunikat instruuj膮cy u偶ytkownika, aby sprawdzi艂 swoje po艂膮czenie internetowe. W przeciwnym razie wy艣wietla og贸lny komunikat o b艂臋dzie. Dostarczanie konkretnych, praktycznych wskaz贸wek mo偶e znacznie poprawi膰 do艣wiadczenie u偶ytkownika.
4. Mechanizmy ponawiania pr贸by
W niekt贸rych przypadkach b艂臋dy s膮 przej艣ciowe i mo偶na je rozwi膮za膰, ponawiaj膮c operacj臋. Mo偶esz zaimplementowa膰 mechanizm ponawiania pr贸by w ErrorBoundary, aby automatycznie ponowi膰 nieudan膮 operacj臋 po pewnym op贸藕nieniu. Mo偶e to by膰 szczeg贸lnie przydatne do obs艂ugi b艂臋d贸w sieciowych lub tymczasowych awarii serwera. B膮d藕 ostro偶ny przy implementacji mechanizm贸w ponawiania pr贸by dla operacji, kt贸re mog膮 mie膰 efekty uboczne, poniewa偶 ich ponawianie mo偶e prowadzi膰 do niezamierzonych konsekwencji.
Przyk艂ad
import React, { useState, useEffect } from 'react';
function DataFetchingComponent() {
const [data, setData] = useState(null);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [retryCount, setRetryCount] = useState(0);
useEffect(() => {
const fetchData = async () => {
setIsLoading(true);
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
setData(result);
setError(null);
} catch (e) {
setError(e);
setRetryCount(prevCount => prevCount + 1);
} finally {
setIsLoading(false);
}
};
if (error && retryCount < 3) {
const retryDelay = Math.pow(2, retryCount) * 1000; // Wyk艂adniczy backoff
console.log(`Retrying in ${retryDelay / 1000} seconds...`);
const timer = setTimeout(fetchData, retryDelay);
return () => clearTimeout(timer); // Wyczy艣膰 timer przy odmontowywaniu lub ponownym renderowaniu
}
if (!data) {
fetchData();
}
}, [error, retryCount, data]);
if (isLoading) {
return 艁adowanie danych...
;
}
if (error) {
return B艂膮d: {error.message} - Ponowiono {retryCount} razy.
;
}
return Dane: {JSON.stringify(data)}
;
}
function App() {
return (
);
}
export default App;
W tym przyk艂adzie DataFetchingComponent pr贸buje pobra膰 dane z API. Je艣li wyst膮pi b艂膮d, zwi臋ksza retryCount i ponawia operacj臋 po wyk艂adniczo rosn膮cym op贸藕nieniu. ErrorBoundary przechwytuje wszelkie nieobs艂u偶one wyj膮tki i wy艣wietla komunikat o b艂臋dzie, w tym liczb臋 pr贸b ponowienia.
5. Error Boundaries i renderowanie po stronie serwera (SSR)
Podczas korzystania z renderowania po stronie serwera (SSR) obs艂uga b艂臋d贸w staje si臋 jeszcze bardziej krytyczna. B艂臋dy wyst臋puj膮ce podczas procesu renderowania po stronie serwera mog膮 spowodowa膰 awari臋 ca艂ego serwera, co prowadzi do przestoj贸w i z艂ego do艣wiadczenia u偶ytkownika. Musisz upewni膰 si臋, 偶e Twoje granice b艂臋d贸w s膮 prawid艂owo skonfigurowane do przechwytywania b艂臋d贸w zar贸wno na serwerze, jak i na kliencie. Cz臋sto frameworki SSR, takie jak Next.js i Remix, maj膮 w艂asne wbudowane mechanizmy obs艂ugi b艂臋d贸w, kt贸re uzupe艂niaj膮 React Error Boundaries.
6. Testowanie Error Boundaries
Testowanie granic b艂臋d贸w jest niezb臋dne, aby upewni膰 si臋, 偶e dzia艂aj膮 one poprawnie i dostarczaj膮 oczekiwany interfejs zast臋pczy. U偶yj bibliotek testuj膮cych, takich jak Jest i React Testing Library, aby symulowa膰 warunki b艂臋du i zweryfikowa膰, czy Twoje granice b艂臋d贸w przechwytuj膮 b艂臋dy i renderuj膮 odpowiedni interfejs zast臋pczy. Rozwa偶 testowanie r贸偶nych typ贸w b艂臋d贸w i przypadk贸w brzegowych, aby upewni膰 si臋, 偶e Twoje granice b艂臋d贸w s膮 solidne i obs艂uguj膮 szeroki zakres scenariuszy.
Przyk艂ad
import { render, screen } from '@testing-library/react';
import ErrorBoundary from './ErrorBoundary';
function ComponentThatThrows() {
throw new Error('Ten komponent zg艂asza b艂膮d');
return To nie powinno zosta膰 wyrenderowane
;
}
test('renderuje interfejs zast臋pczy, gdy zg艂oszony jest b艂膮d', () => {
render(
);
const errorMessage = screen.getByText(/Co艣 posz艂o nie tak/i);
expect(errorMessage).toBeInTheDocument();
});
Ten test renderuje komponent, kt贸ry zg艂asza b艂膮d wewn膮trz ErrorBoundary. Nast臋pnie weryfikuje, czy interfejs zast臋pczy jest renderowany poprawnie, sprawdzaj膮c, czy komunikat o b艂臋dzie jest obecny w dokumencie.
7. Stopniowa degradacja (Graceful Degradation)
Granice b艂臋d贸w s膮 kluczowym elementem implementacji stopniowej degradacji w aplikacjach React. Stopniowa degradacja to praktyka projektowania aplikacji w taki spos贸b, aby kontynuowa艂a dzia艂anie, cho膰 z ograniczon膮 funkcjonalno艣ci膮, nawet gdy jej cz臋艣ci ulegn膮 awarii. Granice b艂臋d贸w pozwalaj膮 izolowa膰 uszkodzone komponenty i zapobiega膰 ich wp艂ywowi na reszt臋 aplikacji. Zapewniaj膮c interfejs zast臋pczy i alternatywn膮 funkcjonalno艣膰, mo偶esz upewni膰 si臋, 偶e u偶ytkownicy nadal maj膮 dost臋p do podstawowych funkcji, nawet gdy wyst膮pi膮 b艂臋dy.
Cz臋ste pu艂apki do unikni臋cia
Chocia偶 ErrorBoundary jest pot臋偶nym narz臋dziem, istnieje kilka cz臋stych pu艂apek, kt贸rych nale偶y unika膰:
- Nieopakowywanie kodu asynchronicznego:
ErrorBoundaryprzechwytuje b艂臋dy tylko podczas renderowania, w metodach cyklu 偶ycia i w konstruktorach. B艂臋dy w kodzie asynchronicznym (np.setTimeout,Promises) musz膮 by膰 przechwytywane za pomoc膮 blok贸wtry...catchi odpowiednio obs艂ugiwane wewn膮trz funkcji asynchronicznej. - Nadu偶ywanie Error Boundaries: Unikaj opakowywania du偶ych cz臋艣ci aplikacji w jeden
ErrorBoundary. Mo偶e to utrudni膰 izolacj臋 藕r贸d艂a b艂臋d贸w i prowadzi膰 do zbyt cz臋stego wy艣wietlania og贸lnego interfejsu zast臋pczego. U偶ywaj granularnych granic b艂臋d贸w do izolowania okre艣lonych komponent贸w lub funkcji. - Ignorowanie informacji o b艂臋dzie: Nie tylko przechwytuj b艂臋dy i wy艣wietlaj interfejs zast臋pczy. Upewnij si臋, 偶e logujesz informacje o b艂臋dzie (w tym stos komponent贸w) do serwisu raportowania b艂臋d贸w lub do konsoli. Pomo偶e Ci to zdiagnozowa膰 i naprawi膰 podstawowe problemy.
- Wy艣wietlanie wra偶liwych informacji w 艣rodowisku produkcyjnym: Unikaj wy艣wietlania szczeg贸艂owych informacji o b艂臋dach (np. 艣lad贸w stosu) w 艣rodowiskach produkcyjnych. Mo偶e to ujawni膰 wra偶liwe informacje u偶ytkownikom i stanowi膰 ryzyko bezpiecze艅stwa. Zamiast tego wy艣wietlaj przyjazny dla u偶ytkownika komunikat o b艂臋dzie i loguj szczeg贸艂owe informacje do serwisu raportowania b艂臋d贸w.
Error Boundaries z komponentami funkcyjnymi i hookami
Chocia偶 Error Boundaries s膮 implementowane jako komponenty klasowe, nadal mo偶na ich skutecznie u偶ywa膰 do obs艂ugi b艂臋d贸w w komponentach funkcyjnych, kt贸re u偶ywaj膮 hook贸w. Typowe podej艣cie polega na opakowaniu komponentu funkcyjnego w komponent ErrorBoundary, jak pokazano wcze艣niej. Logika obs艂ugi b艂臋d贸w znajduje si臋 w ErrorBoundary, skutecznie izoluj膮c b艂臋dy, kt贸re mog膮 wyst膮pi膰 podczas renderowania komponentu funkcyjnego lub wykonywania hook贸w.
W szczeg贸lno艣ci wszelkie b艂臋dy zg艂oszone podczas renderowania komponentu funkcyjnego lub w ciele hooka useEffect zostan膮 przechwycone przez ErrorBoundary. Nale偶y jednak pami臋ta膰, 偶e ErrorBoundaries nie przechwytuj膮 b艂臋d贸w wyst臋puj膮cych w obs艂udze zdarze艅 (np. onClick, onChange) do艂膮czonych do element贸w DOM w komponencie funkcyjnym. W przypadku obs艂ugi zdarze艅 nale偶y nadal u偶ywa膰 tradycyjnych blok贸w try...catch do obs艂ugi b艂臋d贸w.
Internacjonalizacja i lokalizacja komunikat贸w o b艂臋dach
Podczas tworzenia aplikacji dla globalnej publiczno艣ci kluczowe jest umi臋dzynarodowienie i zlokalizowanie komunikat贸w o b艂臋dach. Komunikaty o b艂臋dach wy艣wietlane w interfejsie zast臋pczym ErrorBoundary powinny by膰 przet艂umaczone na preferowany j臋zyk u偶ytkownika, aby zapewni膰 lepsze wra偶enia. Mo偶na u偶y膰 bibliotek takich jak i18next lub React Intl do zarz膮dzania t艂umaczeniami i dynamicznego wy艣wietlania odpowiedniego komunikatu o b艂臋dzie w oparciu o lokalizacj臋 u偶ytkownika.
Przyk艂ad z u偶yciem i18next
import i18next from 'i18next';
import { useTranslation } from 'react-i18next';
i18next.init({
resources: {
en: {
translation: {
'error.generic': 'Something went wrong. Please try again later.',
'error.network': 'Network error. Please check your internet connection.',
},
},
pl: {
translation: {
'error.generic': 'Co艣 posz艂o nie tak. Spr贸buj ponownie p贸藕niej.',
'error.network': 'B艂膮d sieci. Sprawd藕 swoje po艂膮czenie internetowe.',
},
},
},
lng: 'pl',
fallbackLng: 'en',
interpolation: {
escapeValue: false, // nie jest potrzebne dla React, poniewa偶 domy艣lnie escapuje warto艣ci
},
});
function ErrorFallback({ error }) {
const { t } = useTranslation();
let errorMessageKey = 'error.generic';
if (error instanceof NetworkError) {
errorMessageKey = 'error.network';
}
return (
{t('error.generic')}
{t(errorMessageKey)}
);
}
function ErrorBoundary({ children }) {
const [hasError, setHasError] = useState(false);
const [error, setError] = useState(null);
static getDerivedStateFromError = (error) => {
// Zaktualizuj stan, aby nast臋pne renderowanie pokaza艂o interfejs zast臋pczy
// return { hasError: true }; // to nie zadzia艂a z hookami w tej formie
setHasError(true);
setError(error);
}
if (hasError) {
// Mo偶esz wyrenderowa膰 dowolny niestandardowy interfejs zast臋pczy
return ;
}
return children;
}
export default ErrorBoundary;
W tym przyk艂adzie u偶ywamy i18next do zarz膮dzania t艂umaczeniami na angielski i polski. Komponent ErrorFallback u偶ywa hooka useTranslation do pobrania odpowiedniego komunikatu o b艂臋dzie w oparciu o bie偶膮cy j臋zyk. Zapewnia to, 偶e u偶ytkownicy widz膮 komunikaty o b艂臋dach w preferowanym przez nich j臋zyku, co poprawia og贸lne wra偶enia u偶ytkownika.
Podsumowanie
Komponenty React ErrorBoundary s膮 kluczowym narz臋dziem do budowania solidnych i przyjaznych dla u偶ytkownika aplikacji React. Implementuj膮c granice b艂臋d贸w, mo偶na elegancko obs艂ugiwa膰 b艂臋dy, zapobiega膰 awariom aplikacji i zapewnia膰 lepsze wra偶enia u偶ytkownikom na ca艂ym 艣wiecie. Rozumiej膮c zasady dzia艂ania granic b艂臋d贸w, wdra偶aj膮c zaawansowane strategie, takie jak granularne granice b艂臋d贸w, logowanie b艂臋d贸w i niestandardowe interfejsy zast臋pcze, oraz unikaj膮c cz臋stych pu艂apek, mo偶na budowa膰 bardziej odporne i niezawodne aplikacje React, kt贸re spe艂niaj膮 potrzeby globalnej publiczno艣ci. Pami臋taj, aby uwzgl臋dni膰 internacjonalizacj臋 i lokalizacj臋 podczas wy艣wietlania komunikat贸w o b艂臋dach, aby zapewni膰 prawdziwie inkluzywne do艣wiadczenie u偶ytkownika. W miar臋 jak z艂o偶ono艣膰 aplikacji internetowych wci膮偶 ro艣nie, opanowanie technik obs艂ugi b艂臋d贸w b臋dzie stawa艂o si臋 coraz wa偶niejsze dla deweloper贸w tworz膮cych oprogramowanie wysokiej jako艣ci.