Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 1x 1x 1x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 2x 2x 2x 2x 2x 2x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 12x 1x 1x | 'use client';
import React from 'react';
/**
* Full Page Error Component
*
* Displays a full-page error UI for top-level error boundary catches.
* Used when React fails to render the main application.
*
* Note: This component intentionally avoids complex dependencies
* as it needs to render even when the app is in a broken state.
*/
export interface FullPageErrorProps {
/** Optional error object */
error?: Error | null;
/** Error ID for tracking */
errorId?: string | null;
/** Reset function to try again */
onReset?: () => void;
}
export function FullPageError({ error, errorId, onReset }: FullPageErrorProps) {
const handleRefresh = () => {
window.location.reload();
};
const handleGoHome = () => {
window.location.href = '/';
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 px-4">
<div className="max-w-md w-full text-center">
{/* Logo */}
<div className="mb-8">
<div className="inline-flex items-center justify-center w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full mb-4">
<svg
className="w-8 h-8 text-red-600 dark:text-red-400"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
/>
</svg>
</div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
Elite Events
</h1>
</div>
{/* Error Message */}
<div className="mb-8">
<h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-2">
Something went wrong
</h2>
<p className="text-gray-600 dark:text-gray-400 mb-4">
We're sorry, but something unexpected happened. Our team has been
notified and is working on a fix.
</p>
{errorId && (
<p className="text-xs text-gray-400 dark:text-gray-500">
Error ID: {errorId}
</p>
)}
{error && process.env.NODE_ENV === 'development' && (
<details className="mt-4 text-left">
<summary className="text-sm text-gray-500 cursor-pointer hover:text-gray-700 dark:hover:text-gray-300">
Technical Details (Dev Only)
</summary>
<pre className="mt-2 p-3 bg-gray-100 dark:bg-gray-800 rounded text-xs text-red-600 dark:text-red-400 overflow-auto max-h-40">
{error.message}
{error.stack && `\n\n${error.stack}`}
</pre>
</details>
)}
</div>
{/* Actions */}
<div className="space-y-3">
<button
onClick={handleRefresh}
className="w-full px-6 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors"
>
Try Again
</button>
{onReset && (
<button
onClick={onReset}
className="w-full px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-colors"
>
Reset Application
</button>
)}
<button
onClick={handleGoHome}
className="w-full px-6 py-3 text-blue-600 dark:text-blue-400 font-medium hover:underline focus:outline-none"
>
Go to Homepage
</button>
</div>
{/* Support Link */}
<div className="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<p className="text-sm text-gray-500 dark:text-gray-400">
Need help?{' '}
<a
href="/contact"
className="text-blue-600 dark:text-blue-400 hover:underline"
>
Contact Support
</a>
</p>
</div>
</div>
</div>
);
}
export default FullPageError;
|