Merge pull request #85 from which-ecosystem/errors

Handle frontend errors

2 files changed, 24 insertions, 20 deletions

diff --git a/src/containers/Page/DynoWaiter.tsx b/src/containers/Page/DynoWaiter.tsx
index 05d269f..92255da 100644
--- a/src/containers/Page/DynoWaiter.tsx
+++ b/src/containers/Page/DynoWaiter.tsx
@@ -7,9 +7,7 @@ import React, {
 import { makeStyles } from '@material-ui/core/styles';
 import { get } from '../../requests';
 import Loading from '../../components/Loading/Loading';
-import Image from '../../components/Image/Image';
-import Message from '../../components/Message/Message';
-import coffeIcon from '../../assets/coffeeBreak.svg';
+import EmptyState from '../../components/EmptyState/EmptyState';
 
 const DYNO_WAKEUP_TIME = 30;
 
@@ -67,8 +65,8 @@ const DynoWaiter: React.FC = ({ children }) => {
     <>
       {!isReady && (
         <>
-          <Loading message={message} tagline={message && 'Waiting for the server'} />
-          {message && <Message><Image src={coffeIcon} className={classes.img} /></Message>}
+          <Loading />
+          {message && <EmptyState variant="waiting" smart message={message} />}
         </>
       )}
       <div className={isReady ? '' : classes.hidden}>
diff --git a/src/containers/Page/Page.tsx b/src/containers/Page/Page.tsx
index 475f76d..a1d6456 100644
--- a/src/containers/Page/Page.tsx
+++ b/src/containers/Page/Page.tsx
@@ -2,11 +2,13 @@ import React, { Suspense, useEffect } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useHistory } from 'react-router-dom';
 
 import Router from './Router';
 import DynoWaiter from './DynoWaiter';
 import Loading from '../../components/Loading/Loading';
+import EmptyState from '../../components/EmptyState/EmptyState';
 
 
 const useStyles = makeStyles(theme => ({
@@ -33,22 +35,26 @@ const Page: React.FC = () => {
   }, [history]);
 
   return (
-    <SnackbarProvider
-      preventDuplicate
-      maxSnack={isMobile ? 1 : 3}
-      anchorOrigin={{
-        vertical: 'top',
-        horizontal: 'right'
-      }}
+    <ErrorBoundary
+      FallbackComponent={() => <EmptyState variant="error" message="Try reloading the page." />}
     >
-      <div className={classes.root}>
-        <Suspense fallback={<Loading />}>
-          <DynoWaiter>
-            <Router />
-          </DynoWaiter>
-        </Suspense>
-      </div>
-    </SnackbarProvider>
+      <SnackbarProvider
+        preventDuplicate
+        maxSnack={isMobile ? 1 : 3}
+        anchorOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}
+      >
+        <div className={classes.root}>
+          <Suspense fallback={<Loading />}>
+            <DynoWaiter>
+              <Router />
+            </DynoWaiter>
+          </Suspense>
+        </div>
+      </SnackbarProvider>
+    </ErrorBoundary>
   );
 };