رابط بارگذاری و خطاها
loading.tsx، error.tsx، not-found.tsx، Redbox درون کنسول و Dev Overlay.
وضعیت‌های بارگذاری و مرزهای خطا در کنسول رندر می‌شوند. آن‌ها را برای هر بخش مسیر با فایل‌های 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 آن را غیرفعال کنید.