لوڈنگ 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 ───╯

#ڈیو اوورلے

ڈیولپمنٹ میں، کونسول کے نچلے بائیں کونے میں موجود [▼] پِل ڈیو اوورلے ہے۔ اسے کھولنے اور روٹ، فریم ٹائمنگز اور لے آؤٹ کا معائنہ کرنے کے لیے F2 یا Ctrl+` دبائیں۔ اسے devIndicators: false سے غیر فعال کریں۔