Hantering av Fel med Fel Gränsen

0
30

Tänkande och byggnad Reagerar innebär närmar ansökan design i bitar, eller komponenter. Varje del av ditt program som utför en åtgärd som kan och bör behandlas som en komponent. I själva verket Reagerar är komponentbaserad, och som Tomas Eglinkas nyligen skrev vi bör utnyttja detta koncept och fela på sidan av att dela något stort chunking i mindre delar.

Dela oundvikligen inför komponent hierarkier, vilket är bra eftersom de uppblåsta komponenter och arkitektur. Dock kan saker och ting börjar bli komplicerat när ett fel uppstår i en underordnad komponent. Vad händer när hela programmet kraschar?! På allvar, Reagerar, varför gör föräldrar och syskon komponenter måste betala för synderna av en annan komponent? Varför?

Fel Gränser

Reagera 16 kom med en massa godsaker, en av som är fel gränser. Låt oss konsultera dokumentationen och bryta ner vad det säger om denna pärla eftersom vi kan använda den för att upptäcka fel när de uppstår och lösa dem snabbare och med mindre huvudvärk!

Fel gränser Reagera komponenter att fånga JavaScript-fel någonstans i deras barn komponent träd, logga dessa fel, och visa en återgång ANVÄNDARGRÄNSSNITTET i stället för den komponent träd som kraschade. Fel gränser fånga fel under rendering, i livscykeln metoder och konstruktorer av hela träd under dem.

Det är en hel del jargong, men som komponenter, kan vi bryter ner det i mindre komplexa bitar.

Fel gränser Reagera Komponenter

Detta är ett mycket vettigt och användbart eftersom det är ett begrepp som vi har med hjälp av alla tillsammans. Skillnaden är att juice sprutades på den för att göra det som skiljer den från en vanlig komponent. Fortfarande, glöm inte den grundläggande tanken att fel gränser är själva Reagera Komponenter!

Fel gränser fånga JavaScript-fel någonstans i deras barn komponent träd

I fall du har glömt hur barn komponent träd arbete, här är ett exempel:

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

Vi har två föräldrar och tre barn komponenter. Enligt vad vi har lärt oss så mycket om felet gränser, vi kan upprepa ovanstående träd till:

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

Genom att omsluta hela trädet upp i en ErrorBoundaryComponent, vi kan fånga någon JavaScript-fel som kan uppstå i dess underordnade komponenter. Cool, eller hur?

Fel gränser logga dessa fel

När fel fångas, vill vi att gränserna fel att göra något med dem, helst något att berätta om. Utvecklare ofta använder sig av fel att logga plattformar för att övervaka de fel som uppstår på deras program. Med fel gränser, kan vi göra samma sak.

Fel gränserna visa en återgång UI

I stället för att visa hela irriterande combo av röda i olika nyanser, kan du välja ett anpassat användargränssnitt för att visa när ett fel uppstår. Som kan komma i super praktiskt eftersom det tillåter dig att skräddarsy fel i en stil som gör det lättare för dig att läsa och skanna. Super cool, eller hur?

Som mig, du kommer tro att detta innebär fel gränser kommer att fånga alla JavaScript-fel. Tyvärr, det är inte sant. Här finns fel som de kommer graciöst ignorera:

  • Event handlers
  • Asynkron kod (t ex setTimeout eller requestAnimationFrame callbacks)
  • Server-side-rendering
  • Fel som kastas i fel gränsen sig själv (snarare än sin barn)

componentDidCatch()

Den extra juice som gör en komponent ett fel gränsen är componentDidCatch() — detta är en lifecycle-metoden som fungerar som JavaScript catch{} block, men för komponenter. När ett fel finns i en underordnad komponent, fel hanteras av den närmaste fel gräns. Endast klass komponenter kan vara fel gränser.

componentDidCatch() tar emot två parametrar:

  • fel: det är fel att kastades
  • info: Ett objekt som innehåller ett spår av där felet inträffade

Fel Gränsen I Aktion

Att säga att vi är som arbetar på en funktion som listar platser där konferenser kan hållas. Något liknande detta:

Se Pennan fel gränsen 0 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Programmet listar platser från Plats komponent och enskilda platser ut som Platsen Kort. Vi tar lite extra omsorg för att säkerställa att namnet på varje plats är utförda i versaler för konsekvens. För denna tutorial syfte, kommer vi att lägga till ett tomt objekt till listan över platser.

