Implementing an Error Boundary

Learn how you can catch possible errors in your application and prevent users from experiencing a mishap.

We'll cover the following

Defining a new component
getDerivedStateFromError()
componentDidCatch()
Reacting to possible errors

There are two simple rules when it comes to implementing an error boundary:

Only Class components can be turned into an error boundary.
The class has to implement the static getDerivedStateFromError() method or the class method componentDidCatch() (or both of them).

Strictly speaking, we are already dealing with an error boundary from a technical point of view if one or both of the methods mentioned above have been implemented. All other rules that apply to regular class components also apply to error boundary.

Let’s look at an implementation of an error boundary:

Get hands-on with 1400+ tech skills courses.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Implementing an Error Boundary