41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
|
"use client" // Error boundaries must be Client Components
|
||
|
|
|
||
|
|
import { AlertCircle } from "lucide-react"
|
||
|
|
import { useEffect } from "react"
|
||
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
||
|
|
|
||
|
|
interface ErrorProps {
|
||
|
|
title: string
|
||
|
|
description: string
|
||
|
|
}
|
||
|
|
|
||
|
|
function ErrorAlert(errorProps: ErrorProps) {
|
||
|
|
return (
|
||
|
|
<Alert variant="destructive">
|
||
|
|
<AlertCircle className="h-4 w-4" />
|
||
|
|
<AlertTitle>{errorProps.title}</AlertTitle>
|
||
|
|
<AlertDescription>{errorProps.description}</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||
|
|
useEffect(() => {
|
||
|
|
// Log the error to an error reporting service
|
||
|
|
console.error(error)
|
||
|
|
}, [error])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex min-h-[50vh] flex-col items-center justify-center space-y-4 p-4">
|
||
|
|
<ErrorAlert title="Something went wrong!" description={error.message || "An unexpected error occurred."} />
|
||
|
|
|
||
|
|
<button
|
||
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90 rounded-md px-4 py-2 transition-colors"
|
||
|
|
onClick={() => reset()}
|
||
|
|
>
|
||
|
|
Try again
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|