Node Fetch: Cannot cancel a stream that already has a reader 🙏

[19Qingfeng]

I used fetch in Remix, but encountered the following issue：

I'm not sure how I should use fetch on the server to initiate request processing and interrupt requests after timeout.

export const loader: LoaderFunction = async ({ context, request }) => {

  const controller = new AbortController()
  fetch('http://google/api.com', {
    signal: controller.signal,
  })
  controller.abort()

  return defer({
  })
}

This may seem like a bug, but I do need to retrieve some data through fetch on the server. Is there no other way for Remix to do this?

Can someone help me? 🙏🙏🙏

[suhaotian]

What's the point here to abort the request?

[suhaotian]

I think you are looking for https://github.com/axios/axios or https://github.com/suhaotian/xior

import axios from 'xior';

axios.get('http://google/api.com', {timeout: 10e4})

[19Qingfeng]

Actually, the problem lies in the streaming and bundleSize of aixos. We chose to use fetch on our web application site.
Excuse me, does this also mean that fetch cannot be used in Remix at this stage, as I do need to use some res. body functions

[suhaotian]

return promiseRejectedWith (new TypeError\ 'Cannot cancel a stream that already has a reader'));

The issue is because your fetch response already solved, then you cancel it, it's impossible.

Try xior, it's built on top of fetch. and fix this situation (when response resolved, will clearTimeout the cancel timer if set timeout)

And xior only ~3kb in gzip(compare to axios 10kb in gzip)

[19Qingfeng]

Thank you for your help, but I'm curious. I just cancelled the fetch request here, but it will cause the entire streaming of Remix to crash, which will cause my application to crash and look like it's remix bug : #3971

[suhaotian]

Yeah, I got it. Thanks!

Remix should try catch the promise reject error and show the error message, now is just crash.

[suhaotian]

@19Qingfeng Add this to your entry.server.tsx, then it will not crash, the promise reject crash, it's node's default behaviour.

process.addListener('unhandledRejection', err => {
  console.log('unhandledRejection error: ', err);
  // Do something for example: report log
})

[19Qingfeng]

Thank you, this method will damage my application's PM2 related configuration. I found another temporary hack method

const nodeFetch = require("node-fetch");
let fetchOverlay = false;
export function setupFetch() {
  if (!fetchOverlay) {
    globalThis.fetch = nodeFetch as any;
    fetchOverlay = true;
  }
}

I used node fetch to overwrite Remix's built-in fetch on the server

[suhaotian]

Since node v18, fetch already support, no need to use node-fetch anymore(expect you need proxy agent feature)

[19Qingfeng]

Remix has implemented a fetch polyfill internally, and I only use node fetch to prevent the aforementioned issues.

[jacobjohn-transitiv]

@19Qingfeng , are you executing the setupFetch function within the server.js file? I am also, randomly, getting this rejection error and can't find a good solution for this.