[fetch] How to handle http request timeout

[nosensezzz]

Hi, Guys

I currently ran into a issue that when using fetch to call remote data, I can't handle the timeout situation, if my not return successfully, it will wait forever.

I have google for awhile and I didn't find any good practice to handle, npm fetch doc says it has a timeout keyword in options object, but seems it didn't work at all.

how do you guys handle this situation?

[brentvatne]

Check out this discussion here: JakeChampion/fetch#175 - there is a solution implemented there that uses promises and seems nice.

Lots of discussion going on about the fetch specification here:
whatwg/fetch#27
whatwg/fetch#20

Another attempt at wrapping fetch to add this: whatwg/fetch#20 (comment)

[narychen]

I really don't agree the above solutions. If fetch wait forever and you use setTimeout to reject the wrapper promise, then the fetch will hold the reference of the resolve and reject forever.
It may seem not so huge of a waster but if the code try to use fetch hundreds of times and timeout happens a lot, then the memory leak will be a problem.

[kyle-ilantzis]

I agree with @narychen, its a waste of memory. A big discussion is going on over here whatwg/fetch#20 and seems not have any solution. Here's what I did:

• I copied from node_modules/whatwg-fetch the fetch.js file
• I modified it to use a setTimeout and then call xhr.abort() (and another modification like fetch.hack = true)
• I then include my modified whatwg-fetch.js in my index.ios.js and index.android.js

I now have a timeout of 10 seconds on my fetch requests.

You can find my modified whatwg fetch.js file here: https://gist.github.com/kyle-ilantzis/e4521e6194f6c019b14ac91291feb348

You can find the setTimeout I added here: https://gist.github.com/kyle-ilantzis/e4521e6194f6c019b14ac91291feb348#file-whatwg-fetch-js-L440

You can modify 10 seconds to what ever you want here: https://gist.github.com/kyle-ilantzis/e4521e6194f6c019b14ac91291feb348#file-whatwg-fetch-js-L8

I any one is interested, here is the self.fetch.hack = true:
https://gist.github.com/kyle-ilantzis/e4521e6194f6c019b14ac91291feb348#file-whatwg-fetch-js-L4
https://gist.github.com/kyle-ilantzis/e4521e6194f6c019b14ac91291feb348#file-whatwg-fetch-js-L466

[adambene]

Try https://github.com/benestudio/fetch/tree/feature/timeout

• npm install whatwg-fetch-timeout --save;

return fetch('/path', {timeout: 500}).then(function() {
  // successful fetch
}).catch(function(error) {
  // network request failed / timeout
})

This fork supports timout just like node-fetch.

This way you can have timeouts runtime and bundle time also. Say goodbye to memory leaks.

Hope it could be merged some sunny day.

[adambene]

Any idea on how to use my fetch fork without forking and patching RN itself?

[kyle-ilantzis]

@adambene you want your polyfill to overwrite react-native's polyfill.

The first lines of fetch.js look like

if (self.fetch) {
return
}

Which will be true because the fetch function already exists.

I suggest doing

global.fetch = null;
require('whatwg-fetch-timeout')

(I am not sure but i think it would be in global)

Or changing the if to check for your fetch function such as if (fetch.hasTimeout) { return }

[adambene]

@kyle-ilantzis whatwg-fetch is already imported before I could do anything: https://github.com/facebook/react-native/blob/292cc82d0ebc437a6f1cdd2e972b3917b7ee05a4/Libraries/Network/fetch.js

[kyle-ilantzis]

@adambene yes whatwg-fetch is already imported. You want your whatwg-fetch-timeout to take precedence. I imagine you are importing yours? The problem is in your fetch.js file at the top of the file there is

if (self.fetch) {
return
}

[adambene]

@kyle-ilantzis I feel that whatwg-fetch-timeout should only be an extension to whatwg-fetch, so removing the fetch implementation check seems hacky to me.

I've tried npm-shrinkwrap, but does not allow different package names only versions to be overridden.

I am searching for a really maintainable and universal solution, because all my future projects are going to rely on fetch timeout to achieve robustness. That's why forking RN nor hacking whatwg-fetch is not a good option.

(Edit: of course the most welcome would be a warm merge for the timeout feature.)