From b51b9848cfdf121126a569ef127180c4bc97dedc Mon Sep 17 00:00:00 2001
From: alter-eggo <anastas3993@gmail.com>
Date: Wed, 28 Feb 2024 23:47:31 +0400
Subject: [PATCH] fix: error boundary

---
 .../features/errors/app-error-boundary.tsx    | 70 ++++++++++++++++++-
 src/app/routes/app-routes.tsx                 |  3 +-
 2 files changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/app/features/errors/app-error-boundary.tsx b/src/app/features/errors/app-error-boundary.tsx
index f13964586c5..2866387b9be 100644
--- 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
index d53359792b8..dd6ae503a75 100644
--- 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={