JavaScript Error Boundary: Vodič za implementaciju rukovanja pogreškama u Reactu

U svijetu React razvoja, neočekivane pogreške mogu dovesti do frustrirajućeg korisničkog iskustva i nestabilnosti aplikacije. Dobro definirana strategija rukovanja pogreškama ključna je za izgradnju robusnih i pouzdanih aplikacija. Reactovi Error Boundaries pružaju moćan mehanizam za elegantno rukovanje pogreškama koje se događaju unutar stabla komponenti, sprječavajući rušenje cijele aplikacije i omogućujući prikaz zamjenskog korisničkog sučelja (fallback UI).

Što je Error Boundary?

Error Boundary je React komponenta koja hvata JavaScript pogreške bilo gdje u svom podređenom stablu komponenti, bilježi te pogreške i prikazuje zamjensko korisničko sučelje umjesto stabla komponenti koje se srušilo. Error Boundaries hvataju pogreške tijekom renderiranja, u metodama životnog ciklusa i u konstruktorima cijelog stabla ispod njih.

Zamislite Error Boundary kao try...catch blok za React komponente. Baš kao što try...catch blok omogućuje rukovanje iznimkama u sinkronom JavaScript kodu, Error Boundary omogućuje rukovanje pogreškama koje se događaju tijekom renderiranja vaših React komponenti.

Važna napomena: Error Boundaries ne hvataju pogreške za:

• Rukovatelje događajima (saznajte više u sljedećim odjeljcima)
• Asinkroni kod (npr. setTimeout ili requestAnimationFrame povratni pozivi)
• Renderiranje na strani poslužitelja
• Pogreške izbačene u samom Error Boundaryju (umjesto u njegovoj podređenoj komponenti)

Zašto koristiti Error Boundaries?

Korištenje Error Boundaries nudi nekoliko značajnih prednosti:

• Poboljšano korisničko iskustvo: Umjesto prikazivanja praznog bijelog zaslona ili kriptične poruke o pogrešci, možete prikazati korisnički prihvatljivo zamjensko sučelje koje informira korisnika da je nešto pošlo po zlu i potencijalno nudi način oporavka (npr. ponovno učitavanje stranice ili navigacija na drugi odjeljak).
• Stabilnost aplikacije: Error Boundaries sprječavaju da pogreške u jednom dijelu vaše aplikacije sruše cijelu aplikaciju. To je posebno važno za složene aplikacije s mnogo međusobno povezanih komponenti.
• Centralizirano rukovanje pogreškama: Error Boundaries pružaju centralizirano mjesto za bilježenje pogrešaka i praćenje temeljnog uzroka problema. To pojednostavljuje otklanjanje pogrešaka i održavanje.
• Graciozna degradacija: Možete strateški postaviti Error Boundaries oko različitih dijelova vaše aplikacije kako biste osigurali da, čak i ako neke komponente zakažu, ostatak aplikacije ostane funkcionalan. To omogućuje gracioznu degradaciju u slučaju pogrešaka.

Implementacija Error Boundaries u Reactu

Da biste stvorili Error Boundary, morate definirati klasnu komponentu koja implementira jednu (ili obje) od sljedećih metoda životnog ciklusa:

• static getDerivedStateFromError(error): Ova metoda životnog ciklusa poziva se nakon što podređena komponenta izbaci pogrešku. Prima izbačenu pogrešku kao argument i trebala bi vratiti vrijednost za ažuriranje stanja komponente kako bi se naznačilo da je došlo do pogreške (npr. postavljanje zastavice hasError na true).
• componentDidCatch(error, info): Ova metoda životnog ciklusa poziva se nakon što podređena komponenta izbaci pogrešku. Prima izbačenu pogrešku kao argument, zajedno s info objektom koji sadrži informacije o tome koja je komponenta izbacila pogrešku. Ovu metodu možete koristiti za bilježenje pogreške u servis poput Sentryja ili Bugsnaga.

