App crashes when uploading blob with fetch API #21851

adam-hari · 2018-10-18T18:27:29Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https:/facebook/react-native/issues

I found two instances where an issue was logged describing the same behaviour.
#20895
#21076

Use the latest React Native release: https:/facebook/react-native/releases

This issue is present in the latest React Native release (0.57.3)

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-4960HQ CPU @ 2.60GHz
Memory: 1.00 GB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.5.0 - /usr/local/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.1.0 - /usr/local/bin/npm
Watchman: 4.9.4 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 26.0.3, 27.0.3, 28.0.1
API Levels: 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
react-native-init: 0.6.7

Description

I am using the fetch API to upload a locally stored media file to a remote URI. With [email protected] the upload will succeed or execute the catch block on fail. With [email protected] Android will propagate the 'TypeError: Network Request Failed' to the catch block whereas iOS will intermittently not reach the catch block and will instead crash with the following exception:

ExceptionsManager.js:84 Exception '*** -[__NSPlaceholderDictionary initWithObjects:forKeys:count:]: attempt to insert nil object from objects[0]' was thrown while invoking sendRequest on target Networking with params (
        {
        data =         {
            blob =             {
                blobId = "3f45dd94-fec9-49e7-a4a9-91aa04bba12f";
                lastModified = 1539883597603;
                offset = 0;
                size = 1232959;
                type = "";
            };
            trackingName = unknown;
        };
        headers =         {
            "access-control-allow-origin" = "*";
        };
        incrementalUpdates = 0;
        method = PUT;
        responseType = text;
        timeout = 0;
        url = "https://d1na8u9bbyf6pn.cloudfront.net/twt-uat1/MUS2014123113584242167/69093975526/105000000204082.jpeg?Expires=1539883894&Signature=ONFNJ1XTY3FOLUIMDnrcpR7~Awuobkwx~P5Ab~4hYx5bnVf5fSKwAzbobWZNnYrmzVXHGiyUmVEfRSvuZtseaMJfx6y1Bs9oI5ewuLRf-r0zMn25gFsN228FQ3IBaki3BsXJXQ-d~yVfhlkA6rIxQ1bHxnJ0VOgxEr6UU9g8gny2NIHwQTppJwFQYyAOtY1yBQ7KtlWp-WcasQVcCZn0H7tG59a7rpBCFUcfaFozQS0Dduizyl972vuHBY6V6o2KiCTWRrTNnXvFMLTfzVYb8UXl9USbwHP2nGvnqAfYhYIlm4KeYcJU4VZC66iWypcOPrpfJkdokHmgXltkbJJHbA__&Key-Pair-Id=APKAJER34WYXWHOJ2NZQ";
        withCredentials = 0;
    },
    7285
)
callstack: (
	0   CoreFoundation                      0x00000001a7e2ff10 <redacted> + 252
	1   libobjc.A.dylib                     0x00000001a6ffda40 objc_exception_throw + 56
	2   CoreFoundation                      0x00000001a7da585c _CFArgv + 0
	3   CoreFoundation                      0x00000001a7d2beb0 <redacted> + 352
	4   CoreFoundation                      0x00000001a7d1c9f4 <redacted> + 64
	5   uploadErrorTest                     0x000000010255f838 -[RCTBlobManager handleNetworkingRequest:] + 664
	6   uploadErrorTest                     0x00000001027c041c -[RCTNetworking processDataForHTTPQuery:callback:] + 1436
	7   uploadErrorTest                     0x00000001027bf1c8 -[RCTNetworking buildRequest:completionBlock:] + 3108
	8   uploadErrorTest                     0x00000001027c57f8 -[RCTNetworking sendRequest:responseSender:] + 232
	9   CoreFoundation                      0x00000001a7e37660 <redacted> + 144
	10  CoreFoundation                      0x00000001a7d13980 <redacted> + 292
	11  CoreFoundation                      0x00000001a7d14564 <redacted> + 60
	12  uploadErrorTest                     0x00000001025f8ff4 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 2064
	13  uploadErrorTest                     0x00000001026a828c _ZN8facebook5reactL11invokeInnerEP9RCTBridgeP13RCTModuleDatajRKN5folly7dynamicE + 664
	14  uploadErrorTest                     0x00000001026a7e1c _ZZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEiENK3$_0clEv + 132
	15  uploadErrorTest                     0x00000001026a7d8c ___ZN8facebook5react15RCTNativeModule6invokeEjON5folly7dynamicEi_block_invoke + 28
	16  libdispatch.dylib                   0x00000001a78676c8 <redacted> + 24
	17  libdispatch.dylib                   0x00000001a7868484 <redacted> + 16
	18  libdispatch.dylib                   0x00000001a780fc18 <redacted> + 592
	19  libdispatch.dylib                   0x00000001a7810760 <redacted> + 432
	20  libdispatch.dylib                   0x00000001a7818f00 <redacted> + 600
	21  libsystem_pthread.dylib             0x00000001a7a4a0f0 _pthread_wqthread + 312
	22  libsystem_pthread.dylib             0x00000001a7a4cd00 start_wqthread + 4
)

