Multiple fetch request starts to not resolve or reject promise

[JumalDB]

• Review the documentation: https://facebook.github.io/react-native
• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Memory: 1.60 GB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
Yarn: 1.10.1 - /usr/local/bin/yarn
npm: 6.2.0 - ~/.nvm/versions/node/v10.9.0/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.0, 24.0.1, 25.0.1, 26.0.0, 26.0.1, 26.0.2, 26.0.3, 27.0.3
API Levels: 23, 25, 26
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.0-alpha.8af6728 => 16.6.0-alpha.8af6728
react-native: 0.57.3 => 0.57.3
npmGlobalPackages:
create-react-native-app: 2.0.2
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
svg-to-react-native-cli: 0.0.3

Description

When doing multiple fetch request one after another, not all request promises are resolved or rejected, some get lost.

I ran same code on older react native version 0.50.4 and it was working there. So its an issue in new react native.

Quite major and critical issue.

Reproducible Demo

import React, { Component } from 'react';
import { NetInfo, TouchableOpacity, Text, View } from 'react-native';

export class AppContainer extends Component {
  componentDidMount() {
    NetInfo.isConnected.addEventListener('connectionChange', this.handleConnectionChange);
  }

  componentWillUnmount() {
    NetInfo.isConnected.removeEventListener('connectionChange', this.handleConnectionChange);
  }

  handleConnectionChange() {
  }

  onPress() {
    const fullUrl = 'https://google.com';
    for (let i = 0; i < 10; i++) {
      console.log(i);
      NetInfo.isConnected.fetch().then(isConnected => {
        console.log('NetInfo.isConnected.fetch-success', isConnected);
        fetch(fullUrl)
          .then(response => {
            console.log('fetch-success', response);
          })
          .catch(error => console.log('fetch-error', error));
      }).catch(error => console.log('NetInfo.isConnected.fetch-error', error));
    }
  }

  render() {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <TouchableOpacity onPress={this.onPress} style={{backgroundColor: 'red'}}>
          <Text>{'Click Me'}</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

[react-native-bot]

Can you run react-native info and edit your issue to include these results under the Environment section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[rvaitkus23]

+1

[rvaitkus23]

It looks like this issues was introduces in version 0.57. I have tried to reproduce it in clean project with version 0.56.1. All requests are resolved.
Can anyone please review commits to Network library and find out that could be the cause?

[donatasvyzasdb]

+1
This seems like a serious bug. If you call fetch() 10 times in a row, but only 5-7 of those request Promises are resolved or rejected and the rest are just eaten without any trace, this is severe.
Anyone else experiencing the same issue?

[tomauty]

Yes, experiencing it now. It usually hangs at the same place for me, and very occasionally resolves. We fire off at least 10 fetch calls at app launch.

Edit: Seems to be an issue with NetInfo. When I remove my waiting for connection call they all resolve no problem.

Edit 2: This appears to be the commit in question:

67afaef#diff-82c5d95c19a17c3f2375f0b1e09f6da4

[tsvetan-ganev]

I just wasted my day trying to figure out why my parallel HTTP requests were failing on iOS but working fine on Android.

I have a thin wrapper around the fetch function in order to detect network errors and handle HTTP status codes correctly.

export default async function http(url, options = {}) {
  const isConnected = await NetInfo.isConnected.fetch()

  if (!isConnected) {
    throw Error('This device is not connected to the Internet.')
  }

  // make the HTTP request and return response/error
  ...
}

When I'm making multiple HTTP calls at once (with Promise.all) only the first request gets sent to the server and the others get stuck - neither resolved, nor rejected. However, on non-parallel calls (e.g. for..of loop which awaits every response) it worked fine. This made it almost impossible to find the reason for my requests being sucked into a black hole. Needless to say this is a pretty serious issue for all mobile apps interacting with a REST API.

[soumyamishra89]

Any update on this issue? I am also facing the same issue where the request is not resolved and nothing is sent to the server on IOS. works fine on Android.
I am using react-native: 0.57.8

[juanfer0002]

@soumyamishra89It works fine in 0.56, you may want to downgrade in this one.

[soumyamishra89]

@juanfer0002 : any plans to fix this in the next release?

[juanfer0002]

I don't know, i just found out that worked in that versio. I'm not contributor. I'm also waiting for a solution to this

[soumyamishra89]

I have tested it with the latest rn 0.58.3 version and the issue still exist. I have reverted to 0.56. Is anyone looking into this?

[tb9-Mason]

I am also experiencing this issue using the expo SDK 32.0.0. We are using frisbee, but calls fail on our iOS standalone builds. We don't see the same issue in our Android standalone builds.

[cpojer]

Heads up: we moved react-native-netinfo into its own repository, which should allow for making changes and fixes much faster. Please continue the discussion about this issue there: react-native-netinfo/react-native-netinfo#10