Status
StatusPage là trang trạng thái cho lỗi HTTP (404, 500, 503…), mất mạng và bản mới; ErrorBoundary hiện nó khi phần con lỗi.
status chọn tiêu đề, mô tả và mã có sẵn (theo messages.statusPage): 400, 401, 403, 404, 408, 410, 429, 500, 502, 503, 504, "offline", "update". Mã hiện lớn để nhận ra ngay, kèm dòng "Error 404" đọc được; tiêu đề là h1 (hoặc headingAs="h2" trong một vùng). Không tự điều hướng: truyền nút / link của router vào primaryAction, secondaryAction; children cho gợi ý, ô tìm kiếm. errorId hiện mã lỗi chọn được kèm nút chép; autoFocus đưa focus vào tiêu đề khi chuyển trang phía client. ErrorBoundary bắt lỗi render của phần con: lỗi nạp file sau khi deploy (tab mở từ trước) hiện "Đã có phiên bản mới" + Tải lại, lỗi khác hiện 500 + Thử lại; resetKeys (vd. đường dẫn) bỏ lỗi khi đổi trang. Trang 404 của chính docs dùng component này.Import
Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.
TSX
// npm install yugen-uiimport { StatusPage, ErrorBoundary, isChunkLoadError, statusPageCopy, type StatusPageStatus } from "yugen-ui";Biến thể
Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.
Lỗi 500
Máy chủ gặp lỗi
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.
Mã lỗi:
7f3a-91c2Các trạng thái
Chuỗi có sẵn theo status; 500 kèm mã lỗi chép được.
Doanh thu quý này tăng 12%.
ErrorBoundary
Bấm để phần con lỗi khi render: trang 500 mặc định thay chỗ, Thử lại render lại phần con.
Cách dùng
Nên
- Nói chuyện gì xảy ra và làm gì tiếp; luôn có ít nhất một lối ra (Thử lại, Về trang chủ, Tìm kiếm).
- Đặt ErrorBoundary quanh vùng nội dung theo route, với
resetKeyslà đường dẫn, để lỗi một trang không làm trắng cả app. - Gửi lỗi lên dịch vụ theo dõi trong
onErrorvà hiện cùng mã đó quaerrorId.
Không nên
- Không hiện stack trace hay thông báo kỹ thuật cho người dùng.
- Không chỉ dùng mã số làm nội dung — luôn có tiêu đề bằng chữ.
- Không tự tải lại trang mà không nói trước.
Props
| Prop · Kiểu | Mặc định | Mô tả |
|---|---|---|
| status400 | 401 | 403 | 404 | 408 | 410 | 429 | 500 | 502 | 503 | 504 | "offline" | "update" | Mặc định: — | Chọn tiêu đề, mô tả và mã có sẵn. |
| codeReactNode | null | Mặc định: mã của status | Mã hiện lớn; null để ẩn. |
| title / descriptionReactNode | Mặc định: theo status | Ghi đè chữ có sẵn; description={null} để ẩn. |
| primaryAction / secondaryActionReactNode | Mặc định: — | Nút / link hành động (Button, Link của router). |
| illustrationReactNode | Mặc định: — | Hình minh hoạ thay cho mã / icon có sẵn. |
| errorIdstring | Mặc định: — | Mã lỗi để gửi hỗ trợ: chữ chọn được + nút chép. |
| headingAs"h1" | "h2" | Mặc định: "h1" | Thẻ của tiêu đề. |
| autoFocusboolean | Mặc định: false | Focus vào tiêu đề khi hiện (chuyển trang phía client). |
| fullscreenboolean | Mặc định: false | Cao tối thiểu bằng màn hình. |
| childrenReactNode | Mặc định: — | Nội dung thêm dưới mô tả: gợi ý trang, ô tìm kiếm. |
| refRef<HTMLDivElement> | Mặc định: — | Trỏ tới khung ngoài. |
| ErrorBoundary | Mặc định: — | Thay trang mặc định (bản mới + Tải lại, hoặc 500 + Thử lại). |
| ErrorBoundary | Mặc định: — | Gọi khi bắt được lỗi. |
| ErrorBoundary | Mặc định: — | Đổi một giá trị thì bỏ lỗi và render lại. |
| ErrorBoundary | Mặc định: — | Truyền cho trang mặc định (vd. fullscreen khi bọc cả app). |
| isChunkLoadError | Mặc định: — | Lỗi nạp file JS sau khi deploy — tải lại trang là đủ. |
| statusPageCopy | Mặc định: — | Chữ có sẵn của một trạng thái, vd. cho <title>. |
Messages
Chữ có sẵn của component: nhãn, aria-label, thông báo cho trình đọc màn hình.
Mặc định là tiếng Anh. Đổi qua prop messages của YugenProvider, theo namespace bên dưới; messagesVi chứa bản tiếng Việt. Xem Ngôn ngữ giao diện.
messages.statusPage
| Khoá · Kiểu | Mặc định (tiếng Anh) | messagesVi |
|---|---|---|
| eyebrow(code: number) => string Dòng nhỏ trên tiêu đề, đọc được mã trạng thái. | Mặc định (tiếng Anh)(code) => `Error ${code}` | messagesVi(code) => `Lỗi ${code}` |
| badRequestTitlestring Tiêu đề và mô tả mặc định theo | Mặc định (tiếng Anh)"Bad request" | messagesVi"Yêu cầu không hợp lệ" |
| badRequestDescriptionstring | Mặc định (tiếng Anh)"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 | Mặc định (tiếng Anh)"Sign in to continue" | messagesVi"Cần đăng nhập" |
| unauthorizedDescriptionstring | Mặc định (tiếng Anh)"This page is for signed-in accounts." | messagesVi"Trang này chỉ dành cho tài khoản đã đăng nhập." |
| forbiddenTitlestring | Mặc định (tiếng Anh)"No access" | messagesVi"Không có quyền truy cập" |
| forbiddenDescriptionstring | Mặc định (tiếng Anh)"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 | Mặc định (tiếng Anh)"Page not found" | messagesVi"Không tìm thấy trang" |
| notFoundDescriptionstring | Mặc định (tiếng Anh)"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 | Mặc định (tiếng Anh)"This page was removed" | messagesVi"Trang này đã bị gỡ" |
| goneDescriptionstring | Mặc định (tiếng Anh)"This content is no longer available." | messagesVi"Nội dung này không còn nữa." |
| tooManyRequestsTitlestring | Mặc định (tiếng Anh)"Slow down a little" | messagesVi"Bạn thao tác hơi nhanh" |
| tooManyRequestsDescriptionstring | Mặc định (tiếng Anh)"Wait a moment, then try again." | messagesVi"Đợi một chút rồi thử lại." |
| serverErrorTitlestring | Mặc định (tiếng Anh)"Something went wrong on our side" | messagesVi"Máy chủ gặp lỗi" |
| serverErrorDescriptionstring | Mặc định (tiếng Anh)"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 | Mặc định (tiếng Anh)"Down for maintenance" | messagesVi"Đang bảo trì" |
| unavailableDescriptionstring | Mặc định (tiếng Anh)"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 | Mặc định (tiếng Anh)"The server took too long" | messagesVi"Máy chủ phản hồi quá lâu" |
| timeoutDescriptionstring | Mặc định (tiếng Anh)"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 | Mặc định (tiếng Anh)"You're offline" | messagesVi"Không có kết nối mạng" |
| offlineDescriptionstring | Mặc định (tiếng Anh)"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 | Mặc định (tiếng Anh)"A new version is available" | messagesVi"Đã có phiên bản mới" |
| updateDescriptionstring | Mặc định (tiếng Anh)"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 ( | Mặc định (tiếng Anh)"Error ID" | messagesVi"Mã lỗi" |
| copyErrorIdstring Nút chép mã lỗi và thông báo sau khi chép. | Mặc định (tiếng Anh)"Copy error ID" | messagesVi"Sao chép mã lỗi" |
| copiedstring | Mặc định (tiếng Anh)"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). | Mặc định (tiếng Anh)"Try again" | messagesVi"Thử lại" |
| reloadstring | Mặc định (tiếng Anh)"Reload" | messagesVi"Tải lại" |