31. 31
    Create an Error Boundary for a React App
    4m 9s

Create an Error Boundary for a React App

InstructorAndy Van Slaars

Share this video with your friends

Send Tweet

Uncaught errors in React used to leave your app in a corrupted state, since React 16.0, an uncaught exception in your render tree will cause your application to unmount. In this lesson, we’ll create a default error boundary to wrap our application as a starting point for new projects.

Jake Wiesler
Jake Wiesler
~ 6 years ago

The behavior I get here is a bit different. Seems that react-hot-loader is catching the error and showing their own error boundary. If I view the built version (npm run build) in the browser THEN I see DefaultErrorBoundary, just not in development.

Jake Wiesler
Jake Wiesler
~ 6 years ago

It might be that react-hot-loader had some updates regarding error boundaries since this video was published?

Petros Kyriakou
Petros Kyriakou
~ 6 years ago

@Jake -> React hot loader is only for development and i can confirm that this happens as well, but since it won't have any issues in production its no problem. Also you can start dev without hot reload and works fine.

Maybe there is a solution somewhere but I haven't dug into it yet.

Todd Webdev
Todd Webdev
~ 6 years ago

Does the getDerivedStateFromError method have to be specified as static? If so, why?

Andy Van Slaars
Andy Van Slaars(instructor)
~ 6 years ago

Does the getDerivedStateFromError method have to be specified as static? If so, why?

Yes. The React API specifies that it's defined as a static method on your component class - https://reactjs.org/docs/react-component.html#static-getderivedstatefromerror