Retry Affordances: Recovering from Errors Without a Page Refresh

Released in v0.1.93

Overview

When a data fetch fails — due to a network blip, a timeout, or a transient backend error — the application now gives you a clear way to recover. Every error state across the platform includes a "Try again" button that retries the failed operation without requiring a manual browser refresh.

What this fixes

Previously, if any list page (people, matches, billing, or sanctions) failed to load its data, the page would silently display an empty or broken state. There was no visible indication that something had gone wrong, and no obvious way to recover other than refreshing the browser — a mechanism most users would not think to try.

How it works

List page errors

On the People, Matches, Billing, and Sanctions list pages, if the data fetch fails the error state now renders a "Try again" button. Clicking it re-invokes the data fetch function for that page directly — no full page reload is triggered and no navigation state is lost.

Root error boundary

The application now includes a root error.tsx boundary that catches unhandled errors at the top of the component tree. This uses the Next.js reset() prop:

// Simplified example of the pattern used
export default function Error({
  error,
  reset,
}: {
  error: Error;
  reset: () => void;
}) {
  return (
    <div>
      <p>Something went wrong.</p>
      <button onClick={reset}>Try again</button>
    </div>
  );
}

Calling reset() attempts to re-render the failed React subtree without a full navigation, preserving application state where possible.

Affected pages

• People list
• Matches list
• Billing list
• Sanctions list
• Root application error boundary

Related fixes

This change is part of a broader error UX improvement track alongside ERR-14 (error states on list pages) and ERR-01 (root error boundary). ERR-15 specifically ensures that every error state introduced by those fixes includes a usable retry control.