Manejo de errores

Las cargas fallan. La base de datos está caída, el registro ha desaparecido, algo lanza un error. Sin un plan, un mal await se lleva toda la pantalla consigo.

error.jsx es la imagen especular de loading.jsx: misma idea, resultado opuesto. Colócalo junto a una page y capturará cualquier cosa que esa page lance durante el renderizado:

app/
    menu/
        page.jsx
        loading.jsx    while it works
        error.jsx      when it doesn't

A diferencia de loading.jsx, tiene un requisito indispensable:

'use client';

export default function Error({ error, reset }) {
    return (
        <div>
            <h2>Couldn't load the menu</h2>
            <button onClick={reset}>Try again</button>
        </div>
    );
}

error.jsx debe ser un componente de cliente. La razón está ahí mismo en el JSX: onClick. Un botón de reintento es interactividad, y la interactividad necesita un componente que se envíe al navegador. Si omites 'use client', obtendrás el error de controlador de eventos del capítulo anterior, en la misma página cuya función era gestionar errores.

Recibe dos props:

• error: el Error que se lanzó, para que puedas registrarlo
• reset: una function que vuelve a renderizar la sección fallida. Llámala y la page lo intenta de nuevo

reset es lo que hace que esto sea más que una pantalla de error con mejor aspecto. Un fallo puntual que falló una vez a menudo funcionará la segunda vez, y el usuario nunca tuvo que recargar nada.

Al igual que los otros archivos especiales, error.jsx cubre su propia carpeta y todo lo que está anidado debajo de ella, por lo que un solo archivo cerca de la raíz es una red de seguridad para toda una sección del sitio.