Attempt to improve handling of top-level unrecoverable fatal errors

Author: Vadorequest

src/components/appBootstrap/MultiversalAppBootstrap.tsx

@@ -4,6 +4,7 @@ import { createLogger } from '@unly/utils-simple-logger';
 import { ThemeProvider } from 'emotion-theming';
 import { i18n } from 'i18next';
 import React from 'react';
+import ErrorPage from '../../pages/_error';
 import customerContext from '../../stores/customerContext';
 import i18nContext from '../../stores/i18nContext';
 import { Theme } from '../../types/data/Theme';
@@ -13,6 +14,7 @@ import { SSGPageProps } from '../../types/pageProps/SSGPageProps';
 import { SSRPageProps } from '../../types/pageProps/SSRPageProps';
 import { initCustomerTheme } from '../../utils/data/theme';
 import i18nextLocize from '../../utils/i18n/i18nextLocize';
+import DefaultErrorLayout from '../errors/DefaultErrorLayout';
 import BrowserPageBootstrap, { BrowserPageBootstrapProps } from './BrowserPageBootstrap';
 import ServerPageBootstrap, { ServerPageBootstrapProps } from './ServerPageBootstrap';
 import UniversalGlobalStyles from './UniversalGlobalStyles';
@@ -55,6 +57,32 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
       lang,
       locale,
     }: MultiversalPageProps = pageProps;
+
+    if (!customer || !i18nTranslations || !lang || !locale) {
+      // Unrecoverable error, we can't even display the layout because we don't have the minimal required information to properly do so
+      // This most likely means something went wrong, and we must display the error page in such case
+      if (!props.err) {
+        // If the error wasn't detected by Next, then we log it to Sentry to make sure we'll be notified
+
+        Sentry.withScope((scope): void => {
+          scope.setContext('props', props);
+          Sentry.captureMessage(`Unexpected fatal error happened, the app cannot render properly, fallback to the Error page. Check props.`, Sentry.Severity.Warning);
+        });
+
+      } else {
+        // If an error was detected by Next, then it means the current state is due to a top-level that was caught before
+        // We don't have anything to do, as it's automatically logged into Sentry
+      }
+
+      return (
+        <ErrorPage err={props.err} statusCode={500} isReadyToRender={true}>
+          <DefaultErrorLayout
+            error={props.err}
+          />
+        </ErrorPage>
+      );
+    }
+
     const i18nextInstance: i18n = i18nextLocize(lang, i18nTranslations); // Apply i18next configuration with Locize backend
     const theme: Theme = initCustomerTheme(customer);