Patterns 9 patterns
Resilience
Patterns for handling errors and loading states. A resilient application keeps working when something goes wrong: it tells the user what happened and recovers when it can. These patterns help you build interfaces that keep working when networks are slow or APIs fail. Informed by The Progressive Enhancement Mindset.
- Async Boundary An async boundary shows one fallback UI while a group of asynchronous components and their data load, and then shows the group all at once.
- Error Boundary An error boundary catches JavaScript errors in part of your component tree and shows a fallback UI, so the rest of the app keeps working.
- Error Handling How to catch errors from failed API requests and show users a clear message about what went wrong and what they can do next.
- Loading State A loading state shows users that an asynchronous operation is still in progress, so they know the app is working.
- Response Regeneration Users can re-run a prompt for a different response, and the app keeps each earlier attempt as a variant they can switch back to.
- Retry How to retry failed requests automatically with exponential backoff, so users don't see errors for temporary network problems.
- Stop Generation A stop button aborts a streaming model response with an AbortController, keeps the partial text, and stops the work on the server too.
- Streaming Response A streaming response shows a language model's reply token by token as it arrives, so users don't have to wait for the whole reply to finish.
- Thinking Indicator A thinking indicator fills the pause between sending a prompt and the first token, and screen readers announce it until streamed text replaces it.