import { AlertCircle, ArrowLeft, Home } from 'lucide-react';
import { useEffect } from 'react';
import { Head, Link } from '@inertiajs/react';
import { Button } from '@/Components/ui/button';
import { trackEvent } from '@/lib/analytics';
import { ERROR_DISPLAYED, ErrorCategory, ErrorSeverity } from '@/lib/event-catalog';
import { captureMessage } from '@/lib/sentry';
const popularLinks = [
{ href: '/', label: 'Home' },
{ href: '/features', label: 'Features' },
{ href: '/pricing', label: 'Pricing' },
{ href: '/blog', label: 'Blog' },
];
interface ErrorProps {
status: number;
}
const errorMessages: Record = {
403: {
title: "You Don't Have Access",
description:
"Your account doesn't have permission to view this page. Head back or return to your dashboard.",
},
404: {
title: 'Page Not Found',
description:
"We couldn't find what you were looking for. It may have moved or the link might be broken.",
},
419: {
title: 'Session Expired',
description:
'Your session timed out for security. Refresh the page to pick up where you left off.',
},
429: {
title: 'Slow Down a Bit',
description:
"You've sent a lot of requests in a short window. Wait a minute or two, then try again.",
},
500: {
title: 'Something Went Wrong',
description:
"We hit an unexpected error. Try refreshing the page — if the problem persists, check our status page or reach out to support.",
},
503: {
title: 'Back in a Moment',
description:
'RankWiz is briefly unavailable — likely a deploy or maintenance window. Try again in a minute.',
},
};
export default function Error({ status }: ErrorProps) {
const error = errorMessages[status] || {
title: 'Error',
description: 'An unexpected error occurred.',
};
useEffect(() => {
if (status >= 500) {
captureMessage(`Error page displayed: ${status} ${error.title}`);
}
trackEvent(ERROR_DISPLAYED, {
error_code: String(status),
error_message: error.title,
error_category: status === 403 ? ErrorCategory.AUTH : ErrorCategory.SERVER,
error_severity: status >= 500 ? ErrorSeverity.CRITICAL : ErrorSeverity.WARNING,
referrer_url: typeof document !== 'undefined' ? document.referrer : '',
context: 'Error',
});
}, [status, error.title]);
return (
<>
{/* Error Icon */}
{/* Status Code */}
{status}
{/* Title */}
{error.title}
{/* Description */}
{error.description}
{/* Action Buttons */}
{/* Support links — shown for 500/503 errors */}
{(status === 500 || status === 503) && (
Need help?
)}
{/* Popular links — shown for 404 only */}
{status === 404 && (