From d059f44d9e970186b35495050657d8bcba0c2f35 Mon Sep 17 00:00:00 2001
From: Tiago Yamamoto <japa@rede5.com.br>
Date: Tue, 23 Dec 2025 14:17:20 -0300
Subject: [PATCH] Add 404 and 500 error pages with logging

---
 saveinmed-frontend/src/app/error.tsx     | 60 ++++++++++++++++++++++++
 saveinmed-frontend/src/app/not-found.tsx | 48 +++++++++++++++++++
 2 files changed, 108 insertions(+)
 create mode 100644 saveinmed-frontend/src/app/error.tsx
 create mode 100644 saveinmed-frontend/src/app/not-found.tsx

diff --git a/saveinmed-frontend/src/app/error.tsx b/saveinmed-frontend/src/app/error.tsx
new file mode 100644
index 0000000..d74705a
--- /dev/null
+++ b/saveinmed-frontend/src/app/error.tsx
@@ -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>
+  );
+}
diff --git a/saveinmed-frontend/src/app/not-found.tsx b/saveinmed-frontend/src/app/not-found.tsx
new file mode 100644
index 0000000..3a9f59d
--- /dev/null
+++ b/saveinmed-frontend/src/app/not-found.tsx
@@ -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>
+  );
+}