Loading UI and Errors
loading.tsx, error.tsx, not-found.tsx, the in-console Redbox and [▼] DevTools.
Loading states and error boundaries render in the console. Define them per route segment with loading.tsx and error.tsx.
Loading UI
Add loading.tsx to show a fallback while a page suspends.
app/sessions/[id]/loading.tsxtsx
import { Spinner } from "@textjs/next";export default function Loading() { return <Spinner variant="dots" label="Loading session…" />;} Live56×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>Errors
Add error.tsx to catch render errors. It receives the error and a reset function.
app/sessions/[id]/error.tsxtsx
import { Text, useInput, type ErrorComponentProps } from "@textjs/next";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
Call notFound() to render the nearest not-found.tsx.
import { notFound } from "@textjs/next/navigation";if (!session) notFound();The in-console Redbox
In development, uncaught errors open an overlay inside the console with the message and source location. Fixing the file dismisses it.
╭─ ▼ Unhandled Runtime Error ─────────────────╮│ TypeError: Cannot read 'title' ││ app/sessions/[id]/page.tsx (14:27) │╰───────────────────────────── esc dismiss ───╯[▼] DevTools
Press F2 or Ctrl+` in development to inspect the route, frame timings and layout. Disable with devIndicators: false.