واجهة التحميل والأخطاء

تُعرض حالات التحميل وحدود الأخطاء في وحدة التحكم. عرّفها لكل مقطع مسار باستخدام loading.tsx و error.tsx.

#واجهة التحميل

أضف 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>;}

#عدم العثور على الصفحة

استدعِ notFound() لعرض أقرب ملف not-found.tsx.

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.