245 lines
8.4 KiB
TypeScript
245 lines
8.4 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { useEffect } from 'react'
|
|
import { AlertTriangle, RefreshCw, Home, Mail, Bug } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Alert, AlertDescription } from '@/components/ui/alert'
|
|
import Link from 'next/link'
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string }
|
|
reset: () => void
|
|
}) {
|
|
useEffect(() => {
|
|
// Log the error to an error reporting service
|
|
console.error('Application Error:', error)
|
|
}, [error])
|
|
|
|
const errorDetails = {
|
|
message: error.message || 'An unexpected error occurred',
|
|
digest: error.digest || 'Unknown',
|
|
timestamp: new Date().toISOString(),
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-gradient-to-br from-red-50 via-white to-orange-50 flex items-center justify-center px-4">
|
|
<section className="max-w-2xl mx-auto text-center">
|
|
<header className="mb-8">
|
|
{/* Animated Error Icon */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.8, ease: "easeOut" }}
|
|
className="mb-8"
|
|
>
|
|
<div className="relative mx-auto w-32 h-32 mb-6">
|
|
<motion.div
|
|
animate={{
|
|
rotate: [0, -10, 10, 0],
|
|
scale: [1, 1.1, 1]
|
|
}}
|
|
transition={{
|
|
duration: 3,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
className="absolute inset-0 flex items-center justify-center"
|
|
>
|
|
<div className="p-6 bg-gradient-to-br from-red-500 to-orange-500 rounded-full shadow-2xl">
|
|
<AlertTriangle className="w-16 h-16 text-white" />
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Pulse effect */}
|
|
<motion.div
|
|
animate={{
|
|
scale: [1, 1.4, 1],
|
|
opacity: [0.3, 0, 0.3]
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut"
|
|
}}
|
|
className="absolute inset-0 bg-red-400 rounded-full"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Error Message */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="mb-8"
|
|
>
|
|
<div className="flex justify-center items-center space-x-3 mb-6">
|
|
<Badge variant="destructive" className="bg-red-100 text-red-700 border-red-200">
|
|
<Bug className="w-4 h-4 mr-1" />
|
|
Application Error
|
|
</Badge>
|
|
</div>
|
|
|
|
<h1 className="text-4xl md:text-5xl font-bold text-slate-800 mb-4">
|
|
Something went wrong!
|
|
</h1>
|
|
|
|
<p className="text-xl text-slate-600 mb-6 leading-relaxed">
|
|
We're sorry, but something unexpected happened. Our team has been notified and we're working to fix this issue.
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Error Details Card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
className="mb-8"
|
|
>
|
|
<Card className="border-red-200 bg-red-50/50">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg font-semibold text-red-800 flex items-center">
|
|
<AlertTriangle className="w-5 h-5 mr-2" />
|
|
Error Details
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<Alert className="border-red-200 bg-white/50">
|
|
<AlertDescription className="text-sm">
|
|
<strong>Message:</strong> {errorDetails.message}
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
{process.env.NODE_ENV === 'development' && (
|
|
<>
|
|
<Alert className="border-orange-200 bg-white/50">
|
|
<AlertDescription className="text-sm font-mono">
|
|
<strong>Error ID:</strong> {errorDetails.digest}
|
|
</AlertDescription>
|
|
</Alert>
|
|
|
|
<Alert className="border-orange-200 bg-white/50">
|
|
<AlertDescription className="text-sm">
|
|
<strong>Timestamp:</strong> {new Date(errorDetails.timestamp).toLocaleString()}
|
|
</AlertDescription>
|
|
</Alert>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
|
|
{/* Action Buttons */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.6 }}
|
|
className="flex flex-col sm:flex-row gap-4 justify-center mb-8"
|
|
>
|
|
<Button
|
|
onClick={reset}
|
|
size="lg"
|
|
className="bg-red-600 text-white hover:bg-red-700"
|
|
>
|
|
<RefreshCw className="w-5 h-5 mr-2" />
|
|
Try Again
|
|
</Button>
|
|
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-slate-300"
|
|
>
|
|
<a href="/">
|
|
<Home className="w-5 h-5 mr-2" />
|
|
Go Home
|
|
</a>
|
|
</Button>
|
|
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant="outline"
|
|
className="border-slate-300"
|
|
>
|
|
<Link href="/contact">
|
|
<Mail className="w-5 h-5 mr-2" />
|
|
Report Issue
|
|
</Link>
|
|
</Button>
|
|
</motion.div>
|
|
|
|
{/* Help Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.8 }}
|
|
className="bg-gradient-to-r from-slate-50 to-emerald-50 rounded-2xl p-6 border border-slate-200"
|
|
>
|
|
<h3 className="text-lg font-bold text-slate-800 mb-3">
|
|
Need immediate assistance?
|
|
</h3>
|
|
<p className="text-slate-600 mb-4 text-sm">
|
|
If this error persists, please contact our support team with the error details above.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 justify-center text-sm">
|
|
<div className="flex items-center justify-center space-x-2 text-slate-600">
|
|
<Mail className="w-4 h-4" />
|
|
<span>support@padmaaja.com</span>
|
|
</div>
|
|
<div className="hidden sm:block text-slate-400">•</div>
|
|
<div className="flex items-center justify-center space-x-2 text-slate-600">
|
|
<span>📞</span>
|
|
<span>+91 98765 43210</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Debug Information (Development Only) */}
|
|
{process.env.NODE_ENV === 'development' && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 1 }}
|
|
className="mt-8"
|
|
>
|
|
<Card className="border-yellow-200 bg-yellow-50">
|
|
<CardHeader className="pb-3">
|
|
<CardTitle className="text-lg font-semibold text-yellow-800">
|
|
🚧 Development Mode - Debug Info
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<pre className="text-xs text-yellow-700 bg-yellow-100 p-3 rounded overflow-auto max-h-32">
|
|
{error.stack || 'No stack trace available'}
|
|
</pre>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.6, delay: 1.2 }}
|
|
className="mt-8 text-center"
|
|
>
|
|
<p className="text-sm text-slate-500">
|
|
© 2024 Padmaaja Rasooi Pvt. Ltd. • "The careful choice"
|
|
</p>
|
|
</motion.div>
|
|
</header>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|