Het afhandelen van Fouten met Foutmelding Grens

0
27

Denken en bouwen in Reageren gaat om het benaderen van het ontwerp van toepassing op stukken of onderdelen. Elk deel van uw applicatie dat wordt een actie uitgevoerd kan en moet worden behandeld als een component. In feite, Reageren is op basis van het onderdeel en, zoals Tomas Eglinkas onlangs schreef, moeten we gebruik van het concept en de fout aan de kant van het splitsen van een groot opdelen in kleinere onderdelen.

Splitsing onvermijdelijk introduceert onderdeel hiërarchieën, die goed zijn, omdat ze opgeblazen componenten en architectuur. Echter, dingen kunnen beginnen te gecompliceerd worden wanneer er een fout optreedt bij een kind component. Wat gebeurt er als de hele applicatie crasht?! Serieus, Reageren, waarom doen de ouders, broers en zussen onderdelen hebben om te betalen voor de zonden van een ander onderdeel? Waarom?

Fout Grenzen

Reageren op 16 kwam met een heleboel goodies, een van die fout grenzen. Laten we raadpleeg je de documentatie en het afbreken van wat het zegt over dit juweeltje, want we kunnen het gebruiken om de vlek fouten waar ze voorkomen en op te lossen sneller en met minder hoofdpijn!

Fout grenzen Reageren onderdelen die vangen JavaScript-fouten ergens in hun kind component boom, log die fouten, en geeft een fallback-UI in plaats van de component boom crashte. Fout grenzen vangen fouten tijdens het renderen, in de levenscyclus van de methoden en constructors van de hele boom.

Dat is een veel jargon, maar, zoals componenten, kunnen we het af te breken tot minder complexe stukken.

Fout grenzen Reageren Onderdelen

Dit is heel logisch en nuttig, want het is een concept dat we hebben met alles samen. Het verschil is dat sap werd gespoten op om het te laten verschillend van een normale component. Nog steeds, vergeet niet het idee dat er grenzen zijn zelf Reageren Onderdelen!

Fout grenzen vangen JavaScript-fouten ergens in hun kind component boom

In het geval u vergeten bent hoe kinderen component in het werk van de boom, hier is een voorbeeld:

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

We hebben twee ouders en drie onderliggende componenten. Op basis van wat we tot nu toe geleerd hebt over de fout grenzen, we kunnen repliceren de bovenstaande boom naar:

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

Door het verpakken van de hele boom in een ErrorBoundaryComponent, we vangen alle JavaScript-fouten die optreden in een van de onderliggende componenten. Cool, toch?

Fout grenzen log die fouten

Wanneer er fouten worden gepakt, we willen grenzen fouten om iets te doen met hen, bij voorkeur iets te vertellen over de. Ontwikkelaars maken vaak gebruik van de error logging platformen te controleren op fouten die optreden op hun software. Met fout grenzen, we kunnen hetzelfde doen.

Fout grenzen weer een terugval UI

In plaats van dat het hele vervelende combinatie van rood in verschillende nuances, kunt u kiezen voor een aangepaste user interface weer te geven wanneer een fout optreedt. Dat kan komen in super handig omdat het de mogelijkheid biedt om op maat van fouten in een stijl die maakt het makkelijker voor u om te lezen en te scannen. Super cool, toch?

Net als ik, je zult denken dat dit betekent dat fout grenzen zal de vangst van alle JavaScript-fouten. Helaas, dat is niet waar. Hier zijn de fouten die ze sierlijk negeren:

  • Gebeurtenis-handlers
  • Asynchrone code (bv. setTimeout of requestAnimationFrame callbacks)
  • Server-side rendering
  • Fouten gegooid in de fout grens zelf (in plaats van de kinderen)

componentDidCatch()

De extra sap dat maakt een onderdeel van een fout grens is componentDidCatch() — dit is een levenscyclus methode die werkt net als de JavaScript catch{} block heeft, maar voor de onderdelen. Wanneer er een fout is gevonden in een onderliggende component, de fout wordt afgehandeld door de dichtstbijzijnde fout grens. Alleen klasse-componenten kunnen worden fout grenzen.

componentDidCatch() accepteert twee parameters:

  • error: Dit is de fout die werd geworpen
  • info: Een object waarin een spoor van waar het fout opgetreden

Fout Grens In Actie

Zeggen dat we werken op een functie die lijsten locaties waar congressen kunnen worden gehouden. Iets als dit:

Zie de Pen fout grens 0 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

De applicatie bevat de locaties van de Locatie component en de individuele locaties zijn uitgevoerd als Locatie Kaarten. We nemen een beetje extra zorg aan de naam van elke locatie wordt weergegeven in hoofdletters voor de consistentie. Voor deze tutorial doel, voegen we een leeg object aan de lijst van locaties.

