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

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)

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 54
  • Comments: 73 (22 by maintainers)

Commits related to this issue

Most upvoted comments

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

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

I’ll look at this issue today

Same issue in Android

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

@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.

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) screen shot 2018-03-28 at 12 00 25 pm

Please keep the discussion on topic and constructive

@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.

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?

@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

Thanks @animaonline for the PR, #18500

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

Same issue

Same issue

@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.

Close… i see this bugs on android

invalid response for blob xmlhttprequest.

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.

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?

@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