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
- Add support for missing XHR response types Summary:Fixes #6679 This adds support for the missing response types to XMLHttpRequest. Don?t ship this yet. This is completely untested. yolo and stuff. C... — committed to facebook/react-native by davidaurelio 8 years ago
- Add support for missing XHR response types Summary:Fixes #6679 This adds support for the missing response types to XMLHttpRequest. Don?t ship this yet. This is completely untested. yolo and stuff. C... — committed to nightingale/react-native by davidaurelio 8 years ago
- Fixes Fetch error when debugging in Chrome Fixes https://github.com/facebook/react-native/issues/6679 BTW, why don't we use fetch via node_modules instead of copy/pasting code? — committed to bestander/react-native by bestander 8 years ago
- Fixes Fetch error when debugging in Chrome Summary: Fixes https://github.com/facebook/react-native/issues/6679 Closes https://github.com/facebook/react-native/pull/8512 Differential Revision: D35039... — committed to facebook/react-native by bestander 8 years ago
- Reverted commit D3503958 Summary: Fixes https://github.com/facebook/react-native/issues/6679 Closes https://github.com/facebook/react-native/pull/8512 Differential Revision: D3503958 Pulled By: don... — committed to facebook/react-native by bestander 8 years ago
- Fixes Fetch error when debugging in Chrome Summary: Fixes https://github.com/facebook/react-native/issues/6679 Closes https://github.com/facebook/react-native/pull/8512 Differential Revision: D35039... — committed to iodine/react-native by bestander 8 years ago
- Reverted commit D3503958 Summary: Fixes https://github.com/facebook/react-native/issues/6679 Closes https://github.com/facebook/react-native/pull/8512 Differential Revision: D3503958 Pulled By: don... — committed to iodine/react-native by bestander 8 years ago
- Fixes Fetch error when debugging in Chrome Summary: Fixes https://github.com/facebook/react-native/issues/6679 Closes https://github.com/facebook/react-native/pull/8512 Differential Revision: D35039... — committed to HomePass/react-native by bestander 8 years ago
- Reverted commit D3503958 Summary: Fixes https://github.com/facebook/react-native/issues/6679 Closes https://github.com/facebook/react-native/pull/8512 Differential Revision: D3503958 Pulled By: don... — committed to HomePass/react-native by bestander 8 years ago
- Reverted commit D3503958 Summary: Fixes https://github.com/facebook/react-native/issues/6679 Closes https://github.com/facebook/react-native/pull/8512 Differential Revision: D3503958 Pulled By: don... — committed to tungdo194/rn-test by bestander 8 years ago
Got same issue with
response.text()
,response.json()
andresponse.arrayBuffer()
, butresponse.blob()
seems to work fine. Versions are:Quick workaround is to add empty timeout execution:
still going in 0.42.0
This workaround still works:
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.
Yay, this appears to be fixed in 0.47 by https://github.com/facebook/react-native/commit/64825389dfb4e01d5b30cd63b0b41937a9bb431d !
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.1it 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
from0.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.
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 Nativev0.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.
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:
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.