Show the error, offer retry

Render error from useChat and retry with regenerate().

AI SDK docsai-sdk.dev
We recommend showing a generic error message to the user, such as “Something went wrong.”
AI SDK UI · Error HandlingRead docs ↗

From ai-sdk and the Error Handling docs.

The request fails

Press Send, then Retry where you can.

error ignoredBad
0 msIdle
{isLoading && <Spinner />}
error + regenerate()Good
0 msIdle
{error && <Retry onClick={regenerate} />}

// app/page.tsx
const { messages, sendMessage, status, error, regenerate } = useChat();

{error && (
  <div role="alert">
    Something went wrong.
    <button type="button" onClick={() => regenerate()}>Retry</button>
  </div>
)}

// app/api/chat/route.ts
const result = streamText({
  model: 'anthropic/claude-sonnet-5',
  messages: await convertToModelMessages(messages),
  maxRetries: 2, // the default: transient provider errors retry on the server
});

Why it matters, pros and cons

Why it matters

When a request fails, status becomes error. A UI that only checks loading never leaves its spinner.

Pros

  • The reader learns it failed and can act.
  • regenerate() resends without retyping.
  • A generic message leaks nothing from the server.

Cons

  • Log the real error with onError, or you lose it.
  • Rate limits need a wait, not an instant retry.
  • Stream errors are masked unless the route forwards them.