Summary
An error boundary catches thrown values during rendering, lifecycle methods, and child constructors — then shows a fallback instead of unmounting the whole tree. Placement granularity determines blast radius: per-route boundaries limit a crash to one page, per-widget boundaries keep the rest of the UI alive. Next.js App Router formalises this with `error.tsx` and `global-error.tsx`.
Jump to the interview angleError boundary
A React component that catches errors thrown by its subtree during rendering, lifecycle methods, and constructors — then renders a fallback UI instead of propagating the crash upward. Without one, any unhandled render error unmounts the entire React tree from the root. Boundaries contain the blast to a subtree, keeping the rest of the page functional. The react-error-boundary package wraps the class-component API in a declarative <ErrorBoundary fallback={…}> that works inside function components.
What error boundaries do NOT catch
- Event handlers — errors inside onClick/onChange need try/catch; they don't propagate through React's render path.
- Async code — setTimeout callbacks and Promise rejections happen outside the render cycle; use `useErrorBoundary` to rethrow them.
- SSR — boundaries only activate in the browser; server render errors go to the server framework.
- The boundary itself — an error thrown in the boundary's own render escapes to the next boundary up the tree.
Per-route boundary with Next.js App Router `error.tsx`
Next.js generates a client-side error boundary from any error.tsx file in the app/ directory. The file receives error and reset as props.
"use client"; // error.tsx must be a Client Component
import { useEffect } from "react";
interface Props {
error: Error & { digest?: string };
reset: () => void;
}
export default function DashboardError({ error, reset }: Props) {
useEffect(() => {
// Send to your error-reporting service
console.error("[dashboard] render error", error.digest, error);
}, [error]);
return (
<div role="alert">
<p>The dashboard failed to load.</p>
<button onClick={reset}>Try again</button>
</div>
);
}reset() re-renders the route segment from scratch. error.digest is a server-generated hash that correlates the client error with the server log entry.
Per-widget boundary with `react-error-boundary` and reset keys
Use resetKeys to automatically retry when a dependency (e.g. a query key) changes after the user takes action.
import { ErrorBoundary } from "react-error-boundary";
function PanelFallback({
error,
resetErrorBoundary,
}: {
error: Error;
resetErrorBoundary: () => void;
}) {
return (
<aside role="alert">
<p>Recommendations unavailable.</p>
<button onClick={resetErrorBoundary}>Retry</button>
</aside>
);
}
export function RecommendationsPanel({ userId }: { userId: string }) {
return (
<ErrorBoundary
FallbackComponent={PanelFallback}
resetKeys={[userId]} // resets boundary when userId changes
onError={(err, info) => {
reportError(err, info.componentStack);
}}
>
<RecommendationsList userId={userId} />
</ErrorBoundary>
);
}resetKeys={[userId]} clears the error state on navigation to a new user profile — no manual reset button needed in that scenario.
SSR + `global-error.tsx` must own the document shell
Next.js global-error.tsx replaces the root layout when it fires, so the layout's <html> and <body> are gone. The global-error.tsx file must render its own <html> and <body> or the page will be malformed. This catches errors in the root layout itself — errors inside route segments go to the nearest error.tsx instead.
Interview angle
Interviewers check whether you understand what boundaries don't catch (async errors, event handlers, the boundary itself) and how you wire reset + retry.
Soundbite: "An error boundary is a blast-radius control — place it as close to the risky subtree as possible so a widget crash doesn't take down a working route."
Key terms
- error boundary
- A React class component implementing `getDerivedStateFromError` or `componentDidCatch` that catches render-phase errors in its subtree.
- react-error-boundary
- Third-party package wrapping the class-based API into `<ErrorBoundary>` and `useErrorBoundary` hook for function component authoring.
- resetKeys
- Props on `react-error-boundary`'s `<ErrorBoundary>` that reset the error state when their values change, enabling automatic retry.
- error.tsx
- Next.js App Router file that becomes the error boundary for its route segment, receiving `error` and `reset` props.
- global-error.tsx
- Next.js App Router file at the root that catches errors in the root layout; must include `<html>` and `<body>` tags.