Server Error
A full-page 500 screen: a phone pulled up into a beam of light with a broken-link icon on its screen, over an oversized 500, plus a heading, a description and an optional action area via children (e.g. a Button to retry). Stays router-agnostic — wire up navigation in the consuming app, not here.
500 page
For a failure on our side, where the reader did nothing wrong and retrying is the only useful action. Give them that action rather than an apology on its own.
Something went wrong
Our server ran into an unexpected error. Try again in a moment.
<ServerError>
<Button onclick={() => {}}>Try again</Button>
</ServerError>Its own words
Name the part that failed when you know it. “Reports are unavailable” tells the reader the rest of the app still works; “Something went wrong” tells them nothing they can use.
Reports are unavailable
The reporting service didn't answer. Orders and payouts are unaffected.
<ServerError
title="Reports are unavailable"
description="The reporting service didn't answer. Orders and payouts are unaffected."
>
<Button variant="secondary" onclick={() => {}}>Retry</Button>
</ServerError>API
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | 'Something went wrong' | Heading rendered under the illustration. |
description | string | 'Our server ran into an unexpected error. Try again in a moment.' | Muted supporting copy rendered under the title. |
children | import('svelte').Snippet | Optional action area rendered below the description (e.g. a Button to retry). | |
class | string | Additional Tailwind classes merged onto the root container. |