Server Error Page
服务错误页
Aliases:500 页面服务器错误服务出错页系统错误页服务崩了服务器开小差页面出错了
What is it
A screen for backend failures. It states that the problem is server-side, offers retry or support, and preserves input to keep trust.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Server errors, database or dependency outages
- Request timeouts or gateway errors
- The failure must be explained without exposing internals
✕ When not to use
- Missing addresses — use a 404 page instead
- Permission gaps — prompt for access or login
- Transient blips that auto-retry can absorb
Variants
Minimal
极简错误
A brief server-error note with a single retry button
With Retry
带重试与倒计时
Auto-retry with a countdown and attempt count
Status and Support
状态与支持
A status summary and support entry for critical flows
Page structure
- 01
Code and heading
A 500 with a neutral heading stating the fault is server-side, not user error.
- 02
Error message
Say what is recovering and whether action is needed, without stacks or internal IDs.
- 03
Retry
A primary retry button, optionally with a countdown and attempt count.
- 04
Status detail
Expandable scope and last-updated info, collapsed by default.
- 05
Support
A status page or support link for when retries do not help.
Implementation
flexgridmin-height: 100vhtext-align: centermax-width: 48chReuse the 404 centered skeleton: min-height 100vh plus flex, copy capped at 48ch. Disable the retry button and show a pending state after click, announcing result changes via aria-live. Return a 5xx status code, log a request ID for support, and never render stack traces on the page.
Related concepts
A fallback screen for missing addresses. It explains the situation plainly and offers home, search or recommended links for a next step.
PagesSimilarA clickable block that triggers one clear action — the most basic interactive element of any interface. Fill, outline and ghost styles rank primary against secondary actions; presses give instant sink-in feedback, and a busy state disables further clicks to prevent double submission.
ComponentsContainsAn inline, status-coloured banner inside the page flow for messages that must be seen: errors, warnings, important notices. It takes layout space instead of overlaying, and stays until the issue is resolved or the user dismisses it.
ComponentsContainsWhen a list or page has no data, don't leave a void — fill it with an illustration, one sentence of explanation and a clear next action. It solves the "blank screen" problem where users can't tell what happened or what to do next, turning dead space into a starting point: onboarding for first use, a way out for fruitless searches.
PatternsUses pattern