Ladeanzeige und Fehler

Ladezustände und Error Boundaries rendern in der Konsole. Definiere sie pro Route-Segment mit loading.tsx und error.tsx.

#Ladeanzeige

Füge loading.tsx hinzu, um einen Fallback anzuzeigen, während eine Seite pausiert.

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>

#Fehler

Füge error.tsx hinzu, um Renderfehler abzufangen. Die Komponente erhält den Fehler und eine reset-Funktion.

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

#Nicht gefunden

Rufe notFound() auf, um die nächstgelegene not-found.tsx zu rendern.

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

#Die Redbox in der Konsole

Während der Entwicklung öffnen nicht abgefangene Fehler ein Overlay in der Konsole mit der Meldung und der Quellcodeposition. Sobald du die Datei korrigierst, schließt es sich.

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

#Dev-Overlay

Während der Entwicklung ist die [▼]-Schaltfläche unten links in der Konsole das Dev-Overlay. Drücke F2 oder Ctrl+`, um es zu öffnen und die Route, Frame-Zeiten und das Layout zu prüfen. Deaktiviere es mit devIndicators: false.