React-native: [0.54 - iOS] fetch HEAD requests fail with `Invalid response for blob`

[awinograd]

Performing a HEAD request with fetch causes an Invalid response for blob error on iOS

Environment

Environment:
OS: macOS Sierra 10.12.6
Node: 8.6.0
Yarn: Not Found
npm: 5.3.0
Watchman: 4.9.0
Xcode: Xcode 9.1 Build version 9B55
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.3.0-alpha.1 => 16.3.0-alpha.1
react-native: 0.54.0 => 0.54.0

Expected Behavior

The request should complete without error.

Actual Behavior

The RCTNetworking native module in iOS does not construct an empty blob for HEAD responses like Android does. Instead it returns an empty string as the response. However, whatwg-fetch always sets the responseType to blob for the XMLHttpRequest so the empty string is invalid.

Relevant lines of code:
https://github.com/github/fetch/blob/fcc4e1b48cfb5a2b1625fcd6eac06d954b00ccb6/fetch.js#L454
https://github.com/facebook/react-native/blob/6eef7de46ee5c5004854c1cdd5cd83f2a608f622/Libraries/Network/XMLHttpRequest.js#L253-L258

Invalid response for blob: 
handleException @ index.bundle?platform=ios&dev=true&minify=false:13132
handleError @ index.bundle?platform=ios&dev=true&minify=false:12174
reportFatalError @ index.bundle?platform=ios&dev=true&minify=false:783
__guardSafe @ index.bundle?platform=ios&dev=true&minify=false:2360
callFunctionReturnFlushedQueue @ index.bundle?platform=ios&dev=true&minify=false:2165
t @ RNDebuggerWorker.js:1

Steps to Reproduce

1 Clone and run https://github.com/lingokids/FetchError

(I tested on an iPhone 7)

[Lxxyx]

Same issue

[lukewis]

Seeing this error also with an HTTP GET that returns a 204 - NoContent. Works ok in 0.53 though.

[chienduc91]

Same issue

[regulus33]

Same Issue

[filipef101]

there is a fix

[filipef101]

https://github.com/reyalpsirc/react-native/commit/6b1831e6cd5b6a98c56a12e8566cb5c2a9b90df2

[filipef101]

It shouldn't be the best solution, but we really need our app to work offline

[zen0wu]

+1. It seems to fail some GET requests as well.

[genglei01]

Same Issue

[cuiyueshuai]

Same Issue，how to resolve the solution,
if the request's response is NoContent or void, app will report this error

[qasimalbaqali]

Hope this is going to be fixed soon, getting same error. Anyone has a workaround for this?

[satya164]

Does it happen on both Android and iOS or only iOS?

[filipef101]

@qasimalbaqali apply this patch to your fork
reyalpsirc/react-native@6b1831e

[animaonline]

@satya164 iOS only

[filipef101]

@qasimalbaqali should be only ios

[animaonline]

@filipef101 how does one apply a patch? :)

[satya164]

cc @janicduplessis

[qasimalbaqali]

@filipef101 I'm developing an App that will be released publicly, It's not a good solution for me right now to fork a repo, better to wait on an official update. But thank you for your help!

[filipef101]

@qasimalbaqali You SHOULD fork it...
@animaonline Well, google, but either way is a one line change that you can do yourself
Also I think it doesn't happen in release 0.53

[scottyantipa]

I'm using the XMLHttpRequest primitive now as a work around. I was seeing a similar issue for all PATCH requests.

[filipef101]

@scottdixon I faced this issue only when trying to run the app offline, so do test if it doesnt happen without connectivity, because I was, and, am not using XMLHttpRequest

[dbarros]

I'm also seeing the same error on 0.54. Works fine in 0.53.3.

[olivierlesnicki]

+1

[xiamx]

@filipef101 I was using reyalpsirc's patch but it has issue when response is empty, this creates an invalid blob.

I'm currently applying this fix instead https://github.com/xiamx/react-native/commit/b35071b5daabf370e7789e00e1593788fcf5aecf

[filipef101]

@xiamx Thanks!

[baurine]

same issue with @lukewis , GET request and return 204, App crashed by "Invalid response for blog" error.

[baurine]

