add error boundary to the app root

src/renderer/components/error-boundary/root-error-boundary.tsx

@@ -0,0 +1,89 @@
+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 { Text } from '/@/shared/components/text/text';
+
+interface RootErrorFallbackProps {
+    error: Error;
+    resetErrorBoundary: () => void;
+}
+
+const RootErrorFallback = ({ error, resetErrorBoundary }: RootErrorFallbackProps) => {
+    const { t } = useTranslation();
+
+    const handleReload = () => {
+        window.location.reload();
+    };
+
+    return (
+        <Box
+            style={{
+                backgroundColor: 'var(--theme-colors-background)',
+                height: '100vh',
+                width: '100vw',
+            }}
+        >
+            <Center style={{ height: '100vh' }}>
+                <Stack style={{ maxWidth: '50%' }}>
+                    <Group gap="xs">
+                        <Icon fill="error" icon="error" size="lg" />
+                        <Text size="lg">{t('error.genericError')}</Text>
+                    </Group>
+                    <Text size="sm" style={{ wordBreak: 'break-word' }}>
+                        {error?.message || t('error.genericError')}
+                    </Text>
+                    {process.env.NODE_ENV === 'development' && error?.stack && (
+                        <Text
+                            size="xs"
+                            style={{
+                                backgroundColor: 'var(--theme-colors-error)',
+                                color: 'var(--theme-colors-errorText)',
+                                fontFamily: 'monospace',
+                                maxHeight: '300px',
+                                overflow: 'auto',
+                                padding: '10px',
+                                wordBreak: 'break-word',
+                            }}
+                        >
+                            {error.stack}
+                        </Text>
+                    )}
+                    <Group grow>
+                        <Button onClick={resetErrorBoundary} size="md" variant="default">
+                            {t('common.reload')}
+                        </Button>
+                        <Button onClick={handleReload} size="md" variant="filled">
+                            {t('common.reload')}
+                        </Button>
+                    </Group>
+                </Stack>
+            </Center>
+        </Box>
+    );
+};
+
+interface RootErrorBoundaryProps {
+    children: React.ReactNode;
+}
+
+export const RootErrorBoundary = ({ children }: RootErrorBoundaryProps) => {
+    return (
+        <ErrorBoundary
+            FallbackComponent={RootErrorFallback}
+            onError={(error, errorInfo) => {
+                if (process.env.NODE_ENV === 'development') {
+                    console.error('Root error boundary caught an error:', error, errorInfo);
+                }
+            }}
+            onReset={() => {}}
+        >
+            {children}
+        </ErrorBoundary>
+    );
+};

src/renderer/main.tsx

@@ -7,6 +7,7 @@ import { del, get, set } from 'idb-keyval';
 import { createRoot } from 'react-dom/client';
 
 import { App } from '/@/renderer/app';
+import { RootErrorBoundary } from '/@/renderer/components/error-boundary/root-error-boundary';
 import { queryClient } from '/@/renderer/lib/react-query';
 
 function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
@@ -26,32 +27,34 @@ function createIDBPersister(idbValidKey: IDBValidKey = 'reactQuery') {
 const indexedDbPersister = createIDBPersister('feishin');
 
 createRoot(document.getElementById('root')!).render(
-    <PersistQueryClientProvider
-        client={queryClient}
-        persistOptions={{
-            buster: 'feishin',
-            dehydrateOptions: {
-                shouldDehydrateQuery: (query) => {
-                    const isSuccess = query.state.status === 'success';
-                    const isLyricsQueryKey =
-                        query.queryKey.includes('song') &&
-                        query.queryKey.includes('lyrics') &&
-                        query.queryKey.includes('select');
+    <RootErrorBoundary>
+        <PersistQueryClientProvider
+            client={queryClient}
+            persistOptions={{
+                buster: 'feishin',
+                dehydrateOptions: {
+                    shouldDehydrateQuery: (query) => {
+                        const isSuccess = query.state.status === 'success';
+                        const isLyricsQueryKey =
+                            query.queryKey.includes('song') &&
+                            query.queryKey.includes('lyrics') &&
+                            query.queryKey.includes('select');
 
-                    return isSuccess && isLyricsQueryKey;
-                },
-            },
-            hydrateOptions: {
-                defaultOptions: {
-                    queries: {
-                        gcTime: Infinity,
+                        return isSuccess && isLyricsQueryKey;
                     },
                 },
-            },
-            maxAge: Infinity,
-            persister: indexedDbPersister,
-        }}
-    >
-        <App />
-    </PersistQueryClientProvider>,
+                hydrateOptions: {
+                    defaultOptions: {
+                        queries: {
+                            gcTime: Infinity,
+                        },
+                    },
+                },
+                maxAge: Infinity,
+                persister: indexedDbPersister,
+            }}
+        >
+            <App />
+        </PersistQueryClientProvider>
+    </RootErrorBoundary>,
 );