- Added Sentry integration for error tracking across various components, including error boundaries and user actions. - Updated global error handling to capture exceptions and provide detailed feedback to users. - Enhanced user notifications with toast messages for actions such as credit management, image generation, and canvas exports. - Improved user experience by displaying relevant messages during interactions, ensuring better visibility of system states and errors.
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import * as Sentry from "@sentry/nextjs";
|
|
import { useEffect } from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type GlobalErrorProps = {
|
|
error: Error & { digest?: string };
|
|
unstable_retry: () => void;
|
|
};
|
|
|
|
export default function GlobalError({
|
|
error,
|
|
unstable_retry,
|
|
}: GlobalErrorProps) {
|
|
useEffect(() => {
|
|
Sentry.captureException(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<html lang="de" className="h-full antialiased font-sans">
|
|
<body className="min-h-full bg-background text-foreground">
|
|
<main className="flex min-h-screen items-center justify-center px-4">
|
|
<div className="w-full max-w-md space-y-4 rounded-xl border bg-card p-6 shadow-sm">
|
|
<div className="space-y-1 text-center">
|
|
<h1 className="text-xl font-semibold">Schwerer Fehler</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Die Anwendung konnte nicht dargestellt werden. Lade den Bereich
|
|
neu, um fortzufahren.
|
|
</p>
|
|
{error.digest ? (
|
|
<p className="text-xs text-muted-foreground/80">
|
|
Fehler-ID: {error.digest}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
|
|
<Button className="w-full" onClick={() => unstable_retry()}>
|
|
Erneut laden
|
|
</Button>
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|