Global Error Page §

---

Para prevenir que o sua aplicação “quebre”, você pode criar o arquivo error.tsx na raiz da pasta /app.

"use client";
 
export default function Error() {
  return (
    <div className="container flex h-screen max-w-screen-lg flex-col items-center justify-center gap-5 bg-background text-center">
      <H1>Ops, algo deu errado!</H1>
 
      <Lead>
        Lamentamos, mas ocorreu um erro inesperado. Tente novamente mais tarde
        ou entre em contato com o suporte se o problema persistir.
      </Lead>
 
      <Button onClick={reset}>
        <Link href="/" prefetch={false}>
          Voltar para o início
        </Link>
      </Button>
    </div>
  );
}

Importante

Os componentes de erro devem ser sempre Client Component! Mais a frente você irá entender o por quê disso.

Dessa forma o Next.js automaticamente envolverá a página principal dentro de um Error Boundary do React e utilizará o componente exportado como fallback.

Ou seja, se um erro for lançado dentro do limite definido pela hierarquia do componente no App Router, o erro será capturado e o componente fallback será processado, então o que deve aparecer será algo similar ao mostrado abaixo.

Quando um erro acontece são passados duas propriedades para o componente de fallback de erro, sendo eles:

• Error: Objeto do erro
• reset: Função para tentar recuperar do erro

"use client";
 
interface ErrorProps {
  error: Error;
  reset: () => void;
};
 
export default function Error({ error, reset }: ErrorProps) {
  // ...
}

Agora, por exemplo, você pode exibir na tela a mensagem do erro.

<Large className="my-10 text-red-500">{error.message}</Large>

A função reset ao ser executada, tentará re-renderizar o conteúdo original da página que está envolvida pelo Error Boundary. Caso a tentativa seja bem sucedida, então o componente de fallback será substituído pelo conteúdo real.

<Button onClick={reset}>
  Tentar novamente
</Button>

Nota

Pelo fato do componente de fallback de erro necessitar a utilização do evento onClick do botão como mecanismo de re-tentativa ao ocorrer o erro, isso requer um Client Component. - Ver mais

Código completo §

"use client";
 
import Link from "next/link";
 
import { H1 } from "@/components/typography/h1";
import { Large } from "@/components/typography/large";
import { Lead } from "@/components/typography/lead";
import { Button } from "@/components/ui/button";
 
interface ErrorProps {
  error: Error;
  reset: () => void;
}
 
export default function Error({ error, reset }: ErrorProps) {
  return (
    <div className="container flex h-screen max-w-screen-lg flex-col items-center justify-center gap-5 bg-background text-center">
      <H1>Ops, algo deu errado!</H1>
 
      <Large className="my-10 text-red-500">{error.message}</Large>
 
      <Lead>
        Lamentamos, mas ocorreu um erro inesperado. Tente novamente mais tarde
        ou entre em contato com o suporte se o problema persistir.
      </Lead>
 
      <Button onClick={reset}>
          Tentar novamente
      </Button>
    </div>
  );
}

Referências §

---

https://nextjs.org/docs/app/building-your-application/routing#file-conventions

https://www.sitepoint.com/next-js-error-handling-app-router/

https://github.com/vercel/next.js/discussions/49811