94 lines
4.2 KiB
TypeScript
94 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { getAppServices } from '@/lib/services/create-services';
|
|
import { Container, Button, Heading } from '@/components/ui';
|
|
import Scribble from '@/components/Scribble';
|
|
|
|
export default function Error({
|
|
error,
|
|
reset,
|
|
}: {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
}) {
|
|
const t = useTranslations('Error');
|
|
|
|
useEffect(() => {
|
|
// Treat "Failed to find Server Action" as a deployment sync issue and reload
|
|
if (error?.message?.includes('Failed to find Server Action')) {
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
|
|
const services = getAppServices();
|
|
services.errors.captureException(error);
|
|
services.logger.error('Application error caught by boundary', {
|
|
message: error?.message || 'Unknown error',
|
|
stack: error?.stack,
|
|
digest: error?.digest,
|
|
});
|
|
|
|
// Force solid header
|
|
document.body.setAttribute('data-force-solid-header', 'true');
|
|
return () => {
|
|
document.body.removeAttribute('data-force-solid-header');
|
|
};
|
|
}, [error]);
|
|
|
|
return (
|
|
<>
|
|
<div className="relative min-h-[80vh] flex flex-col items-center justify-center overflow-hidden bg-[#050B14] py-24 px-4 mt-16">
|
|
{/* Deep Tech Grid Background */}
|
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] pointer-events-none" />
|
|
|
|
{/* Glowing Orb */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-red-500/20 blur-[120px] rounded-full pointer-events-none" />
|
|
|
|
<div className="relative z-10 w-full max-w-2xl mx-auto">
|
|
<div className="group relative bg-[#050B14]/80 backdrop-blur-xl rounded-[2.5rem] p-12 md:p-16 border border-white/10 shadow-2xl overflow-hidden text-center">
|
|
{/* Inner Shimmer */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-white/[0.05] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
|
|
|
|
<div className="relative mb-8">
|
|
<h1 className="text-8xl md:text-9xl font-heading font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 drop-shadow-[0_0_30px_rgba(255,255,255,0.1)]">
|
|
500
|
|
</h1>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-1 bg-red-500/40 blur-md skew-y-[-10deg]" />
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-px bg-red-500 skew-y-[-10deg] shadow-[0_0_15px_rgba(239,68,68,1)]" />
|
|
</div>
|
|
|
|
<div className="inline-flex items-center gap-3 px-4 py-1.5 mb-6 rounded-full bg-red-500/10 border border-red-500/20 text-xs font-bold uppercase tracking-wider text-red-400">
|
|
<span className="w-2 h-2 rounded-full bg-red-500 animate-[ping_2s_infinite] shadow-[0_0_10px_rgba(239,68,68,0.8)]" />
|
|
SYSTEM PROTOCOL: CRITICAL ERROR
|
|
</div>
|
|
|
|
<Heading level={2} className="text-2xl md:text-3xl font-bold mb-4 text-white">
|
|
{t('title')}
|
|
</Heading>
|
|
|
|
<p className="text-white/60 mb-10 max-w-md text-lg mx-auto leading-relaxed">
|
|
{t('description')}
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<Button onClick={() => reset()} variant="primary" className="shadow-[0_0_20px_rgba(var(--color-primary),0.3)]">
|
|
{t('tryAgain')}
|
|
</Button>
|
|
<Button href="/" variant="outline" className="border-white/20 text-white hover:bg-white/5">
|
|
{t('goHome')}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Decorative Base Line */}
|
|
<div className="w-full flex justify-center mt-12 opacity-50">
|
|
<div className="w-px h-24 bg-gradient-to-t from-red-500/50 to-transparent" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|