Reproducible Demo

import * as React from 'react';
import { Image, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';

export default class App extends React.Component {
	constructor(props) {
		super(props);

		this.state = {
			text: 'Press me',
			base64Image:
				'data:image/gif;base64,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',
			url: "https://d1na8u9bbyf6pn.cloudfront.net/twt-uat1/MUS2014123113584242167/69093975526/105000000204082.jpeg?Expires=1539883894&Signature=ONFNJ1XTY3FOLUIMDnrcpR7~Awuobkwx~P5Ab~4hYx5bnVf5fSKwAzbobWZNnYrmzVXHGiyUmVEfRSvuZtseaMJfx6y1Bs9oI5ewuLRf-r0zMn25gFsN228FQ3IBaki3BsXJXQ-d~yVfhlkA6rIxQ1bHxnJ0VOgxEr6UU9g8gny2NIHwQTppJwFQYyAOtY1yBQ7KtlWp-WcasQVcCZn0H7tG59a7rpBCFUcfaFozQS0Dduizyl972vuHBY6V6o2KiCTWRrTNnXvFMLTfzVYb8UXl9USbwHP2nGvnqAfYhYIlm4KeYcJU4VZC66iWypcOPrpfJkdokHmgXltkbJJHbA__&Key-Pair-Id=APKAJER34WYXWHOJ2NZQ"
		};
	}

	onPress = () => {
		this.setState({ text: 'Uploading' });

		this.uploadMedia()
			.then((text) => this.setState({text}))
			.catch((text) => this.setState({text}))
	};

	uploadMedia = async () => {
		return new Promise((resolve, reject) => {
			fetch(this.state.base64Image)
				.then((media) => media.blob())
				.then((mediaBlob) => {
					fetch(this.state.url, {
						method: 'PUT',
						headers: {
							'Access-Control-Allow-Origin': '*'
						},
						body: mediaBlob
					})
						.then(res => resolve(JSON.stringify(res)))
						.catch(err => reject(JSON.stringify(err)))
				})
				.catch(err => reject(JSON.stringify(err)))
		})
	};

	render() {
		return (
			<ScrollView contentContainerStyle={styles.container}>
				<TouchableOpacity onPress={this.onPress}>
					<Text style={styles.paragraph}>{this.state.text}</Text>
					<Image
						source={{ uri: this.state.base64Image }}
						style={{
							width: 100,
							height: 100,
						}}
					/>
				</TouchableOpacity>
			</ScrollView>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		alignItems:'center',
		justifyContent:'center',
	},
	paragraph: {
	},
});

The text was updated successfully, but these errors were encountered:

reime005 · 2018-11-01T10:41:02Z

This issue is still present in the latest React Native release (0.57.4)

farzd · 2018-11-07T17:15:46Z

Yup this is still present in 0.57

oskfelin · 2018-11-09T12:08:52Z

I think, I've almost similar problem:
https://stackoverflow.com/questions/53222868/expo-react-native-fetch-local-file-not-working-after-update

matthargett · 2018-12-10T23:36:45Z

was it also present in 0.57.0 and 0.57.1? if it wasn't, that would help narrow down what to look at. Also, if you can create a snack example that replicates the issue, that would help a lot.

Thanks for reporting the issue and providing detail!

adam-hari · 2018-12-10T23:41:20Z

@matthargett I cannot set the RN version in Snack so I am unable to reproduce the issue with it. I believe @reime005 has resolved the issue in his PR

…22063) Summary: This is a problem that is discussed in issue #21092 Related issues: #21851 #19717 Found the code to eventually fix this issue [here](https:/github/fetch/blob/899b155746630c32d83ee29a38642da16b314ecb/fetch.js#L486) - [x] Fetching an image locally and check if the blob is there, as well as its size > 0. ___ Help reviewers and the release process by writing your own release notes. See below for an example. [GENERAL] [ENHANCEMENT] [whatwg-fetch] - set blob as default XMLHttpRequest header response type if supported Pull Request resolved: #22063 Differential Revision: D13408797 Pulled By: cpojer fbshipit-source-id: 9822d5a7e24bacd72838f3fc9a61b1a97b44484b

