Error boundaries have meaningful fallback UI

An error boundary that returns null or an unstyled error dump gives users a white screen with no explanation and no recovery path, which is functionally identical to the crash it was meant to contain. The fallback is the last line of UX defense when a render throws, and a null return hides the reset() hook that would let the user recover without a full reload. WCAG 2.2 SC 3.3.1 requires that error identification be perceivable, which a blank fallback fails by definition.

Replace null returns and raw error.message dumps with a fallback that names the failure in plain language and wires a recovery button to the reset() prop. Keep segment-level boundaries narrow so one broken section does not replace the whole viewport. Edit app/error.tsx or app/global-error.tsx:

'use client'
export default function Error({ reset }: { error: Error; reset: () => void }) {
  return (
    <div className="flex flex-col items-center gap-4 p-8">
      <h1>Something went wrong</h1>
      <button onClick={() => reset()}>Try again</button>
      <a href="/">Go home</a>
    </div>
  )
}