Status
StatusPage is a page for HTTP errors (404, 500, 503…), being offline and new versions; ErrorBoundary shows it when its children fail.
status picks the built-in title, description and code (from messages.statusPage): 400, 401, 403, 404, 408, 410, 429, 500, 502, 503, 504, "offline", "update". The code is shown large so it is recognised at a glance, with a readable "Error 404" line; the title is an h1 (or headingAs="h2" inside a region). It never navigates on its own: pass your router's buttons / links to primaryAction and secondaryAction; use children for suggestions or a search box. errorId shows a selectable error ID with a copy button; autoFocus moves focus to the title after a client-side navigation. ErrorBoundary catches render errors in its children: a file that fails to load after a deploy (a tab opened earlier) shows "A new version is available" + Reload, any other error shows 500 + Try again; resetKeys (the path, say) clears the error on navigation. The docs use this component for their own 404 page.Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { StatusPage, ErrorBoundary, isChunkLoadError, statusPageCopy, type StatusPageStatus } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Error 500
Something went wrong on our side
It's not you. Try again in a few minutes; if it keeps failing, send us the error ID.
Error ID:
7f3a-91c2Statuses
Built-in copy per status; 500 with a copyable error ID.
Revenue is up 12% this quarter.
ErrorBoundary
Press to make the child fail while rendering: the default 500 page takes its place, and Try again renders the child again.
Usage
Do
- Say what happened and what to do next; always offer at least one way out (Try again, Home, Search).
- Wrap the route content in an ErrorBoundary with the path in
resetKeys, so an error on one page doesn't blank the whole app. - Send errors to your error tracker in
onErrorand show the same ID througherrorId.
Don't
- Don't show stack traces or technical messages to people.
- Don't use the number alone as the content; always have a written title.
- Don't reload the page automatically without saying so first.
Props
| Prop · Type | Default | Description |
|---|---|---|
| status400 | 401 | 403 | 404 | 408 | 410 | 429 | 500 | 502 | 503 | 504 | "offline" | "update" | Default: — | Picks the built-in title, description and code. |
| codeReactNode | null | Default: code of status | Code shown large; null hides it. |
| title / descriptionReactNode | Default: from status | Overrides the built-in copy; description={null} hides it. |
| primaryAction / secondaryActionReactNode | Default: — | Action buttons / links (Button, your router's Link). |
| illustrationReactNode | Default: — | Illustration in place of the built-in code / icon. |
| errorIdstring | Default: — | Error ID to send to support: selectable text + copy button. |
| headingAs"h1" | "h2" | Default: "h1" | Element of the title. |
| autoFocusboolean | Default: false | Moves focus to the title when shown (client-side navigation). |
| fullscreenboolean | Default: false | At least as tall as the screen. |
| childrenReactNode | Default: — | Extra content under the description: page suggestions, a search box. |
| refRef<HTMLDivElement> | Default: — | Points to the outer element. |
| ErrorBoundary | Default: — | Replaces the default page (new version + Reload, or 500 + Try again). |
| ErrorBoundary | Default: — | Called when an error is caught. |
| ErrorBoundary | Default: — | When a value changes, the error clears and the children render again. |
| ErrorBoundary | Default: — | Passed to the default page (for example fullscreen when wrapping the whole app). |
| isChunkLoadError | Default: — | A JS file failed to load after a deploy; reloading the page is enough. |
| statusPageCopy | Default: — | Built-in copy of a status, for a <title> for example. |
Messages
Text built into the component: labels, aria-labels, screen reader announcements.
English by default. Change it with the messages prop of YugenProvider, by the namespace below; messagesVi has the Vietnamese set. See Interface language.
messages.statusPage
| Key · Type | Default (English) | messagesVi |
|---|---|---|
| eyebrow(code: number) => string Dòng nhỏ trên tiêu đề, đọc được mã trạng thái. | Default (English)(code) => `Error ${code}` | messagesVi(code) => `Lỗi ${code}` |
| badRequestTitlestring Tiêu đề và mô tả mặc định theo | Default (English)"Bad request" | messagesVi"Yêu cầu không hợp lệ" |
| badRequestDescriptionstring | Default (English)"The link or the data sent isn't in the expected form. Go back and try again." | messagesVi"Đường dẫn hoặc dữ liệu gửi lên không đúng dạng. Quay lại trang trước rồi thử lần nữa." |
| unauthorizedTitlestring | Default (English)"Sign in to continue" | messagesVi"Cần đăng nhập" |
| unauthorizedDescriptionstring | Default (English)"This page is for signed-in accounts." | messagesVi"Trang này chỉ dành cho tài khoản đã đăng nhập." |
| forbiddenTitlestring | Default (English)"No access" | messagesVi"Không có quyền truy cập" |
| forbiddenDescriptionstring | Default (English)"The account you're using can't view this page. Ask an admin for access or switch accounts." | messagesVi"Tài khoản bạn đang dùng không xem được trang này. Xin quyền từ quản trị viên hoặc đổi sang tài khoản khác." |
| notFoundTitlestring | Default (English)"Page not found" | messagesVi"Không tìm thấy trang" |
| notFoundDescriptionstring | Default (English)"The link may be mistyped, or the page has moved." | messagesVi"Đường dẫn có thể bị gõ sai, hoặc trang đã đổi chỗ." |
| goneTitlestring | Default (English)"This page was removed" | messagesVi"Trang này đã bị gỡ" |
| goneDescriptionstring | Default (English)"This content is no longer available." | messagesVi"Nội dung này không còn nữa." |
| tooManyRequestsTitlestring | Default (English)"Slow down a little" | messagesVi"Bạn thao tác hơi nhanh" |
| tooManyRequestsDescriptionstring | Default (English)"Wait a moment, then try again." | messagesVi"Đợi một chút rồi thử lại." |
| serverErrorTitlestring | Default (English)"Something went wrong on our side" | messagesVi"Máy chủ gặp lỗi" |
| serverErrorDescriptionstring | Default (English)"It's not you. Try again in a few minutes; if it keeps failing, send us the error ID." | messagesVi"Lỗi không do bạn. Thử lại sau ít phút; nếu vẫn lỗi, gửi mã lỗi cho chúng tôi." |
| unavailableTitlestring | Default (English)"Down for maintenance" | messagesVi"Đang bảo trì" |
| unavailableDescriptionstring | Default (English)"We're upgrading or under heavy load. Check back in a few minutes." | messagesVi"Hệ thống đang được nâng cấp hoặc tạm quá tải. Quay lại sau ít phút." |
| timeoutTitlestring | Default (English)"The server took too long" | messagesVi"Máy chủ phản hồi quá lâu" |
| timeoutDescriptionstring | Default (English)"The request timed out. The network may be slow, or the server is busy." | messagesVi"Yêu cầu đã hết thời gian chờ. Mạng có thể đang chậm, hoặc máy chủ đang bận." |
| offlineTitlestring | Default (English)"You're offline" | messagesVi"Không có kết nối mạng" |
| offlineDescriptionstring | Default (English)"Check your Wi-Fi or mobile data, then try again." | messagesVi"Kiểm tra Wi-Fi hoặc dữ liệu di động rồi thử lại." |
| updateTitlestring | Default (English)"A new version is available" | messagesVi"Đã có phiên bản mới" |
| updateDescriptionstring | Default (English)"This site was just updated, so the part you have open is no longer on the server. Reload to get the new version." | messagesVi"Trang vừa được cập nhật nên phần bạn đang mở không còn trên máy chủ. Tải lại để dùng bản mới." |
| errorIdstring Nhãn trước mã lỗi ( | Default (English)"Error ID" | messagesVi"Mã lỗi" |
| copyErrorIdstring Nút chép mã lỗi và thông báo sau khi chép. | Default (English)"Copy error ID" | messagesVi"Sao chép mã lỗi" |
| copiedstring | Default (English)"Copied" | messagesVi"Đã sao chép" |
| retrystring Nút của ErrorBoundary: thử render lại / tải lại trang (lỗi nạp file sau khi deploy). | Default (English)"Try again" | messagesVi"Thử lại" |
| reloadstring | Default (English)"Reload" | messagesVi"Tải lại" |