로딩 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 ───╯개발 오버레이
개발 중에는 콘솔 왼쪽 아래 모서리의 [▼] 알약 모양 버튼이 개발 오버레이예요. F2 또는 Ctrl+`를 눌러 열고 라우트, 프레임 타이밍과 레이아웃을 확인하세요. 비활성화하려면 devIndicators: false를 설정하세요.