Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

"Property storage exceeds 196607 properties" error when using fetch more than a certain number of times in React Native #39441

Closed
ishikawa opened this issue Sep 14, 2023 · 50 comments
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Triage 🔍 🌐Networking Related to a networking API.

Comments

@ishikawa
Copy link
Contributor

Description

We are developing an application using React Native and Expo. This application needs to run 24/7 and performs network requests using fetch() regularly for monitoring purposes.

The issue we are facing is that after running the application for a while, from some point, network requests starting to fail. Through investigation using logs from Sentry, we have identified the following problem:

  • We are using fetch() for network requests.
  • At the completion of a fetch() request, an error occurs: Property storage exceeds 196607 properties.

The stack trace when this error occurs is as follows:

message: Property storage exceeds 196607 properties,
name: RangeError,
stack:
RangeError: Property storage exceeds 196607 properties
    at register (/Users/expo/Library/Developer/Xcode/DerivedData/xxx/main.jsbundle:13781:20)
    at createFromOptions (/Users/expo/Library/Developer/Xcode/DerivedData/xxx/main.jsbundle:13614:30)
    at get (/Users/expo/Library/Developer/Xcode/DerivedData/xxx/main.jsbundle:13182:67)
    at anonymous (/Users/expo/Library/Developer/Xcode/DerivedData/xxx/main.jsbundle:15155:45)
    at call (native)
    at dispatchEvent (/Users/expo/Library/Developer/Xcode/DerivedData/xxx/main.jsbundle:14686:31)
    at setReadyState (/Users/expo/Library/Developer/Xcode/DerivedData/xxx/main.jsbundle:13481:31)
    at __didCompleteResponse (/Users/expo/Library/Developer/Xcode/DerivedData/xxx/main.jsbundle:13289:29)
    at apply (native)
    at anonymous

Through further investigation, the following findings have been uncovered:

Our solution

To address this issue and prevent the error, we have modified the implementation of BlobRegistry to use a Map instead of an object. By using a Map, there is no limit to the number of entries.

const registry: Map<String, number> = new Map();

const register = (id: string) => {
  const used = registry.get(id);

  if (used != null) {
    registry.set(id, used + 1);
  } else {
    registry.set(id, 1);
  }
};

const unregister = (id: string) => {
  const used = registry.get(id);

  if (used != null) {
    if (used <= 1) {
      registry.delete(id);
    } else {
      registry.set(id, used - 1);
    }
  }
};

const has = (id: string): number | boolean => {
  return registry.get(id) || false;
};

module.exports = {
  register,
  unregister,
  has,
};

React Native Version

0.72.4

Output of npx react-native info

System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M2
Memory: 92.86 MB / 16.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 18.17.0
path: /usr/local/bin/node
Yarn:
version: 1.22.19
path: /usr/local/bin/yarn
npm:
version: 9.6.7
path: /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8815526
Xcode:
version: 14.3/14E222b
path: /usr/bin/xcodebuild
Languages:
Java: Not Found
Ruby:
version: 3.2.2
path: /Users/takanori.ishikawa/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react:
installed: 18.2.0
wanted: 18.2.0
react-native:
installed: 0.72.4
wanted: 0.72.4
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: Not found
newArchEnabled: Not found
iOS:
hermesEnabled: Not found
newArchEnabled: Not found

Steps to reproduce

Invoke fetch() more than 196,607 times 😄

Snack, screenshot, or link to a repository

To demonstrate this issue, I created a simple Expo application.
https://github.com/ishikawa/react-native-fetch-property-storage-exceeds-error

You can run it with expo:

$ npm i
$ npm run ios

20230914173506(中)
20230914173531(中)

@github-actions github-actions bot added the 🌐Networking Related to a networking API. label Sep 14, 2023
@cortinico cortinico added the Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. label Sep 14, 2023
@ishikawa
Copy link
Contributor Author

I also added PR #39528

facebook-github-bot pushed a commit that referenced this issue Sep 20, 2023
Summary:
issue: #39441

For the following reasons, I have replaced an object used for id management inside BlobRegistry with `Map`.

- The polyfill used for `fetch`, [whatwg-fetch](https://github.com/JakeChampion/fetch), returns responses as `Blob` objects.
- When a `Blob` is created, it is registered with blobID in the [BlobRegistry](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Blob/BlobRegistry.js), which is not automatically released.
- This issue was previously reported in #19248 and was fixed by modifying whatwg-fetch. However, with the implementation of automatic garbage collection in #24405, the implementation was reverted in commit bccc92d, returning to the original behavior.
- Although #24405 enables `Blob` objects to be garbage collected, the Blob IDs registered in the BlobRegistry remain, causing the count to increase each time `fetch` is called.
- As a result, the `Property storage exceeds 196607 properties` error occurs

To address this issue, I have modified the implementation of `BlobRegistry` to use a `Map` instead of an object. By using a `Map`, there is no limit to the number of entries.

## Changelog:

[Internal] - [Fixed] - Fixed a bug that caused a "Property storage exceeds 196607 properties" error when sending a certain number of `fetch` requests.

Pull Request resolved: #39528

Test Plan:
I've added a new tests in `packages/react-native/Libraries/Blob/__tests__/BlobRegistry-test.js` and confirmed the test pass before and after changes.

```
$ yarn run test
...
Test Suites: 1 skipped, 219 passed, 219 of 220 total
Tests:       2 skipped, 4017 passed, 4019 total
Snapshots:   1154 passed, 1154 total
Time:        10.525 s
Ran all test suites.
✨  Done in 12.52s.
```

Reviewed By: javache

Differential Revision: D49423213

Pulled By: NickGerleman

fbshipit-source-id: d5f73d7f5e34d1d2c3969b7dfbc45d3e6196aa30
@ishikawa
Copy link
Contributor Author

The fix is merged #39528 in deca8c5. Thanks!

ShevO27 pushed a commit to ShevO27/react-native that referenced this issue Sep 26, 2023
Summary:
issue: facebook#39441

For the following reasons, I have replaced an object used for id management inside BlobRegistry with `Map`.

- The polyfill used for `fetch`, [whatwg-fetch](https://github.com/JakeChampion/fetch), returns responses as `Blob` objects.
- When a `Blob` is created, it is registered with blobID in the [BlobRegistry](https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Blob/BlobRegistry.js), which is not automatically released.
- This issue was previously reported in facebook#19248 and was fixed by modifying whatwg-fetch. However, with the implementation of automatic garbage collection in facebook#24405, the implementation was reverted in commit bccc92d, returning to the original behavior.
- Although facebook#24405 enables `Blob` objects to be garbage collected, the Blob IDs registered in the BlobRegistry remain, causing the count to increase each time `fetch` is called.
- As a result, the `Property storage exceeds 196607 properties` error occurs

To address this issue, I have modified the implementation of `BlobRegistry` to use a `Map` instead of an object. By using a `Map`, there is no limit to the number of entries.

## Changelog:

[Internal] - [Fixed] - Fixed a bug that caused a "Property storage exceeds 196607 properties" error when sending a certain number of `fetch` requests.

Pull Request resolved: facebook#39528

Test Plan:
I've added a new tests in `packages/react-native/Libraries/Blob/__tests__/BlobRegistry-test.js` and confirmed the test pass before and after changes.

```
$ yarn run test
...
Test Suites: 1 skipped, 219 passed, 219 of 220 total
Tests:       2 skipped, 4017 passed, 4019 total
Snapshots:   1154 passed, 1154 total
Time:        10.525 s
Ran all test suites.
✨  Done in 12.52s.
```

Reviewed By: javache

Differential Revision: D49423213

Pulled By: NickGerleman

fbshipit-source-id: d5f73d7f5e34d1d2c3969b7dfbc45d3e6196aa30
@robsadams
Copy link

robsadams commented Sep 29, 2023

Will this be in release 0.72.4 and beyond? ... I have the same issue.

@Ladvace
Copy link

Ladvace commented Dec 24, 2023

getting same issue too

@robsadams
Copy link

Is this rolled back to react-native .71.2? If so, does anybody know how to pick it up on vscode? I am already using react-native tools which seems to be using react-native .71.2.... I can't find instructions to pick up patches or upgrade react native within vscode.

@brunomartins-com
Copy link

Do you guys know which version it is fixed? I am using 0.72.6 and getting this error.

@robsadams
Copy link

Above they gave a thumbs up to .72.4 so I assume from that point on... I upgraded to .73 and have not seen it.... although I have not tried to recreate it.

@softmarshmallow
Copy link

Can anyone tell what this is regards to? which module is throwing this error? no clue, can't debug.

@Nantris
Copy link

Nantris commented Feb 23, 2024

Can anyone confirm what version this is fixed on? Or even that it really is fixed?

@robertdue
Copy link

robertdue commented Feb 26, 2024

Can anyone confirm what version this is fixed on? Or even that it really is fixed?

I have the same problem with 0.72.10

@faisal-rehman19
Copy link

faisal-rehman19 commented Mar 5, 2024

Facing the same issue with 0.73.1. Data from the server contains buffer data which might be the reason for this error.

@gabriel-messas
Copy link

0.73.4 still with error here

@Nantris
Copy link

Nantris commented Mar 5, 2024

@ishikawa are you sure this is fixed and should be closed?

@DrRefactor
Copy link

Observing the same issue on long running app in 0.72.6.

@jack2684
Copy link

jack2684 commented Mar 12, 2024

Same issue with 0.73.2
image

@Nantris
Copy link

Nantris commented Mar 12, 2024

@ishikawa would you please re-open this issue?

@simon-accesso
Copy link

@ishikawa would you please re-open this issue?

This! Observed with 72.6 and higher.

@tribou
Copy link

tribou commented Mar 17, 2024

facebook/hermes#851 may be related

@Nantris
Copy link

Nantris commented Mar 18, 2024

@tribou yes I think so. Good find.

@therbta
Copy link

therbta commented Mar 28, 2024

I'm facing the same issue on Android.

@Vilandry
Copy link

I'm facing this as well, could anyone find a solution?

@zameschua
Copy link

Facing this on ios 0.73.6

@untilhamza
Copy link

Facing this with react native 0.73.6 as well

@dhaval97shah
Copy link

I am also facing the same issue

@damdafayton
Copy link

same problem here

@domenicoprestia
Copy link

same problem here, when trying to interact (edit or delete) images on bucket

@RemiHin
Copy link

RemiHin commented May 1, 2024

same issue

@calipsow
Copy link

calipsow commented May 4, 2024

also same here

@gikami
Copy link

gikami commented May 4, 2024

У меня такая же ошибка RangeError: An error was thrown when attempting to render log messages via LogBox.

Property storage exceeds 196607 properties

This error is located at:
in Unknown (at LogBoxInspectorSourceMapStatus.js:97)

Отключил logbox пока все норм.

@CommanderRedYT
Copy link

I also have this issue with 0.72.6

@landabaso
Copy link

Still an issue in 0.74.1 using Hermes engine.

@robsadams
Copy link

How do we get this reopened? It is likely not being looked at because it is closed.

@daveyd80
Copy link

Same Issue here 0.73.1 in a long running app. Issue needs re-opening please!

RangeError: Property storage exceeds 196607 properties

This error is located at:
    in Unknown (created by LogBoxInspectorSourceMapStatus)
    in RCTView (created by View)
    in View (created by LogBoxButton)
    in TouchableWithoutFeedback (created by LogBoxButton)
    in LogBoxButton (created by LogBoxInspectorSourceMapStatus)
    in LogBoxInspectorSourceMapStatus (created by LogBoxInspectorStackFrames)
    ...

@arun057
Copy link

arun057 commented Jun 1, 2024

Facing the same issue on 0.74.1 with Hermes.

@Med5KDB
Copy link

Med5KDB commented Jun 6, 2024

Facing the same issue when trying to upload file to aws s3 (even if I think it's not related to file-upload action, seems to be related to the fetch

@Mikail-1022063
Copy link

Facing the same issue, any updates on this? I also have a image upload, and somethimes after being a couple of minutes afk in the app i get this error Property storage exceeds 196607 properties

@inkCrazy
Copy link

Has the problem been solved?

@iamsreeragkp
Copy link

Still facing this problem in 0.73.0

@danyalutsevich
Copy link

What can be the cause of this error?
Im having this error in react-native 0.74.2
Im using expo 51.0.14

@Nantris
Copy link

Nantris commented Jun 24, 2024

What can be the cause of this error?

I believe the cause is that objects can only support a maximum of 196607 properties in the Hermes engine

@NewvilleMedia
Copy link

I get this error when the simulator is open and I let it sit idle for a bit.

@Dat-Mobile
Copy link

For me I console.log the Buffer variable, removed it and now working fine

@AlastairTaft
Copy link

For me I console.log the Buffer variable, removed it and now working fine

Thank you, you've saved me a headache

@f1shy-dev
Copy link

For me I console.log the Buffer variable, removed it and now working fine

Can you show details of this implementation/fix? What do you mean?

@AlastairTaft
Copy link

For me I console.log the Buffer variable, removed it and now working fine

Can you show details of this implementation/fix? What do you mean?

Console logging on an extremely large array causes the error / crash. Which makes sense.

@jeafgilbert
Copy link

jeafgilbert commented Jul 26, 2024

I used clone function from 'lodash', got the same error. Now working fine after switch to ramda.

@ywisax
Copy link

ywisax commented Aug 11, 2024

Same problem in react-native 0.74.5

@stdiodavid
Copy link

Same problem in React Native v0.75.2

@landabaso
Copy link

Hi @ishikawa,

I see that several users, including myself, are still facing this issue in the latest versions. Would you consider reopening this issue to raise awareness and revisit the problem?

Thank you!

@Whitelistedd
Copy link

also experiencing the same thing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Issue: Author Provided Repro This issue can be reproduced in Snack or an attached project. Needs: Triage 🔍 🌐Networking Related to a networking API.
Projects
None yet
Development

No branches or pull requests