Add error boundary

src/renderer/features/action-required/components/error-fallback.tsx

@@ -0,0 +1,27 @@
+import { Box, Center, Group, Stack } from '@mantine/core';
+import { RiErrorWarningLine } from 'react-icons/ri';
+import styled from 'styled-components';
+import { Button, Text } from '@/renderer/components';
+
+const Container = styled(Box)`
+  background: var(--main-bg);
+`;
+
+export const ErrorFallback = ({ error, resetErrorBoundary }: any) => {
+  return (
+    <Container>
+      <Center sx={{ height: '100vh' }}>
+        <Stack>
+          <Group spacing="xs">
+            <RiErrorWarningLine color="var(--danger-color)" size={30} />
+            <Text size="lg">Something went wrong</Text>
+          </Group>
+          <Text>{error.message}</Text>
+          <Button variant="filled" onClick={resetErrorBoundary}>
+            Reload
+          </Button>
+        </Stack>
+      </Center>
+    </Container>
+  );
+};

src/renderer/features/action-required/index.ts

@@ -1,2 +1,3 @@
 export * from './routes/action-required-route';
 export * from './routes/invalid-route';
+export * from './components/error-fallback';

src/renderer/index.tsx

@@ -1,7 +1,9 @@
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { createRoot } from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
 import { I18nextProvider } from 'react-i18next';
+import { ErrorFallback } from '@/renderer/features/action-required';
 import { queryClient } from '@/renderer/lib/react-query';
 import i18n from '../i18n/i18n';
 import { App } from './app';
@@ -12,7 +14,9 @@ const root = createRoot(container);
 root.render(
   <I18nextProvider i18n={i18n}>
     <QueryClientProvider client={queryClient}>
-      <App />
+      <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <App />
+      </ErrorBoundary>
       <ReactQueryDevtools position="bottom-left" />
     </QueryClientProvider>
   </I18nextProvider>