76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/ui/Card';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { AppErrorBoundaryView } from './AppErrorBoundaryView';
|
|
import { ErrorDetailsBlock } from './ErrorDetailsBlock';
|
|
import { ErrorRecoveryActions } from './ErrorRecoveryActions';
|
|
|
|
interface ErrorScreenProps {
|
|
error: Error & { digest?: string };
|
|
reset: () => void;
|
|
onHome: () => void;
|
|
}
|
|
|
|
/**
|
|
* ErrorScreen
|
|
*
|
|
* Semantic component for the root-level error boundary.
|
|
* Follows "Precision Racing Minimal" theme.
|
|
*/
|
|
export function ErrorScreen({ error, reset, onHome }: ErrorScreenProps) {
|
|
return (
|
|
<Stack
|
|
as="main"
|
|
minHeight="screen"
|
|
fullWidth
|
|
align="center"
|
|
justify="center"
|
|
bg="bg-deep-graphite"
|
|
position="relative"
|
|
overflow="hidden"
|
|
px={6}
|
|
>
|
|
{/* Background Accents */}
|
|
<Glow color="primary" size="xl" position="center" opacity={0.05} />
|
|
|
|
<Card
|
|
variant="outline"
|
|
rounded="lg"
|
|
p={8}
|
|
maxWidth="2xl"
|
|
fullWidth
|
|
position="relative"
|
|
zIndex={10}
|
|
borderColor="border-white"
|
|
className="bg-white/5 backdrop-blur-md"
|
|
>
|
|
<AppErrorBoundaryView
|
|
title="System Malfunction"
|
|
description="The application encountered an unexpected state. Our telemetry has logged the incident."
|
|
>
|
|
{/* Error Message Summary */}
|
|
<Card
|
|
variant="outline"
|
|
rounded="md"
|
|
p={4}
|
|
fullWidth
|
|
borderColor="border-white"
|
|
className="bg-graphite-black/20"
|
|
>
|
|
<Text font="mono" size="sm" color="text-warning-amber" block>
|
|
{error.message || 'Unknown execution error'}
|
|
</Text>
|
|
</Card>
|
|
|
|
<ErrorRecoveryActions onRetry={reset} onHome={onHome} />
|
|
|
|
<ErrorDetailsBlock error={error} />
|
|
</AppErrorBoundaryView>
|
|
</Card>
|
|
</Stack>
|
|
);
|
|
}
|