refactor app error boundaries

src/renderer/features/action-required/components/route-error-boundary.tsx

@@ -1,87 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useRouteError } from 'react-router';
-
-import { AppMenu } from '/@/renderer/features/titlebar/components/app-menu';
-import { AppRoute } from '/@/renderer/router/routes';
-import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
-import { Button } from '/@/shared/components/button/button';
-import { Center } from '/@/shared/components/center/center';
-import { Divider } from '/@/shared/components/divider/divider';
-import { DropdownMenu } from '/@/shared/components/dropdown-menu/dropdown-menu';
-import { Group } from '/@/shared/components/group/group';
-import { Icon } from '/@/shared/components/icon/icon';
-import { Stack } from '/@/shared/components/stack/stack';
-import { Text } from '/@/shared/components/text/text';
-
-const RouteErrorBoundary = () => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const error = useRouteError() as any;
-    console.error('error', error);
-
-    const handleReload = () => {
-        navigate(0);
-    };
-
-    const handleReturn = () => {
-        navigate(-1);
-    };
-
-    const handleHome = () => {
-        navigate(AppRoute.HOME);
-    };
-
-    return (
-        <div style={{ backgroundColor: 'var(--theme-colors-background)' }}>
-            <Center style={{ height: '100vh' }}>
-                <Stack style={{ maxWidth: '50%' }}>
-                    <Group>
-                        <ActionIcon
-                            icon="arrowLeftS"
-                            onClick={handleReturn}
-                            px={10}
-                            variant="subtle"
-                        />
-                        <Icon fill="error" icon="error" size="lg" />
-                        <Text size="lg">{t('error.genericError')}</Text>
-                    </Group>
-                    <Divider my={5} />
-                    <Text size="sm">{error?.message}</Text>
-                    <Group gap="sm" grow>
-                        <Button
-                            leftSection={<Icon icon="home" />}
-                            onClick={handleHome}
-                            size="md"
-                            style={{ flex: 0.5 }}
-                            variant="default"
-                        >
-                            {t('page.home.title')}
-                        </Button>
-                        <DropdownMenu position="bottom-start">
-                            <DropdownMenu.Target>
-                                <Button
-                                    leftSection={<Icon icon="menu" />}
-                                    size="md"
-                                    style={{ flex: 0.5 }}
-                                    variant="default"
-                                >
-                                    {t('common.menu')}
-                                </Button>
-                            </DropdownMenu.Target>
-                            <DropdownMenu.Dropdown>
-                                <AppMenu />
-                            </DropdownMenu.Dropdown>
-                        </DropdownMenu>
-                    </Group>
-                    <Group grow>
-                        <Button onClick={handleReload} size="md" variant="filled">
-                            {t('common.reload')}
-                        </Button>
-                    </Group>
-                </Stack>
-            </Center>
-        </div>
-    );
-};
-
-export default RouteErrorBoundary;

src/renderer/features/action-required/routes/action-required-route.tsx

@@ -9,6 +9,7 @@ import { ServerCredentialRequired } from '/@/renderer/features/action-required/c
 import { ServerRequired } from '/@/renderer/features/action-required/components/server-required';
 import { ServerList } from '/@/renderer/features/servers/components/server-list';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServerWithCredential } from '/@/renderer/store';
 import { Button } from '/@/shared/components/button/button';
@@ -84,4 +85,12 @@ const ActionRequiredRoute = () => {
     );
 };
 
-export default ActionRequiredRoute;
+const ActionRequiredRouteWithBoundary = () => {
+    return (
+        <PageErrorBoundary>
+            <ActionRequiredRoute />
+        </PageErrorBoundary>
+    );
+};
+
+export default ActionRequiredRouteWithBoundary;

src/renderer/features/action-required/routes/invalid-route.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router';
 
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Center } from '/@/shared/components/center/center';
 import { Group } from '/@/shared/components/group/group';
@@ -32,4 +33,12 @@ const InvalidRoute = () => {
     );
 };
 
-export default InvalidRoute;
+const InvalidRouteWithBoundary = () => {
+    return (
+        <PageErrorBoundary>
+            <InvalidRoute />
+        </PageErrorBoundary>
+    );
+};
+
+export default InvalidRouteWithBoundary;