加载界面与错误
loading.tsx、error.tsx、not-found.tsx、控制台内的 Redbox 和开发叠层。
加载状态和错误边界在控制台中渲染。使用 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 禁用。