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 reflejada de loading.jsx: la misma idea, con el resultado opuesto. Colócalo junto a una página y capturará cualquier error que esa página produzca mientras se renderiza:

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 función que vuelve a renderizar la sección que falló. Llámala y la página 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.