extended-fetch

Currently, there is no way to determine that the reason the request failed is due to the Timeout Error using the fetch API, but sometimes it needed, for example, for meaningful UI reaction.

The most popular workaround for this today is to set a forced limit on the client side, which will only work if it less than the existing limit outside, and it will also break functionality in situations where the limit has been raised above the standard limit

This library allows you to cath Timeout Error without enforcing a time restriction

🤏 Tiny size 🧩 Does not patching existing fetch, just exports own implementation
🔀 Can be used as drop in replacement for fetch

⚠️ It's not a fetch polyfill. It uses Request and Response objects from fetch implementation

Installation

npm install @akiyamka/extended-fetch

Usage

Works just like native fetch, but with few additional features:

Catch timeout error

Fetch does not allow the user to know if his request was failed due to a 504 error.
Instead it throws common TypeError: Failed to fetch
But extended-fetch throw 'Timeout Error' error for that case

import { fetch, isTimeoutError } from 'extended-fetch';

fetch('/users', {
  method: 'POST',
  body: JSON.stringify({ foo: 'bar' }),
}).catch((error) => {
  // Allow identify timeout error
  console.assert(error.message, 'Timeout Error');
  console.assert(isTimeoutError(error), true);
});

Subscribe to xhr events:

Also you can hook XMLHttpRequest events:

• loadstart
• load
• loadend
• progress
• error
• abort

import { fetch } from 'extended-fetch';

fetch(
  '/users',
  {
    method: 'POST',
    body: JSON.stringify({ foo: 'bar' }),
  },
  {
    // Extra setting
    eventListener: (event) => {
      if (event.type === 'progress') {
        console.log(`Progress changed to ${event.payload}`);
      }
    },
  }
)

Catch Abort error

The library has a typed helper for Abort error detection

import { fetch, isAbortError } from 'extended-fetch';

const abortController = new AbortController()
abortController.abort()
try {
  const reference = await fetch(srv.readyCheck(), {
    signal: abortController.signal,
  })
} catch(err) {
  if (isAbortError(e)) {
    // request was aborted
  }
}

Credits

Inspired by https://github.com/JakeChampion/fetch