錯誤頁 40x/50x

這章講的是路由級的錯誤頁——使用者打到錯誤 URL、沒有權限、或伺服器掛了時該看到什麼。重點是文案要具體、要給下一步。當你要做 404/500 頁、處理權限不足、或想知道「該不該全頁置中」時,就翻這頁對一下。

404 Not Found

這是什麼

無完整後台外框或僅極簡頂列;說明頁面不存在,並提供返回儀表板。

什麼時候用

使用者打到無效網址時;文案要具體,不要只顯示 404。

預覽依本指南規則實作

404

找不到這個頁面

連結可能已失效,或你沒有權限瀏覽此 URL。請檢查網址或返回首頁。

403 Forbidden

這是什麼

多半保留後台外框;鎖頭圖示搭配說明,提供申請權限或聯絡管理員。

什麼時候用

使用者已登入但沒有存取該資源的權限時;不要導向登入頁。

預覽依本指南規則實作
S

SaaS Console

Platform

搜尋專案、成員、動作…
TZ
首頁專案

無權限存取

你沒有權限檢視此專案

請向工作區管理員申請 Editor 權限,或切換到有權限的帳號。

500 Server Error

這是什麼

全頁或置中錯誤畫面:具體說明、重試按鈕、系統狀態頁連結。

什麼時候用

伺服器或服務暫時無法回應時;避免只寫「Error」,要讓使用者知道下一步。

預覽依本指南規則實作

500

伺服器暫時無法處理請求

我們已收到通知。請稍後再試,或查看系統狀態頁了解維護進度。

離線/網路錯誤

這是什麼

離線或網路錯誤時可顯示快取資料,並自動或手動重試連線。

什麼時候用

連線中斷但仍有本地快取可讀時;文案說明離線狀態,不要只顯示錯誤代碼。

預覽依本指南規則實作

目前離線

無法連線。我們會在恢復連線後自動同步;你仍可檢視已快取的列表。

顯示 2 分鐘前的快取

規格速查

項目定稿值
404全頁置中、無 shell;大標 + 可能原因 + 回首頁/搜尋
403可 in-shell(保留導覽);鎖頭 + 說明 + 申請權限/聯絡
500/503全頁置中;承認我方問題 + Retry + 系統狀態頁連結
每種錯誤都要有說明文字 + 明確 CTA(回首頁或 Retry)
離線/網路「目前離線」+ 自動重試 + 可顯示快取資料時間戳
維護頁503 標示預計恢復時間;錯誤頁支援深色模式與 i18n

常見做錯

做錯正確
所有錯誤都全頁置中403 已登入缺權限,保留 app shell 維持導覽
錯誤頁只寫「404」「500」代碼加上說明與下一步,告訴使用者怎麼脫困
沒有回首頁或 Retry 的出口每種錯誤都給明確 CTA(返回儀表板或重試)
把 stack trace 直接顯示給使用者對外只給友善文案,技術細節留在後端日誌
500 只寫一句「發生錯誤」承認我方問題並提供 Retry 或聯絡/系統狀態連結

相關章節

  • 狀態 — empty/loading/error 元件層級的呈現與時機
  • 認證頁 — 登入流程中的錯誤與置中 card 版型
  • 回饋 — toast 暫時性錯誤與路由級錯誤的分級