rede5/saveinmed
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add 404 and 500 error pages with logging

Browse source
This commit is contained in:
Tiago Yamamoto 2025-12-23 14:17:20 -03:00
parent 79e115784a
commit d059f44d9e
2 changed files with 108 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
saveinmed-frontend/src/app/error.tsx Normal file
View file

@ -0,0 +1,60 @@
"use client";
import { useEffect } from "react";
import Link from "next/link";
type ErrorPageProps = {
error: Error & { digest?: string };
reset: () => void;
};
export default function ErrorPage({ error, reset }: ErrorPageProps) {
useEffect(() => {
console.log("[500] Erro na aplicação", {
message: error.message,
digest: error.digest,
stack: error.stack,
timestamp: new Date().toISOString(),
});
}, [error]);
return (
<main className="flex min-h-screen flex-col items-center justify-center gap-6 bg-white px-6 text-center text-slate-900">
<div className="flex max-w-xl flex-col gap-3">
<span className="text-sm font-semibold uppercase tracking-[0.3em] text-slate-400">
Erro 500
</span>
<h1 className="text-3xl font-semibold md:text-4xl">
Algo deu errado por aqui
</h1>
<p className="text-base text-slate-600">
Registramos detalhes no console do navegador para ajudar na
investigação. Tente novamente ou volte para a página inicial.
</p>
{error.digest ? (
<p className="text-xs text-slate-400">
Código do erro: <span className="font-mono">{error.digest}</span>
</p>
) : null}
</div>
<div className="flex flex-wrap items-center justify-center gap-4">
<button
type="button"
onClick={() => {
console.log("[500] Reset solicitado pelo usuário");
reset();
}}
className="rounded-full bg-slate-900 px-6 py-2 text-sm font-medium text-white shadow-sm hover:bg-slate-800"
>
Tentar novamente
</button>
<Link
href="/"
className="rounded-full border border-slate-200 px-6 py-2 text-sm font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900"
>
Voltar ao início
</Link>
</div>
</main>
);
}

48
saveinmed-frontend/src/app/not-found.tsx Normal file
View file

@ -0,0 +1,48 @@
"use client";
import { useEffect } from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
export default function NotFound() {
const pathname = usePathname();
useEffect(() => {
console.log("[404] Página não encontrada", {
pathname,
timestamp: new Date().toISOString(),
});
}, [pathname]);
return (
<main className="flex min-h-screen flex-col items-center justify-center gap-6 bg-white px-6 text-center text-slate-900">
<div className="flex max-w-xl flex-col gap-3">
<span className="text-sm font-semibold uppercase tracking-[0.3em] text-slate-400">
Erro 404
</span>
<h1 className="text-3xl font-semibold md:text-4xl">
Não encontramos essa página
</h1>
<p className="text-base text-slate-600">
Verifique o endereço digitado. Se o problema persistir, abra o
console do navegador para ver mais detalhes.
</p>
</div>
<div className="flex flex-wrap items-center justify-center gap-4">
<Link
href="/"
className="rounded-full bg-slate-900 px-6 py-2 text-sm font-medium text-white shadow-sm hover:bg-slate-800"
>
Voltar ao início
</Link>
<button
type="button"
onClick={() => window.location.reload()}
className="rounded-full border border-slate-200 px-6 py-2 text-sm font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900"
>
Recarregar
</button>
</div>
</main>
);
}