JavaScript'i Error Boundary: Reacti veakäsitluse rakendamise juhend

Reacti arendusmaailmas võivad ootamatud vead põhjustada kasutajatele pettumust ja rakenduse ebastabiilsust. Hästi defineeritud veakäsitluse strateegia on robustsete ja usaldusväärsete rakenduste loomisel ülioluline. Reacti Error Boundary'd pakuvad võimsat mehhanismi, et sujuvalt käsitleda vigu, mis tekivad teie komponendipuu sees, vältides kogu rakenduse kokkujooksmist ja võimaldades teil kuvada varukasutajaliidest.

Mis on Error Boundary?

Error Boundary on Reacti komponent, mis püüab kinni JavaScripti vead oma alamkomponentide puus, logib need vead ja kuvab kokku jooksnud komponendipuu asemel varukasutajaliidese. Error Boundary'd püüavad kinni vigu renderdamisel, elutsükli meetodites ja kogu nende all oleva puu konstruktorites.

Mõelge Error Boundary'st kui try...catch plokist Reacti komponentide jaoks. Nii nagu try...catch plokk võimaldab teil käsitleda erandeid sünkroonses JavaScripti koodis, võimaldab Error Boundary teil käsitleda vigu, mis tekivad teie Reacti komponentide renderdamisel.

Oluline märkus: Error Boundary'd ei püüa kinni vigu järgmistes kohtades:

• Sündmuste käsitlejad (rohkem infot järgmistes peatükkides)
• Asünkroonne kood (nt setTimeout või requestAnimationFrame tagasikutsed)
• Serveripoolne renderdamine
• Vead, mis visatakse Error Boundary's endas (mitte selle alamkomponentides)

Miks kasutada Error Boundary'sid?

Error Boundary'de kasutamine pakub mitmeid olulisi eeliseid:

• Parem kasutajakogemus: Tühja valge ekraani või krüptilise veateate kuvamise asemel saate näidata kasutajasõbralikku varukasutajaliidest, teavitades kasutajat, et midagi läks valesti ja pakkudes potentsiaalselt taastumisvõimalust (nt lehe uuesti laadimine või teise jaotisesse navigeerimine).
• Rakenduse stabiilsus: Error Boundary'd hoiavad ära selle, et viga ühes rakenduse osas tooks kaasa kogu rakenduse kokkujooksmise. See on eriti oluline keerukate rakenduste puhul, millel on palju omavahel seotud komponente.
• Tsentraliseeritud veakäsitlus: Error Boundary'd pakuvad tsentraliseeritud kohta vigade logimiseks ja probleemide algpõhjuste leidmiseks. See lihtsustab silumist ja hooldust.
• Sujuv taandareng: Saate paigutada Error Boundary'd strateegiliselt oma rakenduse erinevatesse osadesse, et tagada, et isegi kui mõned komponendid ebaõnnestuvad, jääb ülejäänud rakendus funktsionaalseks. See võimaldab vigade korral sujuvat taandarengut.

Error Boundary'de rakendamine Reactis

Error Boundary loomiseks peate defineerima klassikomponendi, mis implementeerib ühe (või mõlemad) järgmistest elutsükli meetoditest:

• static getDerivedStateFromError(error): See elutsükli meetod kutsutakse välja pärast seda, kui alamkomponent on vea visanud. See saab argumendiks visatud vea ja peaks tagastama väärtuse komponendi oleku uuendamiseks, et näidata vea ilmnemist (nt seades hasError lipu väärtuseks true).
• componentDidCatch(error, info): See elutsükli meetod kutsutakse välja pärast seda, kui alamkomponent on vea visanud. See saab argumendiks visatud vea koos info objektiga, mis sisaldab teavet selle kohta, milline komponent vea viskas. Saate seda meetodit kasutada vea logimiseks teenusesse nagu Sentry või Bugsnag.

Siin on Error Boundary komponendi põhinäide:

