OutOfMemoryError in BlobModule when using fetch + large file [Android] #48657
Open
Description
Description
create a blob from a file url. (A ~400 MB UHD video).
const response = await fetch(uri);
const blob = await response.blob();
It fails on Android with an underlying OutOfMemory error. Works on iOS.
The underlying ReactAndroid code is inefficient in its buffer management. It should determine the file size and allocate a fixed size buffer rather than using the buffer resize logic in java.io.ByteArrayOutputStream.ensureCapacity. It should also close the InputStream after reading it into the buffer.
Steps to reproduce
- Install the application with yarn android
- Attach android logcat to capture the underlying error
- You need a large video file to reproduce the error. (I used a 440 MB .mp4 file. The reproducer uses a large heap , without large heap the error happens for even smaller files . )
- Click the 'Choose a large file' button and select a large video file.
React Native Version
0.76.6
Affected Platforms
Runtime - Android
Output of npx react-native info
System:
OS: macOS 14.4
CPU: (16) arm64 Apple M3 Max
Memory: 231.39 MB / 48.00 GB
Shell:
version: 3.2.57
path: /bin/bash
Binaries:
Node:
version: 20.17.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 10.8.3
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.5
- iOS 17.5
- macOS 14.5
- tvOS 17.5
- visionOS 1.2
- watchOS 10.5
Android SDK:
API Levels:
- "23"
- "27"
- "28"
- "29"
- "30"
- "31"
- "32"
- "33"
- "33"
- "33"
- "34"
- "35"
Build Tools:
- 19.1.0
- 20.0.0
- 21.1.2
- 22.0.1
- 23.0.1
- 23.0.2
- 23.0.3
- 24.0.0
- 24.0.1
- 24.0.2
- 24.0.3
- 25.0.0
- 25.0.1
- 25.0.2
- 25.0.3
- 26.0.0
- 26.0.1
- 26.0.2
- 26.0.3
- 27.0.0
- 27.0.1
- 27.0.2
- 27.0.3
- 28.0.0
- 28.0.1
- 28.0.2
- 28.0.3
- 29.0.0
- 29.0.1
- 29.0.2
- 29.0.3
- 30.0.0
- 30.0.1
- 30.0.2
- 30.0.3
- 31.0.0
- 32.0.0
- 32.1.0
- 33.0.0
- 33.0.1
- 33.0.2
- 34.0.0
- 34.0.0
- 34.0.0
- 34.0.0
- 35.0.0
System Images:
- android-30 | Google Play ARM 64 v8a
- android-32 | Google Play ARM 64 v8a
- android-33 | Google Play ARM 64 v8a
Android NDK: Not Found
IDEs:
Android Studio: 2022.3 AI-223.8836.35.2231.10811636
Xcode:
version: 15.4/15F31d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.8.1
path: /usr/bin/javac
Ruby:
version: 3.3.0
path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.1
wanted: 15.0.1
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.6
wanted: 0.76.6
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: true
iOS:
hermesEnabled: true
newArchEnabled: true
Stacktrace or Logs
Failed to send url request: content://media/external/video/media/1000024367
java.lang.OutOfMemoryError: Failed to allocate a 536870928 byte allocation with 100663296 free bytes and 251MB until OOM, target footprint 374277184, growth limit 536870912
at java.util.Arrays.copyOf(Arrays.java:3585)
at java.io.ByteArrayOutputStream.grow(ByteArrayOutputStream.java:120)
at java.io.ByteArrayOutputStream.ensureCapacity(ByteArrayOutputStream.java:95)
at java.io.ByteArrayOutputStream.write(ByteArrayOutputStream.java:156)
at com.facebook.react.modules.blob.BlobModule.getBytesFromUri(BlobModule.java:239)
at com.facebook.react.modules.blob.BlobModule.-$$Nest$mgetBytesFromUri(Unknown Source:0)
at com.facebook.react.modules.blob.BlobModule$2.fetch(BlobModule.java:83)
at com.facebook.react.modules.network.NetworkingModule.sendRequestInternal(NetworkingModule.java:282)
at com.facebook.react.modules.network.NetworkingModule.sendRequest(NetworkingModule.java:243)
at com.facebook.jni.NativeRunnable.run(Native Method)
at android.os.Handler.handleCallback(Handler.java:991)
at android.os.Handler.dispatchMessage(Handler.java:102)
at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
at android.os.Looper.loopOnce(Looper.java:232)
at android.os.Looper.loop(Looper.java:317)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl.lambda$startNewBackgroundThread$2(MessageQueueThreadImpl.java:217)
at com.facebook.react.bridge.queue.MessageQueueThreadImpl$$ExternalSyntheticLambda1.run(D8$$SyntheticClass:0)
at java.lang.Thread.run(Thread.java:1012)
Reproducer
https://github.com/giantslogik/blob-large-file-fetch
Screenshots and Videos
No response