Error Pages
Introduction
Generic error page component that automatically selects the appropriate error page based on the error code. Simplifies error handling and provides a unified error page entry point.
Examples
---
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 error status code. Automatically selects the appropriate error page based on the error code. Supports status codes such as 403, 404, 500, and 503.
500
服务器内部错误
服务器遇到了一个内部错误，无法完成您的请求。
路径：/en/manuals/components/error-pages/
您可以尝试：
- • 刷新页面
- • 几分钟后重试
- • 检查您的网络连接
- • 联系技术支持
如果问题持续存在，请联系我们的技术支持团队
503
服务不可用
服务器当前无法处理您的请求，请稍后重试。
路径：/en/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
Debug information key-value pairs for displaying additional error information during development and debugging.
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/en/manuals/components/error-pages/
调试信息
如果您认为这是一个错误，请联系网站管理员
404
页面未找到
抱歉，您要找的页面不存在或已被移动。
路径：/
调试信息
如果您认为这是一个错误，请联系网站管理员
---
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
Login page URL for displaying a login link in 403 errors.
---
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
Contact page URL for displaying a contact link in 403 errors.
---
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
Support page URL for displaying a support link in 500 errors.
---
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
System status page URL for displaying a system status link in 500 and 503 errors.
---
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
Notification subscription page URL for displaying a notification subscription link in 503 errors.
---
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
Whether it is maintenance mode, used for 503 errors. When set to true, displays the maintenance mode page.
---
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
Estimated recovery time, used for displaying the estimated recovery time in 503 errors.
---
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>