Interfejs ładowania i błędy

Stany ładowania i granice błędów renderują się w konsoli. Zdefiniuj je dla każdego segmentu trasy w plikach loading.tsx i error.tsx.

#Interfejs ładowania

Dodaj plik loading.tsx, aby wyświetlać interfejs zastępczy, gdy renderowanie strony jest zawieszone.

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>

#Błędy

Dodaj plik error.tsx, aby przechwytywać błędy renderowania. Otrzymuje on błąd i funkcję 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>;}

#Nie znaleziono

Wywołaj notFound(), aby wyrenderować najbliższy plik not-found.tsx.

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

#Redbox w konsoli

W trybie deweloperskim nieprzechwycone błędy otwierają nakładkę w konsoli z komunikatem i lokalizacją w kodzie źródłowym. Poprawienie pliku zamyka nakładkę.

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

#Nakładka deweloperska

W trybie deweloperskim przycisk [▼] w lewym dolnym rogu konsoli to nakładka deweloperska. Naciśnij F2 lub Ctrl+`, aby ją otworzyć i sprawdzić trasę, czasy klatek i layout. Wyłącz ją za pomocą devIndicators: false.