FinishKitError Boundary
A React component that catches JavaScript errors in its child tree and renders a fallback UI instead of crashing the whole app.
What is an error boundary?
In React, a runtime error in any component normally unmounts the entire tree, leaving the user staring at a blank white screen. An error boundary is a component (class or hook wrapper) that catches that error and renders a friendly fallback instead.
In Next.js App Router, you place a special file error.tsx inside a route segment to define its error boundary.
Why AI-built apps miss them
Error boundaries feel like "extra work" on the happy path, so AI tools skip them unless explicitly prompted. Result: a single failed fetch or a single malformed prop turns your whole page into a white screen.
78% of apps in the FinishKit scan of 100 vibe-coded apps had zero error boundaries.
Minimum error boundary policy
For a Next.js App Router app:
app/
error.tsx # global error fallback
dashboard/
error.tsx # dashboard-scoped fallback
settings/
error.tsx # settings-scoped fallback
Each file exports a component that accepts { error, reset } props and renders something useful to the user plus a "try again" button.