107 lines
4.2 KiB
TypeScript
107 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { Header } from '@/components/header'
|
|
import { Footer } from '@/components/footer'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent } from '@/components/ui/card'
|
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
|
import { RefreshCcw, Home, AlertTriangle, Server } from 'lucide-react'
|
|
|
|
interface ErrorProps {
|
|
error: Error & { digest?: string }
|
|
reset: () => void
|
|
}
|
|
|
|
export default function Error({ error, reset }: ErrorProps) {
|
|
useEffect(() => {
|
|
// Log the error to an error reporting service
|
|
console.error('Application error:', error)
|
|
}, [error])
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex flex-col">
|
|
<Header />
|
|
<main className="flex-1 flex items-center justify-center py-12">
|
|
<div className="container max-w-2xl text-center">
|
|
{/* Error Visual */}
|
|
<div className="mb-8">
|
|
<div className="flex items-center justify-center space-x-4 mb-6">
|
|
<div className="w-16 h-16 bg-red-100 dark:bg-red-950/20 rounded-lg flex items-center justify-center">
|
|
<AlertTriangle className="w-8 h-8 text-red-600" />
|
|
</div>
|
|
<div className="text-6xl font-bold text-red-600">500</div>
|
|
</div>
|
|
<h1 className="text-3xl font-bold tracking-tight mb-4">Something Went Wrong</h1>
|
|
<p className="text-xl text-muted-foreground mb-8">
|
|
We encountered an unexpected error. Our team has been notified and is working on a fix.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Error Details */}
|
|
<Alert className="mb-6 border-red-200 bg-red-50 dark:bg-red-950/10 text-left">
|
|
<AlertTriangle className="h-4 w-4 text-red-600" />
|
|
<AlertDescription className="text-red-800 dark:text-red-200">
|
|
<div className="space-y-2">
|
|
<p><strong>Error:</strong> {error.message || 'An unexpected error occurred'}</p>
|
|
{error.digest && (
|
|
<p className="text-xs opacity-75"><strong>Error ID:</strong> {error.digest}</p>
|
|
)}
|
|
</div>
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
{/* Recovery Actions */}
|
|
<Card>
|
|
<CardContent className="pt-6 space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Button onClick={reset} className="h-12">
|
|
<RefreshCcw className="w-4 h-4 mr-2" />
|
|
Try Again
|
|
</Button>
|
|
|
|
<Button asChild variant="outline" className="h-12">
|
|
<Link href="/">
|
|
<Home className="w-4 h-4 mr-2" />
|
|
Go Home
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground">
|
|
<p className="mb-2">If the problem persists, you can:</p>
|
|
<div className="flex flex-wrap justify-center gap-4">
|
|
<a href="/contact" className="text-primary hover:underline">Contact Support</a>
|
|
<a href="/feedback" className="text-primary hover:underline">Report Issue</a>
|
|
<a href="https://status.siliconpin.com" className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Check Status</a>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Technical Details */}
|
|
<details className="mt-8 text-left">
|
|
<summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground mb-2">
|
|
Technical Details (for developers)
|
|
</summary>
|
|
<div className="p-4 bg-muted rounded-lg text-sm">
|
|
<pre className="whitespace-pre-wrap break-words">
|
|
<strong>Error Message:</strong> {error.message}
|
|
{error.stack && (
|
|
<>
|
|
<br /><br />
|
|
<strong>Stack Trace:</strong>
|
|
<br />
|
|
{error.stack}
|
|
</>
|
|
)}
|
|
</pre>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
)
|
|
} |