73 lines
2.2 KiB
TypeScript
73 lines
2.2 KiB
TypeScript
'use client';
|
|
|
|
import { Card } from '@/ui/Card';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Text } from '@/ui/Text';
|
|
import { AlertTriangle } from 'lucide-react';
|
|
import React from 'react';
|
|
|
|
interface ServerErrorPanelProps {
|
|
message?: string;
|
|
incidentId?: string;
|
|
}
|
|
|
|
/**
|
|
* ServerErrorPanel
|
|
*
|
|
* Displays the primary error information in an "instrument-grade" style.
|
|
* Part of the 500 route redesign.
|
|
*/
|
|
export function ServerErrorPanel({ message, incidentId }: ServerErrorPanelProps) {
|
|
return (
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1.5rem', width: '100%' }}>
|
|
{/* Status Indicator */}
|
|
<div
|
|
style={{
|
|
padding: '1rem',
|
|
borderRadius: '9999px',
|
|
backgroundColor: 'rgba(255, 190, 77, 0.1)',
|
|
border: '1px solid rgba(255, 190, 77, 0.3)',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center'
|
|
}}
|
|
>
|
|
<Icon icon={AlertTriangle} size={8} intent="warning" />
|
|
</div>
|
|
|
|
{/* Primary Message */}
|
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem' }}>
|
|
<Heading level={1} weight="bold">
|
|
CRITICAL_SYSTEM_FAILURE
|
|
</Heading>
|
|
<Text variant="low" align="center" style={{ maxWidth: '32rem' }}>
|
|
The application engine encountered an unrecoverable state.
|
|
Telemetry has been dispatched to engineering.
|
|
</Text>
|
|
</div>
|
|
|
|
{/* Technical Summary */}
|
|
<div style={{ width: '100%' }}>
|
|
<Card variant="outline">
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
|
|
<Text font="mono" size="sm" variant="warning" block>
|
|
STATUS: 500_INTERNAL_SERVER_ERROR
|
|
</Text>
|
|
{message && (
|
|
<Text font="mono" size="xs" variant="low" block>
|
|
EXCEPTION: {message}
|
|
</Text>
|
|
)}
|
|
{incidentId && (
|
|
<Text font="mono" size="xs" variant="low" block>
|
|
INCIDENT_ID: {incidentId}
|
|
</Text>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|