question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[iOS] Sending form data via fetch or axios leaks memory

See original GitHub issue

Description

Sending files via form data with fetch or axios allocates memory 2-3 times the size of the file. The memory is not freed even after getting a response.

This is how memory usage spikes and stays the same until you kill the app. Screenshot 2022-06-11 at 21 40 11

When uploading a 15.8MB file, the usage spikes by 42MB and only gets reduced by 5MB after upload finishes. When uploading a 47.9MB file, the usage spikes by 115MB and gets reduced by 15MB after upload finishes.

This leads to crashes after uploading a few decently sized files.

Version

0.68.2

Output of npx react-native info

info Fetching system and libraries information… System: OS: macOS 12.3 CPU: (8) arm64 Apple M1 Memory: 99.58 MB / 16.00 GB Shell: 5.8.1 - /opt/homebrew/bin/zsh Binaries: Node: 18.0.0 - /opt/homebrew/bin/node Yarn: 1.22.18 - ~/.nvm/versions/node/v16.14.2/bin/yarn npm: 8.6.0 - /opt/homebrew/bin/npm Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 15.4, macOS 12.3, tvOS 15.4, watchOS 8.5 Android SDK: Not Found IDEs: Android Studio: 2021.2 AI-212.5712.43.2112.8609683 Xcode: 13.3.1/13E500a - /usr/bin/xcodebuild Languages: Java: 11.0.15 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.68.2 => 0.68.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

  1. Create a form data object with a file attached to it
  2. POST it via fetch or axios
  3. Observe the app’s memory usage

Snack, code example, screenshot, or link to a repository

I have prepared a small demo project where you can upload 2 files of different sizes via fetch or axios to easily reproduce the issue. https://github.com/dklymenk/rn-formdata-memory-leaks

Simulator Screen Shot - iPhone 13 - 2022-06-11 at 21 55 33

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:9

github_iconTop GitHub Comments

1reaction
MichaelBordecommented, Jun 14, 2022

I have run your rn-formdata-memory-leaks project.

I have used a standalone debug apk with hermes enabled to get a very stable memory usage.

I do notice some memory increase corresponding to file size (15 MB or 50 MB) during total upload process. I suspect this is due to the download of the file because you are creating a form data based on url. Using my application, I upload a local file and I don’t notice such memory increase.

Besides, after something like 20 attempts, I can see something like 30 MB of memory increase. PSS usage was 91 MB at start then after my tests, usage was 122 MB. I don’t know if such memory will be released later (30 MB is not much).

0reactions
github-actions[bot]commented, Dec 24, 2022

This issue was closed because it has been stalled for 7 days with no activity.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to download files using axios - Stack Overflow
It's critical to release the object with URL.revokeObjectURL to prevent a memory leak. In the function above, since we've already downloaded the file, ......
Read more >
4 Types of Memory Leaks in JavaScript and How to Get Rid Of ...
In essence, memory leaks can be defined as memory that is not required by an application anymore that for some reason is not...
Read more >
Difference between Fetch and Axios.js for making http requests
Fetch is a two-step process when handling JSON data- first, to make the actual request; second, to call the .json() method on the...
Read more >
Referrer-Policy - HTTP - MDN Web Docs
The Referrer-Policy HTTP header controls how much referrer information (sent with the Referer header) should be included with requests.
Read more >
axios get filename from content-disposition - You.com - You.com
... the object with URL.revokeObjectURL to prevent a memory leak. ... Stop sending Content-Disposition with file via REST, form-data, JavaScript and Axios.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found