[Android] React Native 0.66.* [fetch: Network request failed] [axios: Network Error] on file upload Similar to #28551

[Romick2005]

trafficstars

Description

When doing upload video recording sometimes (every 7 / 10) I got axios: Network Error on my Huawei P20 (works fine on Xiaomi Redmi Note 9 Pro). It is not persistent and seems like some race condition issues. And usually it does not work for the first time, but when forcing second upload file attempt works fine.

After adding XMLHttpRequest interceptor (to get java error). I got Stream Close error. Seems like there are internal okhttp upload re-try and FileInputStream are closed on second retry.

Version

0.66.3

Output of react-native info

System: OS: macOS 12.0.1 CPU: (8) arm64 Apple M1 Memory: 101.17 MB / 8.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.0.0 - /usr/local/bin/node Yarn: Not Found npm: 8.1.2 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.2 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0 Android SDK: Not Found IDEs: Android Studio: 2020.3 AI-203.7717.56.2031.7621141 Xcode: 13.1/13A1030d - /usr/bin/xcodebuild Languages: Java: 11.0.11 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: ^17.0.2 => 17.0.2 react-native: ^0.66.3 => 0.66.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

const request = new XMLHttpRequest();

 request.onerror = function handleError(error) {
   console.log("xhr Network Error ", error);
 };

 request.onreadystatechange = function (e) {
   console.log("xhr upload complete this.readyState =" + this.readyState, e);
 };

 request.open("POST", uploadFileUrl, true);
 request.setRequestHeader("Content-Type", "multipart/form-data"); 
 request.send(formData);

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

This code is used to debug network error by adding interceptor to the XMLHttpRequest

// https://github.com/facebook/react-native/blob/583471bc48ac45e09f6fb16bdb6fe7b1f588e996/Libraries/Network/XMLHttpRequest.js#L37
class XMLHttpRequestNetworkInterceptor {

  requestSent(/* id, url, method, headers */) {}

  responseReceived(/* id, url, status, headers */) {}

  dataReceived(/* id, data */) {}

  loadingFinished(/* id, encodedDataLength */) {}

  loadingFailed(id, error) {
    logger.error(
      {
        module: "api",
        message: "Loading failed with an error: " + error,
        debugMessage: "Error in XMLHttpRequestNetworkInterceptor.",
        data: {
          id: id,
          error: error
        }
      }
    );
  }
}

XMLHttpRequest.setInterceptor(new XMLHttpRequestNetworkInterceptor());

[ifsnow]

I faced on the same issue. It doesn't happen in all cases, but only on certain networks.

It seems to have something to do with this pr (#31084).

After downgrading OkHttp to V3, the problem was solved.

[kim-gam-ja]

I faced on the same issue. It doesn't happen in all cases, but only on certain networks.

It seems to have something to do with this pr (#31084).

After downgrading OkHttp to V3, the problem was solved.

how to downgrading OkHttps version?

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

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