From f425e6ba63d0343c47bb92b446ca49eb56bd036e Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 30 Nov 2025 13:37:33 -0800
Subject: [PATCH] add component error boundary

---
 .../components/component-error-boundary.tsx   | 54 +++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/renderer/features/shared/components/component-error-boundary.tsx

diff --git a/src/renderer/features/shared/components/component-error-boundary.tsx b/src/renderer/features/shared/components/component-error-boundary.tsx
new file mode 100644
index 000000000..dda165c0f
--- /dev/null
+++ b/src/renderer/features/shared/components/component-error-boundary.tsx
@@ -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>;
+};