Fetching api response too slow when debugging mode is off

[uonuon]

Description: Good evening guys, I am having an issue on my project on both android and iOS:

When i am using the app on debugging mode ON fetching data from api working pretty well, and getting the response just takes 2 seconds; When i am using the app debugging mode OFF fetching data from api takes more than 11 seconds, i wonder why, and its first time face this issue. I tried both Axios and Fetch both comes with the same results. Have anyone faces this issue before? Bonus: Postman and web-app getting response so fast like on debugging mode is ON

Code Example:

export const find = async (query: IFindQuery) => {
  const { apiServer } = getConfig();
  const queryString = stringify(query, {
    arrayFormat: 'brackets',
    encode: false,
  });
  const url = `${apiServer}/radiks/models/find?${queryString}`;
  const response = await fetch(url);
  return await response.json();
};

React Native version:

System: OS: macOS 10.15.3 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 113.79 MB / 16.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.14.1 - /usr/local/bin/node Yarn: 1.16.0 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm SDKs: iOS SDK: Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1 IDEs: Android Studio: 3.4 AI-183.6156.11.34.5522156 Xcode: 11.3/11C29 - /usr/bin/xcodebuild npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5

Steps To Reproduce

1. Using the app while debugging mode ON
2. Using the app while debugging mode OFF

Expected Results

1. Api response takes 2 seconds
2. Api response takes 11 seconds

[uonuon]

During my testing checking the server requests, i found out that app add headers that slows the network requests.

Requesting when debugging mode on:

Headers: {
  host: domainUrl,
  connection: 'keep-alive',
  accept: '*/*',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'en-GB',
  cookie: 'io=5K1j7ryxBsl9G4lqAAAA',
  'sec-fetch-mode': 'cors',
  'sec-fetch-site': 'cross-site',
  'user-agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.10.6 Chrome/78.0.3904.130 Electron/7.1.9 Safari/537.36',
  'if-none-match': 'W/"13f5-xomOLAdrnOBgz/HsCyFAQiZPvvU"'
}

Requesting when debugging mode off:

{
  host: domainUrl,
  'if-none-match': 'W/"5cd-dyACcrHbw5vCteYhfQGMQujOHAg"',
  accept: '*/*',
  'user-agent': 'pravica/1 CFNetwork/978.0.7 Darwin/19.3.0',
  'accept-language': 'en-us',
  'accept-encoding': 'br, gzip, deflate',
  connection: 'keep-alive'
}

The security model for XMLHttpRequest is different than on web as there is no concept of CORS in native apps.

[chrisglein]

Thanks for the issue. It'd really help if you could provide a minimal repro so we can determine if it's something React Native specific or something to do with the configuration of your app. It'd be great if you could provide a snack (or a pointer to a repo with full source).

[HectorLopez001]

Is there any updates about this issue? I am having pretty much a similar one: In my case, fetch calls only works as espected (about 0.5 sec) when react-native-debugger is activated and network inspect is enabled. If not running with this configuration, every fetch call spends about 5 secs.

It is also curious that the first fetch call actually works well and, moreover, if I wait 5 secs between calls, they work well too (if I wait 3 secs, then the API request lasts about 2 secs, if I wait 2 second, the API request last about 3 secs). It's like it is no posible completing 2 fetch calls in less than a certain amount of time, more specifically those 5 secs... It is always is the same amount of time.

This is so strange, any advice with this problem will be wellcome.

[manojeeva]

Same Here First API call takes around 11 seconds. Just a simple API call returns two string in a JSON as a response. The second call takes 1 to 2 seconds. Running Production App in android. What is causing this problem?

[rezasazesh]

I just upgraded to react native 0.63.2 and my app became extremely slow on android! I thought maybe there are UI elements that are causing this but now I can see that if i put my app on airplane mode everything works great! so the issue seems to be from Fetches

[virus2016]

We are experiencing the same issues. It's very sporadic - fetch is sometimes very slow or then its sometimes json()/text() functions. Very strange.

[liran]

same issues.

[Akhilbisht12]

Having a similar issue. Although the fetch API is working fine on the web. On the app, the first fetch takes way too much time.

[adarshsharma11]

Having a similar issue. Although the fetch API is working fine on the web. On the app, the first fetch takes way too much time.

Same issue in android real devices for first api with https & working good in emulator

[Hashymawan]

same issue

[kaganbuzcu]

Same issue.

[edwardchen]

Same issue. Android only.

[nguyenduy2392]

same issue only ios. not always, it sometime

[Akhilbisht12]

Posting this to help those who are having this problem. I was using PHP as my backend for the app. Changing to node.js backend helped me. Try Out. I don't know, what is causing this issue.

[williamlabanowski]

Try disabling hermes (set "enableHermes: false" in android/app/build.gradle). I had a similar issue and this fixed it (I'm on react-native 0.60.5). I think the Hermes js engine's handing of fetch requests isn't optimized or something. The reason why this issue would go away when remote debugging is off is because turning on remote debugging switches you to the debugger's (ie Chrome's) JS engine, so you stop using Hermes. If you're experiencing this issue on both iOS and Android, then this probably isn't the correct solution for you.

[quentincrinon]

Same issue, I've tried both Axios and fetch. On development mode my request takes 0.05s and on prod it takes more than 6s... Anyone has found a solution yet?

[victoriaSh]

Similar issue. Fetch requests, video and image loading from web takes too long both debug and production. Fetch takes less than 1 second on iOS but on Android it takes about 45-80 seconds. Checked timing - decoding json runs very quickly (~0.6s), web requests are extremely slow. Testing on real device. RN 0.63.3 Have no idea how to deal with it.

[victoriaSh]

Found a solution for my issue. Maybe it would be helpful for someone. Check IPv6 accessibility for the domain you trying to fetch from. https://ipv6-test.com/validate.php If web server is unreachable check your AAAA records, web server settings or ip6tables settings.

[mushroot]

Same issue, Only ios, But when I use mitmproxy work well.

[Nitesh-Kanyal]

same issue on android.

[m-jachym]

Same issue on Android On react-native 63.3 about 8% of Android users were affected. On react-native 62.2 it's about 3%. I don't know if this is helpful information

[ashokkumar88]

@victoriaSh The ipv6 solution worked for you?

[victoriaSh]

@victoriaSh The ipv6 solution worked for you?

Yep! After setting up ipv6 for the domain that I'm using in fetch requests everything works fine. Still don't get what exactly causes this behaviour. Guess there was a combination of 2 factors - my internet provider network settings + wrong IPv6 DNS settings for my domain. Try to make requests through mobile network or another internet provider. If it works fast that's ipv6 settings problem.

[ashokkumar88]

@victoriaSh Thanks. The ipv6 solution is working for me also now.

[JasperH8g]

We're having the same issues using Firebase Cloud Functions (which has a valid IPv6 test).

[NickNish09]

Any news on this issue? I'm having the same problem in react-native 0.64 using axios (or the fetch api) to call a domain which has ipv6.

The first fetch is always taking too slow, no matter what route. When I try to fetch from postman or the browser it is pretty fast. When I try to fetch other apis (such as https://reactnative.dev/movies.json) it is fast, only my project api is slow

I restarted my internet connection and it worked for a little bit, but now the problem is back.

[bijaykanshinew]

i am have same issue with fetch and axios

[ashokkumar88]

The issue was solved for me after switching to Cloudflare DNS.

[bijaykanshinew]

switching to cloudflare DNS didn't work for me. Still getting response after 1m or 2m react-native version => 0.64

[NickNish09]

I don't know if this will help, but I restarted sometimes my internet router and the problem was resolved.

Not really sure why