Fallback components are user-friendly

A fallback that displays a raw stack trace violates CWE-209 (information exposure through error messages) and erodes user trust irreparably. Worse, a fallback with no retry or navigation option leaves users stranded — they cannot recover without a hard reload, and even then they may lose unsaved state. ISO 25010 reliability.recoverability requires the system to restore a defined state after failure; a blank or cryptic fallback achieves neither. User churn after an unrecoverable error is measurably higher than after a friendly one.

Replace bare error text with a fallback that includes a plain-language message, a retry action, and a navigation escape hatch. Never surface error.message or stack traces directly in the UI.

// components/error-fallback.tsx
export function ErrorFallback({
  reset,
}: {
  reset: () => void
}) {
  return (
    <div style={{ padding: '2rem', textAlign: 'center' }}>
      <h2>We hit a snag</h2>
      <p>Something unexpected happened. Your data is safe.</p>
      <button onClick={reset}>Try again</button>
      <a href="/">Go to home</a>
    </div>
  )
}

Log error.message server-side via your structured logger; show only a human-readable string in the UI.