florian.wildeandClaude Opus 5
6fcbc04110
Optischer Rahmen der Anwendung: - Hintergrund aus drei langsam driftenden Nebeln, feinem Raster und einer Rauschtextur gegen Farbbanding - .glass / .glass-soft als Grundflaechen, .card-glow fuer den Hover-Effekt mit Farbverlaufsrand je Projektakzent - Buttons, Formularfelder und Scrollbars im gleichen Stil - prefers-reduced-motion schaltet saemtliche Animationen ab Dazu Kopfzeile mit aktiver Navigationsmarkierung, ein wiederverwendbarer Modal-Dialog (Escape schliesst, Scroll wird gesperrt), das SVG-Icon sowie Fehler- und 404-Seiten. Die Fehlerseite erkennt Datenbankprobleme und nennt direkt die drei Befehle, die in dem Fall meistens helfen. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { AlertTriangle, RotateCcw } from "lucide-react";
|
|
|
|
export default function GlobalError({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error(error);
|
|
}, [error]);
|
|
|
|
const isDbError =
|
|
/database|prisma|ECONNREFUSED|P1001|does not exist/i.test(error.message ?? "");
|
|
|
|
return (
|
|
<div className="glass fade-up mx-auto mt-16 max-w-2xl px-6 py-14">
|
|
<span className="grid h-12 w-12 place-items-center rounded-2xl bg-rose-500/15 text-rose-300">
|
|
<AlertTriangle className="h-6 w-6" />
|
|
</span>
|
|
<h1 className="mt-4 text-xl font-semibold text-white">Da ist etwas schiefgelaufen</h1>
|
|
<p className="mt-2 text-sm text-slate-400">{error.message}</p>
|
|
|
|
{isDbError ? (
|
|
<div className="mt-5 rounded-xl border border-white/8 bg-black/30 p-4 text-sm text-slate-400">
|
|
<p className="font-medium text-slate-200">Sieht nach einem Datenbankproblem aus.</p>
|
|
<ol className="mt-2 list-decimal space-y-1 pl-5 text-xs">
|
|
<li>
|
|
Laeuft PostgreSQL? <code className="text-violet-300">docker compose up -d db</code>
|
|
</li>
|
|
<li>
|
|
Stimmt <code className="text-violet-300">DATABASE_URL</code> in der{" "}
|
|
<code className="text-violet-300">.env</code>?
|
|
</li>
|
|
<li>
|
|
Migrationen eingespielt? <code className="text-violet-300">npm run db:migrate</code>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
) : null}
|
|
|
|
<button type="button" className="btn btn-primary mt-6" onClick={reset}>
|
|
<RotateCcw className="h-4 w-4" />
|
|
Erneut versuchen
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|