Can you write a React error boundary as a function component? Not with React’s built-in APIs: there is no function-component equivalent for getDerivedStateFromError or componentDidCatch. Use a small class boundary or the react-error-boundary package React names as an alternative. Your application’s ordinary UI, including the children and fallback, can still use function components and hooks.
Build a reusable class boundary
A boundary catches render errors from descendants and switches to fallback UI. Keep the state update in the static lifecycle method; use componentDidCatch for reporting side effects. React says getDerivedStateFromError should be pure, and recommends it rather than calling setState in componentDidCatch to select the fallback.
As an Amazon Associate I earn from qualifying purchases.
import { Component } from 'react';
class ErrorBoundary extends Component {
state = { hasError: false };
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, info) {
reportErrorToService(error, info.componentStack);
}
render() {
if (this.state.hasError) {
return this.props.fallback;
}
return this.props.children;
}
}
function ProductPanel() {
return <section>Product details</section>;
}
function App() {
return (
<ErrorBoundary fallback={<p>This section could not be loaded.</p>}>
<ProductPanel />
</ErrorBoundary>
);
}Here, ProductPanel is a function component; only the reusable boundary is a class. Replace reportErrorToService with your own reporting function. The second argument to componentDidCatch includes componentStack, which can help identify where the error occurred. React warns that a thrown value is not guaranteed to be an Error instance, so logging should not assume every value has properties such as message or stack.
The snippet leaves the boundary in its failed state. If your UI needs recovery, define a deliberate reset behavior—for example, resetting when a user retries or when a relevant route or item changes. A boundary does not automatically know which application-level action makes it safe to try rendering the subtree again.
#1 Best Overall
Choose between a class and a package
| Option | What it provides | What your team still decides |
|---|---|---|
| Reusable class boundary | Uses React’s documented boundary lifecycle methods. | Fallback UI, reset behavior, and error reporting. |
react-error-boundary |
A package alternative named in React’s documentation. | Whether its API suits your fallback and reset needs, and whether it fits your project’s dependency policy. The current package version, maintenance status, and license are not established here. |
React’s Component reference documents the lifecycle approach and points to the package option. The available evidence does not establish a performance, bundle-size, support, or commercial-terms advantage for either path.
Know what an error boundary catches
A boundary handles errors thrown while React renders its descendant components, including errors deep in the child tree. It does not catch every failure associated with that UI.
| Situation | Does the boundary catch it? |
|---|---|
| Error during descendant rendering | Yes, including errors from distant descendants. |
| Error in an event handler | No. Handle it in the event logic. |
Error in a typical asynchronous callback, such as setTimeout or requestAnimationFrame |
No. |
| Error thrown by the boundary itself | No. A higher boundary would be needed to catch an error from a lower boundary. |
| Server-rendering error | No—not as a general error-boundary catch. See the server-rendering distinction below. |
Error inside the function passed to startTransition |
React documents this as a case an error boundary can catch; it does not mean all asynchronous errors are caught. |
| Thrown form action | React documents that it can show the nearest boundary’s fallback. |
The documented cases for transition and form-action errors appear in React’s references for useTransition and <form>. Treat these as specific behaviors, not a promise that a boundary catches arbitrary rejected promises or callback failures.
Recommended Free Tools
Why a parent try/catch is not a substitute
Wrapping JSX in a function component with JavaScript try/catch does not catch an error thrown later as React renders a child. React performs that rendering work; the parent’s synchronous try/catch does not surround it. React’s error-boundaries lint guidance shows this pattern as invalid and recommends an error boundary instead.
Server rendering and Suspense
Do not interpret a client error boundary as a general server-rendering error handler. React documents a separate streaming-render behavior for Suspense: if a component throws on the server, the nearest Suspense fallback can be used for the server output; the client then retries, and an error boundary is shown if the component also errors on the client. That is Suspense’s server-rendering behavior, not proof that error boundaries catch server errors. See React’s Suspense reference.
Place boundaries around useful recovery experiences
Choose boundaries based on what the user can still do when a region fails. A page-level boundary can replace a whole route; a boundary around a panel or independently useful item can keep the rest of the screen available. Wrapping every tiny visual component usually adds complexity without creating a more meaningful recovery experience. React’s placement guidance is in the Component reference.
- Use a broader boundary when the page cannot remain useful without the failed subtree.
- Use a narrower boundary when an independent region can fail while surrounding content remains usable.
- Give the fallback an appropriate next step, such as retrying or navigating elsewhere, and implement the reset behavior that makes that action meaningful.
React 19 reporting changes
React 19 changed how render errors are reported: uncaught errors are reported to window.reportError, while errors caught by an error boundary are reported to console.error. createRoot and hydrateRoot also provide onUncaughtError and onCaughtError callbacks for custom reporting. These changes were documented in the React 19 upgrade guide published April 25, 2024; review telemetry integrations that relied on errors being re-thrown. See the React 19 Upgrade Guide.
The React versions page identified React 19.3 as the latest version on October 7, 2026. Because that pointer can change, check the React Versions page when version-specific details matter.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
