---
title: "Show errors where the data should be · Agent Wranglers"
url: https://agentwranglers.se/playbook/app-ui/data-views/error-in-place
updated: 2026-10-20
licence: "All rights reserved"
---

# Show errors where the data should be

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Required
- Chapter: [Data views](https://agentwranglers.se/playbook/app-ui/data-views)
- Rule: When data fails to load, show the error inside the view that failed, with a plain cause, a retry button and a reference. Keep any older data visible and marked as out of date.
- How: Say what failed in the user's words, such as "We couldn't load your orders". Add a "Try again" button that repeats the same request. Show the reference from the server's [problem details](https://agentwranglers.se/playbook/api-design/errors/problem-details), so support can find the log. If the view already had data, keep it and show when it was last updated. Never replace the whole screen for one failed panel.
- Check: A component test fails the request with a 503. The view shows the message, a working "Try again" button and the reference. Other panels on the screen still render.

Example:

```tsx
function LoadError({ reference, onRetry, lastUpdated }: { reference: string; onRetry: () => void; lastUpdated?: Date }) {
  return (
    <div className="load-error">
      <p>We couldn't load your orders.{lastUpdated && <> Showing orders from <FormattedTime value={lastUpdated} />.</>}</p>
      <Button onClick={onRetry}>Try again</Button>
      <p className="load-error-reference">Reference {reference}</p>
    </div>
  );
}
```

```python
@app.errorhandler(ServiceUnavailable)
def panel_unavailable(error):
    log.warning("panel.load_failed", reference=error.reference, panel=request.path)
    return render_template("panels/load_error.html", reference=error.reference, retry_url=request.full_path), 503
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers app interface playbook: https://agentwranglers.se/playbook/app-ui/data-views/error-in-place`.

- Previous: [Tell an empty start from an empty search](https://agentwranglers.se/playbook/app-ui/data-views/empty-states)
- Next: [Show what loaded when one part fails](https://agentwranglers.se/playbook/app-ui/data-views/partial-results)
- [Data views](https://agentwranglers.se/playbook/app-ui/data-views)