ממשק טעינה ושגיאות

מצבי טעינה וגבולות שגיאה מרונדרים במסוף. יש להגדיר אותם לכל מקטע נתיב באמצעות 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+` כדי לפתוח אותה ולבדוק את הנתיב, זמני הפריימים וה-layout. להשבתה יש להגדיר devIndicators: false.