UI de carregamento e erros

Estados de carregamento e limites de erro são renderizados no console. Defina-os por segmento de rota com loading.tsx e error.tsx.

#UI de carregamento

Adicione loading.tsx para exibir um conteúdo alternativo enquanto uma página estiver suspensa.

import { Spinner } from "@textjs/app";export default function Loading() {  return <Spinner variant="dots" label="Loading session…" />;}

<Box className="flex-col gap-1 p-1">  <Spinner variant="dots" label="Loading session…" />  <Spinner variant="pulse" label="Streaming frames" /></Box>

#Erros

Adicione error.tsx para capturar erros de renderização. Ele recebe o erro e uma função reset.

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>;}

#Não encontrado

Chame notFound() para renderizar o not-found.tsx mais próximo.

import { notFound } from "@textjs/app/navigation";if (!session) notFound();

#Redbox no console

Em desenvolvimento, erros não capturados abrem uma sobreposição dentro do console com a mensagem e a localização no código-fonte. Corrigir o arquivo fecha a sobreposição.

╭─ ▼ Unhandled Runtime Error ─────────────────╮│  TypeError: Cannot read 'title'             ││  app/sessions/[id]/page.tsx (14:27)         │╰───────────────────────────── esc dismiss ───╯

#Dev Overlay

Em desenvolvimento, o botão [▼] no canto inferior esquerdo do console é o Dev Overlay. Pressione F2 ou Ctrl+` para abri-lo e inspecionar a rota, os tempos dos quadros e o layout. Desative com devIndicators: false.