From 5c1df3e16ed32d277625eb435c57db3270a6b4be Mon Sep 17 00:00:00 2001
From: Navin Karkera <navin@opencraft.com>
Date: Thu, 9 May 2024 11:18:00 +0530
Subject: [PATCH] feat: better api error handling (#972)

Improve API error handling.
---
 src/course-outline/CourseOutline.jsx          | 262 +++++++++---------
 src/course-outline/CourseOutline.test.jsx     |  86 +++++-
 src/course-outline/constants.js               |   6 +
 src/course-outline/data/selectors.js          |   1 +
 src/course-outline/data/slice.js              |  22 ++
 src/course-outline/data/thunk.js              |  41 ++-
 .../header-navigations/HeaderNavigations.jsx  |  24 ++
 .../HeaderNavigations.test.jsx                |   9 +
 src/course-outline/hooks.jsx                  |  14 +-
 src/course-outline/messages.js                |   4 -
 src/course-outline/page-alerts/PageAlerts.jsx |  90 +++++-
 .../page-alerts/PageAlerts.test.jsx           |  16 ++
 src/course-outline/page-alerts/messages.js    |  10 +
 13 files changed, 415 insertions(+), 170 deletions(-)

diff --git a/src/course-outline/CourseOutline.jsx b/src/course-outline/CourseOutline.jsx
index 0ebbdf349..04838b766 100644
--- a/src/course-outline/CourseOutline.jsx
+++ b/src/course-outline/CourseOutline.jsx
@@ -13,7 +13,6 @@ import { Helmet } from 'react-helmet';
 import {
   Add as IconAdd,
   CheckCircle as CheckCircleIcon,
-  Warning as WarningIcon,
 } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import {
@@ -66,7 +65,6 @@ const CourseOutline = ({ courseId }) => {
     isCustomRelativeDatesActive,
     isLoading,
     isReIndexShow,
-    showErrorAlert,
     showSuccessAlert,
     isSectionsExpanded,
     isEnableHighlightsModalOpen,
@@ -116,6 +114,7 @@ const CourseOutline = ({ courseId }) => {
     handleSectionDragAndDrop,
     handleSubsectionDragAndDrop,
     handleUnitDragAndDrop,
+    errors,
   } = useCourseOutline({ courseId });
 
   const [sections, setSections] = useState(sectionsList);
@@ -231,6 +230,7 @@ const CourseOutline = ({ courseId }) => {
             mfeProctoredExamSettingsUrl={mfeProctoredExamSettingsUrl}
             advanceSettingsUrl={advanceSettingsUrl}
             savingStatus={savingStatus}
+            errors={errors}
           />
           <TransitionReplace>
             {showSuccessAlert ? (
@@ -258,6 +258,7 @@ const CourseOutline = ({ courseId }) => {
                 isDisabledReindexButton={isDisabledReindexButton}
                 hasSections={Boolean(sectionsList.length)}
                 courseActions={courseActions}
+                errors={errors}
               />
             )}
           />
@@ -279,132 +280,134 @@ const CourseOutline = ({ courseId }) => {
                       openEnableHighlightsModal={openEnableHighlightsModal}
                       handleVideoSharingOptionChange={handleVideoSharingOptionChange}
                     />
-                    <div className="pt-4">
-                      {sections.length ? (
-                        <>
-                          <DraggableList
-                            items={sections}
-                            setSections={setSections}
-                            restoreSectionList={restoreSectionList}
-                            handleSectionDragAndDrop={handleSectionDragAndDrop}
-                            handleSubsectionDragAndDrop={handleSubsectionDragAndDrop}
-                            handleUnitDragAndDrop={handleUnitDragAndDrop}
-                          >
-                            <SortableContext
-                              id="root"
+                    {!errors?.outlineIndexApi && (
+                      <div className="pt-4">
+                        {sections.length ? (
+                          <>
+                            <DraggableList
                               items={sections}
-                              strategy={verticalListSortingStrategy}
+                              setSections={setSections}
+                              restoreSectionList={restoreSectionList}
+                              handleSectionDragAndDrop={handleSectionDragAndDrop}
+                              handleSubsectionDragAndDrop={handleSubsectionDragAndDrop}
+                              handleUnitDragAndDrop={handleUnitDragAndDrop}
                             >
-                              {sections.map((section, sectionIndex) => (
-                                <SectionCard
-                                  key={section.id}
-                                  section={section}
-                                  index={sectionIndex}
-                                  canMoveItem={canMoveSection(sections)}
-                                  isSelfPaced={statusBarData.isSelfPaced}
-                                  isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-                                  savingStatus={savingStatus}
-                                  onOpenHighlightsModal={handleOpenHighlightsModal}
-                                  onOpenPublishModal={openPublishModal}
-                                  onOpenConfigureModal={openConfigureModal}
-                                  onOpenDeleteModal={openDeleteModal}
-                                  onEditSectionSubmit={handleEditSubmit}
-                                  onDuplicateSubmit={handleDuplicateSectionSubmit}
-                                  isSectionsExpanded={isSectionsExpanded}
-                                  onNewSubsectionSubmit={handleNewSubsectionSubmit}
-                                  onOrderChange={updateSectionOrderByIndex}
-                                >
-                                  <SortableContext
-                                    id={section.id}
-                                    items={section.childInfo.children}
-                                    strategy={verticalListSortingStrategy}
+                              <SortableContext
+                                id="root"
+                                items={sections}
+                                strategy={verticalListSortingStrategy}
+                              >
+                                {sections.map((section, sectionIndex) => (
+                                  <SectionCard
+                                    key={section.id}
+                                    section={section}
+                                    index={sectionIndex}
+                                    canMoveItem={canMoveSection(sections)}
+                                    isSelfPaced={statusBarData.isSelfPaced}
+                                    isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                                    savingStatus={savingStatus}
+                                    onOpenHighlightsModal={handleOpenHighlightsModal}
+                                    onOpenPublishModal={openPublishModal}
+                                    onOpenConfigureModal={openConfigureModal}
+                                    onOpenDeleteModal={openDeleteModal}
+                                    onEditSectionSubmit={handleEditSubmit}
+                                    onDuplicateSubmit={handleDuplicateSectionSubmit}
+                                    isSectionsExpanded={isSectionsExpanded}
+                                    onNewSubsectionSubmit={handleNewSubsectionSubmit}
+                                    onOrderChange={updateSectionOrderByIndex}
                                   >
-                                    {section.childInfo.children.map((subsection, subsectionIndex) => (
-                                      <SubsectionCard
-                                        key={subsection.id}
-                                        section={section}
-                                        subsection={subsection}
-                                        index={subsectionIndex}
-                                        getPossibleMoves={possibleSubsectionMoves(
-                                          [...sections],
-                                          sectionIndex,
-                                          section,
-                                          section.childInfo.children,
-                                        )}
-                                        isSelfPaced={statusBarData.isSelfPaced}
-                                        isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-                                        savingStatus={savingStatus}
-                                        onOpenPublishModal={openPublishModal}
-                                        onOpenDeleteModal={openDeleteModal}
-                                        onEditSubmit={handleEditSubmit}
-                                        onDuplicateSubmit={handleDuplicateSubsectionSubmit}
-                                        onOpenConfigureModal={openConfigureModal}
-                                        onNewUnitSubmit={handleNewUnitSubmit}
-                                        onOrderChange={updateSubsectionOrderByIndex}
-                                        onPasteClick={handlePasteClipboardClick}
-                                      >
-                                        <SortableContext
-                                          id={subsection.id}
-                                          items={subsection.childInfo.children}
-                                          strategy={verticalListSortingStrategy}
+                                    <SortableContext
+                                      id={section.id}
+                                      items={section.childInfo.children}
+                                      strategy={verticalListSortingStrategy}
+                                    >
+                                      {section.childInfo.children.map((subsection, subsectionIndex) => (
+                                        <SubsectionCard
+                                          key={subsection.id}
+                                          section={section}
+                                          subsection={subsection}
+                                          index={subsectionIndex}
+                                          getPossibleMoves={possibleSubsectionMoves(
+                                            [...sections],
+                                            sectionIndex,
+                                            section,
+                                            section.childInfo.children,
+                                          )}
+                                          isSelfPaced={statusBarData.isSelfPaced}
+                                          isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                                          savingStatus={savingStatus}
+                                          onOpenPublishModal={openPublishModal}
+                                          onOpenDeleteModal={openDeleteModal}
+                                          onEditSubmit={handleEditSubmit}
+                                          onDuplicateSubmit={handleDuplicateSubsectionSubmit}
+                                          onOpenConfigureModal={openConfigureModal}
+                                          onNewUnitSubmit={handleNewUnitSubmit}
+                                          onOrderChange={updateSubsectionOrderByIndex}
+                                          onPasteClick={handlePasteClipboardClick}
                                         >
-                                          {subsection.childInfo.children.map((unit, unitIndex) => (
-                                            <UnitCard
-                                              key={unit.id}
-                                              unit={unit}
-                                              subsection={subsection}
-                                              section={section}
-                                              isSelfPaced={statusBarData.isSelfPaced}
-                                              isCustomRelativeDatesActive={isCustomRelativeDatesActive}
-                                              index={unitIndex}
-                                              getPossibleMoves={possibleUnitMoves(
-                                                [...sections],
-                                                sectionIndex,
-                                                subsectionIndex,
-                                                section,
-                                                subsection,
-                                                subsection.childInfo.children,
-                                              )}
-                                              savingStatus={savingStatus}
-                                              onOpenPublishModal={openPublishModal}
-                                              onOpenConfigureModal={openConfigureModal}
-                                              onOpenDeleteModal={openDeleteModal}
-                                              onEditSubmit={handleEditSubmit}
-                                              onDuplicateSubmit={handleDuplicateUnitSubmit}
-                                              getTitleLink={getUnitUrl}
-                                              onOrderChange={updateUnitOrderByIndex}
-                                              onCopyToClipboardClick={handleCopyToClipboardClick}
-                                              discussionsSettings={discussionsSettings}
-                                            />
-                                          ))}
-                                        </SortableContext>
-                                      </SubsectionCard>
-                                    ))}
-                                  </SortableContext>
-                                </SectionCard>
-                              ))}
-                            </SortableContext>
-                          </DraggableList>
-                          {courseActions.childAddable && (
-                            <Button
-                              data-testid="new-section-button"
-                              className="mt-4"
-                              variant="outline-primary"
-                              onClick={handleNewSectionSubmit}
-                              iconBefore={IconAdd}
-                              block
-                            >
-                              {intl.formatMessage(messages.newSectionButton)}
-                            </Button>
-                          )}
-                        </>
-                      ) : (
-                        <EmptyPlaceholder
-                          onCreateNewSection={handleNewSectionSubmit}
-                          childAddable={courseActions.childAddable}
-                        />
-                      )}
-                    </div>
+                                          <SortableContext
+                                            id={subsection.id}
+                                            items={subsection.childInfo.children}
+                                            strategy={verticalListSortingStrategy}
+                                          >
+                                            {subsection.childInfo.children.map((unit, unitIndex) => (
+                                              <UnitCard
+                                                key={unit.id}
+                                                unit={unit}
+                                                subsection={subsection}
+                                                section={section}
+                                                isSelfPaced={statusBarData.isSelfPaced}
+                                                isCustomRelativeDatesActive={isCustomRelativeDatesActive}
+                                                index={unitIndex}
+                                                getPossibleMoves={possibleUnitMoves(
+                                                  [...sections],
+                                                  sectionIndex,
+                                                  subsectionIndex,
+                                                  section,
+                                                  subsection,
+                                                  subsection.childInfo.children,
+                                                )}
+                                                savingStatus={savingStatus}
+                                                onOpenPublishModal={openPublishModal}
+                                                onOpenConfigureModal={openConfigureModal}
+                                                onOpenDeleteModal={openDeleteModal}
+                                                onEditSubmit={handleEditSubmit}
+                                                onDuplicateSubmit={handleDuplicateUnitSubmit}
+                                                getTitleLink={getUnitUrl}
+                                                onOrderChange={updateUnitOrderByIndex}
+                                                onCopyToClipboardClick={handleCopyToClipboardClick}
+                                                discussionsSettings={discussionsSettings}
+                                              />
+                                            ))}
+                                          </SortableContext>
+                                        </SubsectionCard>
+                                      ))}
+                                    </SortableContext>
+                                  </SectionCard>
+                                ))}
+                              </SortableContext>
+                            </DraggableList>
+                            {courseActions.childAddable && (
+                              <Button
+                                data-testid="new-section-button"
+                                className="mt-4"
+                                variant="outline-primary"
+                                onClick={handleNewSectionSubmit}
+                                iconBefore={IconAdd}
+                                block
+                              >
+                                {intl.formatMessage(messages.newSectionButton)}
+                              </Button>
+                            )}
+                          </>
+                        ) : (
+                          <EmptyPlaceholder
+                            onCreateNewSection={handleNewSectionSubmit}
+                            childAddable={courseActions.childAddable}
+                          />
+                        )}
+                      </div>
+                    )}
                   </section>
                 </div>
               </article>
@@ -453,17 +456,6 @@ const CourseOutline = ({ courseId }) => {
           isQueryPending={savingStatus === RequestStatus.PENDING}
           onInternetConnectionFailed={handleInternetConnectionFailed}
         />
-        {showErrorAlert && (
-          <AlertMessage
-            key={intl.formatMessage(messages.alertErrorTitle)}
-            show={showErrorAlert}
-            variant="danger"
-            icon={WarningIcon}
-            title={intl.formatMessage(messages.alertErrorTitle)}
-            description=""
-            aria-hidden="true"
-          />
-        )}
       </div>
     </>
   );
diff --git a/src/course-outline/CourseOutline.test.jsx b/src/course-outline/CourseOutline.test.jsx
index d59231ccf..44a594b5a 100644
--- a/src/course-outline/CourseOutline.test.jsx
+++ b/src/course-outline/CourseOutline.test.jsx
@@ -140,6 +140,17 @@ describe('<CourseOutline />', () => {
     axiosMock
       .onGet(getCourseOutlineIndexApiUrl(courseId))
       .reply(200, courseOutlineIndexMock);
+    axiosMock
+      .onGet(getCourseBestPracticesApiUrl({
+        courseId, excludeGraded: true, all: true,
+      }))
+      .reply(200, courseBestPracticesMock);
+
+    axiosMock
+      .onGet(getCourseLaunchApiUrl({
+        courseId, gradedOnly: true, validateOras: true, all: true,
+      }))
+      .reply(200, courseLaunchMock);
     await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
   });
 
@@ -152,6 +163,29 @@ describe('<CourseOutline />', () => {
     });
   });
 
+  it('handles course outline fetch api errors', async () => {
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(500, 'some internal error');
+
+    const { findByText, queryByRole } = render(<RootWrapper />);
+    expect(await findByText('"some internal error"')).toBeInTheDocument();
+    // check errors in store
+    expect(store.getState().courseOutline.errors).toEqual({
+      courseLaunchApi: null,
+      outlineIndexApi: {
+        data: '"some internal error"',
+        dismissible: false,
+        status: 500,
+        type: 'serverError',
+      },
+      reindexApi: null,
+      sectionLoadingApi: null,
+    });
+
+    expect(queryByRole('button', { name: 'Dismiss' })).not.toBeInTheDocument();
+  });
+
   it('check reindex and render success alert is correctly', async () => {
     const { findByText, findByTestId } = render(<RootWrapper />);
 
@@ -224,7 +258,7 @@ describe('<CourseOutline />', () => {
     const reindexButton = await findByTestId('course-reindex');
     await act(async () => fireEvent.click(reindexButton));
 
-    expect(await findByText(messages.alertErrorTitle.defaultMessage)).toBeInTheDocument();
+    expect(await findByText('Request failed with status code 500')).toBeInTheDocument();
   });
 
   it('check that new section list is saved when dragged', async () => {
@@ -359,18 +393,6 @@ describe('<CourseOutline />', () => {
   it('render checklist value correctly', async () => {
     const { getByText } = render(<RootWrapper />);
 
-    axiosMock
-      .onGet(getCourseBestPracticesApiUrl({
-        courseId, excludeGraded: true, all: true,
-      }))
-      .reply(200, courseBestPracticesMock);
-
-    axiosMock
-      .onGet(getCourseLaunchApiUrl({
-        courseId, gradedOnly: true, validateOras: true, all: true,
-      }))
-      .reply(200, courseLaunchMock);
-
     await executeThunk(fetchCourseLaunchQuery({
       courseId, gradedOnly: true, validateOras: true, all: true,
     }), store.dispatch);
@@ -381,6 +403,41 @@ describe('<CourseOutline />', () => {
     expect(getByText('4/9 completed')).toBeInTheDocument();
   });
 
+  it('render alerts if checklist api fails', async () => {
+    axiosMock
+      .onGet(getCourseLaunchApiUrl({
+        courseId, gradedOnly: true, validateOras: true, all: true,
+      }))
+      .reply(500);
+    const { findByText, findByRole } = render(<RootWrapper />);
+
+    await executeThunk(fetchCourseLaunchQuery({
+      courseId, gradedOnly: true, validateOras: true, all: true,
+    }), store.dispatch);
+
+    expect(await findByText('Request failed with status code 500')).toBeInTheDocument();
+    // check errors in store
+    expect(store.getState().courseOutline.errors).toEqual({
+      courseLaunchApi: {
+        data: 'Request failed with status code 500',
+        type: 'unknown',
+        dismissible: true,
+      },
+      outlineIndexApi: null,
+      reindexApi: null,
+      sectionLoadingApi: null,
+    });
+
+    const dismissBtn = await findByRole('button', { name: 'Dismiss' });
+    fireEvent.click(dismissBtn);
+    expect(store.getState().courseOutline.errors).toEqual({
+      courseLaunchApi: null,
+      outlineIndexApi: null,
+      reindexApi: null,
+      sectionLoadingApi: null,
+    });
+  });
+
   it('check highlights are enabled after enable highlights query is successful', async () => {
     const { findByTestId, findByText } = render(<RootWrapper />);
 
@@ -2093,6 +2150,9 @@ describe('<CourseOutline />', () => {
     const [section] = courseOutlineIndexMock.courseStructure.childInfo.children;
     const [sectionElement] = await findAllByTestId('section-card');
     const [subsection] = section.childInfo.children;
+    axiosMock
+      .onGet(getXBlockApiUrl(section.id))
+      .reply(200, courseSectionMock);
     let [subsectionElement] = await within(sectionElement).findAllByTestId('subsection-card');
     const expandBtn = await within(subsectionElement).findByTestId('subsection-card-header__expanded-btn');
     await act(async () => fireEvent.click(expandBtn));
diff --git a/src/course-outline/constants.js b/src/course-outline/constants.js
index 75b362ebf..4430694a7 100644
--- a/src/course-outline/constants.js
+++ b/src/course-outline/constants.js
@@ -82,3 +82,9 @@ export const VIDEO_SHARING_OPTIONS = /** @type {const} */ ({
   allOn: 'all-on',
   allOff: 'all-off',
 });
+
+export const API_ERROR_TYPES = /** @type {const} */ ({
+  networkError: 'networkError',
+  serverError: 'serverError',
+  unknown: 'unknown',
+});
diff --git a/src/course-outline/data/selectors.js b/src/course-outline/data/selectors.js
index a57288e53..6ad81c7a4 100644
--- a/src/course-outline/data/selectors.js
+++ b/src/course-outline/data/selectors.js
@@ -10,3 +10,4 @@ export const getCourseActions = (state) => state.courseOutline.actions;
 export const getCustomRelativeDatesActiveFlag = (state) => state.courseOutline.isCustomRelativeDatesActive;
 export const getProctoredExamsFlag = (state) => state.courseOutline.enableProctoredExams;
 export const getPasteFileNotices = (state) => state.courseOutline.pasteFileNotices;
+export const getErrors = (state) => state.courseOutline.errors;
diff --git a/src/course-outline/data/slice.js b/src/course-outline/data/slice.js
index 4214ddbd7..0bd146f95 100644
--- a/src/course-outline/data/slice.js
+++ b/src/course-outline/data/slice.js
@@ -11,6 +11,13 @@ const slice = createSlice({
       outlineIndexLoadingStatus: RequestStatus.IN_PROGRESS,
       reIndexLoadingStatus: RequestStatus.IN_PROGRESS,
       fetchSectionLoadingStatus: RequestStatus.IN_PROGRESS,
+      courseLaunchQueryStatus: RequestStatus.IN_PROGRESS,
+    },
+    errors: {
+      outlineIndexApi: null,
+      reindexApi: null,
+      sectionLoadingApi: null,
+      courseLaunchApi: null,
     },
     outlineIndexData: {},
     savingStatus: '',
@@ -53,18 +60,31 @@ const slice = createSlice({
         ...state.loadingStatus,
         outlineIndexLoadingStatus: payload.status,
       };
+      state.errors.outlineIndexApi = payload.errors || null;
     },
     updateReindexLoadingStatus: (state, { payload }) => {
       state.loadingStatus = {
         ...state.loadingStatus,
         reIndexLoadingStatus: payload.status,
       };
+      state.errors.reindexApi = payload.errors || null;
     },
     updateFetchSectionLoadingStatus: (state, { payload }) => {
       state.loadingStatus = {
         ...state.loadingStatus,
         fetchSectionLoadingStatus: payload.status,
       };
+      state.errors.sectionLoadingApi = payload.errors || null;
+    },
+    updateCourseLaunchQueryStatus: (state, { payload }) => {
+      state.loadingStatus = {
+        ...state.loadingStatus,
+        courseLaunchQueryStatus: payload.status,
+      };
+      state.errors.courseLaunchApi = payload.errors || null;
+    },
+    dismissError: (state, { payload }) => {
+      state.errors[payload] = null;
     },
     updateStatusBar: (state, { payload }) => {
       state.statusBarData = {
@@ -188,6 +208,7 @@ export const {
   fetchStatusBarChecklistSuccess,
   fetchStatusBarSelPacedSuccess,
   updateFetchSectionLoadingStatus,
+  updateCourseLaunchQueryStatus,
   updateSavingStatus,
   updateSectionList,
   setCurrentItem,
@@ -202,6 +223,7 @@ export const {
   reorderUnitList,
   setPasteFileNotices,
   removePasteFileNotices,
+  dismissError,
 } = slice.actions;
 
 export const {
diff --git a/src/course-outline/data/thunk.js b/src/course-outline/data/thunk.js
index 4819498e8..f877bc222 100644
--- a/src/course-outline/data/thunk.js
+++ b/src/course-outline/data/thunk.js
@@ -1,7 +1,7 @@
 import { RequestStatus } from '../../data/constants';
 import { updateClipboardData } from '../../generic/data/slice';
 import { NOTIFICATION_MESSAGES } from '../../constants';
-import { COURSE_BLOCK_NAMES } from '../constants';
+import { API_ERROR_TYPES, COURSE_BLOCK_NAMES } from '../constants';
 import {
   hideProcessingNotification,
   showProcessingNotification,
@@ -51,8 +51,24 @@ import {
   duplicateSection,
   reorderSectionList,
   setPasteFileNotices,
+  updateCourseLaunchQueryStatus,
 } from './slice';
 
+const getErrorDetails = (error, dismissible = true) => {
+  const errorInfo = { dismissible };
+  if (error.response?.data) {
+    errorInfo.data = JSON.stringify(error.response.data);
+    errorInfo.status = error.response.status;
+    errorInfo.type = API_ERROR_TYPES.serverError;
+  } else if (error.request) {
+    errorInfo.type = API_ERROR_TYPES.networkError;
+  } else {
+    errorInfo.type = API_ERROR_TYPES.unknown;
+    errorInfo.data = error.message;
+  }
+  return errorInfo;
+};
+
 export function fetchCourseOutlineIndexQuery(courseId) {
   return async (dispatch) => {
     dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.IN_PROGRESS }));
@@ -80,7 +96,10 @@ export function fetchCourseOutlineIndexQuery(courseId) {
 
       dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
-      dispatch(updateOutlineIndexLoadingStatus({ status: RequestStatus.FAILED }));
+      dispatch(updateOutlineIndexLoadingStatus({
+        status: RequestStatus.FAILED,
+        errors: getErrorDetails(error, false),
+      }));
     }
   };
 }
@@ -92,6 +111,7 @@ export function fetchCourseLaunchQuery({
   all = true,
 }) {
   return async (dispatch) => {
+    dispatch(updateCourseLaunchQueryStatus({ status: RequestStatus.IN_PROGRESS }));
     try {
       const data = await getCourseLaunch({
         courseId, gradedOnly, validateOras, all,
@@ -99,9 +119,12 @@ export function fetchCourseLaunchQuery({
       dispatch(fetchStatusBarSelPacedSuccess({ isSelfPaced: data.isSelfPaced }));
       dispatch(fetchStatusBarChecklistSuccess(getCourseLaunchChecklist(data)));
 
-      return true;
+      dispatch(updateCourseLaunchQueryStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
-      return false;
+      dispatch(updateCourseLaunchQueryStatus({
+        status: RequestStatus.FAILED,
+        errors: getErrorDetails(error),
+      }));
     }
   };
 }
@@ -166,7 +189,10 @@ export function fetchCourseReindexQuery(courseId, reindexLink) {
       await restartIndexingOnCourse(reindexLink);
       dispatch(updateReindexLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
-      dispatch(updateReindexLoadingStatus({ status: RequestStatus.FAILED }));
+      dispatch(updateReindexLoadingStatus({
+        status: RequestStatus.FAILED,
+        errors: getErrorDetails(error),
+      }));
     }
   };
 }
@@ -185,7 +211,10 @@ export function fetchCourseSectionQuery(sectionIds, shouldScroll = false) {
       dispatch(updateSectionList(sections));
       dispatch(updateFetchSectionLoadingStatus({ status: RequestStatus.SUCCESSFUL }));
     } catch (error) {
-      dispatch(updateFetchSectionLoadingStatus({ status: RequestStatus.FAILED }));
+      dispatch(updateFetchSectionLoadingStatus({
+        status: RequestStatus.FAILED,
+        errors: getErrorDetails(error),
+      }));
     }
   };
 }
diff --git a/src/course-outline/header-navigations/HeaderNavigations.jsx b/src/course-outline/header-navigations/HeaderNavigations.jsx
index b4359a3c2..d394bddec 100644
--- a/src/course-outline/header-navigations/HeaderNavigations.jsx
+++ b/src/course-outline/header-navigations/HeaderNavigations.jsx
@@ -17,6 +17,7 @@ const HeaderNavigations = ({
   isDisabledReindexButton,
   hasSections,
   courseActions,
+  errors,
 }) => {
   const intl = useIntl();
   const {
@@ -37,6 +38,7 @@ const HeaderNavigations = ({
           <Button
             iconBefore={IconAdd}
             onClick={handleNewSection}
+            disabled={errors?.outlineIndexApi}
           >
             {intl.formatMessage(messages.newSectionButton)}
           </Button>
@@ -92,6 +94,10 @@ const HeaderNavigations = ({
   );
 };
 
+HeaderNavigations.defaultProps = {
+  errors: {},
+};
+
 HeaderNavigations.propTypes = {
   isReIndexShow: PropTypes.bool.isRequired,
   isSectionsExpanded: PropTypes.bool.isRequired,
@@ -109,6 +115,24 @@ HeaderNavigations.propTypes = {
     childAddable: PropTypes.bool.isRequired,
     duplicable: PropTypes.bool.isRequired,
   }).isRequired,
+  errors: PropTypes.shape({
+    outlineIndexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    reindexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    sectionLoadingApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    courseLaunchApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+  }),
 };
 
 export default HeaderNavigations;
diff --git a/src/course-outline/header-navigations/HeaderNavigations.test.jsx b/src/course-outline/header-navigations/HeaderNavigations.test.jsx
index 6ea1b09db..5ff884ae6 100644
--- a/src/course-outline/header-navigations/HeaderNavigations.test.jsx
+++ b/src/course-outline/header-navigations/HeaderNavigations.test.jsx
@@ -124,4 +124,13 @@ describe('<HeaderNavigations />', () => {
       expect(queryByText(messages.reindexButtonTooltip.defaultMessage)).not.toBeInTheDocument();
     });
   });
+
+  it('disables new section button if course outline fetch fails', () => {
+    const { getByRole } = renderComponent({
+      errors: { outlineIndexApi: { data: 'some error', type: 'serverError' } },
+    });
+
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeInTheDocument();
+    expect(getByRole('button', { name: messages.newSectionButton.defaultMessage })).toBeDisabled();
+  });
 });
diff --git a/src/course-outline/hooks.jsx b/src/course-outline/hooks.jsx
index 14a814065..f820f3d0e 100644
--- a/src/course-outline/hooks.jsx
+++ b/src/course-outline/hooks.jsx
@@ -24,6 +24,7 @@ import {
   getCurrentSection,
   getCurrentSubsection,
   getCustomRelativeDatesActiveFlag,
+  getErrors,
 } from './data/selectors';
 import {
   addNewSectionQuery,
@@ -81,12 +82,12 @@ const useCourseOutline = ({ courseId }) => {
   const currentSubsection = useSelector(getCurrentSubsection);
   const isCustomRelativeDatesActive = useSelector(getCustomRelativeDatesActiveFlag);
   const genericSavingStatus = useSelector(getGenericSavingStatus);
+  const errors = useSelector(getErrors);
 
   const [isEnableHighlightsModalOpen, openEnableHighlightsModal, closeEnableHighlightsModal] = useToggle(false);
   const [isSectionsExpanded, setSectionsExpanded] = useState(true);
   const [isDisabledReindexButton, setDisableReindexButton] = useState(false);
   const [showSuccessAlert, setShowSuccessAlert] = useState(false);
-  const [showErrorAlert, setShowErrorAlert] = useState(false);
   const [isHighlightsModalOpen, openHighlightsModal, closeHighlightsModal] = useToggle(false);
   const [isPublishModalOpen, openPublishModal, closePublishModal] = useToggle(false);
   const [isConfigureModalOpen, openConfigureModal, closeConfigureModal] = useToggle(false);
@@ -135,7 +136,6 @@ const useCourseOutline = ({ courseId }) => {
     handleReIndex: () => {
       setDisableReindexButton(true);
       setShowSuccessAlert(false);
-      setShowErrorAlert(false);
 
       dispatch(fetchCourseReindexQuery(courseId, reindexLink)).then(() => {
         setDisableReindexButton(false);
@@ -291,13 +291,7 @@ const useCourseOutline = ({ courseId }) => {
   }, [courseId]);
 
   useEffect(() => {
-    if (reIndexLoadingStatus === RequestStatus.FAILED) {
-      setShowErrorAlert(true);
-    }
-
-    if (reIndexLoadingStatus === RequestStatus.SUCCESSFUL) {
-      setShowSuccessAlert(true);
-    }
+    setShowSuccessAlert(reIndexLoadingStatus === RequestStatus.SUCCESSFUL);
   }, [reIndexLoadingStatus]);
 
   return {
@@ -308,7 +302,6 @@ const useCourseOutline = ({ courseId }) => {
     isLoading: outlineIndexLoadingStatus === RequestStatus.IN_PROGRESS,
     isReIndexShow: Boolean(reindexLink),
     showSuccessAlert,
-    showErrorAlert,
     isDisabledReindexButton,
     isSectionsExpanded,
     isPublishModalOpen,
@@ -361,6 +354,7 @@ const useCourseOutline = ({ courseId }) => {
     handleSectionDragAndDrop,
     handleSubsectionDragAndDrop,
     handleUnitDragAndDrop,
+    errors,
   };
 };
 
diff --git a/src/course-outline/messages.js b/src/course-outline/messages.js
index b0851f423..6bc73bc69 100644
--- a/src/course-outline/messages.js
+++ b/src/course-outline/messages.js
@@ -25,10 +25,6 @@ const messages = defineMessages({
     id: 'course-authoring.course-outline.reindex.alert.success.aria.describedby',
     defaultMessage: 'alert-confirmation-description',
   },
-  alertErrorTitle: {
-    id: 'course-authoring.course-outline.reindex.alert.error.title',
-    defaultMessage: 'There were errors reindexing course.',
-  },
   newSectionButton: {
     id: 'course-authoring.course-outline.section-list.button.new-section',
     defaultMessage: 'New section',
diff --git a/src/course-outline/page-alerts/PageAlerts.jsx b/src/course-outline/page-alerts/PageAlerts.jsx
index 342136625..4b0eb0dc7 100644
--- a/src/course-outline/page-alerts/PageAlerts.jsx
+++ b/src/course-outline/page-alerts/PageAlerts.jsx
@@ -8,8 +8,11 @@ import {
   Campaign as CampaignIcon,
   InfoOutline as InfoOutlineIcon,
   Warning as WarningIcon,
+  Error as ErrorIcon,
 } from '@openedx/paragon/icons';
-import { Alert, Button, Hyperlink } from '@openedx/paragon';
+import {
+  Alert, Button, Hyperlink, Truncate,
+} from '@openedx/paragon';
 import { Link } from 'react-router-dom';
 
 import { RequestStatus } from '../../data/constants';
@@ -18,7 +21,8 @@ import AlertProctoringError from '../../generic/AlertProctoringError';
 import messages from './messages';
 import advancedSettingsMessages from '../../advanced-settings/messages';
 import { getPasteFileNotices } from '../data/selectors';
-import { removePasteFileNotices } from '../data/slice';
+import { dismissError, removePasteFileNotices } from '../data/slice';
+import { API_ERROR_TYPES } from '../constants';
 
 const PageAlerts = ({
   courseId,
@@ -32,6 +36,7 @@ const PageAlerts = ({
   mfeProctoredExamSettingsUrl,
   advanceSettingsUrl,
   savingStatus,
+  errors,
 }) => {
   const intl = useIntl();
   const dispatch = useDispatch();
@@ -330,6 +335,67 @@ const PageAlerts = ({
     return null;
   };
 
+  const renderApiErrors = () => {
+    const errorList = Object.entries(errors).filter(obj => obj[1] !== null).map(([k, v]) => {
+      switch (v.type) {
+      case API_ERROR_TYPES.serverError:
+        return {
+          key: k,
+          desc: v.data,
+          title: intl.formatMessage(messages.serverErrorAlert, {
+            status: v.status,
+          }),
+          dismissible: v.dismissible,
+        };
+      case API_ERROR_TYPES.networkError:
+        return {
+          key: k,
+          title: intl.formatMessage(messages.networkErrorAlert),
+          dismissible: v.dismissible,
+        };
+      default:
+        return {
+          key: k,
+          desc: v.data,
+          dismissible: v.dismissible,
+        };
+      }
+    });
+    if (!errorList?.length) {
+      return null;
+    }
+    return (
+      errorList.map((msgObj) => (
+        msgObj.dismissible ? (
+          <ErrorAlert
+            isError
+            hideHeading
+            key={msgObj.key}
+            dismissError={() => dispatch(dismissError(msgObj.key))}
+          >
+            {msgObj.title
+              && (
+                <Alert.Heading>{msgObj.title}</Alert.Heading>
+              )}
+            {msgObj.desc && <Truncate lines={2}>{msgObj.desc}</Truncate>}
+          </ErrorAlert>
+        ) : (
+          <Alert
+            variant="danger"
+            icon={ErrorIcon}
+            key={msgObj.key}
+          >
+            {msgObj.title
+                && (
+                  <Alert.Heading>{msgObj.title}</Alert.Heading>
+                )}
+            {msgObj.desc && <Truncate lines={2}>{msgObj.desc}</Truncate>}
+          </Alert>
+        )
+      ))
+    );
+  };
+
   return (
     <>
       {configurationErrors()}
@@ -339,6 +405,7 @@ const PageAlerts = ({
       <ErrorAlert hideHeading isError={savingStatus === RequestStatus.FAILED}>
         {intl.formatMessage(messages.alertFailedGeneric, { actionName: 'save', type: 'changes' })}
       </ErrorAlert>
+      {renderApiErrors()}
       {errorFilesPasteAlert()}
       {conflictingFilesPasteAlert()}
       {newFilesPasteAlert()}
@@ -357,6 +424,7 @@ PageAlerts.defaultProps = {
   mfeProctoredExamSettingsUrl: '',
   advanceSettingsUrl: '',
   savingStatus: '',
+  errors: {},
 };
 
 PageAlerts.propTypes = {
@@ -387,6 +455,24 @@ PageAlerts.propTypes = {
   mfeProctoredExamSettingsUrl: PropTypes.string,
   advanceSettingsUrl: PropTypes.string,
   savingStatus: PropTypes.string,
+  errors: PropTypes.shape({
+    outlineIndexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    reindexApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    sectionLoadingApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+    courseLaunchApi: PropTypes.shape({
+      data: PropTypes.string,
+      type: PropTypes.string.isRequired,
+    }),
+  }),
 };
 
 export default PageAlerts;
diff --git a/src/course-outline/page-alerts/PageAlerts.test.jsx b/src/course-outline/page-alerts/PageAlerts.test.jsx
index c1b18c704..ce572ab6a 100644
--- a/src/course-outline/page-alerts/PageAlerts.test.jsx
+++ b/src/course-outline/page-alerts/PageAlerts.test.jsx
@@ -8,6 +8,7 @@ import { initializeMockApp, getConfig } from '@edx/frontend-platform';
 import PageAlerts from './PageAlerts';
 import messages from './messages';
 import initializeStore from '../../store';
+import { API_ERROR_TYPES } from '../constants';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
   ...jest.requireActual('@edx/frontend-platform/i18n'),
@@ -189,4 +190,19 @@ describe('<PageAlerts />', () => {
       `${getConfig().STUDIO_BASE_URL}/assets/course-id`,
     );
   });
+
+  it('renders api error alerts', async () => {
+    const { queryByText } = renderComponent({
+      ...pageAlertsData,
+      errors: {
+        outlineIndexApi: { data: 'some error', status: 400, type: API_ERROR_TYPES.serverError },
+        courseLaunchApi: { type: API_ERROR_TYPES.networkError },
+        reindexApi: { type: API_ERROR_TYPES.unknown, data: 'some unknown error' },
+      },
+    });
+    expect(queryByText(messages.networkErrorAlert.defaultMessage)).toBeInTheDocument();
+    expect(queryByText(messages.serverErrorAlert.defaultMessage)).toBeInTheDocument();
+    expect(queryByText('some error')).toBeInTheDocument();
+    expect(queryByText('some unknown error')).toBeInTheDocument();
+  });
 });
diff --git a/src/course-outline/page-alerts/messages.js b/src/course-outline/page-alerts/messages.js
index 31e6d12c7..ea67c76ad 100644
--- a/src/course-outline/page-alerts/messages.js
+++ b/src/course-outline/page-alerts/messages.js
@@ -106,6 +106,16 @@ const messages = defineMessages({
     defaultMessage: 'The following {conflictingFilesLen, plural, one {file} other {files}} already exist in this course but don\'t match the version used by the component you pasted:  {conflictingFilesStr}',
     description: 'This alert description is displayed when files being imported conflict with existing files in the course and advises the user to update the conflicting files manually.',
   },
+  serverErrorAlert: {
+    id: 'course-authoring.course-outline.page-alert.server-error.title',
+    defaultMessage: 'Request failed with status: {status}',
+    description: 'Generic server error alert title.',
+  },
+  networkErrorAlert: {
+    id: 'course-authoring.course-outline.page-alert.network-error.title',
+    defaultMessage: 'Network error',
+    description: 'Generic network error alert.',
+  },
 });
 
 export default messages;