UI di caricamento ed errori

Gli stati di caricamento e gli error boundary sono renderizzati nella console. Definiscili per ogni segmento di route con loading.tsx e error.tsx.

#Interfaccia di caricamento

Aggiungi loading.tsx per mostrare un fallback mentre una pagina è sospesa.

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>

#Errori

Aggiungi error.tsx per intercettare gli errori di rendering. Riceve l’errore e una funzione 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>;}

#Pagina non trovata

Chiama notFound() per renderizzare il not-found.tsx più vicino.

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

#La Redbox nella console

In fase di sviluppo, gli errori non intercettati aprono un overlay nella console con il messaggio e la posizione nel codice sorgente. Correggendo il file, l’overlay si chiude.

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

#Dev Overlay

In fase di sviluppo, il pulsante a pillola [▼] nell’angolo in basso a sinistra della console è il Dev Overlay. Premi F2 o Ctrl+` per aprirlo e ispezionare la route, i tempi dei frame e il layout. Disattivalo con devIndicators: false.