feat: Add an error message when displaying a Course App Plugin fails

Author: bradenmacdonald

src/pages-and-resources/PagesAndResources.jsx

@@ -66,14 +66,14 @@ const PagesAndResources = ({ courseId, intl }) => {
           </Hyperlink>
         </div>
 
-        <PageGrid pages={pages} />
-
         <Routes>
           <Route path="discussion/configure/:appId" element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>} />
           <Route path="discussion" element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>} />
           <Route path="discussion/settings" element={<PageWrap><DiscussionsSettings courseId={courseId} /></PageWrap>} />
           <Route path=":appId/settings" element={<PageWrap><Suspense fallback="..."><SettingsComponent url={redirectUrl} /></Suspense></PageWrap>} />
         </Routes>
+
+        <PageGrid pages={pages} />
       </main>
     </PagesAndResourcesProvider>
   );

src/pages-and-resources/SettingsComponent.jsx

@@ -1,22 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useParams, useNavigate } from 'react-router-dom';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { ErrorAlert } from '@edx/frontend-lib-content-components';
+
+import messages from './messages';
 
 const SettingsComponent = ({ url }) => {
   const { appId } = useParams();
   const navigate = useNavigate();
+  const intl = useIntl();
 
-  const LazyLoadedComponent = React.useMemo(() => React.lazy(async () => {
-    try {
-      // There seems to be a bug in babel-eslint that causes the checker to crash with the following error
-      // if we use a template string here:
-      //     TypeError: Cannot read property 'range' of null with using template strings here.
-      // Ref: https://github.com/babel/babel-eslint/issues/530
-      return await import('@openedx-plugins/course-app-' + appId + '/Settings.jsx'); // eslint-disable-line
-    } catch (error) {
-      console.trace(error); // eslint-disable-line no-console
-      return null;
-    }
+  const LazyLoadedComponent = React.useMemo(() => React.lazy(() => {
+    return import(`@openedx-plugins/course-app-${appId}/Settings.jsx`).catch((err) => { // eslint-disable-line
+      // If we couldn't load this plugin, log the details to the console.
+      console.trace(err);
+      return {
+        default: () => <ErrorAlert isError={true}>{intl.formatMessage(messages.errorShowingConfiguration)}</ErrorAlert>,
+      };
+    });
   }), [appId]);
 
   return <LazyLoadedComponent onClose={() => navigate(url)} />;

src/pages-and-resources/messages.js

@@ -13,6 +13,10 @@ const messages = defineMessages({
     id: 'course-authoring.pages-resources.viewLive.button',
     defaultMessage: 'View live',
   },
+  errorShowingConfiguration: {
+    id: 'course-authoring.pages-resources.courseAppPlugin.errorMessage',
+    defaultMessage: 'An error occurred when loading the configuration UI for that app.',
+  },
   enabled: {
     id: 'course-authoring.badge.enabled',
     defaultMessage: 'Enabled',