add component error boundary

2026-05-07 04:20:12 +02:00 · 2025-11-30 13:37:33 -08:00
parent fd2023e9d6
commit f425e6ba63
1 changed files with 54 additions and 0 deletions
@@ -0,0 +1,54 @@
+import { ErrorBoundary } from 'react-error-boundary';
+import { useTranslation } from 'react-i18next';
+
+import { Box } from '/@/shared/components/box/box';
+import { Button } from '/@/shared/components/button/button';
+import { Center } from '/@/shared/components/center/center';
+import { Group } from '/@/shared/components/group/group';
+import { Icon } from '/@/shared/components/icon/icon';
+import { Stack } from '/@/shared/components/stack/stack';
+import { TextTitle } from '/@/shared/components/text-title/text-title';
+
+interface ComponentErrorFallbackProps {
+    error: Error;
+    resetErrorBoundary: () => void;
+}
+
+const ComponentErrorFallback = ({ resetErrorBoundary }: ComponentErrorFallbackProps) => {
+    const { t } = useTranslation();
+
+    const handleRefresh = () => {
+        window.location.reload();
+    };
+
+    return (
+        <Box h="100%" pos="relative" w="100%">
+            <Center h="100%" p="md" w="100%">
+                <Stack maw="800px">
+                    <Group gap="xs">
+                        <Icon fill="error" icon="error" size="lg" />
+                        <TextTitle fw={600} order={4}>
+                            {t('error.genericError', { postProcess: 'sentenceCase' })}
+                        </TextTitle>
+                    </Group>
+                    <Group grow>
+                        <Button onClick={resetErrorBoundary} size="xs" variant="default">
+                            {t('common.reload', { postProcess: 'sentenceCase' })}
+                        </Button>
+                        <Button onClick={handleRefresh} size="xs" variant="filled">
+                            {t('common.refresh', { postProcess: 'sentenceCase' })}
+                        </Button>
+                    </Group>
+                </Stack>
+            </Center>
+        </Box>
+    );
+};
+
+interface ComponentErrorBoundaryProps {
+    children: React.ReactNode;
+}
+
+export const ComponentErrorBoundary = ({ children }: ComponentErrorBoundaryProps) => {
+    return <ErrorBoundary FallbackComponent={ComponentErrorFallback}>{children}</ErrorBoundary>;
+};