hey @filipef101 , I used reyalpsirc's patch, but still get another error: "Blob has been closed and is no longer available", not sure why, so I just comment "throw error" line and until now it works fine:

      case 'blob':
        if (typeof this._response === 'object' && this._response) {
          this._cachedResponse = BlobManager.createFromOptions(this._response);
        } else {
          // throw new Error(`Invalid response for blob: ${this._response}`);
        }
        break;

[filipef101]

@baurine try to upgrade react native, maybe it was fixed already or try xiamx fix -> xiamx/react-native@b35071b

[filipef101]

Oh, I didn't read the whole comment, not sure about the consequences of doing that

[xiamx]

@baurine my patch https://github.com/xiamx/react-native/commit/b35071b should fix it. If you comment out throw new Error there, you will temporally mask the error, but other incidental errors can be triggered elsewhere

[janicduplessis]

I’ll look at this issue today

[smathson]

I think this issue might be related to fetch behavior defaulting the responseType to blob. I switched to using axios for the offending api call and the issue went away. See: https://github.com/github/fetch/issues/481

[awinograd]

Thanks @janicduplessis. Please let me know if I can provide any more information.

@smathson, yes that's correct. As mentioned in the issue description, this issue is unique to fetch.

[smathson]

Sorry, I just meant that depending on how you look at it this could be considered a bug in fetch and not here. An empty 204 response with Content-Type: json shouldn't result in a responseType blob, right?

[awinograd]

Ahh I see. That makes sense to me

[hramos]

Thanks @animaonline for the PR, #18500

[dabit1]

+1

[JanKolenko]

It happens because of a React Native 0.54 update. Blob case accepts only objects, so you need a little modification on this case.

path: node_modules/react-native/Libraries/Network/XMLHttpRequest.js
change blob case to this:

[filipef101]

@JanKolenko https://github.com/xiamx/react-native/commit/b35071b

[ovr]

@janicduplessis Cherry-pick into 0.54-stable branch and release?

[janicduplessis]

cc @grabbou f5207ba9c764f33ef83fa897f6014d67193be0e2 might be worth cherry-picking into 0.54 and 0.55

[pmtu95]

hi guys, i fixed this issue
open your project with XCode and go to Info.plist

• App Transport Security Settings => Allow Arbitrary Loads -> YES (add new value if not exist)
  

[grabbou]

I've cross-posted cherry-pick request in this repository: https://github.com/react-native-community/react-native-releases/issues/10. Please keep the further discussion in there.

[janicduplessis]

Thanks @grabbou!

[awinograd]

Thanks @janicduplessis for fixing and @grabbou for the cherrypick!

[roadev]

Same issue in Android

[peacechen]

This happens on a production build of our Android app with React Native 0.55.1. While I understand the desire to fix the "root" of the problem in iOS, it appears that Android can generate an empty body blob as well. XMLHttpRequest should guard against that instead of throwing unnecessarily.

TBH it's disappointing to have put in all the work to update to RN 0.55.1 only to be blocked by this show stopper. 0.55.2 didn't incorporate the XMLHttpRequest fix. What's the estimate for including the patch?

[grabbou]

I am really sorry that the fix for that didn't land yet in the requested releases. I track the commits to cherry-pick in a separate repository to avoid important notifications getting lost.

Please fill it in here: https://github.com/react-native-community/react-native-releases/issues/11 for the next time.

That said, it will land into 0.55.4.

[CapitanRedBeard]

@janicduplessis @grabbou It looks this work https://github.com/facebook/react-native/commit/f5207ba9c764f33ef83fa897f6014d67193be0e2 landed in 0.54.4 here: https://github.com/facebook/react-native/commit/0ba6ed897ade6f3972d5cb0d08f81dfc88b7d509, but I'm still getting the error

Invalid response for blob: 

Is it possible that we need to do more to fix this issue? or am I just misinterpreting what is actually in 0.54.4 and it should be truly resolved in 0.55.4 once the circle jobs start passing?

Regardless thanks for fixing and cherrypicking this issue.

[CapitanRedBeard]

@janicduplessis
I just pulled down 0.55.4 that @grabbou patched (which 100% has this fix in it, f5207ba), and this issue still occurs for Android

