Improving behavior of the fetch-abort and its visualization during page transitions.

Author: krulis-martin

src/client.js

@@ -55,6 +55,17 @@ Object.keys(KNOWN_ACE_WORKERS).forEach(key => {
 window.Prism = window.Prism || {};
 window.Prism.manual = true;
 
+window.addEventListener(
+  'unhandledrejection',
+  ev => {
+    if (ev?.reason?.name === 'AbortError') {
+      ev.preventDefault();
+      ev.stopImmediatePropagation();
+    }
+  },
+  true
+);
+
 // load the initial state form the server - if any
 let state;
 const ini = window.__INITIAL_STATE__;

src/components/helpers/FetchManyResourceRenderer/FetchManyResourceRenderer.js

@@ -2,9 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { LoadingIcon, WarningIcon } from '../../icons';
+import { resourceStatus } from '../../../redux/helpers/resourceManager';
 
-const isLoading = status => status === 'PENDING';
-const hasFailed = status => status === 'FAILED';
+const isLoading = status => status === resourceStatus.PENDING || status === resourceStatus.ABORTED;
+const hasFailed = status => status === resourceStatus.FAILED;
 
 const defaultLoading = noIcons => (
   <span>

src/components/helpers/ResourceRenderer/ResourceRenderer.js

@@ -10,6 +10,7 @@ import {
   isLoading,
   isReadyOrReloading,
   hasFailed,
+  hasAborted,
   isPosting,
   isDeleting,
   isDeleted,
@@ -153,7 +154,12 @@ class ResourceRenderer extends Component {
 
     const resources = this.getResources();
     const resourcesLength = (resources && (List.isList(resources) ? resources.size : resources.length)) || 0;
-    const stillLoading = !resources || resources.find(res => !res) || resources.some(isLoading) || forceLoading;
+    const stillLoading =
+      !resources ||
+      forceLoading ||
+      resources.find(res => !res) ||
+      resources.some(isLoading) ||
+      resources.some(hasAborted);
     const isReloading =
       stillLoading && !forceLoading && resourcesLength > 0 && resources.every(res => res && isReadyOrReloading(res));
 

src/containers/App/App.js

@@ -34,7 +34,8 @@ import './recodex.css';
 library.add(regularIcons, solidIcons, brandIcons);
 
 const reloadIsRequired = (...statuses) =>
-  statuses.includes(resourceStatus.FAILED) && !statuses.includes(resourceStatus.PENDING);
+  (statuses.includes(resourceStatus.FAILED) || statuses.includes(resourceStatus.ABORTED)) &&
+  !statuses.includes(resourceStatus.PENDING);
 
 class App extends Component {
   static loadAsync =

src/pages/routes.js

@@ -85,7 +85,7 @@ const r = (basePath, component, linkName = '', auth = undefined) => {
 
   /*
    * The abort of pending requests was shifted to unmount callback (since new router took away history.listen).
-   * Top-level components are unmountend only when the page navigates to a different top-level component.
+   * Top-level components are unmounted only when the page navigates to a different top-level component.
    */
   const rootComponent = unwrap(component);
   if (rootComponent && rootComponent.prototype) {

src/redux/helpers/api/tools.js

@@ -185,7 +185,7 @@ export const createApiCallPromise = (
 };
 
 /**
- * A specific error means that there is a problem with the Internet connectin or the server is down.
+ * A specific error means that there is a problem with the Internet connecting or the server is down.
  * @param {Object} err The error description
  * @param {Function} dispatch
  */
@@ -220,7 +220,7 @@ const processResponse = (call, dispatch) =>
     })
     .then(({ success = true, error = null, payload = {} }) => {
       if (!success) {
-        if (error && error.message && (!error.code || !error.code.startsWith('4'))) {
+        if (error && error.message && (!error.code || !String(error.code).startsWith('4'))) {
           dispatch && dispatch(addNotification(`Server response: ${error.message}`, false));
         }
         return Promise.reject(error || new Error('The API call was not successful.'));

src/redux/helpers/resourceManager/index.js

@@ -11,6 +11,7 @@ import {
   isLoading,
   isReadyOrReloading,
   hasFailed,
+  hasAborted,
   getError,
   getUniqueErrors,
   isDeleting,
@@ -33,6 +34,7 @@ export {
   isLoading,
   isReadyOrReloading,
   hasFailed,
+  hasAborted,
   getError,
   getUniqueErrors,
   isDeleting,

src/redux/helpers/resourceManager/reducerFactory.js

@@ -4,14 +4,19 @@ import { resourceStatus } from './status.js';
 
 export const initialState = fromJS({ resources: {}, fetchManyStatus: {} });
 
+const isAbortError = error => error?.name === 'AbortError';
+
 const reducerFactory = (actionTypes, id = 'id') => ({
   [actionTypes.FETCH_PENDING]: (state, { meta }) =>
     meta.allowReload && state.getIn(['resources', meta[id], 'state']) === resourceStatus.FULFILLED
       ? state.setIn(['resources', meta[id], 'state'], resourceStatus.RELOADING)
       : state.setIn(['resources', meta[id]], createRecord()),
 
   [actionTypes.FETCH_REJECTED]: (state, { meta, payload: error }) =>
-    state.setIn(['resources', meta[id]], createRecord({ state: resourceStatus.FAILED, error })),
+    state.setIn(
+      ['resources', meta[id]],
+      createRecord({ state: isAbortError(error) ? resourceStatus.ABORTED : resourceStatus.FAILED, error })
+    ),
 
   [actionTypes.FETCH_FULFILLED]: (state, { meta, payload: data }) =>
     state.setIn(['resources', meta[id]], createRecord({ state: resourceStatus.FULFILLED, data })),
@@ -34,8 +39,8 @@ const reducerFactory = (actionTypes, id = 'id') => ({
         : resourceStatus.PENDING
     ),
 
-  [actionTypes.FETCH_MANY_REJECTED]: (state, { meta: { endpoint } }) =>
-    state.setIn(['fetchManyStatus', endpoint], resourceStatus.FAILED),
+  [actionTypes.FETCH_MANY_REJECTED]: (state, { meta: { endpoint }, payload: error }) =>
+    state.setIn(['fetchManyStatus', endpoint], isAbortError(error) ? resourceStatus.ABORTED : resourceStatus.FAILED),
 
   [actionTypes.FETCH_MANY_FULFILLED]: (state, { meta: { endpoint }, payload }) =>
     payload

src/redux/helpers/resourceManager/status.js

@@ -10,6 +10,7 @@ export const resourceStatus = {
   RELOADING: 'RELOADING', // similar to pending, but the old record data are still available whilst being re-fetched
   UPDATING: 'UPDATING', // similar to reloading, but some modification is in progress
   FAILED: 'FAILED',
+  ABORTED: 'ABORTED',
   FULFILLED: 'FULFILLED',
   POSTING: 'POSTING',
   DELETING: 'DELETING',
@@ -21,7 +22,7 @@ export const isLoadingState = state =>
 
 /**
  * @param {Object} item The item
- * @return {boolean} True when the item is loading or reloaing.
+ * @return {boolean} True when the item is loading or reloading.
  */
 export const isLoading = item => !item || isLoadingState(item.get('state'));
 
@@ -61,6 +62,12 @@ export const isDeleted = item => !item || item.get('state') === resourceStatus.D
  */
 export const hasFailed = item => Boolean(item) && item.get('state') === resourceStatus.FAILED;
 
+/**
+ * @param {Object} item The item
+ * @return {boolean} True when the item could not be loaded, written, updated or deleted.
+ */
+export const hasAborted = item => Boolean(item) && item.get('state') === resourceStatus.ABORTED;
+
 /**
  * Return error object { message, code, ... } of a failed resource.
  * @param {Object} item

src/redux/middleware/apiMiddleware.js

@@ -41,18 +41,21 @@ export const apiCall = (
   meta: { endpoint, ...meta },
 });
 
-const middleware = ({ dispatch, getState }) => next => action => {
-  switch (action && action.type) {
-    case CALL_API:
-      if (!action.request) {
-        throw new Error('API middleware requires request data in the action');
-      }
+const middleware =
+  ({ dispatch, getState }) =>
+  next =>
+  action => {
+    // skip anything but API calls
+    if (action?.type !== CALL_API) {
+      return next(action);
+    }
 
-      action = apiCall(action.request, dispatch, getState);
-      break;
-  }
+    if (!action.request) {
+      throw new Error('API middleware requires request data in the action');
+    }
 
-  return next(action);
-};
+    action = apiCall(action.request, dispatch, getState);
+    return next(action);
+  };
 
 export default middleware;