Throw custom AbortError when aborting a fetch

Author: axelboc

packages/app/src/ErrorFallback.tsx

@@ -1,7 +1,7 @@
 import { type FallbackProps } from 'react-error-boundary';
 
 import styles from './App.module.css';
-import { CANCELLED_BY_USER } from './providers/utils';
+import { AbortError, CANCELLED_BY_USER } from './providers/utils';
 
 interface Props extends FallbackProps {
   className?: string;
@@ -11,7 +11,7 @@ interface Props extends FallbackProps {
 function ErrorFallback(props: Props) {
   const { className = '', error, resetErrorBoundary } = props;
 
-  if (error instanceof Error && error.message === CANCELLED_BY_USER) {
+  if (error instanceof AbortError && error.message === CANCELLED_BY_USER) {
     return (
       <p className={`${styles.error} ${className}`}>
         Request cancelled

packages/app/src/providers/h5grove/h5grove-api.ts

@@ -24,7 +24,7 @@ import axios, {
 
 import { DataProviderApi } from '../api';
 import { type ValuesStoreParams } from '../models';
-import { createAxiosProgressHandler } from '../utils';
+import { AbortError, createAxiosProgressHandler } from '../utils';
 import {
   type H5GroveAttrValuesResponse,
   type H5GroveDataResponse,
@@ -92,14 +92,7 @@ export class H5GroveApi extends DataProviderApi {
       return await this.fetchData(params, abortSignal, onProgress);
     } catch (error) {
       if (error instanceof AxiosError && axios.isCancel(error)) {
-        // Throw abort reason instead of axios `CancelError`
-        // https://github.com/axios/axios/issues/5758
-        throw new Error(
-          typeof abortSignal?.reason === 'string'
-            ? abortSignal.reason
-            : 'cancelled',
-          { cause: error },
-        );
+        throw new AbortError(abortSignal, error);
       }
 
       throw error;

packages/app/src/providers/hsds/hsds-api.ts

@@ -26,7 +26,7 @@ import axios, { AxiosError, type AxiosInstance } from 'axios';
 
 import { DataProviderApi } from '../api';
 import { type ValuesStoreParams } from '../models';
-import { createAxiosProgressHandler } from '../utils';
+import { AbortError, createAxiosProgressHandler } from '../utils';
 import {
   type BaseHsdsEntity,
   type HsdsAttribute,
@@ -270,14 +270,7 @@ export class HsdsApi extends DataProviderApi {
       return data.value;
     } catch (error) {
       if (error instanceof AxiosError && axios.isCancel(error)) {
-        // Throw abort reason instead of axios `CancelError`
-        // https://github.com/axios/axios/issues/5758
-        throw new Error(
-          typeof abortSignal?.reason === 'string'
-            ? abortSignal.reason
-            : 'cancelled',
-          { cause: error },
-        );
+        throw new AbortError(abortSignal, error);
       }
 
       throw error;

packages/app/src/providers/mock/utils.ts

@@ -17,6 +17,7 @@ import { getChildEntity } from '@h5web/shared/hdf5-utils';
 import ndarray from 'ndarray';
 
 import { applyMapping } from '../../vis-packs/core/utils';
+import { AbortError } from '../utils';
 
 export const SLOW_TIMEOUT = 3000;
 
@@ -92,13 +93,7 @@ export async function cancellableDelay(
     function handleAbort() {
       clearTimeout(timeout);
       abortSignal?.removeEventListener('abort', handleAbort);
-      reject(
-        new Error(
-          typeof abortSignal?.reason === 'string'
-            ? abortSignal.reason
-            : 'cancelled',
-        ),
-      );
+      reject(new AbortError(abortSignal));
     }
 
     abortSignal?.addEventListener('abort', handleAbort);

packages/app/src/providers/utils.ts

@@ -102,3 +102,13 @@ export function createAxiosProgressHandler(
     })
   );
 }
+
+export class AbortError extends Error {
+  public constructor(abortSignal?: AbortSignal, cause?: unknown) {
+    const message =
+      typeof abortSignal?.reason === 'string' ? abortSignal.reason : undefined;
+
+    super(message, { cause });
+    this.name = 'AbortError';
+  }
+}