feat(web): add awesome error pages with glitchtip integration
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 17s
Build & Deploy / 🏗️ Build (push) Failing after 2m43s
Build & Deploy / 🧪 QA (push) Failing after 5m27s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 17s
Build & Deploy / 🏗️ Build (push) Failing after 2m43s
Build & Deploy / 🧪 QA (push) Failing after 5m27s
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🩺 Health Check (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
This commit is contained in:
67
apps/web/app/error.tsx
Normal file
67
apps/web/app/error.tsx
Normal 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
59
apps/web/app/global-error.tsx
Normal 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
52
apps/web/app/not-found.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user