Yükleme arayüzü ve hatalar

Yükleme durumları ve hata sınırları konsolda render edilir. Bunları her rota segmenti için loading.tsx ve error.tsx ile tanımlayın.

#Yükleme arayüzü

Bir sayfa askıya alındığında yedek bir arayüz göstermek için loading.tsx dosyasını ekleyin.

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>

#Hatalar

Render hatalarını yakalamak için error.tsx dosyasını ekleyin. Bu bileşen, hatayı ve bir reset fonksiyonunu alır.

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

#Bulunamadı

En yakın not-found.tsx dosyasını render etmek için notFound() fonksiyonunu çağırın.

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

#Konsol içi Redbox

Geliştirme sırasında yakalanmayan hatalar, konsol içinde mesajı ve kaynak konumunu gösteren bir katman açar. Dosyayı düzelttiğinizde bu katman kapanır.

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

#Geliştirme katmanı

Geliştirme sırasında konsolun sol alt köşesindeki [▼] düğmesi, geliştirme katmanıdır. Katmanı açıp rotayı, kare sürelerini ve layout’u incelemek için F2 veya Ctrl+` tuşlarına basın. Devre dışı bırakmak için devIndicators: false kullanın.