This is a high priority blocker, does anyone have a better fix other than downgrading to 0.53.0?

[dbarros]

Looking at this bug, I wonder if Facebook have a secret working copy of the React Native source code. This is a critical bug. Although, I guess it's still not at 1.0.

[janicduplessis]

Facebook probably doesn't use the blob module, if you remove it this bug doesn't happen.

[idcmsbeta]

Close.. i see this bugs on android

invalid response for blob xmlhttprequest.

[CapitanRedBeard]

@janicduplessis What do mean by remove the blob modules? I thought that was being used by react-native out of our control? Is there a easy way to remove it, what are the ramifications of that?

[filipef101]

@CapitanRedBeard this solves it : https://github.com/reyalpsirc/react-native/commit/6b1831e6cd5b6a98c56a12e8566cb5c2a9b90df2

[filipef101]

we use that fix on production with no issue

[CapitanRedBeard]

@filipef101 Yeah I know the solution, and have tested it and know it works, but I don't want to have to carry around a forked react-native. For the time being I'm having a post-yarn-install script apply the fix to that file.
But even then that's less than ideal. I'm hoping for a long term fix.

[filipef101]

that is dumb but okay. there doesnt seem to be any progress on this issue and the latest RN releases have been bringing a lot of bugs IMO I'd stick with 0.52 or something

[filipef101]

And just noticed that this is closed, see what I say? why did they close this issue I do not understand..

[filipef101]

@facebook-github-bot bad bot

[janicduplessis]

The issue was reported for iOS only initally and has been fixed. I was not aware that the problem happens on Android too. The fix needed should be similar to the iOS one. Also the fetch polyfill should not be using blobs in the first place, I’ll see if I can fix that too.

[awinograd]

The original issue I reported did not occur for me on Android (and still has not since the ios bug was fixed). Could be a similar issue, but my guess is the steps to reproduce are not the same.

[janicduplessis]

Please keep the discussion on topic and constructive

[janicduplessis]

@CapitanRedBeard On Android it is possible to use a custom version of https://github.com/facebook/react-native/blob/master/ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java that only includes the modules you want, on iOS you can remove the blob project and it won't be included anymore.

[janicduplessis]

Does anyone have a case to reproduce the issue on Android, the example in the original issue works fine on Android with the current master branch.

[janicduplessis]

I will be disabling automatic blob responses in the fetch polyfill, this is causing many issues currently (like this one) as well as some potential memory leaks. See https://github.com/facebook/react-native/pull/19333.

[CapitanRedBeard]

@janicduplessis I've been trying to reproduce this in an isolated repo for a couple days now and haven't had any success.

It happens in my production repo with CodePush.
The situation occurs when the user foregrounds the app and wifi is disabled or unreliable, CodePush will try and sync some code and return an empty string response "".

There doesn't seem to be a location in my app where I can catch the error to prevent the red screen from happening.

I'll keep trying to get an isolated repro but getting the code push set up to cause this error is proving to be difficult.

[CapitanRedBeard]

@CapitanRedBeard On Android it is possible to use a custom version of /ReactAndroid/src/main/java/com/facebook/react/shell/MainReactPackage.java@master that only includes the modules you want, on iOS you can remove the blob project and it won't be included anymore.

Isn't this out of my control though on android? In my MainApplication I import import com.facebook.react.shell.MainReactPackage; but I'm not able to pick and choose what that application is importing unless I copy that package into my own project and customize it myself right? But wouldn't that leave me vulnerable to getting left in the dust if the react-native repo makes any changes there?

[idcmsbeta]

Not sure how to reference , but i fill a report about blob issue while using reactotron
https://github.com/infinitered/reactotron/issues/654

[janicduplessis]

@CapitanRedBeard Interesting, I'll have a look at how CodePush uses fetch.

Yea there is no easy way to do this on Android, if you want to control what modules are included you have to maintain your own copy of com.facebook.react.shell.MainReactPackage.

[Luckygirlllll]

So how to fix that problem? I'm getting this error on Android

[evanyz]

I got this issue, then I found out API Server URL was wrong

[kamelj]

Same here for android
reaact-native: 54
android-sdk: 28

iOS working fine,,, is there any solution or I have to upgrade react-native ?!?!