React-native-debugger: No longer able to preview network response bodies after update to 0.6.0

[fossage]

After the recent update to v0.6.0 I can no longer see the preview or raw response body for network responses in the network tab. I can still see all of the request and response headers being logged, but as far as response bodies go, I just see the message, 'This request has no preview available.' in both the 'Preview' and 'Response' tabs.

I have confirmed that, by re-installing v0.5.6, I can once again see the response bodies. If it is of any help, I am using the snippet from the documentation to enable network logging, namely:

global.XMLHttpRequest = global.originalXMLHttpRequest ? global.originalXMLHttpRequest : global.XMLHttpRequest; global.FormData = global.originalFormData ? global.originalFormData : global.FormData;

That aside, this tool is great. Thanks for making it 👍

React Native version: 0.41.2
Platform: iOS
Is real device of platform: No
Operating System: macOSX

[jhen0409]

I can reproduce it with fetch, I think it's related to fetch polyfill (whatwg-fetch), as I confirmed the following solutions works fine:

• Use XMLHttpRequest directly
• axios

I'll investigate it, thanks!

[jhen0409]

It seems like related to Blob, the network inspect works fine when I remove blob response type, this problem seems to start with some Chrome version (v0.6.0 have updated Chrome version).

I think we can just delete window.Blob in debugger worker because currently react-native is not supported it, I'll do this.

[jhen0409]

It should fixed by https://github.com/jhen0409/react-native-debugger/commit/c1bcb6ffeb5bba7174a7a4c7a2c1bc1b3d27141b and published as v0.6.1.

[chj-damon]

it happened again.
react-native-debugger version: 0.9.9
react-native version: 0.61.5

[chj-damon]

I've already add this code in app.js

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

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

I can see the request in network, but I cannot see the response.

[nenjamin2405]

I'm having the same problem, cannot open the Apollo Tab either, the Apollo Dev Tool appears and disappears immediately

[darkbasic]

Same here, I confirm the issue with react-native-debugger 0.10.6 and react-native 0.61.5

[darkbasic]

I forgot to specify that it breaks network requests alltogether, with the following error:

{
  "graphQLErrors": [],
  "networkError": {
    "name": "ServerParseError",
    "response": {
      "type": "default",
      "status": 200,
      "ok": true,
      "statusText": "OK",
      "headers": {
        "map": {
          "access-control-allow-origin": "*",
          "connection": "keep-alive",
          "content-length": "130",
          "content-type": "application/json; charset=utf-8",
          "date": "Thu, 05 Mar 2020 08:10:37 GMT",
          "etag": "W/\"82-Ur9iysCnuu8dKhUI0luIROzWyMg\"",
          "x-powered-by": "Express"
        }
      },
      "url": "http://192.168.1.49:4000/graphql",
      "_bodyInit": {},
      "_bodyText": "[object Blob]",
      "bodyUsed": true
    },
    "statusCode": 200,
    "bodyText": "[object Blob]"
  },
  "message": "Network error: Unexpected token o in JSON at position 1"
}

[bclynch]

Noticing same issue myself outlined by darkbasic. Turning off network debugging allows the apollo tab to work.

After a bit more tinkering, looks like toggling on Disable cache in the network tab fixes it

[darkbasic]

@bclynch unfortunately I still get the very same error with react-native-debugger 0.11.1 and disable cache (which is by default in latest version).

[darkbasic]

This workaround seems to help: https://github.com/jhen0409/react-native-debugger/issues/432#issuecomment-569184047