Network Inspect not working with RN 0.60.0

[jmschlmrs]

Since updating our project's version of react-native to 0.60.0, the Network Inspect feature in react-native-debugger has stopped working properly.

With Network Inspect disabled, our application can successfully make API requests as normal. With Network Inspect enabled, our api requests are being returned with HTTP 200 statuses from our backend APIs, but they do not include a response payload. See screenshots for an example.

React Native Debugger app version: 0.9.10
React Native version: 0.60.0
Platform: Tested iOS only
Is real device of platform: Simulator
Operating System: macOS

[karltaylor]

Also having the same problem. Can't debug requests atm. Getting below with no info at all to help debug

Unexpected token o in JSON at position 1

[OzzieOrca]

Any updates? This is one of the main reasons I use React Native Debugger...

[showoffer]

We have major update from RN 0.53 to 0.60. I expected react-native-debugger Network debugging to work but it doesn't in newer version of RN. That's weird, every request ends up with "This request has no response data available."

[jmschlmrs]

Fixed for me after upgrading react-native-debugger to v0.9.12. Thanks!

[Kikketer]

This issue persists for me with RN 0.60.3 and debugger 0.9.12. I did a brew reinstall to get the latest. The responses are all empty, thus I can't debug any network traffic today.

[showoffer]

We have major update from RN 0.53 to 0.60. I expected react-native-debugger Network debugging to work but it doesn't in newer version of RN. That's weird, every request ends up with "This request has no response data available."

Confirm that issues is fixed in v0.9.12. RN v0.60.4. Thank you @jhen0409!

[garydevenay]

Running RN v0.60.5 and debugger v0.9.12 and this issue is still happening.

[Sleepful]

Same issue here with RN v0.60.5 and debugger v0.9.12, the debugger intercepts the request, it never gets a response and the API never gets the request either while network is turned on inside the debugger.

macOs, android emulator

Edit: best alternative I found is Reactotron

[maamounapprise]

Same issue RN v0.60.5 and debugger v0.9.12

[ks093]

Same issue with RN v.0.61.2 and debugger v0.10.2

[santtul]

Same issue (RN v.0.61.2 and debugger v0.10.2). Got it working with the following temporary solution.
Add this to your app init:
GLOBAL.Blob = null

[OzzieOrca]

#382 (comment) seems to work for now.

[mykhailo-melnyk]

@santtul thanks!
it is helped me!

[skurgansky-sugarcrm]

https://github.com/jhen0409/react-native-debugger/blob/master/docs/network-inspect-of-chrome-devtools.md#how-it-works

[roots-ai]

Getting this error now
TypeError: Cannot read property 'prototype' of null

[kalyanijamunkar10]

Thanks @santtul, This worked for me.

[ghost]

@jhen0409 should we reopen this? For me it is still not working on 0.10.5

[dtmp]

if (window.__REMOTEDEV__) { global.Blob = null; }

[kalyanijamunkar10]

please add this line in index.js file GLOBAL.Blob = null and remove this line GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

[santtul]

@jhen0409 it's working now as follows (RN v.0.61.2 and debugger v0.10.5):
After I select "Enable Network Inspect" from RN Debugger I need to reload the bundle by selecting "Reload" from the app RN developer menu. If I don't reload then I will get the error.

[MrLoh]

This is still not working for me on 0.10.5. When I add global.Blob = null I get an error Cannot read property 'prototype' of null

[kalyanijamunkar10]

add android:usesCleartextTraffic="true" in androidManifest. This worked and remove this global.Blob = null.

 <application
       android:name=".MainApplication"
       android:usesCleartextTraffic="true">

[chj-damon]

#382 (comment) seems to work for now.

Thank you so much! You saved my day

[idanlevi1]

Put this code inside index.js file in the root

global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
global.FormData = global.originalFormData || global.FormData;

if (window.FETCH_SUPPORT) {
  window.FETCH_SUPPORT.blob = false;
} else {
  global.FileReader = global.originalFileReader || global.FileReader;
  GLOBAL.Blob = null
}

[beastfromthefareast]

Put this code inside index.js file in the root

global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
global.FormData = global.originalFormData || global.FormData;

if (window.FETCH_SUPPORT) {
  window.FETCH_SUPPORT.blob = false;
} else {
  global.FileReader = global.originalFileReader || global.FileReader;
  GLOBAL.Blob = null
}

This can cause an infinite loop of requests

[gandarain]

Put this code inside index.js file in the root

global.XMLHttpRequest = global.originalXMLHttpRequest || global.XMLHttpRequest;
global.FormData = global.originalFormData || global.FormData;

if (window.FETCH_SUPPORT) {
  window.FETCH_SUPPORT.blob = false;
} else {
  global.FileReader = global.originalFileReader || global.FileReader;
  GLOBAL.Blob = null
}

In my case, this solution is work.
Thanks.

[NashidB]

Okay this is really confusing - I'm having the exact opposite of this problem, my Axios calls only work if the network inspector is enabled.

[Guiw5]

I'm having the same issue with the latest version, That fix in the index.js works well, but I still cant see the responses, is any workaround for that?

[developius]

I have a similar issue to @NashidB. I added the changes to index.js but it doesn't seem to be making any difference for me. I have to have the React Native Debugger application open (and connected) for the respones to come through correctly.
Otherwise I get weird decoding issues, which causes JSON.parse to explode. It's not for every request either, only some specific ones (but always the same ones).

Android seems fine, but iOS breaks both in a simulator and on a real device. This is also happening in Release builds, so it's not just limited to Debug.

React Native: 0.61.5
iOS: 13.3, 13.7

[jeancatarina]

any fix for ios?

[canpoyrazoglu]

Why is this issue closed? This problem still persist. I've just switched from a library that makes REST calls, which was working with network inspect, to a GraphQL-generated code, and with network inspect the GraphQL query throws errors like this:

SyntaxError: Unexpected token o in JSON at position 1
    at parse (<anonymous>)
    at tryCallOne (core.js:37)

When I don't have network inspect enabled, it works (but I can't see the request/response)

[ghost]

For me it sometimes works and sometimes not. From my observations looks like apollo-client is doing OK with network inspect, it is other network calls which are issue for us. So if I enable network inspect after my app is loaded (lets say on dashboard) then network inspect works fine... If I enable it before login, I will not get past login... So I suspect it has issue just with some specific library...
Maybe this helps a little bit to someone...

[robnewton]

For us, Apollo Client will not return a response body when the network inspect enabled in the debugger. We are running with RN v0.63.4 and RN Debugger v0.11.7. However Axios works just fine for the same GQL POST body and headers if network inspect is enabled.

[KalaiSquareark]

@robnewton have you find solution for this? any work around to this?

[LeonardoFassini]

+1