Merge branch '7.0'

2025-09-14 14:21:23 +00:00 · 2019-07-16 10:15:31 +08:00
parent 5b6f215392 04e791f14c
commit f491073d66
104 changed files with 943 additions and 359 deletions
--- a/frontend/src/components/common/account.js
+++ b/frontend/src/components/common/account.js
@@ -4,6 +4,7 @@ import ReactDOM from 'react-dom';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import { siteRoot, gettext, appAvatarURL } from '../../utils/constants';
+import toaster from '../toast';

 const propTypes = {
  isAdminPanel: PropTypes.bool,
@@ -79,6 +80,9 @@ class Account extends Component {
          isOrgStaff: resp.data.is_org_staff === 1 ? true : false,
          showInfo: !this.state.showInfo,
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
      this.isFirstMounted = false;
    } else {
--- a/frontend/src/components/dialog/add-related-file-dialog.js
+++ b/frontend/src/components/dialog/add-related-file-dialog.js
@@ -49,11 +49,8 @@ class AddRelatedFileDialog extends React.Component {
      this.props.onRelatedFileChange();
      this.toggle();
    }).catch((error) => {
-      if (error.response) {
-        this.setState({
-          errMessage: error.response.data.error_msg
-        });
-      }
+      let errMessage = Utils.getErrorMsg(error);
+      this.setState({errMessage: errMessage});
    });
  }

--- a/frontend/src/components/dialog/add-reviewer-dialog.js
+++ b/frontend/src/components/dialog/add-reviewer-dialog.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import UserSelect from '../user-select.js';
 import '../../css/add-reviewer-dialog.css';

@@ -63,6 +65,9 @@ class AddReviewerDialog extends React.Component {
        if (res.data.success.length > 0) {
          this.listReviewers();
        }
+      }).catch(error => {
+        let errorMsg = Utils.getErrorMsg(error);
+        toaster.danger(errorMsg);
      });
    }
  }
@@ -79,6 +84,9 @@ class AddReviewerDialog extends React.Component {
        }
        this.setState({ reviewers: newReviewers });
      }
+    }).catch(error => {
+      let errorMsg = Utils.getErrorMsg(error);
+      toaster.danger(errorMsg);
    });
  }

