Error Pages
简介
错误页面组件集合，提供常见HTTP错误状态码的用户友好页面。通过统一的设计风格和清晰的信息传达，帮助用户理解错误原因并提供解决方案。
基础用法
基础的403禁止访问错误页面示例。
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
如果您认为这是一个错误，请联系网站管理员
500
服务器内部错误
服务器遇到了一个内部错误，无法完成您的请求。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
您可以尝试：
- • 刷新页面
- • 几分钟后重试
- • 检查您的网络连接
- • 联系技术支持
如果问题持续存在，请联系我们的技术支持团队
---
/**
* @component Error403.Basic
*
* @description
* 基础的403禁止访问错误页面示例。
*/
import { Error403 } from '@coffic/cosy-ui';
---
<Error403 />
基础的404错误页面示例，展示最简单的404错误页面用法。
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
如果您认为这是一个错误，请联系网站管理员
500
服务器内部错误
服务器遇到了一个内部错误，无法完成您的请求。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
您可以尝试：
- • 刷新页面
- • 几分钟后重试
- • 检查您的网络连接
- • 联系技术支持
如果问题持续存在，请联系我们的技术支持团队
---
/**
* @component Error404.Basic
*
* @description
* 基础的404错误页面示例，展示最简单的404错误页面用法。
*/
import { Error404 } from '@coffic/cosy-ui';
---
<Error404 />
基础的500服务器内部错误页面示例。
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
如果您认为这是一个错误，请联系网站管理员
500
服务器内部错误
服务器遇到了一个内部错误，无法完成您的请求。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
您可以尝试：
- • 刷新页面
- • 几分钟后重试
- • 检查您的网络连接
- • 联系技术支持
如果问题持续存在，请联系我们的技术支持团队
---
/**
* @component Error500.Basic
*
* @description
* 基础的500服务器内部错误页面示例。
*/
import { Error500 } from '@coffic/cosy-ui';
---
<Error500 />
503服务不可用错误页面的维护模式示例。
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
如果您认为这是一个错误，请联系网站管理员
500
服务器内部错误
服务器遇到了一个内部错误，无法完成您的请求。
路径：/cosy-ui/zh-cn/courses/components/error-pages/
您可以尝试：
- • 刷新页面
- • 几分钟后重试
- • 检查您的网络连接
- • 联系技术支持
如果问题持续存在，请联系我们的技术支持团队
---
/**
* @component Error503.Maintenance
*
* @description
* 503服务不可用错误页面的维护模式示例，展示系统维护时的页面。
*/
import { Error503 } from '@coffic/cosy-ui';
---
<Error503
maintenanceMode={true}
estimatedRecovery="2024-12-25 10:00"
statusPageUrl="https://status.example.com"
debugKVs={{
reason: '系统升级',
startTime: '2024-12-25 08:00',
version: 'v2.1.0',
}}
/>