載入介面與錯誤
loading.tsx、error.tsx、not-found.tsx、主控台內的 Redbox 與 Dev Overlay。
載入狀態與錯誤邊界會在主控台中渲染。使用 loading.tsx 和 error.tsx 為各路由區段定義載入狀態與錯誤邊界。
載入介面
新增 loading.tsx，在頁面暫停渲染時顯示備用介面。
app/sessions/[id]/loading.tsxtsx
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner variant="dots" label="Loading session…" />;} 即時56×10 · booting Turbolog…tsx
<Box className="flex-col gap-1 p-1"> <Spinner variant="dots" label="Loading session…" /> <Spinner variant="pulse" label="Streaming frames" /></Box>錯誤
新增 error.tsx 以捕捉渲染錯誤。此元件會接收錯誤與 reset 函式。
app/sessions/[id]/error.tsxtsx
import { Text, useInput, type ErrorComponentProps } from "@textjs/app";export default function SessionError({ error, reset }: ErrorComponentProps) { useInput((e) => e.input === "r" && reset()); return <Text color="danger">{error.message} · press r to retry</Text>;}找不到頁面
呼叫 notFound() 以渲染最近的 not-found.tsx。
import { notFound } from "@textjs/app/navigation";if (!session) notFound();主控台內的 Redbox
在開發環境中，未捕捉的錯誤會在主控台內開啟覆蓋層，顯示錯誤訊息與原始碼位置。修正檔案後，覆蓋層就會關閉。
╭─ ▼ Unhandled Runtime Error ─────────────────╮│ TypeError: Cannot read 'title' ││ app/sessions/[id]/page.tsx (14:27) │╰───────────────────────────── esc dismiss ───╯開發覆蓋層
在開發環境中，主控台左下角的 [▼] 膠囊按鈕就是開發覆蓋層。按 F2 或 Ctrl+` 開啟，檢視路由、影格耗時與版面配置。使用 devIndicators: false 停用。