Show errors where the data should be

How to do it

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, 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.

Example

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>
  );
}

@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

How to 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.