Fehler in React Komponenten mit Error Boundaries abfangen

React 16 befindet sich bereits auf der Zielgeraden und bringt einige neue Features mit, die uns den Entwickler-Alltag erleichtern werden. Eins dieser Features ist die Möglichkeit ein Error Boundary zu erstellen.

Wozu brauche ich das?

Jeder Entwickler macht Fehler, sonst würde es auch nicht so viele von uns geben. Dazu kommt aber auch noch, dass unsere Programme oft unerwartete Fehler werfen. Das ist generell ein Problem, welches man auf unterschiedliche Art und Weise lösen kann. Man kann zum Beispiel seine komplette Anwendung in einen Exception-Block packen, der dann unerwartete Exceptions abfängt und anschließend eine Fehlermeldung ausgeben. Besser ist es immer einen erwarteten Zustand zu definieren und wenn dieser nicht eintrifft eine spezielle Fehlermeldung auszugeben und das ganze zu loggen.

React Error Boundaries helfen uns bei beiden Ansätzen und reagieren darauf, wenn etwas beim Rendern bzw. in einer der Lifecycle-Methoden schief läuft. Allerdings darf man nicht davon ausgehen, dass React auch auf Exceptions in Promises reagiert.

Wie kann ich das benutzen?

Das Nutzen von Error Boundaries in React wird uns wirklich einfach gemacht. Dafür müsst ihr nur eine Eltern-Komponente bauen, welche ihr um eure Komponenten packt und entsprechend auf Fehler reagieren kann. Das Reagieren auf Fehler versteckt sich dabei in der Methode componentDidCatch, welche ihr in der Eltern-Error-Komponente aufrufen müsst.

Beispiel

Was sind die nächsten Schritte?

Mit Hilfe von React 16 wird es jetzt einfacher auf unerwartete Fehler zu reagieren. Wir können zum Beispiel einen Dialog öffnen mit einem Hinweis sich beim Support zu melden und natürlich den Fehler mitloggen. Das hängt aber von der jeweiligen Arbeitsumgebung ab.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.