feat(project): show error page when config fails

src/App.tsx

@@ -32,15 +32,27 @@ class App extends Component {
     initializeFavorites();
   }
 
+  configLoadingHandler = (isLoading: boolean) => {
+    console.info(`Loading config: ${isLoading}`)
+  };
+
+  configErrorHandler = (error: Error) => {
+    this.setState({ error });
+  };
+
+  configValidationCompletedHandler = (config: Config) => {
+    this.initializeServices(config);
+  };
+
   render() {
     return (
       <I18nextProvider i18n={getI18n()}>
         <QueryProvider>
           <ConfigProvider
             configLocation={window.configLocation}
-            onLoading={(isLoading: boolean) => console.info(`Loading config: ${isLoading}`)}
-            onValidationError={(error: Error) => console.error(`Config ${error}`)}
-            onValidationCompleted={(config) => this.initializeServices(config)}
+            onLoading={this.configLoadingHandler}
+            onValidationError={this.configErrorHandler}
+            onValidationCompleted={this.configValidationCompletedHandler}
           >
             <Router>
               <Root error={this.state.error} />

src/components/Root/Root.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 import Series from '../../screens/Series/Series';
 import Layout from '../Layout/Layout';
@@ -8,14 +9,21 @@ import Playlist from '../../screens/Playlist/Playlist';
 import Settings from '../../screens/Settings/Settings';
 import Movie from '../../screens/Movie/Movie';
 import Search from '../../screens/Search/Search';
+import ErrorPage from '../ErrorPage/ErrorPage';
 
 type Props = {
   error?: Error | null;
 };
 
 const Root: FC<Props> = ({ error }: Props) => {
+  const { t } = useTranslation('error');
+
   if (error) {
-    return <div>Error!</div>;
+    return (
+      <ErrorPage title={t('generic_error_heading', 'There was an issue loading the application')}>
+        <p>{t('generic_error_description', 'Try refreshing this page or come back later.')}</p>
+      </ErrorPage>
+    );
   }
 
   return (

src/components/Root/__snapshots__/Root.test.tsx.snap

@@ -135,8 +135,27 @@ exports[`<Root /> renders and matches snapshot 1`] = `
 
 exports[`<Root /> renders error page when error prop is passed 1`] = `
 <div>
-  <div>
-    Error!
+  <div
+    class="errorPage"
+  >
+    <div
+      class="box"
+    >
+      <header>
+        <h1
+          class="title"
+        >
+          generic_error_heading
+        </h1>
+      </header>
+      <main
+        class="main"
+      >
+        <p>
+          generic_error_description
+        </p>
+      </main>
+    </div>
   </div>
 </div>
 `;

src/i18n/locales/en_US.ts

@@ -2,6 +2,7 @@
 // Run `$ yarn i18next:scan` to update this file
 
 export { default as common } from './en_US/common.json';
+export { default as error } from './en_US/error.json';
 export { default as menu } from './en_US/menu.json';
 export { default as search } from './en_US/search.json';
 export { default as video } from './en_US/video.json';

src/i18n/locales/en_US/error.json

@@ -0,0 +1,4 @@
+{
+  "generic_error_description": "There was an issue loading the application",
+  "generic_error_heading": "Try refreshing this page or come back later."
+}

src/i18n/locales/nl_NL.ts

@@ -2,6 +2,7 @@
 // Run `$ yarn i18next:scan` to update this file
 
 export { default as common } from './nl_NL/common.json';
+export { default as error } from './nl_NL/error.json';
 export { default as menu } from './nl_NL/menu.json';
 export { default as search } from './nl_NL/search.json';
 export { default as video } from './nl_NL/video.json';

src/i18n/locales/nl_NL/error.json

@@ -0,0 +1,4 @@
+{
+  "generic_error_description": "",
+  "generic_error_heading": ""
+}

src/providers/ConfigProvider.tsx

@@ -30,21 +30,26 @@ export type ProviderProps = {
   onValidationCompleted: (config: Config) => void;
 };
 
-const ConfigProvider: FunctionComponent<ProviderProps> = ({
-  children,
-  configLocation,
-  onLoading,
-  onValidationError,
-  onValidationCompleted,
-}) => {
+const ConfigProvider: FunctionComponent<ProviderProps> = (
+  {
+    children,
+    configLocation,
+    onLoading,
+    onValidationError,
+    onValidationCompleted,
+  }
+) => {
   const [config, setConfig] = useState<Config>(defaultConfig);
   const [loading, setLoading] = useState<boolean>(true);
 
   useEffect(() => {
     const loadAndValidateConfig = async (configLocation: string) => {
       onLoading(true);
       setLoading(true);
-      const config = await loadConfig(configLocation);
+      const config = await loadConfig(configLocation).catch((error) => {
+        onValidationError(error);
+      });
+
       validateConfig(config)
         .then((configValidated) => {
           setConfig(() => merge({}, defaultConfig, configValidated));

src/services/config.service.ts

@@ -54,25 +54,27 @@ const loadConfig = async (configLocation: string) => {
   if (!configLocation) {
     return null;
   }
-  try {
-    const response = await fetch(configLocation, {
-      headers: {
-        Accept: 'application/json',
-      },
-      method: 'GET',
-    });
 
-    const data = await response.json();
+  const response = await fetch(configLocation, {
+    headers: {
+      Accept: 'application/json',
+    },
+    method: 'GET',
+  });
 
-    addPersonalShelves(data);
+  if (!response.ok) {
+    throw new Error('Failed to load the config');
+  }
 
-    if (data.version) {
-      return parseDeprecatedConfig(data);
-    }
-    return data;
-  } catch (error: unknown) {
-    return error;
+  const data = await response.json();
+
+  addPersonalShelves(data);
+
+  if (data.version) {
+    return parseDeprecatedConfig(data);
   }
+
+  return data;
 };
 
 /**