Interfaz de carga y errores

Los estados de carga y los límites de error se renderizan en la consola. Defínelos por segmento de ruta con loading.tsx y error.tsx.

#Interfaz de carga

Añade loading.tsx para mostrar una interfaz alternativa mientras una página está suspendida.

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>

#Errores

Añade error.tsx para capturar errores de renderizado. Recibe el error y una función 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>;}

#No encontrado

Llama a notFound() para renderizar el not-found.tsx más cercano.

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

#Redbox en la consola

En desarrollo, los errores no capturados abren un panel superpuesto dentro de la consola con el mensaje y la ubicación en el código fuente. Al corregir el archivo, el panel se cierra.

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

#Panel de desarrollo

En desarrollo, el botón [▼] en la esquina inferior izquierda de la consola es el panel de desarrollo. Pulsa F2 o Ctrl+` para abrirlo e inspeccionar la ruta, los tiempos de los fotogramas y el layout. Desactívalo con devIndicators: false.