Using React Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. More info

Articles & Tutorials

Catch Your Suspense Errors (dev.to)
Oct 30, 2019
Not every promise resolves. Some are rejected. So, when we use React.Suspense to show loading and loaded states, we need to consider exceptions as well.
Understanding Error Boundaries in React (blog.bitsrc.io)
Feb 20, 2019
In JavaScript we handle most errors during execution of code with a try catch. A try block is the block of code in which exceptions occur. A catch block catches and handles try block exceptions.
  • Nwose Lotanna
Error Handling in React (react.christmas)
Dec 14, 2018
Let's deal with those pesky errors once and for all
  • Kristofer Selbekk
Handling Errors with Error Boundary (css-tricks.com)
Jun 26, 2018
React 16 came with a lot of goodies, one of which is error boundaries.
  • Kingsley Silas
Component error handling in React using Error Boundaries (blog.pusher.com)
May 23, 2018
In this tutorial, we will handle Component Error in React using Error Boundaries. Before React 16, errors emitted from a component’s rendering proved hard to handle.
React v16.0 (reactjs.org)
Sep 26, 2017
We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size.
Error Handling in React 16 (reactjs.org)
Jul 26, 2017
As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.

Video Guides & Talks

Handling errors with error boundaries (youtube.com)
Apr 30, 2018
When something goes wrong, React turns your whole app blank. You can fix that with error boundaries.
Error Boundaries and Render Props (youtube.com)
Apr 05, 2018
How to implement and test an error boundary in React. Error boundaries allow us to catch errors (and display friendly messages to our users) that occur during render in our components. We'll implement the error boundary using render props and see how to suppress an annoying error message during testing.

Courses & Video Series

Leverage New Features of React 16 (egghead.io)
Sep 27, 2017
React 16 comes with some powerful new features, in this course we'll be exploring each of them.