mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add awesome error pages with glitchtip integration
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 17s
Details
Build & Deploy / 🏗️ Build (push) Failing after 2m43s
Details
Build & Deploy / 🧪 QA (push) Failing after 5m27s
Details
Build & Deploy / 🚀 Deploy (push) Has been skipped
Details
Build & Deploy / 🩺 Health Check (push) Has been skipped
Details
Build & Deploy / 🔔 Notify (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Marc Mintel
2026-02-22 21:58:59 +01:00
parent 072b6b13f1
commit 43564d1bba
3 changed files with 178 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
apps/web/app/error.tsx Normal file
View File

@@ -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>
);
}

59
apps/web/app/global-error.tsx Normal file
View File

@@ -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>
);
}

52
apps/web/app/not-found.tsx Normal file
View File

@@ -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>
);
}