Building Fallback UI with react-error-boundary0%
Reporting Client Errors to Monitoring Services

Building Fallback UI with react-error-boundary

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Building Fallback UI with react-error-boundary

1. Modernizing Error Boundaries with react-error-boundary

While writing custom class-based Error Boundaries is educational, maintaining class components in an otherwise 100% functional modern React codebase creates friction.

The open-source community created react-error-boundary, the industry-standard package maintained by Brian Vaughn (former React core team member).

react-error-boundary provides:

  • A declarative <ErrorBoundary> component with rich functional fallback support.
  • The useErrorBoundary() hook for triggering and resetting boundaries from functional components.
  • Direct support for resetting state when dependencies or route parameters change.

2. Installation

Bash / Terminal
npm install react-error-boundary

3. Creating a Reusable Fallback Component

A fallback component receives error and resetErrorBoundary as props:

JSX
// src/components/ErrorFallback.jsx
import React from 'react';
 
export default function ErrorFallback({ error, resetErrorBoundary }) {
return (
<div className="error-fallback-panel" role="alert">
<div className="error-icon">⚠️</div>
<h3>Component Display Error</h3>
<pre className="error-message">{error.message}</pre>
<div className="button-group">
<button onClick={resetErrorBoundary} className="btn-primary">
Try Again
</button>
<button onClick={() => window.location.reload()} className="btn-outline">
Reload Application
</button>
</div>
</div>
);
}

4. Wrapping Components with Reset Keys

A powerful feature of react-error-boundary is resetKeys.

If an error occurred because a specific course or ID was invalid, when the user navigates to a different course, the boundary automatically resets itself without requiring a page refresh!

JSX
import React from 'react';
import { ErrorBoundary } from 'react-error-boundary';
import ErrorFallback from './components/ErrorFallback';
import CoursePlayer from './components/CoursePlayer';
 
export default function CourseScreen({ currentCourseId }) {
return (
<div className="course-screen">
<h2>Interactive Learning Studio</h2>
 
<ErrorBoundary
FallbackComponent={ErrorFallback}
// Auto-reset boundary whenever currentCourseId changes!
resetKeys={[currentCourseId]}
onError={(error, info) => {
console.error('Logged to monitoring service:', error, info);
}}
>
<CoursePlayer courseId={currentCourseId} />
</ErrorBoundary>
</div>
);
}

5. Triggering Boundaries from Async Code with showBoundary()

Normally, Error Boundaries cannot catch errors inside async functions or event handlers.

react-error-boundary provides the useErrorBoundary() hook, whose showBoundary(err) method allows you to explicitly forward asynchronous errors into the nearest Error Boundary:

JSX
import { useErrorBoundary } from 'react-error-boundary';
 
export default function AsyncWidget() {
const { showBoundary } = useErrorBoundary();
 
const handleFetch = async () => {
try {
await brokenNetworkCall();
} catch (err) {
// Forwards async error directly to the nearest ErrorBoundary!
showBoundary(err);
}
};
 
return <button onClick={handleFetch}>Trigger Async Action</button>;
}
Interactive Quiz

Practice Quiz

Question 1
What popular library is widely used to provide functional error boundary support in modern React applications?
Question 2
What two essential props are provided to a custom fallback component by <ErrorBoundary FallbackComponent={...}>?
Question 3
What is the purpose of the resetKeys prop in react-error-boundary?
Question 4
How can an asynchronous error caught inside a try...catch block in an event handler be sent to an Error Boundary?
Question 5
What ARIA role should be added to an error fallback container to inform assistive technologies of an alert?
Next Lesson

Reporting Client Errors to Monitoring Services

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
React Error Boundaries and Lifecycle CatchingReporting Client Errors to Monitoring Services

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext