58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
export const Error = ({
|
|
statusCode,
|
|
title,
|
|
description,
|
|
}: {
|
|
statusCode: number;
|
|
title: string;
|
|
description?: string;
|
|
}) => {
|
|
return (
|
|
<div className="flex-1 flex items-center justify-center h-full">
|
|
<div className="rounded-2xl bg-base-300 p-8 text-center max-w-md w-full">
|
|
<h1 className="text-6xl font-bold text-red-500">{statusCode}</h1>
|
|
<p className="text-xl font-semibold mt-4">
|
|
{title ? title : "Oh nein! Ein Fehler ist aufgetreten."}
|
|
</p>
|
|
<p className="text-gray-600 mt-2">
|
|
{description || "Ein unerwarteter Fehler ist aufgetreten."}
|
|
</p>
|
|
<button onClick={() => window.location.reload()} className="btn btn-dash my-2">
|
|
Refresh Page
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const ErrorFallback = ({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) => {
|
|
useEffect(() => {
|
|
// Log the error to an error reporting service
|
|
console.error(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<div>
|
|
<h2>Something went wrong!</h2>
|
|
<button
|
|
onClick={
|
|
// Attempt to recover by trying to re-render the segment
|
|
() => reset()
|
|
}
|
|
>
|
|
Try again
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|