Gestione degli errori

Il caricamento non riesce. Il database è inattivo, il record non c’è più, qualcosa genera un errore. Senza un piano, un singolo await manda in tilt l’intera schermata.

error.jsx è l'immagine speculare di loading.jsx: stessa idea, risultato opposto. Mettilo accanto a una pagina e intercetterà qualsiasi errore generato da quella pagina durante il rendering:

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

A differenza di loading.jsx, ha un requisito imprescindibile:

'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 deve essere un componente client. Il motivo è proprio lì nel JSX: onClick. Un pulsante per riprovare è interattivo e l'interattività richiede un componente inviato al browser. Se ometti 'use client', ricevi l'errore del gestore di eventi del capitolo precedente, proprio nella pagina che dovrebbe gestire gli errori.

Riceve due props:

• error: l'errore che è stato generato, così puoi registrarlo
• reset: una funzione che esegue nuovamente il rendering della sezione non riuscita. Chiamala e la pagina riproverà

reset è ciò che rende tutto questo più di una schermata di errore più gradevole. Un blip che non ha funzionato una volta spesso funzionerà la seconda volta, e l’utente non ha dovuto ricaricare nulla.

Come gli altri file speciali, error.jsx copre la propria cartella e tutto ciò che è contenuto al suo interno, quindi un file vicino alla radice funge da rete di sicurezza per un'intera sezione del sito.