Interface de chargement et erreurs

Les états de chargement et les périmètres d’erreurs s’affichent dans la console. Définissez-les par segment de route avec loading.tsx et error.tsx.

#Interface de chargement

Ajoutez loading.tsx pour afficher une interface de remplacement lorsqu’une page est suspendue.

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>

#Erreurs

Ajoutez error.tsx pour intercepter les erreurs de rendu. Il reçoit l’erreur et une fonction 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>;}

#Page introuvable

Appelez notFound() pour afficher le not-found.tsx le plus proche.

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

#La Redbox dans la console

En développement, les erreurs non interceptées ouvrent un panneau superposé dans la console avec le message et l’emplacement dans le code source. La correction du fichier ferme ce panneau.

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

#Panneau de développement

En développement, la pastille [▼] dans le coin inférieur gauche de la console correspond au panneau de développement. Appuyez sur F2 ou Ctrl+` pour l’ouvrir et examiner la route, les temps des frames et le layout. Désactivez-le avec devIndicators: false.