54 lines
1.4 KiB
TypeScript
54 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
// Global error UI for the app router segment.
|
|
export default function ErrorPage({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
useEffect(() => {
|
|
console.error(error);
|
|
}, [error]);
|
|
|
|
return (
|
|
<main className="min-h-dvh flex items-center justify-center px-6">
|
|
<div className="max-w-lg text-center space-y-6">
|
|
<h1 className="text-2xl font-semibold tracking-tight">
|
|
Something went wrong
|
|
</h1>
|
|
|
|
<p className="text-muted-foreground">
|
|
An unexpected error occurred while loading this section.
|
|
</p>
|
|
|
|
<div className="flex justify-center gap-4 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={reset}
|
|
className="rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition"
|
|
>
|
|
Try again
|
|
</button>
|
|
|
|
<a
|
|
href="/"
|
|
className="rounded-md border px-4 py-2 text-sm font-medium hover:bg-muted transition"
|
|
>
|
|
Go home
|
|
</a>
|
|
</div>
|
|
|
|
{process.env.NODE_ENV === "development" && (
|
|
<pre className="mt-6 rounded-md bg-muted p-4 text-left text-xs overflow-auto">
|
|
{error.message}
|
|
</pre>
|
|
)}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|