klasse Locatie breidt Reageren.Onderdeel {
staat = {
locaties: [
{
“naam”: “Ojo”,
“zone”: “Lagos”,
“regio”: “Zuid-West”
},
{
“naam”: “Ahiazu Mbaise”,
“zone”: “Imo”
“regio”: “Zuid-Oost”
},
{
“naam”: “Akoko-Edo”,
“zone”: “Edo State”,
“regio”: “Zuid-Zuid”
},
{
“naam”: “Anka”,
“zone”: “Zamfara Staat”,
“regio”: “Noord-West”
},
{
“naam”: “Akwanga”,
“zone”: “Nasarawa Staat”,
“regio”: “North Central”
},
{

}
]
}
render() {
return (
<div>
<div>
<div>
<h2>Locaties</h2>
</div>
</div>
<div>
{dit.staat.locaties
.kaart(locatie =>
<LocationCard key={locatie.id} {…locatie} />
)}
</div>
</div>
)
}
}

const LocationCard = (rekwisieten) => {
return (
<div>
<hr />
<p><b>Naam:</b> {rekwisieten.de naam.toUpperCase()}</p>
<p><b>Zone:</b> {rekwisieten.zone}</p>
<p><b>Land:</b> {rekwisieten.regio}</p>
<hr />
</div>
)
}

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

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

Als u deze in de browser, ziet u een foutbericht vergelijkbaar met het volgende plaatje:

Dat is niet helemaal handig, dus laten we het toepassen van een fout grens te hanteren helpen ons uit. Eerst maken we een ErrorBoundary onderdeel:

klasse ErrorBoundary breidt Reageren.Onderdeel {
constructor(rekwisieten) {
super(rekwisieten);
deze.staat = {
hasError: false,
fout: null,
info: null
};
}
componentDidCatch(fout, info) {
deze.setState({
hasError: true,
fout: fout,
info: info
});
}
render() {
als dit.staat.hasError) {
return (
<div>
<h1>Oeps, er ging iets mis :(</h1>
<p>De fout is: {dit.staat.fout.toString()}</p>
<p>Waar het opgetreden: {dit.staat.info.componentStack}</p>
</div>
);
}
retourneren.props.kinderen;
}
}

Een eerste staat voor hasError, fouten en info is gemaakt. Dan, de componentDidCatch() levenscyclus van de methode is toegevoegd. Als er een fout optreedt in de constructor maken of de levenscyclus van de methode van een van haar kinderen componenten, de hasError status zal worden veranderd naar de ware. Wanneer dit gebeurt, de ErrorBoundary component maakt en geeft de fout. Maar als er geen fouten zijn, zijn de kinderen van de ErrorBoundary component worden weergegeven in plaats van zoals we gewend zijn.

Vervolgens moeten we zowel de ErrorBoundary en Locatie van onderdelen op onze belangrijkste App onderdeel:

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

Zie de Pen fout grens 2 door Kingsley Silas Chijioke (@kinsomicrote) op CodePen.

We zien niet dat vervelende TypeError UI meer! Alles werkt!

Er is één klein ding dat we kunnen doen om het verbeteren van de app. Als u de code in de demo ziet u een leeg object dat we aan het eind toegevoegd. Is het mogelijk om de andere geloofwaardige locaties maken? Absoluut! Binnen de Locatie onderdeel is, kunnen we wikkel de LocationCard component met de ErrorBoundary component om het bereik van de error logging direct aan de kaarten:

klasse Locatie breidt Reageren.Onderdeel {
staat = {
locaties: [
{
“naam”: “Ojo”,
“zone”: “Lagos”,
“regio”: “Zuid-West”
},
{
“naam”: “Ahiazu Mbaise”,
“zone”: “Imo”
“regio”: “Zuid-Oost”
},
{
“naam”: “Akoko-Edo”,
“zone”: “Edo State”,
“regio”: “Zuid-Zuid”
},
{
“naam”: “Anka”,
“zone”: “Zamfara Staat”,
“regio”: “Noord-West”
},
{
“naam”: “Akwanga”,
“zone”: “Nasarawa Staat”,
“regio”: “North Central”
},
{
// Leeg!
}
]
}
render() {
return (
<div>
<div>
<div>
<h2>Locaties</h2>
</div>
</div>
<div>
{dit.staat.locaties
.kaart(locatie =>
<ErrorBoundary>
// Moet maken alle locaties, maar de lege exemplaar
<LocationCard key={locatie.id} {…locatie} />
</ErrorBoundary>
)}
</div>
</div>
)
}
}

Deze keer, de geloofwaardige locaties tonen, behalve degene die is leeg. U kunt ervoor kiezen om wrap de hele component boom met een fout grens onderdeel keer, of u kunt wikkel verschillende onderdelen op strategische plaatsen. De beslissing is aan u.

Inpakken

Ik moedig u aan om te beginnen gebruik te maken van de fout grenzen in uw toepassingen. Zo is het de moeite waard te graven een beetje dieper. Voor dat, hier zijn enkele problemen in het Reageren repo op Fout Grenzen en event afhandelt, ga door, zodat u kunt zien dat de huidige staat van waar de dingen op:

  • componentDidCatch niet genoemd wanneer er een fout is in de belofte
  • Waarom zijn Fout Grenzen niet geactiveerd voor de gebeurtenis-handlers voor?

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!