Giao diện tải và lỗi

Trạng thái tải và ranh giới lỗi render trong console. Định nghĩa chúng cho từng đoạn route bằng loading.tsx và error.tsx.

#Giao diện khi tải

Thêm loading.tsx để hiển thị giao diện dự phòng khi trang tạm dừng render.

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>

#Lỗi

Thêm error.tsx để bắt lỗi render. Component này nhận lỗi và hàm 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>;}

#Không tìm thấy

Gọi notFound() để render not-found.tsx gần nhất.

import { notFound } from "@textjs/app/navigation";if (!session) notFound();

#Redbox trong console

Trong quá trình phát triển, lỗi chưa xử lý sẽ mở một lớp phủ trong console với thông báo và vị trí mã nguồn. Sửa tệp sẽ đóng lớp phủ này.

╭─ ▼ Unhandled Runtime Error ─────────────────╮│  TypeError: Cannot read 'title'             ││  app/sessions/[id]/page.tsx (14:27)         │╰───────────────────────────── esc dismiss ───╯

#Dev Overlay

Trong quá trình phát triển, nút hình viên thuốc [▼] ở góc dưới bên trái console là Dev Overlay. Nhấn F2 hoặc Ctrl+` để mở và kiểm tra route, thời gian frame và layout. Tắt bằng devIndicators: false.