Handle errors on Group Members, Group Data Sources and User Profile pages

client/app/components/items-list/ItemsList.jsx

@@ -91,6 +91,12 @@ export function wrap(WrappedComponent, itemsSource, stateStorage) {
       this.state.update();
     }
 
+    componentWillUnmount() {
+      itemsSource.onBeforeUpdate = () => {};
+      itemsSource.onAfterUpdate = () => {};
+      itemsSource.onError = () => {};
+    }
+
     // eslint-disable-next-line class-methods-use-this
     getState({ isLoaded, totalCount, pageItems, ...rest }) {
       const params = {

client/app/components/items-list/classes/ItemsSource.js

@@ -45,10 +45,6 @@ export class ItemsSource {
           return this._afterUpdate();
         })
         .catch((error) => {
-          // ANGULAR_REMOVE_ME This code is related to Angular's HTTP services
-          if (error.status && error.data) {
-            error = new PromiseRejectionError(error.data.message);
-          }
           this.handleError(error);
         })
     ));
@@ -132,11 +128,15 @@ export class ItemsSource {
 
   update = () => this._changed();
 
-  handleError(error) {
+  handleError = (error) => {
     if (isFunction(this.onError)) {
+      // ANGULAR_REMOVE_ME This code is related to Angular's HTTP services
+      if (error.status && error.data) {
+        error = new PromiseRejectionError(error);
+      }
       this.onError(error);
     }
-  }
+  };
 }
 
 export class ResourceItemsSource extends ItemsSource {

client/app/pages/groups/GroupDataSources.jsx

@@ -90,10 +90,14 @@ class GroupDataSources extends React.Component {
   ];
 
   componentDidMount() {
-    Group.get({ id: this.groupId }).$promise.then((group) => {
-      this.group = group;
-      this.forceUpdate();
-    });
+    Group.get({ id: this.groupId }).$promise
+      .then((group) => {
+        this.group = group;
+        this.forceUpdate();
+      })
+      .catch((error) => {
+        this.props.controller.handleError(error);
+      });
   }
 
   removeGroupDataSource = (datasource) => {

client/app/pages/groups/GroupMembers.jsx

@@ -74,10 +74,14 @@ class GroupMembers extends React.Component {
   ];
 
   componentDidMount() {
-    Group.get({ id: this.groupId }).$promise.then((group) => {
-      this.group = group;
-      this.forceUpdate();
-    });
+    Group.get({ id: this.groupId }).$promise
+      .then((group) => {
+        this.group = group;
+        this.forceUpdate();
+      })
+      .catch((error) => {
+        this.props.controller.handleError(error);
+      });
   }
 
   removeGroupMember = (event, user) => Group.removeMember({ id: this.groupId, userId: user.id }).$promise

client/app/pages/users/UserProfile.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { react2angular } from 'react2angular';
 
 import { EmailSettingsWarning } from '@/components/EmailSettingsWarning';
@@ -10,17 +11,34 @@ import { User } from '@/services/user';
 import settingsMenu from '@/services/settingsMenu';
 import { $route } from '@/services/ng';
 import { currentUser } from '@/services/auth';
+import PromiseRejectionError from '@/lib/promise-rejection-error';
 import './settings.less';
 
 class UserProfile extends React.Component {
+  static propTypes = {
+    onError: PropTypes.func,
+  };
+
+  static defaultProps = {
+    onError: () => {},
+  };
+
   constructor(props) {
     super(props);
     this.state = { user: null };
   }
 
   componentDidMount() {
     const userId = $route.current.params.userId || currentUser.id;
-    User.get({ id: userId }, user => this.setState({ user: User.convertUserInfo(user) }));
+    User.get({ id: userId }).$promise
+      .then(user => this.setState({ user: User.convertUserInfo(user) }))
+      .catch((error) => {
+        // ANGULAR_REMOVE_ME This code is related to Angular's HTTP services
+        if (error.status && error.data) {
+          error = new PromiseRejectionError(error);
+        }
+        this.props.onError(error);
+      });
   }
 
   render() {