77 lines
1.9 KiB
TypeScript
77 lines
1.9 KiB
TypeScript
'use client';
|
|
|
|
import { ErrorDetails } from '@/components/errors/ErrorDetails';
|
|
import { RecoveryActions } from '@/components/errors/RecoveryActions';
|
|
import { ServerErrorPanel } from '@/components/errors/ServerErrorPanel';
|
|
import { Glow } from '@/ui/Glow';
|
|
import { Box } from '@/ui/primitives/Box';
|
|
import { Stack } from '@/ui/primitives/Stack';
|
|
import { Surface } from '@/ui/primitives/Surface';
|
|
|
|
export interface ServerErrorViewData {
|
|
error: Error & { digest?: string };
|
|
incidentId?: string;
|
|
}
|
|
|
|
interface ServerErrorTemplateProps {
|
|
viewData: ServerErrorViewData;
|
|
onRetry: () => void;
|
|
onHome: () => void;
|
|
}
|
|
|
|
/**
|
|
* ServerErrorTemplate
|
|
*
|
|
* Template for the 500 error page.
|
|
* Composes semantic error components into an "instrument-grade" layout.
|
|
*/
|
|
export function ServerErrorTemplate({ viewData, onRetry, onHome }: ServerErrorTemplateProps) {
|
|
return (
|
|
<Box
|
|
as="main"
|
|
minHeight="screen"
|
|
fullWidth
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
bg="bg-deep-graphite"
|
|
position="relative"
|
|
overflow="hidden"
|
|
px={6}
|
|
>
|
|
{/* Background Accents */}
|
|
<Glow color="primary" size="xl" position="center" opacity={0.05} />
|
|
|
|
<Surface
|
|
variant="glass"
|
|
border
|
|
rounded="lg"
|
|
padding={8}
|
|
maxWidth="2xl"
|
|
fullWidth
|
|
position="relative"
|
|
zIndex={10}
|
|
shadow="xl"
|
|
borderColor="border-white"
|
|
bgOpacity={0.05}
|
|
>
|
|
<Stack gap={8} align="center">
|
|
<ServerErrorPanel
|
|
message={viewData.error.message}
|
|
incidentId={viewData.incidentId || viewData.error.digest}
|
|
/>
|
|
|
|
<RecoveryActions
|
|
onRetry={onRetry}
|
|
onHome={onHome}
|
|
/>
|
|
|
|
<ErrorDetails
|
|
error={viewData.error}
|
|
/>
|
|
</Stack>
|
|
</Surface>
|
|
</Box>
|
|
);
|
|
}
|