Network inspect not working in v0.10.5

[geraintwhite]

React Native Debugger app version: 0.10.5
React Native version: 0.59.10
Platform: iOS
Is real device of platform: No
Operating System: macOS 10.15.1

Related to #376 and #365, a recent update to react-native-debugger has stopped the network inspect output from showing.

The network inspect output was working fine on a previous version with the same react-native version.

It also happens with Android and also happened before I updated to macOS Catalina.

Downgrading to v0.9.14 causes network inspect to work again (#423 (comment), but incidentally #423 still occurs on v0.9.14).

[caigehui]

same issue +1

[traviswimer]

I've been seeing this for a while now. This seems like a pretty important bug. This feature is the only reason I use RND, and I imagine that is true for many others. Is this problem not happening for everyone?

Considering there have been multiple different variations of this issue posted for a while now, it appears to me like it is widespread. Is this issue a high priority for the maintainers?

Just to attempt to consolidate this a little, I found these other issues that seem to be either duplicates or at least related:

• Network Inspect not working with RN 0.60.0 #365 (👍x45)
• Network inspector failing all requests (fetch) #431 (👍x5)
• Network inspector, failling with graph ql request #432 (👍x13)
• Network inspector is broken on RN 0.56 #242 (👍x7) - This one is really old, but the comments suggest that this new issue may have some similarities.

I've only looked into this issue a little bit, but it looks like the fetch polyfill was changed a little while ago. I'm not sure if that is related.

One of the other issues mentioned setting self.Blob = null. When I tried that out, it seemed to just prevent the request from ever completing.

Does anyone with more knowledge of the codebase have any insight into this? All the globals with the polyfill are confusing me a bit. haha

[traviswimer]

I was able to fix this issue in my case. For me it specifically had to do with Apollo/GraphQL, but the solution would likely relate to other libraries which make requests.

I explained my solution on another issue: #432 (comment)

[russpitre]

I've been facing this issue for a long while now. I've tried the various fixes mentioned in those related tickets but none seemed to work.

[traviswimer]

@russpitre I'm fairly certain the root issue is caused by the overridden XHR calls that I mentioned here: #432 (comment)

Even if you're not using Apollo/GraphQL, the problem likely has to do with when you are initializing whatever request library you are using.

[kyle-ssg]

have been getting this when using standard fetch for a while now, downgrading doesn't seem to fix it. Not only does it not show the response but network requests fail as soon as I enable it.

edit: providing a bit more info fetch returns _bodyText: "[object Blob]" when network inspect is enabled which is the same as #382. However the issue still stands that I can't see the responses with network inspect enabled.

[traviswimer]

@kyle-ssg Are you using fetch() immediately when your app starts? If so, my previous comments are still relevant, because RND overrides the default fetch() to connect it to the Network Inspector. Your code may be running before this happens.

[kyle-ssg]

@kyle-ssg Are you using fetch() immediately when your app starts? If so, my previous comments are still relevant, because RND overrides the default fetch() to connect it to the Network Inspector. Your code may be running before this happens.

Thought I'd try this out and delayed any execution 5s on app start, exact same issue occurs.

[traviswimer]

@kyle-ssg Maybe your issue is different, but I would look into whether the fetch you are calling is somehow referencing the wrong fetch. Basically:

let referenced_fetch = fetch;

setTimeout(()=>{
    // BAD
    referenced_fetch();

    // GOOD
    window.fetch();
}, 5000)

Otherwise I have no idea.
¯\_(ツ)_/¯

[kyle-ssg]

Hah, you're completely right. I was experiencing this on two different projects, one turned out to use axios and another uses isomorphic-unfetch. Apologies for adding noise to the thread!

[infostreams]

Turns out my problem was that I was hosting the API on my development machine on the "api.example.localhost" domain, and Chrome blocks everything going to the ".localhost" TLD by default. So, my network requests would work without the debugger, but with the debugger switched on I'd get a ERR_CONNECTION_REFUSED error. To save a potential future Googler an hour or two I'm donating this knowledge to the public domain :) Don't host on .localhost, just change it to .local and it should start working 🙄