लोडिंग UI और एरर

लोडिंग स्टेट और एरर बाउंड्री कंसोल में रेंडर होते हैं। हर रूट सेगमेंट के लिए इन्हें loading.tsx और error.tsx फ़ाइलों से तय करें।

#लोडिंग UI

पेज के सस्पेंड होने पर फ़ॉलबैक दिखाने के लिए loading.tsx फ़ाइल जोड़ें।

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.tsx फ़ाइल जोड़ें। इसे एरर और एक 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>;}

#नहीं मिला

सबसे नज़दीकी not-found.tsx फ़ाइल रेंडर करने के लिए notFound() कॉल करें।

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

#कंसोल के अंदर Redbox

डेवलपमेंट में, हैंडल न हुए एरर कंसोल के अंदर मैसेज और सोर्स लोकेशन वाला ओवरले खोलते हैं। फ़ाइल ठीक करने पर यह बंद हो जाता है।

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

#Dev Overlay

डेवलपमेंट में, कंसोल के निचले-बाएं कोने में मौजूद [▼] पिल Dev Overlay है। इसे खोलने और रूट, फ़्रेम टाइमिंग और लेआउट की जांच करने के लिए F2 या Ctrl+` दबाएं। इसे बंद करने के लिए devIndicators: false इस्तेमाल करें।