fix: error boundary

leather-io · Feb 28, 2024 · 3bc8157 · 3bc8157
1 parent cc19e40
commit 3bc8157
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 2 deletions.
diff --git a/src/app/features/errors/app-error-boundary.tsx b/src/app/features/errors/app-error-boundary.tsx
@@ -1,4 +1,8 @@
-import { Box, Stack, styled } from 'leather-styles/jsx';
+import { useRouteError } from 'react-router-dom';
+
+import BroadcastError from '@assets/images/unhappy-face-ui.png';
+import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
+import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
 
 import { Prism } from '@app/common/clarity-prism';
 import { HasChildren } from '@app/common/has-children';
@@ -7,9 +11,73 @@ import { Header } from '@app/components/header';
 import { ErrorBoundary, FallbackProps, useErrorHandler } from '@app/features/errors/error-boundary';
 import { openGithubIssue } from '@app/features/errors/utils';
 import { useErrorStackTraceState } from '@app/store/ui/ui.hooks';
+import { Button } from '@app/ui/components/button/button';
 import { CodeBlock } from '@app/ui/components/codeblock';
 import { Title } from '@app/ui/components/typography/title';
 
+export function RouterErrorBoundary() {
+  const error = useRouteError() as Error;
+
+  const title = 'Something went wrong';
+  const body = 'An error occurred in the app.';
+  const errorPayload = error.message;
+
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      px={['space.05', 'unset']}
+      width="100%"
+      height="100vh"
+    >
+      <Box mt="space.05">
+        <img src={BroadcastError} alt="Unhappy user interface cloud" width="106px" />
+      </Box>
+      <styled.span
+        data-testid={SharedComponentsSelectors.BroadcastErrorTitle}
+        mx="space.05"
+        mt="space.05"
+        textStyle="heading.05"
+      >
+        {title}
+      </styled.span>
+      <styled.span color="ink.text-subdued" mt="space.04" textAlign="center" textStyle="body.02">
+        {body}
+      </styled.span>
+
+      {errorPayload && (
+        <Box
+          bg="ink.component-background-default"
+          borderRadius="sm"
+          my="space.05"
+          mx="space.05"
+          p="space.04"
+          textAlign="left"
+          textStyle="mono.02"
+          wordBreak="break-all"
+        >
+          {errorPayload}
+        </Box>
+      )}
+
+      <Stack gap="space.04">
+        <Button onClick={() => window.location.reload()} type="button">
+          Reload extension
+        </Button>
+        <Button
+          onClick={() =>
+            openGithubIssue({ message: error.message, stackTrace: JSON.stringify(error) })
+          }
+          type="button"
+        >
+          Report issue on GitHub
+        </Button>
+      </Stack>
+    </Flex>
+  );
+}
+
 function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   const [value] = useErrorStackTraceState();
 

diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx
@@ -13,6 +13,7 @@ import { LoadingSpinner } from '@app/components/loading-spinner';
 import { AddNetwork } from '@app/features/add-network/add-network';
 import { Container } from '@app/features/container/container';
 import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer';
+import { RouterErrorBoundary } from '@app/features/errors/app-error-boundary';
 import { IncreaseBtcFeeDrawer } from '@app/features/increase-fee-drawer/increase-btc-fee-drawer';
 import { IncreaseFeeSentDrawer } from '@app/features/increase-fee-drawer/increase-fee-sent-drawer';
 import { IncreaseStxFeeDrawer } from '@app/features/increase-fee-drawer/increase-stx-fee-drawer';
@@ -79,7 +80,7 @@ export const homePageModalRoutes = (
 function useAppRoutes() {
   return createHashRouter(
     createRoutesFromElements(
-      <Route element={<Container />}>
+      <Route element={<Container />} errorElement={<RouterErrorBoundary />}>
         <Route
           path="/*"
           element={