服务错误页
Server Error Page
别名:500 页面服务器错误服务出错页系统错误页服务崩了服务器开小差页面出错了
这是什么
在后端异常、请求无法完成时展示的页面：不暴露内部细节，用中性语气说明是服务端问题，给出稍后重试或联系支持的路径，并尽量保留用户已输入的内容。它承担故障期间的信任维护。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 服务端异常、数据库或依赖不可用
- 请求超时或网关错误
- 需要在不暴露细节的前提下说明故障
✕ 不适用场景
- 页面地址不存在（应使用 404 页面）
- 用户无权限访问（应提示权限或登录）
- 可自动重试立即恢复的瞬时抖动
常见形式
极简错误
Minimal
只说发生了服务错误，给一个重试按钮
带重试与倒计时
With Retry
自动重试并显示倒计时与尝试次数
状态与支持
Status and Support
展示故障状态摘要与支持入口，适合关键业务
页面结构
- 01
状态码与标题
用 500 与中性标题说明是服务端问题，而非用户操作错误。
- 02
错误说明
说清正在恢复、是否需要用户操作，不暴露堆栈或内部 ID。
- 03
重试操作
主按钮重试请求，可带倒计时与尝试次数。
- 04
故障状态
展开可看影响范围与更新时间，默认收起。
- 05
支持入口
提供状态页或联系支持，供重试无果时求助。
实现要点
flexgridmin-height: 100vhtext-align: centermax-width: 48ch与 404 共用一套居中骨架：min-height 100vh 加 flex 居中，内容限制在 48ch。重试按钮点击后禁用并显示进行中状态， 用 aria-live 播报结果变化。服务端返回 5xx 状态码；日志记录请求 ID 供支持排查，但不要把堆栈渲染到页面上。
相关概念
在用户请求的地址不存在时展示的兜底页面：用一句人话说明发生了什么，提供返回首页、搜索或推荐入口，把一次失败访问转成继续浏览的机会。它不解决问题本身，但决定用户是离开还是留下。
页面相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件包含组件嵌在页面流内、带状态色底色的横条，用于必须被看见的消息：错误、警告、重要通知。 它占据文档流而不是覆盖内容，通常常驻直到问题被处理或用户手动关闭。
组件包含组件当列表或页面没有数据时，不留一片空白，而是用插图、一句说明和一个明确的下一步操作填充。 它解决的是"用户面对空白不知道发生了什么、也不知道该做什么"的问题—— 把空档变成引导起点：首次使用教用户开始，搜索无结果给出路。
交互模式使用模式