Display error page when unexpected errors occur.

src/actions/ProfileActions.js

@@ -27,11 +27,6 @@ export const fetchProfileSuccess = (account, preferences, courseCertificates) =>
   courseCertificates,
 });
 
-export const fetchProfileFailure = error => ({
-  type: FETCH_PROFILE.FAILURE,
-  payload: { error },
-});
-
 export const fetchProfileReset = () => ({
   type: FETCH_PROFILE.RESET,
 });
@@ -114,11 +109,6 @@ export const deleteProfilePhotoReset = () => ({
   type: DELETE_PROFILE_PHOTO.RESET,
 });
 
-export const deleteProfilePhotoFailure = error => ({
-  type: DELETE_PROFILE_PHOTO.FAILURE,
-  payload: { error },
-});
-
 // FIELD STATE ACTIONS
 
 export const openForm = formId => ({

src/actions/ProfileActions.test.js

@@ -18,7 +18,6 @@ import {
   DELETE_PROFILE_PHOTO,
   deleteProfilePhotoBegin,
   deleteProfilePhotoSuccess,
-  deleteProfilePhotoFailure,
   deleteProfilePhotoReset,
   deleteProfilePhoto,
 } from './ProfileActions';
@@ -170,15 +169,6 @@ describe('DELETE profile photo actions', () => {
     };
     expect(deleteProfilePhotoReset()).toEqual(expectedAction);
   });
-
-  it('should create an action to signal user profile photo deletion failure', () => {
-    const error = 'Test failure';
-    const expectedAction = {
-      type: DELETE_PROFILE_PHOTO.FAILURE,
-      payload: { error },
-    };
-    expect(deleteProfilePhotoFailure(error)).toEqual(expectedAction);
-  });
 });
 
 

src/components/App.jsx

@@ -14,6 +14,7 @@ import SiteHeader from './common/SiteHeader';
 import ConnectedProfilePage from './ProfilePage';
 
 import FooterLogo from '../../assets/edx-footer.png';
+import ErrorPage from './ErrorPage';
 import NotFoundPage from './NotFoundPage';
 
 class App extends Component {
@@ -33,6 +34,7 @@ class App extends Component {
               <main>
                 <Switch>
                   <Route path="/u/:username" component={ConnectedProfilePage} />
+                  <Route path="/error" component={ErrorPage} />
                   <Route path="/notfound" component={NotFoundPage} />
                   <Route path="*" component={NotFoundPage} />
                 </Switch>

src/components/ErrorPage.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import { Button, Col, Container, Row } from 'reactstrap';
+import { FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import apiClient from '../config/apiClient';
+
+export default class ErrorPage extends Component {
+  componentDidMount() {}
+
+  render() {
+    const { username } = apiClient.getAuthenticationState().authentication;
+
+    return (
+      <Container
+        fluid
+        className="py-5 justify-content-center align-items-start text-center"
+      >
+        <Row>
+          <Col>
+            <p className="my-0 py-5 text-muted">
+              <FormattedMessage
+                id="profile.error.message.text"
+                defaultMessage="An unexpected error occurred. Please click the button below to return to your profile and try again."
+                description="error message when an unexpected error occurs"
+              />
+            </p>
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <Link to={`/u/${username}`}>
+              <Button color="primary">
+                <FormattedMessage
+                  id="profile.error.button.text"
+                  defaultMessage="Return to Your Profile"
+                  description="text for button that navigates back to your profile page after an error has occured"
+                />
+              </Button>
+            </Link>
+          </Col>
+        </Row>
+      </Container>
+    );
+  }
+}

src/sagas/RootSaga.js

@@ -6,7 +6,6 @@ import {
   FETCH_PROFILE,
   fetchProfileBegin,
   fetchProfileSuccess,
-  fetchProfileFailure,
   fetchProfileReset,
   fetchProfile,
   SAVE_PROFILE,
@@ -23,7 +22,6 @@ import {
   DELETE_PROFILE_PHOTO,
   deleteProfilePhotoBegin,
   deleteProfilePhotoSuccess,
-  deleteProfilePhotoFailure,
   deleteProfilePhotoReset,
   resetDrafts,
 } from '../actions/ProfileActions';
@@ -70,7 +68,7 @@ export function* handleFetchProfile(action) {
     if (e.response.status === 404) {
       yield put(push('/notfound'));
     } else {
-      yield put(fetchProfileFailure(e.message));
+      yield put(push('/error'));
     }
   }
 }
@@ -133,8 +131,8 @@ export function* handleSaveProfile(action) {
       yield put(saveProfileFailure(e.processedData.fieldErrors));
     } else {
       LoggingService.logAPIErrorResponse(e);
-      // TODO: Currently failing silently on other kinds of errors
       yield put(saveProfileReset());
+      yield put(push('/error'));
     }
   }
 }
@@ -156,8 +154,8 @@ export function* handleSaveProfilePhoto(action) {
       yield put(saveProfilePhotoFailure(e.processedData));
     } else {
       LoggingService.logAPIErrorResponse(e);
-      // TODO: Currently failing silently on other kinds of errors
       yield put(saveProfilePhotoReset());
+      yield put(push('/error'));
     }
   }
 }
@@ -176,7 +174,8 @@ export function* handleDeleteProfilePhoto(action) {
     yield put(deleteProfilePhotoReset());
   } catch (e) {
     LoggingService.logAPIErrorResponse(e);
-    yield put(deleteProfilePhotoFailure(e.message));
+    yield put(deleteProfilePhotoReset());
+    yield put(push('/error'));
   }
 }