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 | import { IconAlertCircle, IconRefresh } from '@tabler/icons-react';
import { Alert, Button, Container, Stack, Text, Title } from '@mantine/core';
interface ErrorFallbackProps {
/**
* Context identifier for the error (e.g., 'Router', 'QueryProvider')
*/
context?: string;
/**
* Optional error object to display details
*/
error?: Error;
}
/**
* Default fallback UI component displayed when an error boundary catches an error.
*
* Provides:
* - User-friendly error message
* - Reload button to recover
* - Error details in development mode
*
* @see docs/interfaces/react-coding-standards.md
*/
export function ErrorFallback({ context = 'Application', error }: ErrorFallbackProps) {
const handleReload = () => {
window.location.reload();
};
return (
<Container size="sm" py="xl">
<Stack gap="lg">
<Alert
icon={<IconAlertCircle size={24} />}
title="Something went wrong"
color="red"
variant="light"
>
<Text size="sm">
An unexpected error occurred in the {context}. Please try reloading the page.
</Text>
</Alert>
<Button
leftSection={<IconRefresh size={18} />}
onClick={handleReload}
variant="light"
color="blue"
>
Reload Page
</Button>
{import.meta.env.DEV && error ? (
<Stack gap="xs">
<Title order={4}>Error Details (Development Only)</Title>
<Alert color="gray" variant="outline">
<Text size="xs" ff="monospace">
<strong>Message:</strong> {error.message}
</Text>
{error.stack ? (
<Text size="xs" ff="monospace" mt="xs" style={{ whiteSpace: 'pre-wrap' }}>
<strong>Stack:</strong>
{'\n'}
{error.stack}
</Text>
) : null}
</Alert>
</Stack>
) : null}
</Stack>
</Container>
);
}
|