first commit
This commit is contained in:
244
app/error.tsx
Normal file
244
app/error.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user