Advanced React: Error Boundaries
Create error boundaries that protect areas of your application from runtime errors.
Start
Key Concepts
Review core concepts you need to learn to master this subject
What Is an Error Boundary?
When to Use Error Boundaries?
How Do Error Boundaries Render a Fallback UI?
Why Are Error Boundaries Class Components?
How Does the <ErrorBoundary> Component From react-error-boundary Log Errors?
What Is the react-error-boundary Package?
How Does the <ErrorBoundary> Component from react-error-boundary Render a Fallback?
Should I Create My Own <ErrorBoundary> or Use an Existing One?
What Is an Error Boundary?
What Is an Error Boundary?
<ErrorBoundary Fallback={FallbackUI}>
<ProtectedComponent />
</ErrorBoundary>Error boundaries are React components that wrap sections of a React application, catching runtime errors anywhere in their child component tree. They have three primary features:
- Displaying a backup user-interface (a “fallback UI”)
- Logging errors
- Allowing the broken component to recover
- 1At this point in your learning journey, you’ve likely come across the try/catch block. As the names of the keywords suggest, try blocks allow programmers to attempt to execute some code. If a runti…
- 2As we learned in the introduction, error boundaries are React components that do a few key things: 1. Wrap around other components 2. Render their children if no errors are detected 3. Render a fa…
- 3At this point, our ErrorBoundary component isn’t truly an error boundary. It still is letting errors through that cause the entire application to break. To make our error boundary actually protect …
- 4Rendering a fallback UI is a valuable upgrade to the user experience. However, when an error occurs, it’s important for developers (and those brave users who submit bug reports) to be able to see t…
- 5So far, we’ve been able to capture errors, log them to the console, and show a fallback UI. This makes it possible for the rest of our application to continue running - but how do we recover the br…
- 6Typically error boundary components are created once and then used throughout the entire application where needed. Once the error boundary component has been set up, there isn’t much need to modify…
- 7We are now able to replace our custom ErrorBoundary with the ErrorBoundary component from react-error-boundary — but there are some features that we lost. Specifically, we don’t have error logging …
- 8In the last exercise, we practiced rendering a fallback using the FallbackComponent prop assigned to an component. The component received two props itself: error and resetErrorBoundary: functi…
- 9Before we wrap up, we should discuss when and where to use error boundaries to maximize their potential impact, as well as their limitations. #### Keep It Focused Error boundaries isolate a compo…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory