Tratamento de Erros

Carregamentos falham. O banco de dados está fora do ar, o registro sumiu, algo lança um erro. Sem um plano, um único await ruim leva a tela inteira junto com ele.

error.jsx é a imagem espelhada de loading.jsx: mesma ideia, resultado oposto. Coloque-o ao lado de uma página e ele captura qualquer coisa que essa página lançar durante a renderização:

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

Ao contrário de loading.jsx, ele tem um requisito obrigatório:

'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 ser um client component. O motivo está ali mesmo no JSX: onClick. Um botão de tentar novamente (retry) é interatividade, e interatividade precisa de um componente que seja enviado para o navegador. Omita 'use client' e você obterá o erro de manipulador de eventos do capítulo anterior, na própria página cuja função era tratar erros.

Ele recebe duas props:

• error: o Error que foi lançado, para que você possa registrá-lo
• reset: uma function que renderiza novamente a seção que falhou. Chame-a e a page tenta novamente

O reset é o que torna isso mais do que apenas uma tela de erro mais bonita. Um problema temporário que falhou uma vez geralmente funcionará na segunda vez, e o usuário nem precisa recarregar nada.

Como os outros arquivos especiais, o error.jsx cobre sua própria pasta e tudo o que está aninhado abaixo dela, portanto, um único arquivo perto da raiz serve como uma rede de segurança para toda uma seção do site.