From d3d6db03d7417f2f77ed50edae5b921eb1d67667 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 11 Nov 2022 12:51:08 -0800
Subject: [PATCH] Add error boundary

---
 .../components/error-fallback.tsx             | 27 +++++++++++++++++++
 .../features/action-required/index.ts         |  1 +
 src/renderer/index.tsx                        |  6 ++++-
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/features/action-required/components/error-fallback.tsx

diff --git a/src/renderer/features/action-required/components/error-fallback.tsx b/src/renderer/features/action-required/components/error-fallback.tsx
new file mode 100644
index 000000000..be2ca38f8
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/renderer/features/action-required/index.ts b/src/renderer/features/action-required/index.ts
index b90c2ded0..1dc40eec3 100644
--- a/src/renderer/features/action-required/index.ts
+++ b/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';
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
index 89dd40f9d..4b08121b8 100644
--- a/src/renderer/index.tsx
+++ b/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>