Fehlerbehandlung mit Fehler-Grenze

0
29

Denken und Gebäude Reagieren, beinhaltet die Annäherung an application design in Blöcken oder Komponenten. Jeder Teil der Anwendung, die eine Aktion durchführt, kann und sollte behandelt werden, als eine Komponente. In der Tat Reagieren die Komponenten-basierte und, wie Tomas Eglinkas vor kurzem schrieb, sollten wir nutzen, das Konzept und irren auf der Seite der Spaltung keine großen Segmentierung in kleinere Komponenten.

Die Spaltung unweigerlich stellt Hierarchien von Komponenten, die gut sind, weil Sie aufgebläht-Komponenten und-Architektur. Allerdings können die Dinge beginnen, kompliziert, wenn ein Fehler in einer untergeordneten Komponente. Was passiert, wenn das ganze Programm stürzt ab?! Ernst, Reagieren Sie, warum tun die Eltern und Geschwister Komponenten müssen bezahlen für die Sünden der anderen Komponente? Warum?

Fehler-Grenzen

Reagieren 16 kam mit einer Menge leckereien, von denen ist der Fehler Grenzen. Let ‘ s finden Sie in der Dokumentation und brechen was es sagt über dieses Kleinod, denn wir können es verwenden, zu erkennen Fehler, wo Sie auftreten, und lösen Sie schneller und mit weniger Kopfschmerzen!

Fehler-Grenzen Reagieren, Komponenten, fangen JavaScript-Fehler irgendwo in Ihrem Kind Komponente Baum, protokollieren diese Fehler, und zeigen Sie eine fallback-UI anstelle der Komponente Baum, stürzte ab. Fehler-Grenzen abfangen von Fehlern beim Rendern, in der lifecycle-Methoden und Konstruktoren der gesamte Baum unterhalb von Ihnen.

Das ist eine Menge von jargon, aber, wie Komponenten, können wir es brechen in weniger komplexe chunks.

Fehler-Grenzen sind, Reagieren Komponenten

Das macht viel Sinn und nützlich, weil es ist ein Konzept, das wir haben, mit allen zusammen. Der Unterschied ist, dass Saft versprüht und Sie machen es anders als eine normale Komponente. Noch, vergessen Sie nicht die grundlegende Idee, dass die Fehler-Grenzen selbst zu Reagieren-Komponenten!

Fehler-Grenzen fangen JavaScript-Fehler irgendwo in Ihrem Kind Komponente Baum

In Fall, dass Sie vergessen haben, wie Kinder, die Komponente Baum arbeiten, hier ein Beispiel:

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

Wir haben zwei Eltern und drei untergeordneten Komponenten. Nach dem, was wir bisher gelernt haben, über Fehler hinweg, können wir replizieren den obigen Baum:

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

Durch das einwickeln der ganze Baum in ein ErrorBoundaryComponent, wir fangen keine JavaScript-Fehler, die auftreten, in seinen Kind-Komponenten. Cool, richtig?

Fehler-Grenzen protokollieren diese Fehler

Bei Fehlern erwischt werden, wollen wir die Grenzen, die Fehler, um etwas mit Ihnen zu tun, am besten etwas, um uns zu sagen über die. Entwickler oft mit Fehlerprotokollierung-Plattformen zu überwachen, auftretende Fehler auf Ihrer software. Mit der Fehler-Grenzen, wir können das gleiche tun.

Fehler Grenzen zeigen fallback UI

Anstatt die ganze nervige combo von rot, in verschiedenen Schattierungen, Sie können wählen, eine maßgeschneiderte Benutzeroberfläche angezeigt, wenn ein Fehler Auftritt. Das kann super praktisch, denn es ermöglicht Ihnen, maßgeschneiderte Fehler in einem Stil, der macht es einfacher für Sie zu Lesen und zu Scannen. Super cool, Recht?

Wie mir, werdet Ihr denken, dass dies bedeutet, Fehler-Grenzen, die fangen alle JavaScript-Fehler. Traurig, dass das nicht stimmt. Hier sind die Fehler, die Sie anmutig zu ignorieren:

  • Event-Handler
  • Asynchronen code (z.B. setTimeout oder requestAnimationFrame Rückrufe)
  • Server-side rendering
  • Fehler, die ausgelöst werden, die in der Fehlermeldung Grenze selbst (und nicht deren Kinder)

componentDidCatch()

Die extra Saft, die macht, dass eine Komponente einen Fehler Grenze ist componentDidCatch() — dies ist eine Lebenszyklus-Methode, die funktioniert wie die JavaScript-catch {} – block, aber für die Komponenten. Wenn ein Fehler gefunden wird, in eine Kind-Komponente, die Fehler behandelt, indem der nächste Fehler-Grenze. Nur erstklassigen Komponenten können Fehler Grenzen.

componentDidCatch() akzeptiert zwei Parameter:

  • Fehler: Das ist der Fehler, der geworfen wurde
  • info: Ein Objekt, das enthält eine Spur, wo der Fehler aufgetreten ist

Fehler-Grenze In Aktion

Sagen wir arbeiten an einer Funktion, die Listen von Orten, wo Konferenzen abgehalten werden können. So etwas wie dieses:

Finden Sie den Stift Fehler-Grenze 0 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Die Anwendung listet locations vom Location – Komponente und die einzelnen locations Ausgabe als Standort-Karten. Wir nehmen ein wenig zusätzliche Pflege, um sicherzustellen, die Namen der einzelnen Standorte erfolgt in Großbuchstaben für die Konsistenz. Für dieses tutorial Zweck fügen wir ein leeres Objekt in die Liste der Standorte.

