読み込み中のUIとエラー
loading.tsx、error.tsx、not-found.tsx、コンソール内のRedbox、Dev Overlay。
ローディング状態とエラーバウンダリーはコンソールに描画されます。loading.tsx と error.tsx でルートセグメントごとに定義します。
ローディングUI
ページがサスペンドしている間にフォールバックを表示するには、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>;}ページが見つからない場合
最も近い not-found.tsx を描画するには、notFound() を呼び出します。
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 ───╯開発オーバーレイ
開発時にコンソールの左下隅に表示される [▼] ボタンがDev Overlayです。F2 または Ctrl+` を押して開くと、ルート、フレームのタイミング、レイアウトを確認できます。devIndicators: false で無効にできます。