--- a/frontend/src/components/dialog/change-repo-password-dialog.js
+++ b/frontend/src/components/dialog/change-repo-password-dialog.js
@@ -83,16 +83,7 @@ class ChangeRepoPasswordDialog extends React.Component {
        this.props.toggleDialog();
        toaster.success(gettext('Successfully changed library password.'));
      }).catch((error) => {
-        let errorMsg = '';
-        if (error.response) {
-          if (error.response.data) {
-            errorMsg = error.response.data.error_msg;
-          } else {
-            errorMsg = gettext('Error');
-          }   
-        } else {
-          errorMsg = gettext('Please check the network.');
-        }   
+        let errorMsg = Utils.getErrorMsg(error);
        this.setState({
          errorMsg: errorMsg,
          submitBtnDisabled: false
--- a/frontend/src/components/dialog/clean-trash.js
+++ b/frontend/src/components/dialog/clean-trash.js
@@ -4,6 +4,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import Select from 'react-select/lib/Creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import toaster from '../toast';

 const propTypes = {
@@ -46,12 +47,7 @@ class CleanTrash extends React.Component {
      this.props.refreshTrash();
      this.props.toggleDialog();
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = error.response.data.error_msg || gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        formErrorMsg: errorMsg,
        submitBtnDisabled: false
--- a/frontend/src/components/dialog/commit-details.js
+++ b/frontend/src/components/dialog/commit-details.js
@@ -4,6 +4,7 @@ import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import moment from 'moment';
 import { gettext, fileServerRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import Loading from '../loading';

 const propTypes = {
@@ -31,12 +32,7 @@ class CommitDetails extends React.Component {
        commitDetails: res.data
      }); 
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = error.response.data.error || gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        isLoading: false,
        errorMsg: errorMsg
--- a/frontend/src/components/dialog/create-group-dialog.js
+++ b/frontend/src/components/dialog/create-group-dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
+import { Utils } from '../../utils/utils';

 class CreateGroupDialog extends React.Component {

@@ -46,10 +47,8 @@ class CreateGroupDialog extends React.Component {
      seafileAPI.createGroup(name).then((res)=> {
        that.props.onCreateGroup();
      }).catch((error) => {
-        let errorMsg = gettext(error.response.data.error_msg);
-        this.setState({
-          errorMsg: errorMsg
-        });
+        let errorMsg = Utils.getErrorMsg(error);
+        this.setState({errorMsg: errorMsg});
      });
    } else {
      this.setState({
--- a/frontend/src/components/dialog/dismiss-group-dialog.js
+++ b/frontend/src/components/dialog/dismiss-group-dialog.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 class DismissGroupDialog extends React.Component {

@@ -14,6 +16,9 @@ class DismissGroupDialog extends React.Component {
    let that = this;
    seafileAPI.deleteGroup(this.props.groupID).then((res)=> {
      that.props.onGroupChanged();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/edit-filetag-dialog.js
+++ b/frontend/src/components/dialog/edit-filetag-dialog.js
@@ -6,6 +6,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import RepoTag from '../../models/repo-tag';
 import CreateTagDialog from './create-tag-dialog';
+import toaster from '../toast';
 require('../../css/repo-tag.css');

 const TagItemPropTypes = {
@@ -54,6 +55,9 @@ class TagItem extends React.Component {
      seafileAPI.addFileTag(repoID, filePath, id).then(() => {
        repoTagIdList = this.getRepoTagIdList();
        this.props.onFileTagChanged();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      let fileTag = null;
@@ -67,6 +71,9 @@ class TagItem extends React.Component {
      seafileAPI.deleteFileTag(repoID, fileTag.id).then(() => {
        repoTagIdList = this.getRepoTagIdList();
        this.props.onFileTagChanged();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -121,9 +128,10 @@ class TagList extends React.Component {
        let repoTag = new RepoTag(item);
        repotagList.push(repoTag);
      });
-      this.setState({
-        repotagList: repotagList,
-      });
+      this.setState({repotagList: repotagList});
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -186,6 +194,9 @@ class EditFileTagDialog extends React.Component {
    let {repoID, filePath} = this.props;
    seafileAPI.addFileTag(repoID, filePath, repoTagID).then(() => {
      this.props.onFileTagChanged();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/edit-repo-commit-labels.js
+++ b/frontend/src/components/dialog/edit-repo-commit-labels.js
@@ -4,6 +4,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import CreatableSelect from 'react-select/lib/Creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import toaster from '../toast';

 const propTypes = {
@@ -45,12 +46,7 @@ class UpdateRepoCommitLabels extends React.Component {
      this.props.toggleDialog();
      toaster.success(gettext('Successfully edited labels.'));
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = error.response.data.error_msg || gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        formErrorMsg: errorMsg,
        submitBtnDisabled: false
--- a/frontend/src/components/dialog/generate-share-link.js
+++ b/frontend/src/components/dialog/generate-share-link.js
@@ -59,12 +59,18 @@ class GenerateShareLink extends React.Component {
      } else {
        this.setState({isLoading: false});
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
    if (this.isOfficeFile) {
      seafileAPI.getFileInfo(repoID, path).then((res) => {
        if (res.data) {
          this.setState({fileInfo: res.data});
        }
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -134,7 +140,8 @@ class GenerateShareLink extends React.Component {
        let sharedLinkInfo = new SharedLinkInfo(res.data);
        this.setState({sharedLinkInfo: sharedLinkInfo});
      }).catch((error) => {
-        toaster.danger(error.response.data.error_msg);
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -170,6 +177,9 @@ class GenerateShareLink extends React.Component {
        'can_edit': false,
        'can_download': true
      };
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/generate-upload-link.js
+++ b/frontend/src/components/dialog/generate-upload-link.js
@@ -100,6 +100,9 @@ class GenerateUploadLink extends React.Component {
      seafileAPI.createUploadLink(repoID, path, password, expireDays).then((res) => {
        let sharedUploadInfo = new SharedUploadInfo(res.data);
        this.setState({sharedUploadInfo: sharedUploadInfo}); 
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -164,6 +167,9 @@ class GenerateUploadLink extends React.Component {
        passwordnew: '',
        sharedUploadInfo: null,
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/internal-link-dialog.js
+++ b/frontend/src/components/dialog/internal-link-dialog.js
@@ -2,9 +2,10 @@ import React from 'react';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import PropTypes from 'prop-types';
 import toaster from '../toast';
-import copy from '@seafile/seafile-editor/dist//utils/copy-to-clipboard';
+import copy from '@seafile/seafile-editor/dist/utils/copy-to-clipboard';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import '../../css/internal-link.css';

 const propTypes = {
@@ -38,6 +39,9 @@ class InternalLinkDialog extends React.Component {
      this.setState({
        isOpen: true,
        smartLink: res.data.smart_link
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    });
  }
--- a/frontend/src/components/dialog/label-repo-state-dialog.js
+++ b/frontend/src/components/dialog/label-repo-state-dialog.js
@@ -4,6 +4,7 @@ import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import CreatableSelect from 'react-select/lib/Creatable';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import Loading from '../loading';
 import toaster from '../toast';

@@ -32,12 +33,7 @@ class LabelRepoStateDialog extends React.Component {
        errorMsg: ''
      }); 
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = error.response.data.error_msg || gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        isLoading: false,
        errorMsg: errorMsg
@@ -72,12 +68,7 @@ class LabelRepoStateDialog extends React.Component {
      toaster.success(msg);
      this.props.toggleDialog();
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = error.response.data.error_msg || gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        formErrorMsg: errorMsg,
        submitBtnDisabled: false
--- a/frontend/src/components/dialog/leave-group-dialog.js
+++ b/frontend/src/components/dialog/leave-group-dialog.js
@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
 import { gettext, username } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 class LeaveGroupDialog extends React.Component {

@@ -13,6 +15,9 @@ class LeaveGroupDialog extends React.Component {
  leaveGroup = () => {
    seafileAPI.quitGroup(this.props.groupID, username).then((res)=> {
      this.props.onGroupChanged();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/lib-history-setting-dialog.js
+++ b/frontend/src/components/dialog/lib-history-setting-dialog.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gettext, enableRepoHistorySetting } from '../../utils/constants';
-import toaster from '../toast';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, Alert } from 'reactstrap';
+import { gettext, enableRepoHistorySetting } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  itemName: PropTypes.string.isRequired,
@@ -36,6 +37,9 @@ class LibHistorySetting extends React.Component {
        disabled: res.data.keep_days > 0 ? false : true,
        expireDays: res.data.keep_days > 0 ? res.data.keep_days : 30, 
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -53,6 +57,9 @@ class LibHistorySetting extends React.Component {
        toaster.success(message);
        this.setState({keepDays: res.data.keep_days});
        this.props.toggleDialog();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      this.setState({
--- a/frontend/src/components/dialog/list-related-file-dialog.js
+++ b/frontend/src/components/dialog/list-related-file-dialog.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import { Button, ModalHeader, ModalBody, ModalFooter, Table } from 'reactstrap';
 import Dirent from '../../models/dirent';
 import { gettext, siteRoot } from '../../utils/constants';
-import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import '../../css/list-related-file-dialog.css';

 const propTypes = {
@@ -31,6 +32,9 @@ class ListRelatedFileDialog extends React.Component {
    let relatedID = item.related_id;
    seafileAPI.deleteRelatedFile(repoID, filePath, relatedID).then((res) => {
      this.props.onRelatedFileChange();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -53,11 +57,9 @@ class ListRelatedFileDialog extends React.Component {
        dirent['related_id'] = item.related_id;
        dirent['link'] = siteRoot + 'lib/' + item.repo_id + '/file' + Utils.encodePath(item.path);
        direntList.push(dirent);
-        this.setState({
-          direntList: direntList
-        });
      });
    });
+    this.setState({direntList: direntList});
  }

  componentWillMount() {
--- a/frontend/src/components/dialog/list-tag-dialog.js
+++ b/frontend/src/components/dialog/list-tag-dialog.js
@@ -4,6 +4,7 @@ import { Button, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import RepoTag from '../../models/repo-tag';

 import '../../css/repo-tag.css';
@@ -92,6 +93,9 @@ class ListTagDialog extends React.Component {
      this.setState({
        repotagList: repotagList,
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/list-taggedfiles-dialog.js
+++ b/frontend/src/components/dialog/list-taggedfiles-dialog.js
@@ -1,10 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import moment from 'moment';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
-import moment from 'moment';
 import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  repoID: PropTypes.string.isRequired,
@@ -38,6 +39,9 @@ class ListTaggedFilesDialog extends React.Component {
      this.getTaggedFiles();
      this.props.updateUsedRepoTags();
      if (this.props.onFileTagChanged) this.onFileTagChanged(taggedFile);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -57,6 +61,9 @@ class ListTaggedFilesDialog extends React.Component {
      this.setState({
        taggedFileList: taggedFileList,
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/manage-members-dialog.js
+++ b/frontend/src/components/dialog/manage-members-dialog.js
@@ -5,6 +5,8 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Table } from 'react
 import { seafileAPI } from '../../utils/seafile-api.js';
 import RoleEditor from '../select-editor/role-editor';
 import UserSelect from '../user-select.js';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import '../../css/manage-members-dialog.css';

 const propTypes = {
@@ -49,6 +51,9 @@ class ManageMembersDialog extends React.Component {
          errMessage: res.data.failed
        });
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -57,6 +62,9 @@ class ManageMembersDialog extends React.Component {
      this.setState({
        groupMembers: res.data
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -177,6 +185,9 @@ class Member extends React.PureComponent {
  deleteMember = (name) => {
    seafileAPI.deleteGroupMember(this.props.groupID, name).then((res) => {
      this.props.onGroupMembersChange();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/org-add-admin-dialog.js
+++ b/frontend/src/components/dialog/org-add-admin-dialog.js
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import UserSelect from '../user-select';
 import { seafileAPI } from '../../utils/seafile-api';
 import OrgUserInfo from '../../models/org-user';
@@ -35,12 +37,9 @@ class AddOrgAdminDialog extends React.Component {
    seafileAPI.setOrgAdmin(orgID, userEmail, true).then(res => {
      let userInfo = new OrgUserInfo(res.data);
      this.props.onAddedOrgAdmin(userInfo);
-    }).catch((error) => {
-      if (error.response) {
-        this.setState({
-          errMessage: error.response.data.error_msg
-        });
-      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/org-add-member-dialog.js
+++ b/frontend/src/components/dialog/org-add-member-dialog.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import UserSelect from '../user-select.js';

 const propTypes = {
@@ -41,6 +43,9 @@ class AddMemberDialog extends React.Component {
        this.props.onMemberChanged();
        this.props.toggle();
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/org-add-repo-dialog.js
+++ b/frontend/src/components/dialog/org-add-repo-dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Form, FormGroup, Label } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';

 const propTypes = {
  toggle: PropTypes.func.isRequired,
@@ -33,7 +34,7 @@ class AddRepoDialog extends React.Component {
        this.props.toggle();
        this.props.onRepoChanged();
      }).catch(error => {
-        let errorMsg = gettext(error.response.data.error_msg);
+        let errorMsg = Utils.getErrorMsg(error);
        this.setState({ errMessage: errorMsg });
      });
    }
--- a/frontend/src/components/dialog/org-delete-member-dialog.js
+++ b/frontend/src/components/dialog/org-delete-member-dialog.js
@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  member: PropTypes.object.isRequired,
@@ -25,6 +26,9 @@ class DeleteMemberDialog extends React.Component {
        this.props.onMemberChanged();
        this.props.toggle();
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/org-delete-repo-dialog.js
+++ b/frontend/src/components/dialog/org-delete-repo-dialog.js
@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 class DeleteRepoDialog extends React.Component {

@@ -17,6 +18,9 @@ class DeleteRepoDialog extends React.Component {
        this.props.onRepoChanged();
        this.props.toggle();
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/org-logs-file-update-detail.js
+++ b/frontend/src/components/dialog/org-logs-file-update-detail.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  repoID: PropTypes.string.isRequired,
@@ -36,7 +38,10 @@ class FileUpdateDetailDialog extends React.Component {
        newfile: this.state.newfile.concat(res.data.new),
        removed: this.state.removed.concat(res.data.removed),
      });
-    });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    })
  }

  renderContentItem = (items) => {
--- a/frontend/src/components/dialog/org-set-group-quota-dialog.js
+++ b/frontend/src/components/dialog/org-set-group-quota-dialog.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, InputGroupAddon, InputGroup } from 'reactstrap';
 import { gettext, orgID } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  toggle: PropTypes.func.isRequired,
@@ -35,6 +37,9 @@ class SetGroupQuotaDialog extends React.Component {
      seafileAPI.orgAdminSetGroupQuota(orgID, this.props.groupID, newQuota).then((res) => {
        this.props.toggle();
        this.props.onDepartChanged();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      const err = gettext('Quota is invalid.');
--- a/frontend/src/components/dialog/readme-dialog.js
+++ b/frontend/src/components/dialog/readme-dialog.js
@@ -5,6 +5,8 @@ import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer'
 import Loading from '../../components/loading';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  repoID: PropTypes.string.isRequired,
@@ -32,6 +34,9 @@ class ReadmeDialog extends React.Component {
          isLoading: false,
        }); 
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/rename-group-dialog.js
+++ b/frontend/src/components/dialog/rename-group-dialog.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import { Modal, ModalHeader, ModalBody, ModalFooter, Input, Button } from 'reactstrap';
+import Utils from '../../utils/utils';
+import toaster from '../toast';

 class RenameGroupDialog extends React.Component {

@@ -34,6 +36,9 @@ class RenameGroupDialog extends React.Component {
      seafileAPI.renameGroup(this.props.groupID, name).then((res)=> {
        that.props.loadGroup(this.props.groupID);
        that.props.onGroupChanged(res.data.id);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
    this.setState({
--- a/frontend/src/components/dialog/save-shared-file-dialog.js
+++ b/frontend/src/components/dialog/save-shared-file-dialog.js
@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Alert } from 'react
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import FileChooser from '../file-chooser/file-chooser';
+import { Utils } from '../../utils/utils';

 const propTypes = {
  sharedToken: PropTypes.string.isRequired,
@@ -27,11 +28,8 @@ class SaveSharedFileDialog extends React.Component {
      this.props.toggleCancel();
      this.props.handleSaveSharedFile();
    }).catch((error) => {
-      if (error.response) {
-        this.setState({
-          errMessage: error.response.data.error_msg
-        });
-      }
+      let errMessage = Utils.getErrorMsg(error);
+      this.setState({errMessage: errMessage});
    });
  }

--- a/frontend/src/components/dialog/share-dialog.js
+++ b/frontend/src/components/dialog/share-dialog.js
@@ -8,6 +8,8 @@ import GenerateShareLink from './generate-share-link';
 import GenerateUploadLink from './generate-upload-link';
 import { seafileAPI } from '../../utils/seafile-api';
 import Loading from '../loading';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import '../../css/share-link-dialog.css';

 const propTypes = {
@@ -40,6 +42,9 @@ class ShareDialog extends React.Component {
        isRepoJudgemented: true,
        isRepoOwner: isRepoOwner,
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/share-to-group.js
+++ b/frontend/src/components/dialog/share-to-group.js
@@ -5,6 +5,8 @@ import Select from 'react-select';
 import makeAnimated from 'react-select/lib/animated';
 import { gettext, isPro } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import SharePermissionEditor from '../select-editor/share-permission-editor';

 class GroupItem extends React.Component {
@@ -140,6 +142,9 @@ class ShareToGroup extends React.Component {
        obj.label = res.data[i].name;
        this.options.push(obj);
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -152,6 +157,9 @@ class ShareToGroup extends React.Component {
          sharedItems: res.data
        });
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -194,6 +202,9 @@ class ShareToGroup extends React.Component {
          selectedOption: null,
          permission: 'rw',
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.shareFolder(repoID, path, 'group', this.state.permission, groups).then(res => {
@@ -210,6 +221,9 @@ class ShareToGroup extends React.Component {
          selectedOption: null,
          permission: 'rw'
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -222,12 +236,18 @@ class ShareToGroup extends React.Component {
        this.setState({
          sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; }) 
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.deleteShareToGroupItem(repoID, path, 'group', groupID).then(() => {
        this.setState({
          sharedItems: this.state.sharedItems.filter(item => { return item.group_info.id !== groupID; }) 
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -239,10 +259,16 @@ class ShareToGroup extends React.Component {
    if (this.props.isGroupOwnedRepo) {
      seafileAPI.modifyGroupOwnedRepoGroupSharedPermission(repoID, permission, groupID).then(() => {
        this.updateSharedItems(item, permission);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.updateShareToGroupItemPermission(repoID, path, 'group', groupID, permission).then(() => {
        this.updateSharedItems(item, permission);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
--- a/frontend/src/components/dialog/share-to-user.js
+++ b/frontend/src/components/dialog/share-to-user.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import {gettext, isPro, canInvitePeople, siteRoot} from '../../utils/constants';
 import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api.js';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import UserSelect from '../user-select';
 import SharePermissionEditor from '../select-editor/share-permission-editor';
 import '../../css/invitations.css';
@@ -127,6 +129,9 @@ class ShareToUser extends React.Component {
      if(res.data.length !== 0) {
        this.setState({sharedItems: res.data});
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -215,12 +220,18 @@ class ShareToUser extends React.Component {
        this.setState({
          sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; }) 
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.deleteShareToUserItem(repoID, path, 'user', username).then(res => {
        this.setState({
          sharedItems: this.state.sharedItems.filter( item => { return item.user_info.name !== username; }) 
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -232,10 +243,16 @@ class ShareToUser extends React.Component {
    if (this.props.isGroupOwnedRepo) {
      seafileAPI.modifyGroupOwnedRepoUserSharedPermission(repoID, permission, username).then(() => {
        this.updateSharedItems(item, permission);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.updateShareToUserItemPermission(repoID, path, 'user', username, permission).then(() => {
        this.updateSharedItems(item, permission);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
--- a/frontend/src/components/dialog/sort-options.js
+++ b/frontend/src/components/dialog/sort-options.js
@@ -0,0 +1,65 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Modal, ModalBody } from 'reactstrap';
+import { gettext } from '../../utils/constants';
+
+const propTypes = {
+  toggleDialog: PropTypes.func.isRequired,
+  sortBy: PropTypes.string.isRequired,
+  sortOrder: PropTypes.string.isRequired,
+  sortList: PropTypes.func.isRequired
+};
+
+class SortOptions extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.sortOptions = [
+      {id: 'sort-option-1', value: 'name-asc', text: gettext('By name ascending')},
+      {id: 'sort-option-2', value: 'name-desc', text: gettext('By name descending')},
+      {id: 'sort-option-3', value: 'size-asc', text: gettext('By size ascending')},
+      {id: 'sort-option-4', value: 'size-desc', text: gettext('By size descending')},
+      {id: 'sort-option-5', value: 'time-asc', text: gettext('By time ascending')},
+      {id: 'sort-option-6', value: 'time-desc', text: gettext('By time descending')}
+    ];
+    const { sortBy, sortOrder } = this.props;
+    this.state = {
+      currentOption: `${sortBy}-${sortOrder}`
+    };
+  }
+
+  switchOption = (e) => {
+    if (!e.target.checked) {
+      return;
+    }
+
+    this.setState({
+      currentOption: e.target.value
+    });
+
+    const [sortBy, sortOrder] = e.target.value.split('-');
+    this.props.sortList(sortBy, sortOrder);
+    this.props.toggleDialog();
+  }
+
+  render() {
+    return (
+      <Modal isOpen={true} toggle={this.props.toggleDialog}>
+        <ModalBody>
+          {this.sortOptions.map((item, index) => {
+            return (
+              <Fragment key={index}>
+                <input id={item.id} className="align-middle" type="radio" name="sort-options" value={item.value} checked={this.state.currentOption == item.value} onChange={this.switchOption} />
+                <label htmlFor={item.id} className="align-middle m-2">{item.text}</label><br />
+              </Fragment>
+            );
+          })}
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
+
+SortOptions.propTypes = propTypes;
+
+export default SortOptions;
--- a/frontend/src/components/dialog/transfer-dialog.js
+++ b/frontend/src/components/dialog/transfer-dialog.js
@@ -5,6 +5,8 @@ import Select from 'react-select';
 import makeAnimated from 'react-select/lib/animated';
 import { seafileAPI } from '../../utils/seafile-api.js';
 import { gettext, isPro } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import UserSelect from '../user-select';

 const propTypes = {
@@ -42,6 +44,9 @@ class TransferDialog extends React.Component {
        obj.label = res.data[i].name;
        this.options.push(obj);
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/transfer-group-dialog.js
+++ b/frontend/src/components/dialog/transfer-group-dialog.js
@@ -4,6 +4,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api.js';
 import UserSelect from '../user-select';
+import { Utils } from '../../utils/utils';

 import '../../css/transfer-group-dialog.css';

@@ -38,11 +39,8 @@ class TransferGroupDialog extends React.Component {
      seafileAPI.transferGroup(this.props.groupID, email).then((res) => {
        this.props.toggleTransferGroupDialog();
      }).catch((error) => {
-        if (error.response) {
-          this.setState({
-            errMessage: error.response.data.error_msg
-          });
-        }
+        let errMessage = Utils.getErrorMsg(error);
+        this.setState({errMessage: errMessage});
      });
    }
  }
--- a/frontend/src/components/dialog/update-tag-dialog.js
+++ b/frontend/src/components/dialog/update-tag-dialog.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import { Button, ModalHeader, ModalBody, ModalFooter, Input } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  currentTag: PropTypes.object,
@@ -50,6 +52,9 @@ class UpdateTagDialog extends React.Component {
    seafileAPI.updateRepoTag(repoID, tag_id, name, color).then(() => {
      this.props.toggleCancel();
      this.props.updateUsedRepoTags();
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -73,6 +78,9 @@ class UpdateTagDialog extends React.Component {
      if (res.data.success === 'true') {
        this.props.onDeleteRepoTag(tag.id);
      }
+    }).catch((error) => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dialog/zip-download-dialog.js
+++ b/frontend/src/components/dialog/zip-download-dialog.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Modal, ModalHeader, ModalBody } from 'reactstrap'; 
 import { gettext, fileServerRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import Loading from '../loading';

 const propTypes = {
@@ -43,12 +44,7 @@ class ZipDownloadDialog extends React.Component {
      this.queryZipProgress();
      interval = setInterval(this.queryZipProgress, 1000);
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = error.response.data.error_msg || gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        isLoading: false,
        errorMsg: errorMsg
@@ -70,12 +66,7 @@ class ZipDownloadDialog extends React.Component {
      }
    }).catch((error) => {
      clearInterval(interval);
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        isLoading: false,
        errorMsg: errorMsg
--- a/frontend/src/components/dir-view-mode/dir-column-file.js
+++ b/frontend/src/components/dir-view-mode/dir-column-file.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Utils } from '../../utils/utils';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import toaster from '../toast';
 import WikiMarkdownViewer from '../wiki-markdown-viewer';

 const propTypes = {
@@ -44,6 +45,9 @@ class DirColumnFile extends React.Component {
    let { path, repoID } = this.props;
    seafileAPI.createDraft(repoID, path).then(res => {
      window.location.href = siteRoot + 'lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit';
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dirent-detail/detail-comments-list.js
+++ b/frontend/src/components/dirent-detail/detail-comments-list.js
@@ -5,6 +5,8 @@ import { processor } from '@seafile/seafile-editor/dist/utils/seafile-markdown2h
 import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import '../../css/comments-list.css';

 const { username } = window.app.pageOptions;
@@ -36,6 +38,9 @@ class DetailCommentList extends React.Component {
  listComments = (filePath) => {
    seafileAPI.listComments(this.props.repoID, (filePath || this.props.filePath)).then((res) => {
      this.setState({ commentsList: res.data.comments });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -49,6 +54,9 @@ class DetailCommentList extends React.Component {
    if (comment.trim()) {
      seafileAPI.postComment(repoID, filePath, comment.trim()).then(() => {
        this.listComments();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
    this.refs.commentTextarea.value = '';
@@ -58,6 +66,9 @@ class DetailCommentList extends React.Component {
    const { repoID } = this.props;
    seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -65,6 +76,9 @@ class DetailCommentList extends React.Component {
    const { repoID } = this.props;
    seafileAPI.deleteComment(repoID, event.target.id).then(() => {
      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -72,6 +86,9 @@ class DetailCommentList extends React.Component {
    const { repoID } = this.props;
    seafileAPI.updateComment(repoID, commentID, null, null, newComment).then(() => {
      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dirent-detail/dirent-details.js
+++ b/frontend/src/components/dirent-detail/dirent-details.js
@@ -3,13 +3,14 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Nav, NavItem, NavLink, TabContent, TabPane } from 'reactstrap';
 import DetailCommentList from './detail-comments-list';
-import { Utils } from '../../utils/utils';
+import { siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import Dirent from '../../models/dirent';
 import DetailListView from './detail-list-view';
 import FileTag from '../../models/file-tag';
 import '../../css/dirent-detail.css';
-import { siteRoot } from '../../utils/constants';

 const propTypes = {
  repoID: PropTypes.string.isRequired,
@@ -73,7 +74,10 @@ class DirentDetail extends React.Component {
        }
        this.setState({folderDirent: folderDirent});
        this.updateDetailView(folderDirent, path);
-      });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      })
    }
  }

@@ -85,6 +89,9 @@ class DirentDetail extends React.Component {
          direntType: 'file',
          direntDetail: res.data,
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
      seafileAPI.listFileTags(repoID, direntPath).then(res => {
        let fileTagList = [];
@@ -93,6 +100,9 @@ class DirentDetail extends React.Component {
          fileTagList.push(file_tag);
        });
        this.setState({fileTagList: fileTagList});
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
      seafileAPI.listRelatedFiles(repoID, direntPath).then(res => {
        let relatedFiles = [];
@@ -116,7 +126,10 @@ class DirentDetail extends React.Component {
          direntType: 'dir',
          direntDetail: res.data
        });
-      });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      })
    }
  }

--- a/frontend/src/components/dirent-detail/lib-details.js
+++ b/frontend/src/components/dirent-detail/lib-details.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import moment from 'moment';
 import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
-import '../../css/dirent-detail.css';
 import { seafileAPI } from '../../utils/seafile-api';
+import toaster from '../toast';
+import '../../css/dirent-detail.css';

 const propTypes = {
  currentRepo: PropTypes.object.isRequired,
@@ -34,6 +35,9 @@ class LibDetail extends React.Component {
  getFileCounts = (repo) => {
    seafileAPI.getRepoInfo(repo.repo_id).then(res => {
      this.setState({fileCount: res.data.file_count});
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dirent-grid-view/dirent-grid-view.js
+++ b/frontend/src/components/dirent-grid-view/dirent-grid-view.js
@@ -20,6 +20,7 @@ import Rename from '../../components/dialog/rename-grid-item-dialog';
 import CreateFile from '../dialog/create-file-dialog';
 import CreateFolder from '../dialog/create-folder-dialog';
 import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';
+import toaster from '../toast';

 import '../../css/grid-view.css';

@@ -241,7 +242,10 @@ class DirentGridView extends React.Component{
      this.props.updateDirent(currentObject, 'locked_by_me', true);
      let lockName = username.split('@');
      this.props.updateDirent(currentObject, 'lock_owner_name', lockName[0]);
-    });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
+    })
  }

  onUnlockItem = (currentObject) => {
@@ -251,6 +255,9 @@ class DirentGridView extends React.Component{
      this.props.updateDirent(currentObject, 'is_locked', false);
      this.props.updateDirent(currentObject, 'locked_by_me', false);
      this.props.updateDirent(currentObject, 'lock_owner_name', '');
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -17,6 +17,7 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import LibSubFolderPermissionDialog from '../dialog/lib-sub-folder-permission-dialog';

 import '../../css/dirent-list-item.css';
+import toaster from '../toast';

 const propTypes = {
  path: PropTypes.string.isRequired,
@@ -136,10 +137,16 @@ class DirentListItem extends React.Component {
    if (dirent.starred) {
      seafileAPI.unstarItem(repoID, filePath).then(() => {
        this.props.updateDirent(this.props.dirent, 'starred', false);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.starItem(repoID, filePath).then(() => {
        this.props.updateDirent(this.props.dirent, 'starred', true);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -277,6 +284,9 @@ class DirentListItem extends React.Component {
      this.props.updateDirent(this.props.dirent, 'locked_by_me', true);
      let lockName = username.split('@');
      this.props.updateDirent(this.props.dirent, 'lock_owner_name', lockName[0]);
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }
  
@@ -287,6 +297,9 @@ class DirentListItem extends React.Component {
      this.props.updateDirent(this.props.dirent, 'is_locked', false);
      this.props.updateDirent(this.props.dirent, 'locked_by_me', false);
      this.props.updateDirent(this.props.dirent, 'lock_owner_name', '');
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -251,6 +251,9 @@ class DirentListView extends React.Component {
        this.zipToken = res.data['zip_token'];
        this.addDownloadAnimation();
        this.interval = setInterval(this.addDownloadAnimation, 1000);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
@@ -273,13 +276,18 @@ class DirentListView extends React.Component {
          _this.setState({isProgressDialogShow: false});
        }, 500);
      }
-
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

  onCancelDownload = () => {
    seafileAPI.cancelZipTask(this.zipToken).then(() => {
      this.setState({isProgressDialogShow: false});
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/file-chooser/file-chooser.js
+++ b/frontend/src/components/file-chooser/file-chooser.js
@@ -4,6 +4,7 @@ import { Input } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, isPro } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import RepoInfo from '../../models/repo-info';
 import RepoListView from './repo-list-view';
 import Loading from '../loading';
@@ -54,6 +55,9 @@ class FileChooser extends React.Component {
          selectedRepo: repoInfo
        });
        this.props.onRepoItemClick(repoInfo);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else { // only_all_repos
      seafileAPI.listRepos().then(res => {
@@ -222,10 +226,9 @@ class FileChooser extends React.Component {
        isResultGot: true
      });
      this.source = null;
-    }).catch(res => {
-      /* eslint-disable */
-      console.log(res);
-      /* eslint-enable */
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -321,6 +324,9 @@ class FileChooser extends React.Component {
          selectedPath: path,
          isCurrentRepoShow: true,
        });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      if (!this.state.hasRequest) {
--- a/frontend/src/components/file-chooser/repo-list-item.js
+++ b/frontend/src/components/file-chooser/repo-list-item.js
@@ -7,6 +7,7 @@ import Dirent from '../../models/dirent';
 import { seafileAPI } from '../../utils/seafile-api';
 import treeHelper from '../../components/tree-view/tree-helper';
 import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  isShowFile: PropTypes.bool,
@@ -43,6 +44,9 @@ class RepoListItem extends React.Component {

      this.addResponseListToNode(direntList, tree.root);
      this.setState({treeData: tree});
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });

    if (this.props.selectedItemInfo.repoID === this.props.repo.repo_id) {
@@ -79,6 +83,9 @@ class RepoListItem extends React.Component {
        }
        this.addResponseListToNode(direntList, node);
        this.setState({treeData: tree});
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      tree.expandNode(node);
@@ -117,6 +124,9 @@ class RepoListItem extends React.Component {
      this.setState({
        treeData: tree
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/file-uploader/file-uploader.js
+++ b/frontend/src/components/file-uploader/file-uploader.js
@@ -8,6 +8,7 @@ import { Utils } from '../../utils/utils';
 import { gettext } from '../../utils/constants';
 import UploadProgressDialog from './upload-progress-dialog';
 import UploadRemindDialog from '../dialog/upload-remind-dialog';
+import toaster from '../toast';
 import '../../css/file-uploader.css';

 const propTypes = {
@@ -188,6 +189,9 @@ class FileUploader extends React.Component {
      let offset = Math.floor(uploadedBytes / (1024 * 1024));
      resumableFile.markChunksCompleted(offset);
      this.resumable.upload();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -422,6 +426,9 @@ class FileUploader extends React.Component {
      if (Utils.isIEBrower()) {
        this.uploadInput.current.click();
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
    if (!Utils.isIEBrower()) {
      this.uploadInput.current.click();
@@ -436,6 +443,9 @@ class FileUploader extends React.Component {
      if (Utils.isIEBrower()) {
        this.uploadInput.current.click();
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
    if (!Utils.isIEBrower()) {
      this.uploadInput.current.click();
@@ -447,6 +457,9 @@ class FileUploader extends React.Component {
    this.uploadInput.current.setAttribute('webkitdirectory', 'webkitdirectory');
    seafileAPI.getUploadLink(repoID, this.props.path).then(res => {
      this.resumable.opts.target = res.data + '?ret-json=1';
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -500,6 +513,9 @@ class FileUploader extends React.Component {
      this.setState({isUploadRemindDialogShow: false});
      this.setUploadFileList(this.resumable.files);
      this.resumable.upload();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }
  
--- a/frontend/src/components/file-view/comment-panel.js
+++ b/frontend/src/components/file-view/comment-panel.js
@@ -6,6 +6,8 @@ import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 're
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import ParticipantsList from './participants-list';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import '../../css/comments-list.css';

 const { username, repoID, filePath } = window.app.pageOptions;
@@ -38,6 +40,9 @@ class CommentPanel extends React.Component {
      this.setState({
        commentsList: res.data.comments
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -52,6 +57,9 @@ class CommentPanel extends React.Component {
    if (comment.trim()) {
      seafileAPI.postComment(repoID, filePath, comment).then(() => {
        this.listComments();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
    this.refs.commentTextarea.value = '';
@@ -60,18 +68,27 @@ class CommentPanel extends React.Component {
  resolveComment = (event) => {
    seafileAPI.updateComment(repoID, event.target.id, 'true').then(() => {
      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

  deleteComment = (event) => {
    seafileAPI.deleteComment(repoID, event.target.id).then(() => {
      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

  editComment = (commentID, newComment) => {
    seafileAPI.updateComment(repoID, commentID, null, null, newComment).then((res) => {
      this.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/main-side-nav.js
+++ b/frontend/src/components/main-side-nav.js
@@ -1,10 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from '@reach/router';
-import Group from '../models/group';
+import { Badge } from 'reactstrap';
 import { gettext, siteRoot, enableWiki, canAddRepo, canGenerateShareLink, canGenerateUploadLink, canInvitePeople } from '../utils/constants';
 import { seafileAPI } from '../utils/seafile-api';
-import { Badge } from 'reactstrap';
+import { Utils } from '../utils/utils';
+import toaster from './toast';
+import Group from '../models/group';

 import { canViewOrg, isDocs, isPro } from '../utils/constants';

@@ -54,6 +56,9 @@ class MainSideNav extends React.Component {
      _this.setState({
        groupItems: groupList
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/review-list-view/review-comment-dialog.js
+++ b/frontend/src/components/review-list-view/review-comment-dialog.js
@@ -4,6 +4,8 @@ import { Button } from 'reactstrap';
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, name, draftRepoID, draftFilePath } from '../../utils/constants';
 import { processor } from '../../utils/seafile-markdown2html';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 import '../../css/review-comment-dialog.css';

@@ -42,10 +44,16 @@ class ReviewCommentDialog extends React.Component {
      };
      seafileAPI.postComment(draftRepoID, draftFilePath, comment, JSON.stringify(detail)).then(() => {
        this.props.onCommentAdded();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
        this.props.onCommentAdded();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
    this.setState({ comment: '' });
--- a/frontend/src/components/review-list-view/review-comments.js
+++ b/frontend/src/components/review-list-view/review-comments.js
@@ -5,6 +5,8 @@ import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 're
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, draftFilePath, draftRepoID } from '../../utils/constants';
 import { username } from '../../utils/constants.js';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 import '../../css/review-comments.css';

@@ -36,6 +38,9 @@ class ReviewComments extends React.Component {
    if (comment.length > 0) {
      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {        
        this.props.listComments();
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
      this.setState({ comment: '' });
    }
@@ -44,12 +49,18 @@ class ReviewComments extends React.Component {
  resolveComment = (event) => {
    seafileAPI.updateComment(draftRepoID, event.target.id, 'true').then((res) => {
      this.props.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

  editComment = (commentID, newComment) => {
    seafileAPI.updateComment(draftRepoID, commentID, null, null, newComment).then((res) => {
      this.props.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -60,6 +71,9 @@ class ReviewComments extends React.Component {
  deleteComment = (event) => {
    seafileAPI.deleteComment(draftRepoID, event.target.id).then((res) => {
      this.props.listComments();
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -6,6 +6,8 @@ import { gettext, siteRoot, username } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import editorUtilities from '../../utils/editor-utilties';
 import More from '../more';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';

 const propTypes = {
  isPublic: PropTypes.bool,
@@ -114,10 +116,9 @@ class Search extends Component {
          isResultGetted: true
        });
        _this.source = null;
-      }).catch(res => {
-        /* eslint-disable */
-        console.log(res);
-        /* eslint-enable */
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      editorUtilities.searchFiles(queryData,cancelToken).then(res => {
--- a/frontend/src/components/send-link.js
+++ b/frontend/src/components/send-link.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Form, FormGroup, Label } from 'reactstrap';
 import { seafileAPI } from '../utils/seafile-api';
 import { gettext } from '../utils/constants';
+import { Utils } from '../utils/utils';
 import toaster from './toast';

 const propTypes = {
@@ -72,16 +73,7 @@ class SendLink extends React.Component {
        });
      }
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        if (error.response.data && error.response.data['error_msg']) {
-          errorMsg = error.response.data['error_msg'];
-        } else {
-          errorMsg = gettext('Error');
-        }   
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.setState({
        btnDisabled: false,
        sending: false,
--- a/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
+++ b/frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
@@ -12,6 +12,7 @@ import DeleteRepoDialog from '../../components/dialog/delete-repo-dialog';
 import Rename from '../rename';
 import { seafileAPI } from '../../utils/seafile-api';
 import LibHistorySettingDialog from '../dialog/lib-history-setting-dialog';
+import toaster from '../toast';

 const propTypes = {
  currentGroup: PropTypes.object,
@@ -346,10 +347,16 @@ class SharedRepoListItem extends React.Component {
    if (this.state.isStarred) {
      seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
        this.setState({isStarred: !this.state.isStarred});
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    } else {
      seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
        this.setState({isStarred: !this.state.isStarred});
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
@@ -14,6 +14,7 @@ import EditFileTagDialog from '../dialog/edit-filetag-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import ModalPortal from '../modal-portal';
 import ItemDropdownMenu from '../dropdown-menu/item-dropdown-menu';
+import toaster from '../toast';

 import '../../css/dirents-menu.css';

@@ -171,6 +172,9 @@ class MutipleDirOperationToolbar extends React.Component {
        this.props.updateDirent(dirent, 'locked_by_me', true);
        this.props.unSelectDirent();
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -182,6 +186,9 @@ class MutipleDirOperationToolbar extends React.Component {
        this.props.updateDirent(dirent, 'locked_by_me', false);
        this.props.unSelectDirent();
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -231,6 +238,9 @@ class MutipleDirOperationToolbar extends React.Component {
          viewMode: 'add_related_file',
        });
      }
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -255,6 +265,9 @@ class MutipleDirOperationToolbar extends React.Component {
        showLibContentViewDialogs: true,
        showEditFileTagDialog: true,
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

@@ -274,6 +287,9 @@ class MutipleDirOperationToolbar extends React.Component {
      this.setState({
        relatedFiles: res.data.related_files
      });
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/toolbar/view-file-toolbar.js
+++ b/frontend/src/components/toolbar/view-file-toolbar.js
@@ -1,9 +1,10 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { DropdownToggle, Dropdown, DropdownMenu, DropdownItem, Tooltip} from 'reactstrap';
-import { Utils } from '../../utils/utils';
 import { gettext, siteRoot, canGenerateShareLink, isDocs } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
+import toaster from '../toast';
 import ModalPotal from '../modal-portal';
 import ShareDialog from '../dialog/share-dialog';
 import EditFileTagDialog from '../dialog/edit-filetag-dialog';
@@ -52,6 +53,9 @@ class ViewFileToolbar extends React.Component {
    let { path, repoID } = this.props;
    seafileAPI.createDraft(repoID, path).then(res => {
      window.location.href = siteRoot + 'lib/' + res.data.origin_repo_id + '/file' + res.data.draft_file_path + '?mode=edit';
+    }).catch(error => {
+      let errMessage = Utils.getErrorMsg(error);
+      toaster.danger(errMessage);
    });
  }

--- a/frontend/src/components/user-select.js
+++ b/frontend/src/components/user-select.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import AsyncSelect from 'react-select/lib/Async';
 import { seafileAPI } from '../utils/seafile-api.js';
 import { gettext } from '../utils/constants';
+import { Utils } from '../utils/utils.js';
+import toaster from './toast';

 const propTypes = {
  placeholder: PropTypes.string.isRequired,
@@ -47,6 +49,9 @@ class UserSelect extends React.Component {
          this.options.push(obj);
        }
        callback(this.options);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
      });
    }
  }
--- a/frontend/src/components/user-settings/email-notice.js
+++ b/frontend/src/components/user-settings/email-notice.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import toaster from '../toast';

 const {
@@ -39,12 +40,7 @@ class EmailNotice extends React.Component {
    seafileAPI.updateEmailNotificationInterval(this.state.currentInterval).then((res) => {
      toaster.success(gettext('Success'));
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        errorMsg = error.response.data.error_msg || gettext('Error');
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error); 
      toaster.danger(errorMsg);
    });
  }
--- a/frontend/src/components/user-settings/user-avatar-form.js
+++ b/frontend/src/components/user-settings/user-avatar-form.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { gettext, siteRoot } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
 import toaster from '../toast';
+import { Utils } from '../../utils/utils';

 const { avatarURL, csrfToken } = window.app.pageOptions;

@@ -58,16 +59,7 @@ class UserAvatarForm extends React.Component {
      });
      toaster.success(gettext('Success'));
    }).catch((error) => {
-      let errorMsg = '';
-      if (error.response) {
-        if (error.response.data && error.response.data['error_msg']) {
-          errorMsg = error.response.data['error_msg'];
-        } else {
-          errorMsg = gettext('Error');
-        }
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }
+      let errorMsg = Utils.getErrorMsg(error);
      toaster.danger(errorMsg);
    });
  }
--- a/frontend/src/components/user-settings/webdav-password.js
+++ b/frontend/src/components/user-settings/webdav-password.js
@@ -2,6 +2,7 @@ import React from 'react';
 import ModalPortal from '../modal-portal';
 import { gettext } from '../../utils/constants';
 import { seafileAPI } from '../../utils/seafile-api';
+import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import UpdateWebdavPassword from '../dialog/update-webdav-password';

@@ -32,16 +33,7 @@ class WebdavPassword extends React.Component {
      });
      toaster.success(gettext('Success'));
    }).catch((error) => {
-      let errorMsg = ''; 
-      if (error.response) {
-        if (error.response.data && error.response.data['error_msg']) {
-          errorMsg = error.response.data['error_msg'];
-        } else {
-          errorMsg = gettext('Error');
-        }   
-      } else {
-        errorMsg = gettext('Please check the network.');
-      }   
+      let errorMsg = Utils.getErrorMsg(error);
      this.toggleDialog();
      toaster.danger(errorMsg);
    }); 
--- a/frontend/src/components/wiki-markdown-viewer.js
+++ b/frontend/src/components/wiki-markdown-viewer.js
@@ -4,8 +4,9 @@ import MarkdownViewer from '@seafile/seafile-editor/dist/viewer/markdown-viewer'
 import { gettext, repoID, slug, serviceURL, isPublicWiki, siteRoot } from '../utils/constants';
 import { Card, CardTitle, CardText } from 'reactstrap';
 import Loading from './loading';
-import { Utils } from '../utils/utils';
 import { seafileAPI } from '../utils/seafile-api';
+import { Utils } from '../utils/utils';
+import toaster from './toast';
 import '../css/related-files-list.css';

 const propTypes = {
@@ -83,7 +84,10 @@ class WikiMarkdownViewer extends React.Component {
        this.setState({
          relatedFiles: res.data.related_files
        });
-      });
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      })
    }
  }