UI pemuatan dan error

Status pemuatan dan batas penanganan error di-render di konsol. Tentukan keduanya per segmen route dengan loading.tsx dan error.tsx.

#UI pemuatan

Tambahkan loading.tsx untuk menampilkan fallback saat halaman ditangguhkan.

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>

#Error

Tambahkan error.tsx untuk menangkap error rendering. Komponen ini menerima error dan fungsi 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>;}

#Tidak ditemukan

Panggil notFound() untuk me-render not-found.tsx terdekat.

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

#Redbox di dalam konsol

Saat pengembangan, error yang tidak tertangkap membuka overlay di dalam konsol yang menampilkan pesan dan lokasi sumber. Memperbaiki file akan menutupnya.

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

#Dev Overlay

Saat pengembangan, tombol berbentuk pil [▼] di sudut kiri bawah konsol adalah Dev Overlay. Tekan F2 atau Ctrl+` untuk membukanya dan memeriksa route, waktu frame, dan layout. Nonaktifkan dengan devIndicators: false.