Ovdje je osnovni primjer Error Boundary komponente:

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null, errorInfo: null }; } static getDerivedStateFromError(error) { // Ažuriraj stanje tako da sljedeće renderiranje prikaže zamjensko sučelje. return { hasError: true, error: error }; } componentDidCatch(error, info) { // Primjer "componentStack": // in ComponentThatThrows (created by App) // in MyErrorBoundary (created by App) // in div (created by App) // in App console.error("Caught an error:", error, info); this.setState({ errorInfo: info.componentStack }); // Također možete zabilježiti pogrešku u servis za izvještavanje o pogreškama //logErrorToMyService(error, info.componentStack); } render() { if (this.state.hasError) { // Možete renderirati bilo koje prilagođeno zamjensko sučelje return ( <div> <h2>Nešto je pošlo po zlu.</h2> <p>Pogreška: {this.state.error ? this.state.error.message : "Dogodila se nepoznata pogreška."}</p> <details style={{ whiteSpace: 'pre-wrap' }}> {this.state.errorInfo && this.state.errorInfo} </details> </div> ); } return this.props.children; } }

Da biste koristili Error Boundary, jednostavno omotajte stablo komponenti koje želite zaštititi:

<ErrorBoundary> <MyComponentThatMightThrow/> </ErrorBoundary>

Praktični primjeri upotrebe Error Boundaryja

Istražimo neke praktične scenarije u kojima Error Boundaries mogu biti posebno korisni:

1. Rukovanje API pogreškama

Prilikom dohvaćanja podataka s API-ja, pogreške se mogu dogoditi zbog mrežnih problema, problema s poslužiteljem ili nevažećih podataka. Možete omotati komponentu koja dohvaća i prikazuje podatke s Error Boundaryjem kako biste elegantno rukovali tim pogreškama.

function UserProfile() { const [user, setUser] = React.useState(null); const [isLoading, setIsLoading] = React.useState(true); React.useEffect(() => { async function fetchData() { try { const response = await fetch('/api/user'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); setUser(data); } catch (error) { // Pogrešku će uhvatiti ErrorBoundary throw error; } finally { setIsLoading(false); } } fetchData(); }, []); if (isLoading) { return <p>Učitavanje korisničkog profila...</p>; } if (!user) { return <p>Nema dostupnih korisničkih podataka.</p>; } return ( <div> <h2>{user.name}</h2> <p>Email: {user.email}</p> </div> ); } function App() { return ( <ErrorBoundary> <UserProfile /> </ErrorBoundary> ); }

U ovom primjeru, ako API poziv ne uspije ili vrati pogrešku, Error Boundary će uhvatiti pogrešku i prikazati zamjensko sučelje (definirano unutar render metode Error Boundaryja). To sprječava rušenje cijele aplikacije i pruža korisniku informativniju poruku. Mogli biste proširiti zamjensko sučelje kako biste pružili opciju za ponovni pokušaj zahtjeva.

2. Rukovanje pogreškama iz biblioteka trećih strana

Kada koristite biblioteke trećih strana, moguće je da će izbaciti neočekivane pogreške. Omotavanje komponenti koje koriste te biblioteke s Error Boundaries može vam pomoći da elegantno rukujete tim pogreškama.

Uzmimo u obzir hipotetsku biblioteku za iscrtavanje grafikona koja povremeno izbacuje pogreške zbog nedosljednosti podataka ili drugih problema. Mogli biste omotati komponentu za iscrtavanje grafikona na sljedeći način:

function MyChartComponent() { try { // Renderiraj grafikon koristeći biblioteku treće strane return <Chart data={data} />; } catch (error) { // Ovaj catch blok neće biti učinkovit za pogreške životnog ciklusa React komponente // Prvenstveno je za sinkrone pogreške unutar ove specifične funkcije. console.error("Error rendering chart:", error); // Razmislite o izbacivanju pogreške kako bi je uhvatio ErrorBoundary throw error; // Ponovno izbacivanje pogreške } } function App() { return ( <ErrorBoundary> <MyChartComponent /> </ErrorBoundary> ); }

Ako komponenta Chart izbaci pogrešku, Error Boundary će je uhvatiti i prikazati zamjensko sučelje. Imajte na umu da će try/catch unutar MyChartComponent uhvatiti samo pogreške unutar sinkrone funkcije, a ne u životnom ciklusu komponente. Stoga je ErrorBoundary ovdje ključan.

3. Rukovanje pogreškama pri renderiranju

Pogreške se mogu dogoditi tijekom procesa renderiranja zbog nevažećih podataka, netočnih tipova svojstava (props) ili drugih problema. Error Boundaries mogu uhvatiti te pogreške i spriječiti rušenje aplikacije.

function DisplayName({ name }) { if (typeof name !== 'string') { throw new Error('Ime mora biti string'); } return <h2>Pozdrav, {name}!</h2>; } function App() { return ( <ErrorBoundary> <DisplayName name={123} /> <!-- Neispravan tip svojstva --> </ErrorBoundary> ); }

U ovom primjeru, komponenta DisplayName očekuje da svojstvo name bude string. Ako se umjesto toga proslijedi broj, izbacit će se pogreška, a Error Boundary će je uhvatiti i prikazati zamjensko sučelje.

Error Boundaries i rukovatelji događajima (Event Handlers)

Kao što je ranije spomenuto, Error Boundaries ne hvataju pogreške koje se događaju unutar rukovatelja događajima. To je zato što su rukovatelji događajima obično asinkroni, a Error Boundaries hvataju samo pogreške koje se događaju tijekom renderiranja, u metodama životnog ciklusa i u konstruktorima.

Za rukovanje pogreškama u rukovateljima događajima, morate koristiti tradicionalni try...catch blok unutar funkcije rukovatelja događajima.

function MyComponent() { const handleClick = () => { try { // Neki kod koji bi mogao izbaciti pogrešku throw new Error('Dogodila se pogreška u rukovatelju događajima'); } catch (error) { console.error('Uhvaćena pogreška u rukovatelju događajima:', error); // Rukovati pogreškom (npr. prikazati poruku o pogrešci korisniku) } }; return <button onClick={handleClick}>Klikni me</button>; }

Globalno rukovanje pogreškama

Iako su Error Boundaries izvrsni za rukovanje pogreškama unutar stabla React komponenti, ne pokrivaju sve moguće scenarije pogrešaka. Na primjer, ne hvataju pogreške koje se događaju izvan React komponenti, kao što su pogreške u globalnim slušateljima događaja ili pogreške u kodu koji se izvršava prije inicijalizacije Reacta.

Za rukovanje ovim vrstama pogrešaka, možete koristiti rukovatelj događajima window.onerror.

window.onerror = function(message, source, lineno, colno, error) { console.error('Globalni rukovatelj pogreškama:', message, source, lineno, colno, error); // Zabilježite pogrešku u servis poput Sentryja ili Bugsnaga // Prikažite globalnu poruku o pogrešci korisniku (opcionalno) return true; // Spriječite zadano ponašanje rukovanja pogreškama };

Važno: Vraćanje true iz rukovatelja događajima window.onerror sprječava preglednik da prikaže zadanu poruku o pogrešci. Međutim, pazite na korisničko iskustvo; ako potisnete zadanu poruku, osigurajte da pružite jasnu i informativnu alternativu.

Najbolje prakse za korištenje Error Boundaries

Ovdje su neke od najboljih praksi koje treba imati na umu prilikom korištenja Error Boundaries:

• Strateški postavite Error Boundaries: Omotajte različite dijelove svoje aplikacije s Error Boundaries kako biste izolirali pogreške i spriječili njihovo širenje. Razmislite o omotavanju cijelih ruta ili glavnih dijelova korisničkog sučelja.
• Pružite informativno zamjensko sučelje: Zamjensko sučelje treba informirati korisnika da je došlo do pogreške i potencijalno ponuditi način oporavka. Izbjegavajte prikazivanje generičkih poruka o pogreškama poput "Nešto je pošlo po zlu."
• Bilježite pogreške: Koristite metodu životnog ciklusa componentDidCatch za bilježenje pogrešaka u servis poput Sentryja ili Bugsnaga. To će vam pomoći da pronađete temeljni uzrok problema i poboljšate stabilnost vaše aplikacije.
• Ne koristite Error Boundaries za očekivane pogreške: Error Boundaries su dizajnirani za rukovanje neočekivanim pogreškama. Za očekivane pogreške (npr. pogreške validacije, API pogreške), koristite specifičnije mehanizme za rukovanje pogreškama, kao što su try...catch blokovi ili prilagođene komponente za rukovanje pogreškama.
• Razmotrite više razina Error Boundaries: Možete ugnijezditi Error Boundaries kako biste osigurali različite razine rukovanja pogreškama. Na primjer, možete imati globalni Error Boundary koji hvata sve neobrađene pogreške i prikazuje generičku poruku o pogrešci, te specifičnije Error Boundaries koji hvataju pogreške u određenim komponentama i prikazuju detaljnije poruke o pogreškama.
• Ne zaboravite na renderiranje na strani poslužitelja: Ako koristite renderiranje na strani poslužitelja, morat ćete rukovati pogreškama i na poslužitelju. Error Boundaries rade na poslužitelju, ali možda ćete morati koristiti dodatne mehanizme za rukovanje pogreškama kako biste uhvatili pogreške koje se događaju tijekom početnog renderiranja.

Napredne tehnike Error Boundaryja

1. Korištenje Render Prop-a

Umjesto renderiranja statičkog zamjenskog sučelja, možete koristiti render prop kako biste pružili veću fleksibilnost u načinu rukovanja pogreškama. Render prop je funkcijsko svojstvo (prop) koje komponenta koristi za renderiranje nečega.

class ErrorBoundary extends React.Component { // ... (isto kao i prije) render() { if (this.state.hasError) { // Koristi render prop za renderiranje zamjenskog sučelja return this.props.fallbackRender(this.state.error, this.state.errorInfo); } return this.props.children; } } function App() { return ( <ErrorBoundary fallbackRender={(error, errorInfo) => ( <div> <h2>Nešto je pošlo po zlu!</h2> <p>Pogreška: {error.message}</p> <details style={{ whiteSpace: 'pre-wrap' }}> {errorInfo.componentStack} </details> </div> )}> <MyComponentThatMightThrow/> </ErrorBoundary> ); }

To vam omogućuje prilagodbu zamjenskog sučelja za svaki pojedini Error Boundary. Svojstvo fallbackRender prima pogrešku i informacije o pogrešci kao argumente, omogućujući vam prikaz specifičnijih poruka o pogreškama ili poduzimanje drugih radnji na temelju pogreške.

2. Error Boundary kao komponenta višeg reda (HOC)

Možete stvoriti komponentu višeg reda (HOC) koja omotava drugu komponentu s Error Boundaryjem. To može biti korisno za primjenu Error Boundaries na više komponenti bez ponavljanja istog koda.

function withErrorBoundary(WrappedComponent) { return class WithErrorBoundary extends React.Component { render() { return ( <ErrorBoundary> <WrappedComponent {...this.props} /> </ErrorBoundary> ); } }; } // Upotreba: const MyComponentWithErrorHandling = withErrorBoundary(MyComponentThatMightThrow);

Funkcija withErrorBoundary uzima komponentu kao argument i vraća novu komponentu koja omotava originalnu komponentu s Error Boundaryjem. To vam omogućuje jednostavno dodavanje rukovanja pogreškama bilo kojoj komponenti u vašoj aplikaciji.

Testiranje Error Boundaries

Važno je testirati vaše Error Boundaries kako biste osigurali da rade ispravno. Možete koristiti biblioteke za testiranje poput Jest-a i React Testing Library za testiranje vaših Error Boundaries.

Ovdje je primjer kako testirati Error Boundary koristeći React Testing Library:

import { render, screen, fireEvent } from '@testing-library/react'; import ErrorBoundary from './ErrorBoundary'; function ComponentThatThrows() { throw new Error('Ova komponenta izbacuje pogrešku'); } test('renderira zamjensko sučelje kada se izbaci pogreška', () => { render( <ErrorBoundary> <ComponentThatThrows /> </ErrorBoundary> ); expect(screen.getByText('Nešto je pošlo po zlu.')).toBeInTheDocument(); });

Ovaj test renderira komponentu ComponentThatThrows, koja izbacuje pogrešku. Test zatim potvrđuje da je prikazano zamjensko sučelje koje renderira Error Boundary.

Error Boundaries i poslužiteljske komponente (React 18+)

S uvođenjem poslužiteljskih komponenti (Server Components) u Reactu 18 i novijim verzijama, Error Boundaries i dalje igraju ključnu ulogu u rukovanju pogreškama. Poslužiteljske komponente izvršavaju se na poslužitelju i klijentu šalju samo renderirani izlaz. Iako osnovni principi ostaju isti, postoji nekoliko nijansi koje treba uzeti u obzir:

• Bilježenje pogrešaka na strani poslužitelja: Osigurajte da bilježite pogreške koje se događaju unutar poslužiteljskih komponenti na poslužitelju. To može uključivati korištenje okvira za bilježenje na strani poslužitelja ili slanje pogrešaka u servis za praćenje pogrešaka.
• Zamjensko sučelje na strani klijenta: Iako se poslužiteljske komponente renderiraju na poslužitelju, i dalje morate pružiti zamjensko sučelje na strani klijenta u slučaju pogrešaka. To osigurava da korisnik ima dosljedno iskustvo, čak i ako poslužitelj ne uspije renderirati komponentu.
• Streaming SSR: Kada koristite streaming renderiranje na strani poslužitelja (SSR), pogreške se mogu dogoditi tijekom procesa streaminga. Error Boundaries mogu vam pomoći da elegantno rukujete tim pogreškama renderiranjem zamjenskog sučelja za zahvaćeni stream.

Rukovanje pogreškama u poslužiteljskim komponentama je područje koje se razvija, stoga je važno biti u toku s najnovijim najboljim praksama i preporukama.

Česte zamke koje treba izbjegavati

• Pretjerano oslanjanje na Error Boundaries: Nemojte koristiti Error Boundaries kao zamjenu za pravilno rukovanje pogreškama u vašim komponentama. Uvijek težite pisanju robusnog i pouzdanog koda koji elegantno rukuje pogreškama.
• Ignoriranje pogrešaka: Pobrinite se da bilježite pogreške koje uhvate Error Boundaries kako biste mogli pronaći temeljni uzrok problema. Nemojte samo prikazati zamjensko sučelje i ignorirati pogrešku.
• Korištenje Error Boundaries za pogreške validacije: Error Boundaries nisu pravi alat za rukovanje pogreškama validacije. Umjesto toga koristite specifičnije tehnike validacije.
• Netestiranje Error Boundaries: Testirajte svoje Error Boundaries kako biste bili sigurni da rade ispravno.

Zaključak

Error Boundaries su moćan alat za izgradnju robusnih i pouzdanih React aplikacija. Razumijevanjem kako implementirati i učinkovito koristiti Error Boundaries, možete poboljšati korisničko iskustvo, spriječiti rušenje aplikacije i pojednostaviti otklanjanje pogrešaka. Ne zaboravite strateški postavljati Error Boundaries, pružati informativno zamjensko sučelje, bilježiti pogreške i temeljito testirati vaše Error Boundaries.

Slijedeći smjernice i najbolje prakse navedene u ovom vodiču, možete osigurati da su vaše React aplikacije otporne na pogreške i pružaju pozitivno iskustvo vašim korisnicima.