Log api request errors to New Relic and display load error (#24)

TNL-7114 Logs any failed api request to New Relic. Show error in CourseContainer instead of a spinner when a course fails to load.

src/courseware/CourseContainer.jsx

@@ -51,25 +51,39 @@ function CourseContainer(props) {
 
   return (
     <main className="flex-grow-1 d-flex flex-column">
-      {ready ? (
-        <Course
-          courseOrg={props.metadata.org}
-          courseNumber={props.metadata.number}
-          courseName={props.metadata.name}
-          courseUsageKey={courseUsageKey}
-          courseId={courseId}
-          isEnrolled={props.metadata.isEnrolled}
-          sequenceId={sequenceId}
-          unitId={unitId}
-          models={models}
-          tabs={props.metadata.tabs}
-          verifiedMode={props.metadata.verifiedMode}
-        />
-      ) : (
-        <PageLoading
-          srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
-        />
-      )}
+      {(() => {
+        if (ready) {
+          return (
+            <Course
+              courseOrg={props.metadata.org}
+              courseNumber={props.metadata.number}
+              courseName={props.metadata.name}
+              courseUsageKey={courseUsageKey}
+              courseId={courseId}
+              isEnrolled={props.metadata.isEnrolled}
+              sequenceId={sequenceId}
+              unitId={unitId}
+              models={models}
+              tabs={props.metadata.tabs}
+              verifiedMode={props.metadata.verifiedMode}
+            />
+          );
+        }
+
+        if (metadata.fetchState === 'failed' || models.fetchState === 'failed') {
+          return (
+            <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
+              {intl.formatMessage(messages['learn.course.load.failure'])}
+            </p>
+          );
+        }
+
+        return (
+          <PageLoading
+            srMessage={intl.formatMessage(messages['learn.loading.learning.sequence'])}
+          />
+        );
+      })()}
     </main>
   );
 }

src/courseware/messages.js

@@ -11,6 +11,11 @@ const messages = defineMessages({
     defaultMessage: 'Error: {error}',
     description: 'Message when learning sequence fails to load',
   },
+  'learn.course.load.failure': {
+    id: 'learn.course.load.failure',
+    defaultMessage: 'There was an error loading this course.',
+    description: 'Message when a course fails to load',
+  },
 });
 
 export default messages;

src/data/course-blocks/thunks.js

@@ -1,3 +1,4 @@
+import { logError } from '@edx/frontend-platform/logging';
 import {
   fetchCourseBlocksRequest,
   fetchCourseBlocksSuccess,
@@ -25,7 +26,8 @@ export function fetchCourseBlocks(courseUsageKey) {
       const courseBlocks = await getCourseBlocks(courseUsageKey);
       dispatch(fetchCourseBlocksSuccess(courseBlocks));
     } catch (error) {
-      dispatch(fetchCourseBlocksFailure(error));
+      logError(error);
+      dispatch(fetchCourseBlocksFailure(courseUsageKey));
     }
   };
 }
@@ -41,7 +43,8 @@ export function fetchSequenceMetadata(sequenceBlockId) {
         relatedBlocksMetadata: sequenceMetadata.items,
       }));
     } catch (error) {
-      dispatch(fetchBlockMetadataFailure({ blockId: sequenceBlockId }, error));
+      logError(error);
+      dispatch(fetchBlockMetadataFailure({ blockId: sequenceBlockId }));
     }
   };
 }
@@ -63,7 +66,8 @@ export function checkBlockCompletion(courseUsageKey, sequenceId, unitId) {
         },
       }));
     } catch (error) {
-      dispatch(fetchBlockMetadataFailure(commonPayload, error));
+      logError(error);
+      dispatch(fetchBlockMetadataFailure(commonPayload));
     }
   };
 }
@@ -82,6 +86,7 @@ export function saveSequencePosition(courseUsageKey, sequenceId, position) {
       await updateSequencePosition(courseUsageKey, sequenceId, position);
       dispatch(updateBlockSuccess(actionPayload));
     } catch (error) {
+      logError(error);
       dispatch(updateBlockFailure(actionPayload));
     }
   };
@@ -100,6 +105,7 @@ export function addBookmark(unitId) {
       await createBookmark(unitId);
       dispatch(updateBlockSuccess(actionPayload));
     } catch (error) {
+      logError(error);
       dispatch(updateBlockFailure(actionPayload));
     }
   };
@@ -118,6 +124,7 @@ export function removeBookmark(unitId) {
       await deleteBookmark(unitId);
       dispatch(updateBlockSuccess(actionPayload));
     } catch (error) {
+      logError(error);
       dispatch(updateBlockFailure(actionPayload));
     }
   };

src/data/course-meta/thunks.js

@@ -1,4 +1,5 @@
 /* eslint-disable import/prefer-default-export */
+import { logError } from '@edx/frontend-platform/logging';
 import {
   fetchCourseMetadataRequest,
   fetchCourseMetadataSuccess,
@@ -15,7 +16,8 @@ export function fetchCourseMetadata(courseUsageKey) {
       const courseMetadata = await getCourseMetadata(courseUsageKey);
       dispatch(fetchCourseMetadataSuccess(courseMetadata));
     } catch (error) {
-      dispatch(fetchCourseMetadataFailure(error));
+      logError(error);
+      dispatch(fetchCourseMetadataFailure({ courseUsageKey }));
     }
   };
 }