New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

response.json() hangs when chrome debugging #6679

Closed
NgoKnows opened this Issue Mar 27, 2016 · 122 comments

Comments

Projects
None yet
@NgoKnows

NgoKnows commented Mar 27, 2016

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

@satya164

This comment has been minimized.

Collaborator

satya164 commented Mar 28, 2016

cc @martinbigio we were talking about this

Do sourcemaps in redbox work for you on Android when you're connected to the debugger?

@NgoKnows

This comment has been minimized.

NgoKnows commented Mar 28, 2016

Now that you mention it, nope, sourcemaps in redbox are not working when connected to the debugger.

@mark0978

This comment has been minimized.

mark0978 commented Mar 28, 2016

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.

@martinbigio

This comment has been minimized.

Contributor

martinbigio commented Mar 28, 2016

@steveluscher you were looking into setTimeout issues. Could this be related?

@cpojer, @skevy have we recently made any change to the Promise implementation?

cc @bestander, @vjeux

@steveluscher

This comment has been minimized.

Contributor

steveluscher commented Mar 28, 2016

I've been seeing ‘setTimeout never fires’ behavior intermittently as well, with timeouts > 0ms. The only clue that I had was that my Genymotion simulator clock and my system clock seem to drift apart over time. I didn't try opening the debug menu when stuck, nor have I noticed this on device yet (I haven't done anything on device in a while). That you've experienced the same behavior on device as you have in Genymotion makes me think it's not going to prove to be clock drift between the host running Chrome and the host running the app.

@mark0978

This comment has been minimized.

mark0978 commented Mar 28, 2016

Takes more than opening the menu, you have to choose something from it, like hide/show inspector. I'm not using a simulator.

@mj1618

This comment has been minimized.

mj1618 commented Mar 28, 2016

I'm having the same issue on an S4 mini, except I can stop the behaviour by tapping the screen without opening the debug menu.

@sergeybekrin

This comment has been minimized.

sergeybekrin commented Mar 29, 2016

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);
    });
@mark0978

This comment has been minimized.

mark0978 commented Mar 29, 2016

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

@martinbigio

This comment has been minimized.

Contributor

martinbigio commented Mar 30, 2016

Do we know when this regression started repro-ing? Do you guys mind sharing which version of react-native you're using? I want to make sure this is not a regression of the current RC.

cc @bestander

@mark0978

This comment has been minimized.

mark0978 commented Mar 30, 2016

It was in a version installed from npm on March 24. I don't know the version at the moment, but I can look it up tonight.

@Thorbenandresen

This comment has been minimized.

Thorbenandresen commented Mar 30, 2016

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.

@martinbigio

This comment has been minimized.

Contributor

martinbigio commented Mar 30, 2016

So this may have been introduced on 0.22, so not 0.23 launch blocker though we should fix asap.

@davidaurelio

This comment has been minimized.

Contributor

davidaurelio commented Mar 31, 2016

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

Please consult the spec before fixing stuff.

@ide ide referenced this issue Apr 4, 2016

Closed

[0.24] Commits to cherry pick and bugs to fix #6800

4 of 4 tasks complete

@ghost ghost closed this in fcc89e9 Apr 11, 2016

joshuapinter added a commit to joshuapinter/react-native that referenced this issue Apr 11, 2016

Add support for missing XHR response types
Summary:Fixes facebook#6679

This adds support for the missing response types to XMLHttpRequest.
Don?t ship this yet. This is completely untested. yolo and stuff.
Closes facebook#6870

Reviewed By: bestander

Differential Revision: D3153628

Pulled By: davidaurelio

fb-gh-sync-id: 76feae3377bc24b931548a9ac1af07943b1048ac
fbshipit-source-id: 76feae3377bc24b931548a9ac1af07943b1048ac

ide added a commit that referenced this issue Apr 11, 2016

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.
Closes #6870

Reviewed By: bestander

Differential Revision: D3153628

Pulled By: davidaurelio

fb-gh-sync-id: 76feae3377bc24b931548a9ac1af07943b1048ac
fbshipit-source-id: 76feae3377bc24b931548a9ac1af07943b1048ac
@Thorbenandresen

This comment has been minimized.

Thorbenandresen commented Apr 19, 2016

Should this be fixed in 0.24? The problem persists for me with 0.24

@bestander

This comment has been minimized.

Contributor

bestander commented Apr 19, 2016

No, this is in 0.25-rc

@Thorbenandresen

This comment has been minimized.

Thorbenandresen commented Apr 19, 2016

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

@bestander

This comment has been minimized.

Contributor

bestander commented Apr 19, 2016

Actually the commit is supposed to be in 0.24.1, it has been cherry-picked into the branch https://github.com/facebook/react-native/commits/0.24-stable.
If you still reproduce the bug then the fix does not work.
cc @davidaurelio

@Thorbenandresen

This comment has been minimized.

Thorbenandresen commented Apr 19, 2016

yes - I still reproduce the error with 0.24.1 - Am I supposed to to do any changes to my code? I have not changed it since it broke around 0.22.

@jrichardlai

This comment has been minimized.

Contributor

jrichardlai commented Apr 23, 2016

It seems something is off with the sourcemap, the one from my bundle has multiple sections but it seems that when we parse it we expect to be flat https://github.com/facebook/react-native/blob/master/Libraries/JavaScriptAppEngine/Initialization/SourceMap.js#L1086
The sourcemap I get using the explorer is flat:
screen shot 2016-04-22 at 4 16 38 pm
But the one I get from my project has sections:
screen shot 2016-04-22 at 4 12 07 pm
The promise is rejected, it seems that SourceMap does not handle sections, I updated it and got the Stacktrace in the red screen working fine after commenting in parseErrorStack, but this didn't fixed the freezing issue of the Chrome Debugger.

// if (frame.file.indexOf(sourceMap.file) !== -1 ||
//     frame.file.replace('.map', '.bundle').indexOf(
//       sourceMap.file
//     ) !== -1) {
  resolveSourceMaps(sourceMap, frame);
// }

@bestander bestander reopened this Apr 25, 2016

@davidaurelio

This comment has been minimized.

Contributor

davidaurelio commented Apr 29, 2016

@jrichardlai oh yes, that’s a super old version of the source map library. Using what we have in node_modules should do the trick. PR welcome. Will look into the other issue now.

@ericsanjaya

This comment has been minimized.

ericsanjaya commented May 6, 2016

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

@florindobre

This comment has been minimized.

florindobre commented May 20, 2016

Any update on this issue? Possible workarounds besides just tapping on the screen.

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

@ccdwyer

This comment has been minimized.

ccdwyer commented Jun 28, 2017

Having this issue as well. Very frustrating.

@danawoodman

This comment has been minimized.

danawoodman commented Jul 1, 2017

How does one debug React Native apps that fetch JSON? 😭 @lacker can you please re-open as this is again an issue

@cablegunmaster

This comment has been minimized.

cablegunmaster commented Jul 1, 2017

@danawoodman debug? Well make log lines everywhere to the console And see where iT reaches like for Every line a console.log("1"); And count up And see which logs arent found And you Got the issue where Its stuck. Use above workarounds to fix it. As there is No generaal fix for this issue.

@rishabhpoddar

This comment has been minimized.

rishabhpoddar commented Jul 1, 2017

This error still exists RN 45.1

@danawoodman

This comment has been minimized.

danawoodman commented Jul 1, 2017

@cablegunmaster yes, what I am saying is that without a hack you cannot troubleshoot your apps since the debugger causes this issue to fail with fetch.

@jan-happy

This comment has been minimized.

jan-happy commented Jul 4, 2017

I was also pulling my hair over this. Glad I've found this issue!

@joelandplus

This comment has been minimized.

joelandplus commented Jul 6, 2017

Didn't encounter this issue before, but once i upgrade from 0.44.0 to 0.46.0 today it pops up. The response.json() is just stuck, doesn't invoke then() nor catch(). Like some said, the fetch() was called from a helper function defined outside of a React component, but is called by a react component.

@raunaqss

This comment has been minimized.

raunaqss commented Jul 6, 2017

Encounter this issue sometimes only through React Native versions 0.44, 0.45 & 0.46. What would I do without these updated issues on Github and user submitted work around? 👍

@mikelambert

This comment has been minimized.

Contributor

mikelambert commented Jul 11, 2017

Yay, this appears to be fixed in 0.47 by 6482538 !

@amritg

This comment has been minimized.

amritg commented Jul 27, 2017

I too had faced same issue while debugging on ios Emulator with react-native version: "0.46.4". But as @mikelambert suggested, upgrading to version "^0.47.0-rc.5" solved this issue

@maxim-c

This comment has been minimized.

maxim-c commented Jul 27, 2017

but it still hangs on android devices.

@chug2k

This comment has been minimized.

chug2k commented Aug 21, 2017

i'm still seeing fetch on android devices being really slow. i'm on 0.49

@mark0978

This comment has been minimized.

mark0978 commented Aug 21, 2017

@chug2k

This comment has been minimized.

chug2k commented Aug 21, 2017

of course, why didn't i think of that

@mark0978

This comment has been minimized.

mark0978 commented Aug 21, 2017

@mikelambert

This comment has been minimized.

Contributor

mikelambert commented Aug 21, 2017

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

@maxim-c

This comment has been minimized.

maxim-c commented Aug 22, 2017

@mikelambert nah... Fixed only for ios, android still broken.

@cablegunmaster

This comment has been minimized.

cablegunmaster commented Aug 23, 2017

@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

@Fahad-pnw

This comment has been minimized.

Fahad-pnw commented Aug 26, 2017

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

@mark0978

This comment has been minimized.

mark0978 commented Aug 26, 2017

@JasonHenson

This comment has been minimized.

JasonHenson commented Aug 26, 2017

you can always make your own pull request to address the issue

@mark0978

This comment has been minimized.

mark0978 commented Aug 26, 2017

@jstahlmann

This comment has been minimized.

jstahlmann commented Sep 27, 2017

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

same here!

@hey99xx

This comment has been minimized.

hey99xx commented Dec 28, 2017

@maxim-c @mikelambert , if this is only fixed for iOS, shouldn't this issue still be open for Android devs? Reading the entire issue, it seems prematurely closed by @lacker , am I wrong?

@cablegunmaster

This comment has been minimized.

cablegunmaster commented Dec 29, 2017

Its not fixed on Android, just some nasty work arounds. ( tapping on the screen kind of )
Which you don't want the user to do in order to go further.

@amitassaraf

This comment has been minimized.

amitassaraf commented Feb 11, 2018

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.