Property storage exceeds 196607 properties when sending a file via fetch()

[CommanderRedYT]

Bug Description

In my app I am using fetch to upload a file to a server. The server accepts the data in the same format as a HTML form would send it. I am using FormData to prepare the data. The error occurs when sending the data. This happens with axios, fetch and XMLHttpRequest. (probably because it's all the same)

Using XMLHttpRequest

Using axios

• [x] I have run gradle clean and confirmed this bug does not occur with JSC
• [x] The issue is reproducible with the latest version of React Native.

Hermes git revision (if applicable): - React Native version: 0.74.1 OS: Host: Linux, Phone: Android 12 Platform (most likely one of arm64-v8a, armeabi-v7a, x86, x86_64): x86_64 (emulator)

Steps To Reproduce

1. Create a ~2MB Uint8Array (for example a binary for OTA updating a MCU)
2. Add it to a FormData instance
3. Make a request

code example:

axios

const uploadOTA = async (data: Uint8Array) => {
  const formData = new FormData();
  formData.append('firmware', data);

  const axiosOptions = {
    url: 'http://localhost:3000/', // test server
    method: 'POST',
    data: formData,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  };

  const res = await axios(axiosOptions);

  return res.status === 200;
};

uploadOTA(data); // In my code, this data is the result of a fetch request that is downloading a binary from github releases

fetch

const uploadOTA = async (data: Uint8Array) => {
  const formData = new FormData();
  formData.append('firmware', data);

  const fetchOptions: RequestInit = {
    method: 'POST',
    body: formData,
    headers: new Headers({
      'Content-Type': 'multipart/form-data',
    }),
  };

  const res = await fetch('http://localhost:3000/', fetchOptions);

  return res.status === 200;
};

uploadOTA(data); // In my code, this data is the result of a fetch request that is downloading a binary from github releases

The Expected Behavior

No crash, file uploading.

[tmikov]

Hi, unfortunately we can't debug 3rd party libraries, we need a minimal reproduction that clearly indicates what the problem in Hermes is.

In this case my recommendation is to try to understand why more than 195,000 properties are being added to a JS object. What are the names of these properties? Are they numeric?

[RemiHin]

Running in to the same issue. Any tips on how to get the names of these properties to be able to debug?

[angelopedroso]

Did you fixed it?

[CommanderRedYT]

For me the solution was a workaround, but it's use-case specific.

Because my goal was to upload a file to a server, I just used the file upload functionality from the react-native-fs module.