Wrap UI sections in React Error Boundaries to catch rendering errors gracefully. Without error boundaries, a single component crash (a null reference, a failed API parse) takes down the entire page — showing users a white screen with no way to recover or navigate away.
Why This Matters
Without error boundaries, a single component throwing during render crashes the entire React tree — users see a blank white screen with no error message, no navigation, and no way to recover except refreshing the page. This turns a minor component bug into a complete application failure.
In React, an unhandled error during rendering unmounts the entire component tree. Without error boundaries, a single TypeError: Cannot read property of undefined in one small component crashes the entire page — the user sees a white screen with no indication of what happened and no way to navigate away.
This is catastrophic for user experience. The user cannot:
See an error message explaining what happened
Navigate to another page using the app's navigation
Retry the failed operation
Report the problem
They must manually refresh the browser, losing any unsaved state. If the error is deterministic (e.g., bad data from the API), refreshing triggers the same crash in an infinite loop.
Error boundaries catch rendering errors in their child component tree, display a fallback UI, and keep the rest of the application functional.
The rule
Wrap distinct UI sections (pages, sidebars, widgets, data-dependent components) in error boundaries. Each boundary should display a contextual fallback UI with a retry action. Never let a single component crash take down the entire application.
Bad example
// No error boundaries — one crash kills everythingexport default function DashboardPage() { return ( <div> <Header /> <Sidebar /> <main> <AnalyticsChart /> {/* If this crashes... */} <RecentActivity /> {/* ...everything dies */} <TeamMembers /> </main> </div> );}