Интерфейс загрузки и ошибки

Состояния загрузки и границы ошибок отображаются в консоли. Определите их для каждого сегмента маршрута в 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.