…acebook#22063) Summary: This is a problem that is discussed in issue facebook#21092 Related issues: facebook#21851 facebook#19717 Found the code to eventually fix this issue [here](https:/github/fetch/blob/899b155746630c32d83ee29a38642da16b314ecb/fetch.js#L486) - [x] Fetching an image locally and check if the blob is there, as well as its size > 0. ___ Help reviewers and the release process by writing your own release notes. See below for an example. [GENERAL] [ENHANCEMENT] [whatwg-fetch] - set blob as default XMLHttpRequest header response type if supported Pull Request resolved: facebook#22063 Differential Revision: D13408797 Pulled By: cpojer fbshipit-source-id: 9822d5a7e24bacd72838f3fc9a61b1a97b44484b

berkaytheunicorn · 2019-03-29T13:30:44Z

is this released? v0.58.6

Titozzz · 2019-04-04T13:01:37Z

It is released in 0.59.x

react-native-bot added the 🌐Networking Related to a networking API. label Oct 18, 2018

reime005 mentioned this issue Nov 1, 2018

set blob as default XMLHttpRequest header response type if supported #22063

Closed

1 task

react-native-bot added the Bug Report label Jan 26, 2019

hramos removed the Bug Report label Feb 6, 2019

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 1 #24028

Closed

Titozzz closed this as completed Apr 4, 2019

This was referenced Apr 15, 2019

Is that possible to add an example of direct upload to S3 expo/image-upload-example#3

Closed

Image fetch fails, response.blob hangs expo/firebase-storage-upload-example#14

Open

react-native-bot added the Bug label May 4, 2019

facebook locked as resolved and limited conversation to collaborators Apr 4, 2020

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Apr 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

App crashes when uploading blob with fetch API #21851

App crashes when uploading blob with fetch API #21851

adam-hari commented Oct 18, 2018 •

edited

Loading

reime005 commented Nov 1, 2018

farzd commented Nov 7, 2018

oskfelin commented Nov 9, 2018 •

edited

Loading

matthargett commented Dec 10, 2018

adam-hari commented Dec 10, 2018 •

edited

Loading

berkaytheunicorn commented Mar 29, 2019

Titozzz commented Apr 4, 2019 •

edited

Loading

App crashes when uploading blob with fetch API #21851

App crashes when uploading blob with fetch API #21851

Comments

adam-hari commented Oct 18, 2018 • edited Loading

Environment

Description

Reproducible Demo

reime005 commented Nov 1, 2018

farzd commented Nov 7, 2018

oskfelin commented Nov 9, 2018 • edited Loading

matthargett commented Dec 10, 2018

adam-hari commented Dec 10, 2018 • edited Loading

berkaytheunicorn commented Mar 29, 2019

Titozzz commented Apr 4, 2019 • edited Loading

adam-hari commented Oct 18, 2018 •

edited

Loading

oskfelin commented Nov 9, 2018 •

edited

Loading

adam-hari commented Dec 10, 2018 •

edited

Loading

Titozzz commented Apr 4, 2019 •

edited

Loading