🐈 Make errors recoverable

packages/ui/src/app/App.tsx

@@ -7,6 +7,7 @@ import '@/services/i18n'
 import { ImageReportNotification } from '@/app/components/ImageReportNotification'
 import { OnBoardingOverlay } from '@/app/components/OnboardingOverlay/OnBoardingOverlay'
 import { CouncilModule } from '@/app/pages/Council/CouncilModule'
+import { ErrorPage } from '@/app/pages/ErrorPage'
 import { NotFound } from '@/app/pages/NotFound'
 import { BountyRoutes } from '@/bounty/constants'
 import { ConnectionStatus } from '@/common/components/ConnectionStatus'
@@ -21,7 +22,7 @@ import { ProposalsRoutes } from '@/proposals/constants/routes'
 import { ValidatorsRoutes } from '@/validators/constants/routes'
 import { WorkingGroupsRoutes } from '@/working-groups/constants/routes'
 
-import { ErrorFallback } from './components/ErrorFallback'
+import { ModalErrorFallback, PageErrorFallback } from './components/ErrorFallback'
 import { ExtensionNotification } from './components/ExtensionWarning'
 import { NavBar } from './components/NavBar'
 import { SideBar } from './components/SideBar'
@@ -50,7 +51,7 @@ export const App = () => {
     <Providers>
       <Page>
         <SideBar />
-        <ErrorBoundary FallbackComponent={ErrorFallback}>
+        <ErrorBoundary FallbackComponent={PageErrorFallback}>
           <Screen>
             <OnBoardingOverlay />
             <NavBar />
@@ -70,6 +71,7 @@ export const App = () => {
               <Route path={ValidatorsRoutes.list} component={ValidatorsModule} />
               <Route exact path={TermsRoutes.privacyPolicy} component={PrivacyPolicy} />
               <Route exact path={TermsRoutes.termsOfService} component={TermsOfService} />
+              <Route exact path="/error" component={ErrorPage} />
               <Route exact path="/404" component={NotFound} />
               <Redirect exact from="/" to={WorkingGroupsRoutes.groups} />
               <Redirect exact from={ProposalsRoutes.home} to={ProposalsRoutes.current} />
@@ -78,7 +80,7 @@ export const App = () => {
           </Screen>
         </ErrorBoundary>
       </Page>
-      <ErrorBoundary FallbackComponent={ErrorFallback}>
+      <ErrorBoundary FallbackComponent={ModalErrorFallback}>
         <GlobalModals />
       </ErrorBoundary>
       <NotificationsHolder>

packages/ui/src/app/components/ErrorFallback.tsx

@@ -1,23 +1,42 @@
 import React from 'react'
+import { useHistory } from 'react-router-dom'
 
-import { ButtonPrimary, ButtonsGroup } from '@/common/components/buttons'
+import { ButtonGhost, ButtonPrimary, ButtonsGroup } from '@/common/components/buttons'
 import { FailureIcon } from '@/common/components/icons'
 import { Modal, ModalBody, ModalFooterComponent, ModalHeader } from '@/common/components/Modal'
+import { useModal } from '@/common/hooks/useModal'
 
 interface FallbackProps {
   error: Error
   resetErrorBoundary: (...args: Array<unknown>) => void
 }
 
-export const ErrorFallback = ({ error, resetErrorBoundary }: FallbackProps) => {
+export const PageErrorFallback = (props: FallbackProps) => {
+  const { push } = useHistory()
+  return <ErrorFallback {...props} onClose={() => push('/error')} />
+}
+
+export const ModalErrorFallback = (props: FallbackProps) => {
+  const { hideModal } = useModal()
+  return <ErrorFallback {...props} onClose={hideModal} />
+}
+
+const ErrorFallback = ({ error, resetErrorBoundary, onClose }: FallbackProps & { onClose: () => void }) => {
+  const handleClose = () => {
+    onClose()
+    resetErrorBoundary()
+  }
   return (
     <Modal modalSize="m" onClose={resetErrorBoundary}>
-      <ModalHeader icon={<FailureIcon />} title="Something went wrong" onClick={resetErrorBoundary} />
+      <ModalHeader icon={<FailureIcon />} title="Something went wrong" onClick={handleClose} />
       <ModalBody>
         <pre>{error.message}</pre>
       </ModalBody>
       <ModalFooterComponent>
         <ButtonsGroup align="right">
+          <ButtonGhost size="medium" onClick={handleClose}>
+            Close
+          </ButtonGhost>
           <ButtonPrimary size="medium" onClick={resetErrorBoundary}>
             Try again
           </ButtonPrimary>

packages/ui/src/app/pages/ErrorPage.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+import { PageLayout } from '@/app/components/PageLayout'
+
+export const ErrorPage = () => {
+  return <PageLayout main={<h1>Something went wrong</h1>} />
+}