Handling Network Error when API is down

Author: snyaggarwal

src/components/app/App.jsx

@@ -7,6 +7,7 @@ import {
 import Error404 from '../errors/Error404';
 import Error403 from '../errors/Error403';
 import Error401 from '../errors/Error401';
+import NetworkError from '../errors/NetworkError'
 import ErrorBoundary from '../errors/ErrorBoundary';
 import CheckAuth from './CheckAuth'
 import Footer from './Footer';
@@ -36,6 +37,7 @@ const AuthenticationRequiredRoute = ({component: Component, ...rest}) => (
 )
 
 const App = props => {
+  const [networkError, setNetworkError] = React.useState(false)
   const { alert, setAlert, setToggles } = React.useContext(OperationsContext);
   const setupHotJar = () => {
     /*eslint no-undef: 0*/
@@ -47,8 +49,12 @@ const App = props => {
   const fetchToggles = async () => {
     return new Promise(resolve => {
       APIService.toggles().get().then(response => {
-        setToggles(response.data)
-        resolve();
+        if(response === 'Network Error')
+          setNetworkError(true)
+        else {
+          setToggles(response.data)
+          resolve();
+        }
       });
     });
   }
@@ -93,6 +99,7 @@ const App = props => {
       <Header>
         <ErrorBoundary>
           <main className='content'>
+            {networkError && <NetworkError />}
             <Switch>
               <Route exact path="/oidc/login" component={OIDLoginCallback} />
               <AuthenticationRequiredRoute exact path='/' component={MapProjects} />

src/components/errors/NetworkError.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next'
+
+const NetworkError = () => {
+  const { t } = useTranslation()
+  return (
+    <div style={{display: 'flex', height: 'calc(100vh - 100px)', alignItems: 'center', justifyContent: 'center', textAlign: 'center', flexDirection: 'column'}}>
+      <div className='col-xs-12'>
+        <p style={{color: '#000', fontSize: '24px', margin: '16px 0'}}>
+          {t('errors.network_error')}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default NetworkError;

src/i18n/locales/en/translations.json

@@ -95,7 +95,8 @@
   "errors": {
     "404": "Sorry your page could not be found.",
     "401": "Login is required",
-    "403": "Access to this page is not authorized"
+    "403": "Access to this page is not authorized",
+    "network_error": "Network Error"
   },
   "dashboard": {
     "name": "Dashboard",