ErrorPage fails on getLocale() because i18n isn't initialized.

[grmartin]

Description:

Some (maybe all?) MFEs have issues with ErrorPages and i18n.

The ErrorPage is invoked before either the Locale is set or Intl is initialized as a whole.

This should likely later be remediated in any MFEs that have this issue.

Repro Steps

1. Up devstack (im from REV so, we tend to grab lms+redis+ecommerce)
2. Once up, start Payment MFE (we dont use docker for this as there is an issue with the image we have yet to fix, its alo not germaine) npm ci && npm start
3. Stop LMS
4. Open Payment MFE in a Browser http://localhost:1998/

Technical/Additional Details

Specific Error: getLocale called before configuring i18n. Call configure with messages first.
Stack Trace:

Call Stack
 getLocale
  node_modules/@edx/frontend-platform/i18n/lib.js:273:11
 ErrorPage
  node_modules/@edx/frontend-platform/react/ErrorPage.js:82:115
 renderWithHooks
  node_modules/react-dom/cjs/react-dom.development.js:14803:18
 mountIndeterminateComponent
  node_modules/react-dom/cjs/react-dom.development.js:17482:13
 beginWork
  node_modules/react-dom/cjs/react-dom.development.js:18596:16
 HTMLUnknownElement.callCallback
  node_modules/react-dom/cjs/react-dom.development.js:188:14
 Object.invokeGuardedCallbackDev
  node_modules/react-dom/cjs/react-dom.development.js:237:16
 invokeGuardedCallback
  node_modules/react-dom/cjs/react-dom.development.js:292:31
 beginWork$1
  node_modules/react-dom/cjs/react-dom.development.js:23203:7
 performUnitOfWork
  node_modules/react-dom/cjs/react-dom.development.js:22154:12

Code Ptr (ErrorPage initialization point): https://github.com/openedx/frontend-template-application/blob/master/src/index.jsx#L28

Community Example (learner MFE): https://discuss.openedx.org/t/when-attempting-to-enter-a-courses-home-on-learning-mfe-error-getlocale-called-before-configuring-i18n/9756/1

[grmartin]

After toying with this this morning, we have a fix:

diff --git a/src/index.jsx b/src/index.jsx
index e7be0ea5..87927526 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -20,7 +20,7 @@ import ReactDOM from 'react-dom';
 import { Route, Switch } from 'react-router-dom';

 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { logError } from '@edx/frontend-platform/logging';
+import { getLoggingService, logError } from '@edx/frontend-platform/logging';
 import Header, { messages as headerMessages } from '@edx/frontend-component-header';
 import Footer, { messages as footerMessages } from '@edx/frontend-component-footer';

@@ -31,6 +31,8 @@ import {
 import configureStore from './data/configureStore';

 import './index.scss';
+import { configure as configureI18n } from '@edx/frontend-platform/i18n/lib';
+import { getLocale } from '@edx/frontend-platform/i18n';

 const tempHttpClient = axios.create();
 tempHttpClient.defaults.withCredentials = true;
@@ -85,6 +87,15 @@ subscribe(APP_READY, () => {
 });

 subscribe(APP_INIT_ERROR, (error) => {
+  try {
+    getLocale('en');
+  } catch (e) {
+    configureI18n({
+      messages: {},
+      config: getConfig(),
+      loggingService: getLoggingService(),
+    });
+  }
   ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
 });

I will shortly have this in frontend-app-payment, once I and my team approve it.

[grmartin]

This has been merged, instead they get the default template language and its less intimidating:

[arbrandes]

This is great, thanks @grmartin! I love an issue report that comes with a fix. :)