klass Läge sträcker sig Reagera.Komponent {
state = {
platser: [
{
“name”: “Ojo”,
“zonen”: “Lagos”,
“regionen”: “South West”
},
{
“name”: “Ahiazu Mbaise”,
“zonen”: “Imo”,
“regionen”: “sydost”
},
{
“name”: “Akoko-Edo”,
“zonen”: “Edo”,
“regionen”: “Syd-Syd”
},
{
“name”: “Anka”,
“zonen”: “Zamfara”,
“regionen”: “North West”
},
{
“name”: “Akwanga”,
“zonen”: “Nasarawa”,
“regionen”: “North Central”
},
{

}
]
}
render() {
avkastning (
<div>
<div>
<div>
<h2>Adresser</h2>
</div>
</div>
<div>
{detta.stat.platser
.karta(location =>
<LocationCard key={läge.id} {läge…} / >
)}
</div>
</div>
)
}
}

const LocationCard = (rekvisita) => {
avkastning (
<div>
<hr />
<p><b>Namn:</b> {rekvisita.namn.toUpperCase()}</p>
<p><b>Zonen:</b> {rekvisita.zon}</p>
<p><b>Region:</b> {rekvisita.region}</p>
<hr />
</div>
)
}

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

ReactDOM.render(<App / > handling.getElementById(“root”));

Om du kör detta i webbläsaren, kommer du att se ett felmeddelande som liknar detta skärmdump:

Det är inte helt bra, så låt oss tillämpa ett fel gränsen för att hantera hjälpa oss. För det första, vi kommer skapa en ErrorBoundary komponent:

klass ErrorBoundary sträcker sig Reagera.Komponent {
konstruktör(rekvisita) {
super(rekvisita);
detta.state = {
hasError: false,
fel: null,
info: null
};
}
componentDidCatch(fel), info (information) {
detta.setState({
hasError: sant,
fel: fel,
info: info
});
}
render() {
om (detta.stat.hasError) {
avkastning (
<div>
<h1>Hoppsan, något gick fel :(</h1>
<p>fel: {detta.stat.felet.toString()}</p>
<p>Om det inträffade: {detta.stat.info.componentStack}</p>
</div>
);
}
tillbaka detta.rekvisita.barn;
}
}

En första staten för hasError, fel och info skapas. Då componentDidCatch() lifecycle metod läggs till. Om ett fel uppstår i konstruktorn, göra eller lifecycle metod för något av sina barn komponenter, hasError staten kommer att ändras till true. När detta händer, ErrorBoundary komponent gör och visar den fel. Men om det inte finns några fel, barn ErrorBoundary komponenter är utförda i stället som vi skulle förvänta oss.

Sedan behöver vi lägga till både ErrorBoundary och Plats komponenter till våra viktigaste App komponent:

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

Se Pennan fel gränsen 2 av Kingsley Silas Chijioke (@kinsomicrote) på CodePen.

Vi ser inte att irriterande TypeError UI längre! Saker och ting fungerar!

Det är en liten sak vi kan göra för att förbättra app. Om du kontrollerar koden i demo, kommer du att se ett tomt objekt som vi lagt till på slutet. Är det möjligt att ha andra trovärdiga platser göra? Absolut! Inuti Plats komponent, kan vi linda LocationCard komponent med ErrorBoundary komponent till omfattningen fel loggning direkt till korten:

klass Läge sträcker sig Reagera.Komponent {
state = {
platser: [
{
“name”: “Ojo”,
“zonen”: “Lagos”,
“regionen”: “South West”
},
{
“name”: “Ahiazu Mbaise”,
“zonen”: “Imo”,
“regionen”: “sydost”
},
{
“name”: “Akoko-Edo”,
“zonen”: “Edo”,
“regionen”: “Syd-Syd”
},
{
“name”: “Anka”,
“zonen”: “Zamfara”,
“regionen”: “North West”
},
{
“name”: “Akwanga”,
“zonen”: “Nasarawa”,
“regionen”: “North Central”
},
{
// Tom!
}
]
}
render() {
avkastning (
<div>
<div>
<div>
<h2>Adresser</h2>
</div>
</div>
<div>
{detta.stat.platser
.karta(location =>
<ErrorBoundary>
// Ska göra alla platser, men det tomma exempel
<LocationCard key={läge.id} {läge…} / >
</ErrorBoundary>
)}
</div>
</div>
)
}
}

Denna gång, den trovärdiga platser visar, utom en som är tom. Du kan välja att linda hela komponent träd med ett fel gränsen komponent en gång, eller så kan du linda in olika komponenter på strategiska platser. Beslutet är upp till dig.

Att Linda Upp

Jag uppmuntrar dig till att börja göra användning av fel gränserna i ditt program. På samma sätt, det är värt att gräva lite djupare. För att, här är några frågor i den Reagerar repo på Fel Gränser och händelsehanterare, gå igenom dem så att du kan se aktuell status för där saker och ting är på:

  • componentDidCatch inte få kallas för när det är ett fel i promise
  • Varför är det Fel Gränser inte utlöses för event handlers?

Jetpack WordPress plugin som körs på denna webbplats, driver inte bara relaterade inlägg nedan, men säkerhet och backup, Wiki-stöd, sök på sajten, kommentera form, sociala nätverk, och mycket mer!