Error Pages
简介
通用错误页面组件，根据错误码自动选择合适的错误页面。简化错误处理，提供统一的错误页面入口。
案例
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={404} />
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="404" />
</template>
Props
errorCode
HTTP 错误状态码，根据错误码自动选择合适的错误页面。支持 403、404、500、503 等状态码。
500
服务器内部错误
服务器遇到了一个内部错误，无法完成您的请求。
路径：/zh-cn/manuals/components/error-pages/
您可以尝试：
- • 刷新页面
- • 几分钟后重试
- • 检查您的网络连接
- • 联系技术支持
如果问题持续存在，请联系我们的技术支持团队
503
服务不可用
服务器当前无法处理您的请求，请稍后重试。
路径：/zh-cn/manuals/components/error-pages/
在等待期间：
- • 请耐心等待服务恢复
- • 可以刷新页面查看最新状态
- • 关注我们的状态页面获取更新
感谢您的耐心等待，我们正在努力恢复服务
500
服务器内部错误
服务器遇到了一个内部错误，无法完成您的请求。
路径：/
您可以尝试：
- • 刷新页面
- • 几分钟后重试
- • 检查您的网络连接
- • 联系技术支持
如果问题持续存在，请联系我们的技术支持团队
503
服务不可用
服务器当前无法处理您的请求，请稍后重试。
路径：/
在等待期间：
- • 请耐心等待服务恢复
- • 可以刷新页面查看最新状态
- • 关注我们的状态页面获取更新
感谢您的耐心等待，我们正在努力恢复服务
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={403} />
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={404} />
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={500} />
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={503} />
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="403" />
</template>
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="404" />
</template>
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="500" />
</template>
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="503" />
</template>
debugKVs
调试信息键值对，用于开发和调试时显示额外的错误信息。
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/zh-cn/manuals/components/error-pages/
调试信息
reason: 页面不存在
suggestedAction: 请检查URL拼写
timestamp: 2025-11-13T23:23:07.705Z
requestId: REQ_2024_001
如果您认为这是一个错误，请联系网站管理员
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/
调试信息
reason:页面不存在
suggestedAction:请检查URL拼写
timestamp:2025-11-13T23:23:07.774Z
requestId:REQ_2024_001
如果您认为这是一个错误，请联系网站管理员
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage
errorCode={404}
debugKVs={{
reason: '页面不存在',
suggestedAction: '请检查URL拼写',
timestamp: new Date().toISOString(),
requestId: 'REQ_2024_001',
}}
/>
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage
:error-code="404"
:debug-k-vs="{
reason: '页面不存在',
suggestedAction: '请检查URL拼写',
timestamp: new Date().toISOString(),
requestId: 'REQ_2024_001',
}"
/>
</template>
loginUrl
登录页面 URL，用于 403 错误时显示登录链接。
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={404} />
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="404" />
</template>
contactUrl
联系页面 URL，用于 403 错误时显示联系链接。
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={404} />
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="404" />
</template>
supportUrl
技术支持页面 URL，用于 500 错误时显示技术支持链接。
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={404} />
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="404" />
</template>
statusPageUrl
系统状态页面 URL，用于 500 和 503 错误时显示系统状态链接。
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={404} />
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="404" />
</template>
notificationUrl
通知订阅页面 URL，用于 503 错误时显示通知订阅链接。
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage errorCode={404} />
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage :error-code="404" />
</template>
maintenanceMode
是否为维护模式，用于 503 错误。设置为 true 时显示维护模式页面。
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage
errorCode={503}
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',
}}
/>
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage
:error-code="503"
:maintenance-mode="true"
estimated-recovery="2024-12-25 10:00"
status-page-url="https://status.example.com"
:debug-k-vs="{
reason: '系统升级',
startTime: '2024-12-25 08:00',
version: 'v2.1.0',
}"
/>
</template>
estimatedRecovery
预期恢复时间，用于 503 错误时显示预计恢复时间。
---
import { ErrorPage } from '@coffic/cosy-ui';
---
<ErrorPage
errorCode={503}
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',
}}
/>
<script setup lang="ts">
import { ErrorPage } from '@coffic/cosy-ui/vue';
</script>
<template>
<ErrorPage
:error-code="503"
:maintenance-mode="true"
estimated-recovery="2024-12-25 10:00"
status-page-url="https://status.example.com"
:debug-k-vs="{
reason: '系统升级',
startTime: '2024-12-25 08:00',
version: 'v2.1.0',
}"
/>
</template>