Klasse Lage erstreckt Reagieren.Komponente {
state = {
Standorte: [
{
“name”: “Ojo”,
“zone”: “Lagos State”,
“region”: “Süd-West”
},
{
“name”: “Ahiazu Mbaise”,
“zone”: “Imo State”,
“region”: “South East”
},
{
“name”: “Akoko-Edo”,
“zone”: “Edo State”,
“region”: “Süd-Süd”
},
{
“name”: “Anka”,
“zone”: “Zamfara State”,
“region”: “North West”
},
{
“name”: “Akwanga”,
“zone”: “Nasarawa State”,
“region”: “North Central”
},
{

}
]
}
render() {
return (
<div>
<div>
<div>
<h2>Standorte</h2>
</div>
</div>
<div>
{dies.Zustand.Standorte
.Karte(Standort =>
<LocationCard key={location.id} {…Position} />
)}
</div>
</div>
)
}
}

const LocationCard = (Requisiten) => {
return (
<div>
<hr />
<p><b>Name:</b> {props.name.toUpperCase()}</p>
<p><b>Zone:</b> {props.zone}</p>
<p><b>Region:</b> {props.region}</p>
<hr />
</div>
)
}

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

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

Wenn Sie diese in den browser ein, erhalten Sie eine Fehlermeldung ähnlich wie dieser screenshot:

Das ist nicht ganz hilfreich, so wenden Sie einen Fehler-Grenze zu behandeln, uns zu helfen. Zunächst erstellen wir eine ErrorBoundary Komponente:

Klasse ErrorBoundary erstreckt Reagieren.Komponente {
Konstruktor(props) {
super(props);
diese.state = {
hasError: false,
Fehler: null
info: null
};
}
componentDidCatch(Fehler, info) {
diese.setState({
hasError: true,
Fehler: Fehler,
info: info
});
}
render() {
if (dies.Zustand.hasError) {
return (
<div>
<h1>Oops, ist etwas schief gelaufen :(</h1>
<p>Der Fehler: {dies.Zustand.Fehler.toString()}</p>
<p>Wo es aufgetreten ist: {dies.Zustand.info.componentStack}</p>
</div>
);
}
wieder dieses.Requisiten.Kinder;
}
}

Ein Anfangszustand für die hasError -, Fehler-und info ist erstellt. Dann, die componentDidCatch() lifecycle-Methode Hinzugefügt. Tritt ein Fehler im Konstruktor machen oder lifecycle-Methode von allen untergeordneten Komponenten, die hasError-Zustand wird auf “true” geändert. Wenn dies geschieht, die ErrorBoundary Komponente rendert und zeigt den Fehler an. Aber wenn keine Fehler vorhanden sind, werden die Kinder von ErrorBoundary Komponente gerendert werden, anstatt, wie wir erwarten würden.

Als Nächstes benötigen wir fügen Sie sowohl die ErrorBoundary und Lage der Komponenten, um unsere wichtigsten App-Komponente:

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

Finden Sie den Stift Fehler-Grenze 2 durch Kingsley Silas Chijioke (@kinsomicrote) auf CodePen.

Wir sehen nicht, dass lästige TypeError UI mehr! Alles funktioniert!

Es gibt eine kleine Sache, die wir tun können, um die app verbessern zu können. Wenn Sie überprüfen Sie den code in der demo, sehen Sie einen leeren Objekt, das wir am Ende Hinzugefügt. Ist es möglich, den anderen glaubwürdig Standorten erbringen? Die meisten auf jeden Fall! Im inneren der Ort der Komponente, wir können wickeln Sie die LocationCard Komponente mit der ErrorBoundary Komponente Rahmen der Fehlerprotokollierung direkt zu den Karten:

Klasse Lage erstreckt Reagieren.Komponente {
state = {
Standorte: [
{
“name”: “Ojo”,
“zone”: “Lagos State”,
“region”: “Süd-West”
},
{
“name”: “Ahiazu Mbaise”,
“zone”: “Imo State”,
“region”: “South East”
},
{
“name”: “Akoko-Edo”,
“zone”: “Edo State”,
“region”: “Süd-Süd”
},
{
“name”: “Anka”,
“zone”: “Zamfara State”,
“region”: “North West”
},
{
“name”: “Akwanga”,
“zone”: “Nasarawa State”,
“region”: “North Central”
},
{
// Leer!!!
}
]
}
render() {
return (
<div>
<div>
<div>
<h2>Standorte</h2>
</div>
</div>
<div>
{dies.Zustand.Standorte
.Karte(Standort =>
<ErrorBoundary>
// Sollte machen allen Standorten, aber der leere Instanz
<LocationCard key={location.id} {…Position} />
</ErrorBoundary>
)}
</div>
</div>
)
}
}

Diese Zeit, die glaubwürdigen Orte zeigen, außer die eine, die leer ist. Sie können wickeln die gesamte Komponenten-Struktur mit einem Fehler-Grenze Komponente einmal, oder Sie wickeln kann verschiedene Komponenten an strategisch wichtigen Orten. Die Entscheidung ist bis zu Ihnen.

Zusammenfassung

Ich ermutige Sie, um zu beginnen, verwenden von Fehler-Grenzen in Ihren Anwendungen. Ebenso lohnt es sich, Graben ein wenig tiefer. Für, die, hier sind einige Fragen, die in der Reagieren repo auf Fehler, Grenzen und Ereignis-handles, die durch Sie gehen, so können Sie sehen den aktuellen Zustand, wo die Dinge sind:

  • componentDidCatch ist nicht immer aufgerufen wenn es einen Fehler in promise
  • Warum sind Fehler Grenzen nicht ausgelöst, für event-Handler?

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!