Key Concepts

Review core concepts you need to learn to master this subject

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
React Error Boundaries
Lesson 1 of 1
  1. 1
    At 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…
  2. 2
    As 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…
  3. 3
    At 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 …
  4. 4
    Rendering 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…
  5. 5
    So 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…
  6. 6
    Typically 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…
  7. 7
    We 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 …
  8. 8
    In 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…
  9. 9
    Before 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…
  10. 10
    Well done! You’ve successfully created your own ErrorBoundary components and you’ve used the popular react-error-boundary package to keep your application running in the face of errors. Error bound…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo