Håndtering av Feil med Feil Grense

0
44

Tenkning og bygning i Reagerer innebærer nærmer program design i biter, eller komponenter. Hver del av programmet som utfører en handling som kan og bør behandles som en komponent. Faktisk, Reagerer komponent-basert og, som Tomas Eglinkas nylig skrev, vi bør utnytte at konsept og feile på siden av splitting store chunking i mindre komponenter.

Splitting uunngåelig introduserer komponent hierarkier, som er gode fordi de er oppblåste komponenter og arkitektur. Men, ting kan begynne å bli komplisert når det oppstår en feil i et barn komponent. Hva skjer når hele programmet krasjer?! Seriøst, Reagerer på hvorfor foreldre og søsken komponenter har til å betale for syndene til en annen komponent? Hvorfor?

Feil Grenser

Reagerer 16 kom med en rekke godbiter, en som er feil grenser. La oss se i dokumentasjonen og bryte ned hva det sier om denne perlen, fordi vi kan bruke den til å oppdage feil der de oppstår og løse dem raskere og med mindre hodepine!

Feil grenser er Reagere komponenter som fange JavaScript-feil hvor som helst i sine barn komponent treet, logg disse feilene, og vise et tilbakefall BRUKERGRENSESNITTET i stedet for komponenten tre som krasjet. Feil grenser fange feil under rendring, i lifecycle metoder, og i konstruktører av hele treet under dem.

Det er mye sjargong, men som komponenter, vi kan bryte det ned i mindre komplekse biter.

Feil grenser er Reagere Komponenter

Dette gjor mye fornuftig og nyttig, fordi det er et konsept vi har med alle sammen. Forskjellen er at saften ble sprutet på den for å gjøre det annerledes fra en vanlig komponent. Likevel, ikke glem de grunnleggende ideen om at feil grensene er i seg selv Reagerer Komponenter!

Feil grenser fange JavaScript-feil hvor som helst i sine barn komponent treet

I tilfelle du har glemt hvordan barn komponent treet arbeid, her er et eksempel:

<ParentComponent>
<FirstChild>
<FirstChildDaughter>
</FirstChildDaughter>
</FirstChild>
<SecondChild>
</SecondChild>
</ParentComponent>

Vi har to foreldre og tre barn komponenter. I henhold til hva vi har lært så langt om feil grenser, vi kan replikere over tree til:

<ErrorBoundaryComponent>
<ParentComponent>
<FirstChild>
<FirstChildDaughter>
</FirstChildDaughter>
</FirstChild>
<SecondChild>
</SecondChild>
</ParentComponent>
</ErrorBoundaryComponent>

Ved å pakke det hele treet opp i en ErrorBoundaryComponent, kan vi fange noen JavaScript-feil som oppstår i sine barn komponenter. Kult, ikke sant?

Feil grenser logg disse feilene

Når feil blir tatt, vi ønsker grenser feil å gjøre noe med dem, helst noe å fortelle oss om den. Utviklere ofte gjøre bruk av feil logging plattformer for å overvåke feil som oppstår på deres programvare. Med feil grenser, vi kan gjøre det samme.

Feil grenser vise et tilbakefall UI

I stedet for å vise hele irriterende combo av rødt i forskjellige farger, du kan velge en tilpasset brukergrensesnitt for å vise når en feil oppstår. Som kan komme i svært nyttig fordi det tillater deg å skreddersy feil i en stil som gjør det lettere for deg å lese og skanne. Super kul, ikke sant?

Som meg, vil du tenke at dette innebærer at feil grensene vil fange alle JavaScript-feil. Dessverre, det er ikke sant. Her er det feil at de vil grasiøst ignorere:

  • Event handlers
  • Asynkron kode (f.eks. setTimeout eller requestAnimationFrame tilbakering)
  • Server-side rendering
  • Feil kastet i feil grensen i seg selv (heller enn dens barn)

componentDidCatch()

Den ekstra juice som gjør en komponent en feil grensen er componentDidCatch() — dette er en livssyklus metode som fungerer som JavaScript fange{} blokk, men for komponenter. Når en feil er funnet i et barn komponent, feil behandles av nærmeste feil grensen. Bare førsteklasses komponenter kan være feil grenser.

componentDidCatch() aksepterer to parametre:

  • feil: Dette er feil som ble kastet
  • info: Et objekt som inneholder spor av hvor feilen har oppstått

Feil Grensen I Aksjon

Si at vi arbeider på en funksjon som viser steder der konferanser kan avholdes. Noe sånt som dette:

Se Penn feil grensen 0 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Programmet lister steder fra Sted komponent og enkelte steder er utgang som Beliggenhet-Kort. Vi tar litt ekstra vare for å sikre navnet på hvert sted er gjengitt i store bokstaver for konsistens. For denne opplæringen formål, vil vi legge til en tom objekt til listen over steder.

klasse Plassering strekker seg til å Reagere.Komponent {
tilstand = {
steder: [
{
“name”: “Ojo”,
“sonen”: “Staten Lagos”,
“region”: “South West”
},
{
“name”: “Ahiazu Mbaise”,
“sonen”: “Imo-Staten”
“region”: “South East”
},
{
“name”: “Akoko-Edo”,
“sonen”: “Edo State”,
“region”: “Sør-Sør”
},
{
“name”: “Anka”,
“sonen”: “Zamfara Staten”,
“region”: “North West”
},
{
“name”: “Akwanga”,
“sonen”: “Nasarawa Staten”,
“region”: “North Central”
},
{

}
]
}
render() {
retur (
<div>
<div>
<div>
<h2>Steder</h2>
</div>
</div>
<div>
{dette.staten.steder
.kart(location =>
<LocationCard key={beliggenhet.id} {…plassering} />
)}
</div>
</div>
)
}
}

const LocationCard = (props) => {
retur (
<div>
<hr />
<p><b>Navn:</b> {rekvisitter.navnet.toUpperCase()}</p>
<p><b>Sone:</b> {rekvisitter.sone}</p>
<p><b> – Område:</b> {rekvisitter.regionen}</p>
<hr />
</div>
)
}

const App = () => (
<div>
<Sted />
</div>
)

ReactDOM.render(<App />, – dokument.bürgerliches(“root”));

Hvis du kjører dette i nettleseren, vil du se en feilmelding som ligner på dette skjermbildet:

Det er ikke helt nyttig, så la oss bruke en feil grensen for å håndtere hjelpe oss ut. Først vil vi skape en ErrorBoundary komponent:

klasse ErrorBoundary strekker seg til å Reagere.Komponent {
constructor(props) {
super(props);
dette.tilstand = {
hasError: false,
feil: null,
info: null
};
}
componentDidCatch(feil, info) {
dette.setState({
hasError: true,
feil: feil,
info: info
});
}
render() {
hvis (denne.staten.hasError) {
retur (
<div>
<h1>Oops, noe som gikk galt :(</h1>
<p>feil: {dette.staten.feil.toString()}</p>
<p>Hvor det har oppstått: {dette.staten.info.componentStack}</p>
</div>
);
}
gå tilbake til denne.rekvisitter.barn;
}
}

En innledende staten for hasError, feil, og informasjonen er opprettet. Så, componentDidCatch() lifecycle metode er lagt til. Hvis det oppstår en feil i constructor, gjengi eller lifecycle metoden for noen av sine barn komponenter, hasError staten vil bli endret til true. Når dette skjer, ErrorBoundary komponenten gjør og viser feil. Men hvis det er noen feil, barn ErrorBoundary komponent er gjengitt i stedet som vi forventer.

Neste, må vi legge til både ErrorBoundary og Plassering av komponenter til våre viktigste App-komponenten:

const App = () => (
<div>
<ErrorBoundary>
<Sted />
</ErrorBoundary>
</div>
)

Se Penn feil grensen 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Vi kan ikke se at irriterende TypeError UI lenger! Ting fungerer!

Det er en liten ting vi kan gjøre for å forbedre appen. Hvis du sjekke koden i demoen, vil du se et tomt objekt vi har lagt til på slutten. Er det mulig å ha andre troverdig steder gjengi? Definitivt! Inne Plasseringen komponent, vi kan bryte LocationCard komponent med ErrorBoundary komponent for å omfang feil logging direkte til kort:

klasse Plassering strekker seg til å Reagere.Komponent {
tilstand = {
steder: [
{
“name”: “Ojo”,
“sonen”: “Staten Lagos”,
“region”: “South West”
},
{
“name”: “Ahiazu Mbaise”,
“sonen”: “Imo-Staten”
“region”: “South East”
},
{
“name”: “Akoko-Edo”,
“sonen”: “Edo State”,
“region”: “Sør-Sør”
},
{
“name”: “Anka”,
“sonen”: “Zamfara Staten”,
“region”: “North West”
},
{
“name”: “Akwanga”,
“sonen”: “Nasarawa Staten”,
“region”: “North Central”
},
{
// Tomt!
}
]
}
render() {
retur (
<div>
<div>
<div>
<h2>Steder</h2>
</div>
</div>
<div>
{dette.staten.steder
.kart(location =>
<ErrorBoundary>
// Skal gjengi alle steder, men den tomme eksempel
<LocationCard key={beliggenhet.id} {…plassering} />
</ErrorBoundary>
)}
</div>
</div>
)
}
}

Denne gangen er troverdig steder viser, bortsett fra en som er tom. Du kan velge å bryte hele komponenten treet med en feil grensen komponent gang, eller du kan fylle ulike komponenter på strategiske steder. Avgjørelsen er opp til deg.

Innpakning Opp

Jeg oppfordrer deg til å begynne å gjøre bruk av feil grenser i dine programmer. På samme måte er det verdt å grave litt dypere. For at her er noen problemer i de Reagerer repo på Feil Grenser og event håndtak, gå gjennom dem, slik at du kan se den nåværende statusen for hvor ting er på:

  • componentDidCatch er ikke å bli kalt når det er en feil i lover
  • Hvorfor er Feil Grensene ikke utløses for event-handlere?

Jetpack WordPress plugin går på dette nettstedet, slår ikke bare relaterte innlegg nedenfor, men sikkerhet og sikkerhetskopiering, Markdown-støtte, søk nettstedet, kommentar form, sosiale nettverk-tilkoblinger, og mer!