class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null, errorInfo: null }; } static getDerivedStateFromError(error) { // Uuenda olekut, et järgmine renderdamine näitaks varukasutajaliidest. return { hasError: true, error: error }; } componentDidCatch(error, info) { // Näide "componentStack" kohta: // 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 }); // Saate vea logida ka veateenusesse //logErrorToMyService(error, info.componentStack); } render() { if (this.state.hasError) { // Saate renderdada mis tahes kohandatud varukasutajaliidest return ( <div> <h2>Midagi läks valesti.</h2> <p>Viga: {this.state.error ? this.state.error.message : "Ilmnes tundmatu viga."}</p> <details style={{ whiteSpace: 'pre-wrap' }}> {this.state.errorInfo && this.state.errorInfo} </details> </div> ); } return this.props.children; } }

Error Boundary kasutamiseks mähkige lihtsalt komponendipuu, mida soovite kaitsta:

<ErrorBoundary> <MyComponentThatMightThrow/> </ErrorBoundary>

Error Boundary kasutamise praktilised näited

Uurime mõningaid praktilisi stsenaariume, kus Error Boundary'd võivad olla eriti kasulikud:

1. API vigade käsitlemine

API-st andmete pärimisel võivad vead tekkida võrguprobleemide, serveriprobleemide või vigaste andmete tõttu. Saate andmeid pärinud ja kuvava komponendi mähkida Error Boundary'ga, et neid vigu sujuvalt käsitleda.

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) { // Viga püütakse kinni ErrorBoundary poolt throw error; } finally { setIsLoading(false); } } fetchData(); }, []); if (isLoading) { return <p>Laen kasutajaprofiili...</p>; } if (!user) { return <p>Kasutaja andmed pole saadaval.</p>; } return ( <div> <h2>{user.name}</h2> <p>E-post: {user.email}</p> </div> ); } function App() { return ( <ErrorBoundary> <UserProfile /> </ErrorBoundary> ); }

Selles näites, kui API-kõne ebaõnnestub või tagastab vea, püüab Error Boundary vea kinni ja kuvab varukasutajaliidese (mis on defineeritud Error Boundary render meetodis). See hoiab ära kogu rakenduse kokkujooksmise ja pakub kasutajale informatiivsemat teadet. Saate varukasutajaliidest laiendada, et pakkuda päringu uuesti proovimise võimalust.

2. Kolmandate osapoolte teekide vigade käsitlemine

Kolmandate osapoolte teeke kasutades on võimalik, et need viskavad ootamatuid vigu. Neid teeke kasutavate komponentide mähkimine Error Boundary'dega aitab teil neid vigu sujuvalt käsitleda.

Kujutage ette hüpoteetilist diagrammiteeki, mis aeg-ajalt viskab vigu andmete ebajärjekindluse või muude probleemide tõttu. Võite diagrammikomponendi mähkida järgmiselt:

function MyChartComponent() { try { // Renderda diagramm kasutades kolmanda osapoole teeki return <Chart data={data} />; } catch (error) { // See catch-plokk ei ole efektiivne Reacti komponendi elutsükli vigade puhul // See on peamiselt mõeldud sünkroonsete vigade jaoks selles konkreetses funktsioonis. console.error("Error rendering chart:", error); // Kaaluge vea viskamist, et ErrorBoundary saaks selle kinni püüda throw error; // Vea uuesti viskamine } } function App() { return ( <ErrorBoundary> <MyChartComponent /> </ErrorBoundary> ); }

Kui Chart komponent viskab vea, püüab Error Boundary selle kinni ja kuvab varukasutajaliidese. Pange tähele, et try/catch MyChartComponent'i sees püüab kinni ainult sünkroonse funktsiooni sees olevaid vigu, mitte komponendi elutsükli vigu. Seetõttu on ErrorBoundary siin ülioluline.

3. Renderdamisvigade käsitlemine

Vead võivad tekkida renderdamisprotsessi käigus vigaste andmete, valede prop-tüüpide või muude probleemide tõttu. Error Boundary'd suudavad need vead kinni püüda ja vältida rakenduse kokkujooksmist.

function DisplayName({ name }) { if (typeof name !== 'string') { throw new Error('Name must be a string'); } return <h2>Tere, {name}!</h2>; } function App() { return ( <ErrorBoundary> <DisplayName name={123} /> <!-- Vale prop-tüüp --> </ErrorBoundary> ); }

Selles näites eeldab DisplayName komponent, et name prop on string. Kui selle asemel antakse number, visatakse viga ning Error Boundary püüab selle kinni ja kuvab varukasutajaliidese.

Error Boundary'd ja sündmuste käsitlejad

Nagu varem mainitud, ei püüa Error Boundary'd kinni vigu, mis tekivad sündmuste käsitlejates. Seda seetõttu, et sündmuste käsitlejad on tavaliselt asünkroonsed ja Error Boundary'd püüavad kinni ainult vigu, mis tekivad renderdamisel, elutsükli meetodites ja konstruktorites.

Vigade käsitlemiseks sündmuste käsitlejates peate kasutama traditsioonilist try...catch plokki sündmuste käsitleja funktsioonis.

function MyComponent() { const handleClick = () => { try { // Kood, mis võib vea visata throw new Error('An error occurred in the event handler'); } catch (error) { console.error('Caught an error in the event handler:', error); // Käsitle viga (nt kuva kasutajale veateade) } }; return <button onClick={handleClick}>Vajuta siia</button>; }

Globaalne veakäsitlus

Kuigi Error Boundary'd on suurepärased vigade käsitlemiseks Reacti komponendipuu sees, ei kata need kõiki võimalikke veastsenaariume. Näiteks ei püüa nad kinni vigu, mis tekivad väljaspool Reacti komponente, nagu vead globaalsetes sündmuste kuulajates või koodis, mis käivitub enne Reacti initsialiseerimist.

Seda tüüpi vigade käsitlemiseks saate kasutada window.onerror sündmuste käsitlejat.

window.onerror = function(message, source, lineno, colno, error) { console.error('Global error handler:', message, source, lineno, colno, error); // Logi viga teenusesse nagu Sentry või Bugsnag // Kuva kasutajale globaalne veateade (valikuline) return true; // Väldi vaikimisi veakäsitluse käitumist };

window.onerror sündmuste käsitleja kutsutakse välja alati, kui tekib püüdmatu JavaScripti viga. Saate seda kasutada vea logimiseks, kasutajale globaalse veateate kuvamiseks või muude toimingute tegemiseks vea käsitlemiseks.

Oluline: true tagastamine window.onerror sündmuste käsitlejast takistab brauseril vaikimisi veateate kuvamist. Olge siiski tähelepanelik kasutajakogemuse suhtes; kui te surute vaikimisi teate alla, veenduge, et pakute selget ja informatiivset alternatiivi.

Error Boundary'de kasutamise parimad tavad

Siin on mõned parimad tavad, mida Error Boundary'de kasutamisel silmas pidada:

• Paigutage Error Boundary'd strateegiliselt: Mähkige oma rakenduse erinevad osad Error Boundary'dega, et eraldada vead ja vältida nende kaskaadi. Kaaluge tervete marsruutide või kasutajaliidese suuremate osade mähkimist.
• Pakkuge informatiivset varukasutajaliidest: Varukasutajaliides peaks teavitama kasutajat vea ilmnemisest ja võimalusel pakkuma taastumisvõimalust. Vältige üldiste veateadete nagu "Midagi läks valesti" kuvamist.
• Logige vead: Kasutage componentDidCatch elutsükli meetodit vigade logimiseks teenusesse nagu Sentry või Bugsnag. See aitab teil leida probleemide algpõhjuseid ja parandada oma rakenduse stabiilsust.
• Ärge kasutage Error Boundary'sid oodatud vigade jaoks: Error Boundary'd on mõeldud ootamatute vigade käsitlemiseks. Oodatud vigade (nt valideerimisvead, API vead) jaoks kasutage spetsiifilisemaid veakäsitlusmehhanisme, nagu try...catch plokid või kohandatud veakäsitluskomponendid.
• Kaaluge mitmetasandilisi Error Boundary'sid: Saate pesastada Error Boundary'sid, et pakkuda erinevaid veakäsitluse tasemeid. Näiteks võib teil olla globaalne Error Boundary, mis püüab kinni kõik käsitlemata vead ja kuvab üldise veateate, ning spetsiifilisemad Error Boundary'd, mis püüavad kinni vigu konkreetsetes komponentides ja kuvavad detailsemaid veateateid.
• Ärge unustage serveripoolset renderdamist: Kui kasutate serveripoolset renderdamist, peate ka serveris vigu käsitlema. Error Boundary'd töötavad serveris, kuid teil võib vaja minna täiendavaid veakäsitlusmehhanisme, et püüda kinni vigu, mis tekivad esmase renderdamise ajal.

Täiustatud Error Boundary tehnikad

1. Render Prop'i kasutamine

Staatilise varukasutajaliidese renderdamise asemel saate kasutada render prop'i, et pakkuda rohkem paindlikkust vigade käsitlemisel. Render prop on funktsiooni prop, mida komponent kasutab millegi renderdamiseks.

class ErrorBoundary extends React.Component { // ... (sama mis varem) render() { if (this.state.hasError) { // Kasuta render prop'i varukasutajaliidese renderdamiseks return this.props.fallbackRender(this.state.error, this.state.errorInfo); } return this.props.children; } } function App() { return ( <ErrorBoundary fallbackRender={(error, errorInfo) => ( <div> <h2>Midagi läks valesti!</h2> <p>Viga: {error.message}</p> <details style={{ whiteSpace: 'pre-wrap' }}> {errorInfo.componentStack} </details> </div> )}> <MyComponentThatMightThrow/> </ErrorBoundary> ); }

See võimaldab teil kohandada varukasutajaliidest iga Error Boundary kohta eraldi. fallbackRender prop saab argumendiks vea ja vea info, mis võimaldab teil kuvada spetsiifilisemaid veateateid või võtta vea põhjal ette muid tegevusi.

2. Error Boundary kui kõrgema järgu komponent (HOC)

Saate luua kõrgema järgu komponendi (HOC), mis mähistab teise komponendi Error Boundary'ga. See võib olla kasulik Error Boundary'de rakendamiseks mitmele komponendile, ilma et peaksite sama koodi kordama.

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

withErrorBoundary funktsioon võtab argumendiks komponendi ja tagastab uue komponendi, mis mähistab algse komponendi Error Boundary'ga. See võimaldab teil hõlpsalt lisada veakäsitluse mis tahes komponendile oma rakenduses.

Error Boundary'de testimine

On oluline testida oma Error Boundary'sid, et veenduda nende korrektses toimimises. Saate kasutada testimisteeke nagu Jest ja React Testing Library oma Error Boundary'de testimiseks.

Siin on näide, kuidas testida Error Boundary'd kasutades React Testing Library't:

import { render, screen, fireEvent } from '@testing-library/react'; import ErrorBoundary from './ErrorBoundary'; function ComponentThatThrows() { throw new Error('This component throws an error'); } test('renders fallback UI when an error is thrown', () => { render( <ErrorBoundary> <ComponentThatThrows /> </ErrorBoundary> ); expect(screen.getByText('Something went wrong.')).toBeInTheDocument(); });

See test renderdab ComponentThatThrows komponendi, mis viskab vea. Seejärel kontrollib test, et kuvatakse Error Boundary poolt renderdatud varukasutajaliides.

Error Boundary'd ja serverikomponendid (React 18+)

Serverikomponentide tulekuga React 18-s ja hilisemates versioonides mängivad Error Boundary'd endiselt olulist rolli veakäsitluses. Serverikomponendid käivitatakse serveris ja saadavad kliendile ainult renderdatud väljundi. Kuigi põhiprintsiibid jäävad samaks, on mõned nüansid, mida arvestada:

• Serveripoolne vigade logimine: Veenduge, et logite serveris serverikomponentides tekkivaid vigu. See võib hõlmata serveripoolse logimisraamistiku kasutamist või vigade saatmist veajälgimisteenusesse.
• Kliendipoolne varuvariant: Kuigi serverikomponendid renderdatakse serveris, peate vigade korral siiski pakkuma kliendipoolset varukasutajaliidest. See tagab kasutajale järjepideva kogemuse, isegi kui server ei suuda komponenti renderdada.
• Voogedastusega SSR: Voogedastusega serveripoolse renderdamise (SSR) kasutamisel võivad vead tekkida voogedastuse protsessis. Error Boundary'd aitavad neid vigu sujuvalt käsitleda, renderdades mõjutatud voo jaoks varukasutajaliidese.

Serverikomponentide veakäsitlus on arenev valdkond, seega on oluline olla kursis viimaste parimate tavade ja soovitustega.

Levinumad lõksud, mida vältida

• Liigne tuginemine Error Boundary'dele: Ärge kasutage Error Boundary'sid oma komponentides korraliku veakäsitluse asendajana. Püüdke alati kirjutada robustset ja usaldusväärset koodi, mis käsitleb vigu sujuvalt.
• Vigade ignoreerimine: Veenduge, et logite Error Boundary'de poolt kinni püütud vead, et saaksite leida probleemide algpõhjuse. Ärge lihtsalt kuvage varukasutajaliidest ja ignoreerige viga.
• Error Boundary'de kasutamine valideerimisvigade jaoks: Error Boundary'd ei ole õige tööriist valideerimisvigade käsitlemiseks. Kasutage selle asemel spetsiifilisemaid valideerimistehnikaid.
• Error Boundary'de testimata jätmine: Testige oma Error Boundary'sid, et veenduda nende korrektses toimimises.

Kokkuvõte

Error Boundary'd on võimas tööriist robustsete ja usaldusväärsete Reacti rakenduste loomiseks. Mõistes, kuidas Error Boundary'sid tõhusalt rakendada ja kasutada, saate parandada kasutajakogemust, vältida rakenduse kokkujooksmist ja lihtsustada silumist. Pidage meeles, et paigutage Error Boundary'd strateegiliselt, pakkuge informatiivset varukasutajaliidest, logige vead ja testige oma Error Boundary'sid põhjalikult.

Järgides selles juhendis toodud juhiseid ja parimaid tavasid, saate tagada, et teie Reacti rakendused on vigadele vastupidavad ja pakuvad kasutajatele positiivset kogemust.