Without a root-level error boundary, one unhandled render exception — a null field on an API response, a missing key in a hydration payload, a third-party script that mutates the DOM — takes the entire page to a blank white screen or the framework's raw stack-trace error page. Users can't navigate, can't retry, and often can't even reach a support link. AI coding tools generate React and Next.js apps without app/error.tsx by default because the happy path renders fine and the boundary file isn't required for the app to compile. The recovery experience for users is the whole product during an outage; shipping without a boundary means any single bad render crashes the session with no recovery path short of a manual browser refresh.
High because a single unhandled exception anywhere in the render tree takes the entire UI down to an unrecoverable blank or framework-default page, with no retry affordance for the user.
Create app/error.tsx:
'use client'
export default function Error({ error, reset }) {
return <div>Something went wrong. <button onClick={reset}>Retry</button></div>
}
Deeper remediation guidance and cross-reference coverage for this check lives in the saas-error-handling Pro audit — run that after applying this fix for a more exhaustive pass on the same topic.
project-snapshot.error-handling.has-error-boundaryhighapp/error.tsx (App Router) or pages/_error.tsx (Pages Router). For React: check for an ErrorBoundary component imported into the root layout. For other frameworks: check the framework's equivalent global error handler.throw error — that propagates the error upward instead of catching it."Error boundary at {path}; rendering fallback UI on uncaught errors.""No app/error.tsx or pages/_error.tsx found; uncaught errors will show framework default error UI".saas-error-handling audit.app/error.tsx:
'use client'
export default function Error({ error, reset }) {
return <div>Something went wrong. <button onClick={reset}>Retry</button></div>
}