From 43564d1bbac60dbb8abfb27da03381569d84b3d5 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 22 Feb 2026 21:58:59 +0100
Subject: [PATCH] feat(web): add awesome error pages with glitchtip integration

---
 apps/web/app/error.tsx        | 67 +++++++++++++++++++++++++++++++++++
 apps/web/app/global-error.tsx | 59 ++++++++++++++++++++++++++++++
 apps/web/app/not-found.tsx    | 52 +++++++++++++++++++++++++++
 3 files changed, 178 insertions(+)
 create mode 100644 apps/web/app/error.tsx
 create mode 100644 apps/web/app/global-error.tsx
 create mode 100644 apps/web/app/not-found.tsx

diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx
new file mode 100644
index 0000000..b7fd949
--- /dev/null
+++ b/apps/web/app/error.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { useEffect } from "react";
+import * as Sentry from "@sentry/nextjs";
+import { Button } from "../src/components/Button";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to Sentry/GlitchTip
+    Sentry.captureException(error);
+    console.error("Caught in error.tsx:", error);
+  }, [error]);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[70vh] px-5 py-20 text-center">
+      <div className="space-y-6 max-w-2xl mx-auto">
+        <span className="inline-block px-3 py-1 bg-red-50 border border-red-100 rounded text-[10px] font-mono text-red-500 uppercase tracking-widest">
+          Error 500
+        </span>
+        <h1 className="text-5xl md:text-7xl font-black text-slate-900 tracking-tighter">
+          Kritischer Fehler.
+        </h1>
+        <p className="text-xl md:text-2xl text-slate-500 font-serif italic max-w-xl mx-auto leading-relaxed">
+          Ein unerwartetes Problem ist aufgetreten. Unsere Systeme haben den
+          Vorfall protokolliert.
+        </p>
+
+        <div className="pt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Button href="#" onClick={() => reset()} variant="primary">
+            System neu starten (Retry)
+          </Button>
+          <Button href="/" variant="outline">
+            Zurück zur Basis
+          </Button>
+        </div>
+
+        <div className="pt-16 max-w-sm mx-auto">
+          <div className="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-left font-mono text-xs text-slate-400">
+            <div className="flex items-center justify-between border-b border-slate-200/60 pb-2 mb-2">
+              <span>STATUS</span>
+              <span className="text-red-500 flex items-center gap-2">
+                <span className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span>
+                FAIL
+              </span>
+            </div>
+            <div className="flex justify-between border-b border-slate-200/60 pb-2 mb-2">
+              <span>TRACKING</span>
+              <span className="text-green-500">GLITCHTIP_LOGGED</span>
+            </div>
+            {error.digest && (
+              <div className="flex justify-between">
+                <span>DIGEST</span>
+                <span className="truncate max-w-[150px]">{error.digest}</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/global-error.tsx b/apps/web/app/global-error.tsx
new file mode 100644
index 0000000..9d9344a
--- /dev/null
+++ b/apps/web/app/global-error.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
+import { useEffect } from "react";
+import { Inter, Newsreader } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const newsreader = Newsreader({
+  subsets: ["latin"],
+  variable: "--font-newsreader",
+  style: "italic",
+  display: "swap",
+});
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html lang="en" className={`${inter.variable} ${newsreader.variable}`}>
+      <body className="min-h-screen bg-white font-sans text-slate-900">
+        <div className="flex flex-col items-center justify-center min-h-screen px-5 py-20 text-center">
+          <div className="space-y-6 max-w-2xl mx-auto">
+            <span className="inline-block px-3 py-1 bg-red-50 border border-red-200 rounded text-[10px] font-mono text-red-600 uppercase tracking-widest border-dashed">
+              Root Level Error
+            </span>
+            <h1 className="text-4xl md:text-6xl font-black tracking-tighter text-slate-900">
+              Systemausfall der Hauptebene.
+            </h1>
+            <p className="text-lg md:text-xl text-slate-500 font-serif italic max-w-xl mx-auto">
+              Ein kritischer Fehler auf der Root-Layout Ebene hat das Rendering
+              blockiert. Der Vorfall wurde zur Untersuchung protokolliert.
+            </p>
+
+            <div className="pt-8">
+              <button
+                onClick={() => reset()}
+                className="relative inline-flex items-center justify-center gap-3 overflow-hidden rounded-full font-bold uppercase tracking-[0.15em] transition-all duration-300 group cursor-pointer px-8 py-4 text-[10px] bg-slate-900 text-white hover:shadow-xl hover:-translate-y-0.5"
+              >
+                <span className="relative z-10 flex items-center gap-3">
+                  Notfall-Neustart (Reset)
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  );
+}
diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
new file mode 100644
index 0000000..ce9d53a
--- /dev/null
+++ b/apps/web/app/not-found.tsx
@@ -0,0 +1,52 @@
+export const metadata = {
+  title: "404 - Seite nicht gefunden | Marc Mintel",
+  description: "Diese Seite konnte leider nicht gefunden werden.",
+};
+
+import Link from "next/link";
+import { Button } from "../src/components/Button";
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[70vh] px-5 py-20 text-center">
+      <div className="space-y-6 max-w-2xl mx-auto">
+        <span className="inline-block px-3 py-1 bg-slate-50 border border-slate-100 rounded text-[10px] font-mono text-slate-500 uppercase tracking-widest">
+          Error 404
+        </span>
+        <h1 className="text-5xl md:text-7xl font-black text-slate-900 tracking-tighter">
+          System-Anomalie.
+        </h1>
+        <p className="text-xl md:text-2xl text-slate-500 font-serif italic max-w-xl mx-auto leading-relaxed">
+          Die angeforderte URL existiert nicht in dieser Zeitleiste.
+          Möglicherweise wurde die Seite verschoben oder gelöscht.
+        </p>
+
+        <div className="pt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
+          <Button href="/" variant="primary">
+            Zurück zur Basis
+          </Button>
+          <Button href="/blog" variant="outline">
+            Aktuelle Artikel lesen
+          </Button>
+        </div>
+
+        <div className="pt-16 max-w-sm mx-auto">
+          <div className="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-left font-mono text-xs text-slate-400">
+            <div className="flex justify-between border-b border-slate-200/60 pb-2 mb-2">
+              <span>STATUS</span>
+              <span className="text-red-500">404 NOT_FOUND</span>
+            </div>
+            <div className="flex justify-between border-b border-slate-200/60 pb-2 mb-2">
+              <span>ACTION</span>
+              <span>REROUTE_SUGGESTED</span>
+            </div>
+            <div className="flex justify-between">
+              <span>SYSTEM</span>
+              <span className="text-green-500">ONLINE</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}