react-native: response.json() hangs when chrome debugging

When using fetch to make a get to an external api, and if debugging in chrome is active, then it never reaches the second “then” until there is an interaction with the UI, such as a tap on the screen, but if debugging is turned off then this problem goes away.

fetch(requestURL)
    .then((res) => res.json())
    .then((resData) => {
        this.setState({
            suggestions: resData.Similar.Results
        });
    })
    .done()

Using React Native 0.22 Only occurs on Android (both Genymotion and on device (5.0)) Using a Mac

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 36
  • Comments: 122 (32 by maintainers)

Commits related to this issue

Most upvoted comments

Got same issue with response.text(), response.json() and response.arrayBuffer(), but response.blob() seems to work fine. Versions are:

react-native-cli: 0.2.0
react-native: 0.22.2
Android 5.1.1

Quick workaround is to add empty timeout execution:

fetch('http://example.com')
    .then(response => {
        setTimeout(() => null, 0);
        return response.text();
    })
    .then(response => {
        console.log(response);
    });

still going in 0.42.0

This workaround still works:

fetch(url).then(response => {
  setTimeout(() => null, 0);  // workaround for issue-6679
  return response.json();
})

I think this issue should be re-opened as it hasn’t been resolved.

I can confirm just tapping anywhere on the screen does work around this problem.

This it’s back on RN 0.45.1

This actually still happens on Android, and when using an emulator even tapping the screen doesn’t help…

Will be fixed in 0.30

I can also also confirm confirm this behavior is still present in 0.45.1 as well as well.

Having the same problem. setTimeout hack works around the problem. RN version is 0.45.1

it happens on RN41 as well

I had this problem again after I upgraded to 0.31 and I fixed it by using the Fetch.js from 0.30rc.

Here is the code I used to replace the code in Fetch.js (node_modules/react-native/Libraries/Fetch/Fetch.js) https://gist.github.com/Thorbenandresen/d5a482863ccc0be5bfc0344340c12367

@reactjs-bot @mikelambert I am still following this post as it seems for me just a stupid bug which should be squashed ages ago, but nobody has/takes the time to do so. #android

@mikelambert I’m seeing something very similar.

  1. Android RN build on device. Everything is operating normally.
  2. Quickly disable and then re-enable wifi connection on the device.
  3. For the next 3-4 minutes all requests from Android RN app will timeout. I’m watching device network traffic with a proxy and can see other network requests going through successfully from the device. Web browser, email etc.
  4. After ~3-4 all pending requests from Android RN app will be sent. Even the ones that were reported as having timed out.
  5. Once pending requests are sent everything is back to normal.

Still on 0.31

i have same problem to, i use 0.25.1 and fetch problem not resolve for now. i think fetch is important part to use web service in mobile app and need to fix. for now i just use version 0.19 my issue same with #7381

Is it fixed in v0.25.0-rc? Because it persists there as well…

This is due to our incomplete XHR2 implementation. Check this code that was added with cbc0e21926594cbe650db34c466b934fda5c13ef.

Please consult the spec before fixing stuff.

wtf i spent 12 hours trying to adjust my code, wondering why it wont go within a .then statement of a promise only to find out its a freakin bug

This error still exists RN 45.1

My RN app run on android always be extremely slow for the first serveral fetch requests. Finally, I realize the reason is my LAN has turned on IPv6, but in China (it’s a great LAN not support ipv6). So it’s seems that android wait ipv6 timeout and change to IPv4, then everything back to normal.

Hi @lacker, good suggestion. The duplicate issue here has a good explanation of the steps, and I’ve created a demo repo here that very simply shows the issue. It seems to come down to calling response.json(). Commenting out that single line makes the delay go away. Repro’d using React Native v0.39.2 with no extra dependencies.

Considering that 0.30 is just days away from being called stable and that this bug is not very critical, I would just wait for 0.31. Afterall fetch implementation git bumped from 0.x to 1.x

Got the same problem on linux with the v0.22 as well. Interacting with the debug menu breaks the logjam.

For me, sourcemaps stop working after a while and I start seeing the transpiled code. That is happening when this error is occurring. But the problem also happens after a reboot before the sourcemaps stop working.

From Stackoverflow: http://stackoverflow.com/questions/36262456/what-could-be-causing-this-slow-fetch-in-react-native

In the following code, the first console.log message prints pretty much instantly. Then everything just hangs (I’m initially assumed it was waiting for the body of the response to be returned). The Body of the response is only about 26K, the time waiting seems to be indefinite UNLESS, I shake the phone and interact with the debug menu. * As soon as I interact with the debug menu, the promise resolves and everything moves along as expected.* My interactions with the debug menu can be simple, like hide inspector, show inspector, just takes something to kick the promise resolution into gear and everything is fine.

    fetch(SEARCH_URL, requestBody)
        .then((response) => {console.log(response); return response.json();})
        .then((responseData) => {
            debugger
            ...

Note: Disconnecting from the debugger and running the code does not exhibit the slowness (and not being connected to the debugger ignores the debugger statements)

And yes, I have rebooted the computer.

Just a reminder @mark0978 and @chug2k , this is fixed in the latest version of RN 0.47.

Cause it is so unobvious and is such a new bug (no wait, it’s more than 2 years old…)

On Sun, Aug 20, 2017 at 9:57 PM, Charles Lee notifications@github.com wrote:

of course, why didn’t i think of that

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/6679#issuecomment-323635295, or mute the thread https://github.com/notifications/unsubscribe-auth/AAGepjJ16GFnf9exbcTSKdN9eCynJEDJks5saPINgaJpZM4H5YHZ .

but it still hangs on android devices.

Lol, it actually works – wish I knew that long ago so many clicks so many clicks…

@bestander - I copied the the 0.30rc fetch llibrary into my 0.29 code and it worked fine for me.

I have the same problem with 0.22 and iOS on my mac (installed 1 hour ago).

Tapping anywhere + the setTimeOut workaround does not work for me.