fetch API doesn't resolve or reject

[john-hu]

• 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 High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-3540M CPU @ 3.00GHz
Memory: 226.52 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.0 - /usr/local/bin/node
Yarn: 1.2.1 - /usr/local/bin/yarn
npm: 5.5.1 - /usr/local/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.2, 26.0.3, 27.0.3, 28.0.1
API Levels: 14, 15, 16, 17, 18, 19, 20, 22, 23, 25, 26, 8
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: ^0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7

Description

Using the example of networking doc to fetch movie.json from facebook server doesn't work.

I had traced the code to dispatchEvent which doesn't trigger load event. The reason is event-target-shim@1.1.1 cannot find any 'load' event listeners.

Reproducible Demo

1. check out github repo: https://github.com/john-hu/react-native-fetch-no-resolve-reject
2. npm install
3. react-native run-android
4. open debugger ui to see console

Expected Result

see the following console.log

before fetch
fetch sent
{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "title": "Star Wars", "releaseYear": "1977"},
    { "id": "2", "title": "Back to the Future", "releaseYear": "1985"},
    { "id": "3", "title": "The Matrix", "releaseYear": "1999"},
    { "id": "4", "title": "Inception", "releaseYear": "2010"},
    { "id": "5", "title": "Interstellar", "releaseYear": "2014"}
  ]
}
[Array]

Actual Result

before fetch
fetch sent

[john-hu]

BTW, I am trying to upgrade my another react-native project from 0.49.3 to latest version. The code works well at 0.49.3 but not good at 0.56.0.

I verify it on my real device moto g5s plus.

[xinhash]

Happens same on my codebase. I upgraded from 0.55 to 0.56 and fetch calls aren't getting completed. However on enabling network inspect in debugger, the fetch calls are resolved/rejected normally.

[john-hu]

According to the code of event-target-shim, it should work if we use XHR.addEventListener('load', func). But it is not tested on my site.

[ggtmtmgg]

In my environment, it works in both of Android and iOS.
I used https://github.com/john-hu/react-native-fetch-no-resolve-reject.

Android logs:

iOS logs:

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
Memory: 30.20 MB / 8.00 GB
Shell: 5.3.1 - /usr/local/bin/zsh
Binaries:
Node: 8.2.1 - /usr/local/var/nodenv/versions/8.2.1/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 5.5.1 - /usr/local/var/nodenv/versions/8.2.1/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 27.0.3
API Levels: 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 2.3 AI-162.3934792
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: ^0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

[john-hu]

@ggtmtmgg would you mind to tell me which event-target-shim version you use?? You can simply type npm list | grep event-target-shim to find it....

The root cause is it doesn't try to call onload when it dispatches load event. It only finds event listeners from events hooked with addEventListener.

BTW, I will try to reinstall again to see if this issue still there.

[ggtmtmgg]

@john-hu
I used yarn for installing node modules, cause I didn't notice that there is already package-lock.json.

$ yarn list | grep event-target-shim
├─ event-target-shim@1.1.1
│  ├─ event-target-shim@^1.0.5
$ yarn list | grep -B 30 event-target-shim
├─ envinfo@5.10.0
├─ error-ex@1.3.2
│  └─ is-arrayish@^0.2.1
├─ errorhandler@1.5.0
│  ├─ accepts@~1.3.3
│  └─ escape-html@~1.0.3
├─ es-abstract@1.12.0
│  ├─ es-to-primitive@^1.1.1
│  ├─ function-bind@^1.1.1
│  ├─ has@^1.0.1
│  ├─ is-callable@^1.1.3
│  └─ is-regex@^1.0.4
├─ es-to-primitive@1.1.1
│  ├─ is-callable@^1.1.1
│  ├─ is-date-object@^1.0.1
│  └─ is-symbol@^1.0.1
├─ escape-html@1.0.3
├─ escape-string-regexp@1.0.5
├─ escodegen@1.11.0
│  ├─ esprima@^3.1.3
│  ├─ esprima@3.1.3
│  ├─ estraverse@^4.2.0
│  ├─ esutils@^2.0.2
│  ├─ optionator@^0.8.1
│  ├─ source-map@~0.6.1
│  └─ source-map@0.6.1
├─ esprima@4.0.1
├─ estraverse@4.2.0
├─ esutils@2.0.2
├─ etag@1.8.1
├─ event-target-shim@1.1.1
--
├─ react-native@0.56.0
│  ├─ absolute-path@^0.0.0
│  ├─ ansi-styles@2.2.1
│  ├─ art@^0.10.0
│  ├─ base64-js@^1.1.2
│  ├─ chalk@^1.1.1
│  ├─ chalk@1.1.3
│  │  ├─ ansi-styles@^2.2.1
│  │  ├─ escape-string-regexp@^1.0.2
│  │  ├─ has-ansi@^2.0.0
│  │  ├─ strip-ansi@^3.0.0
│  │  └─ supports-color@^2.0.0
│  ├─ cliui@3.2.0
│  │  ├─ string-width@^1.0.1
│  │  ├─ string-width@1.0.2
│  │  │  ├─ code-point-at@^1.0.0
│  │  │  ├─ is-fullwidth-code-point@^1.0.0
│  │  │  └─ strip-ansi@^3.0.0
│  │  ├─ strip-ansi@^3.0.1
│  │  └─ wrap-ansi@^2.0.0
│  ├─ commander@^2.9.0
│  ├─ compression@^1.7.1
│  ├─ connect@^3.6.5
│  ├─ core-js@1.2.7
│  ├─ create-react-class@^15.6.3
│  ├─ debug@^2.2.0
│  ├─ denodeify@^1.2.1
│  ├─ envinfo@^5.7.0
│  ├─ errorhandler@^1.5.0
│  ├─ escape-string-regexp@^1.0.5
│  ├─ event-target-shim@^1.0.5

[john-hu]

Well. I only have one version of event-target-shim:

➜  react-native-fetch-no-resolve-reject git:(master) ✗ npm list | grep event-target-shim
│ ├── event-target-shim@1.1.1

and

➜  react-native-fetch-no-resolve-reject git:(master) ✗ npm list | grep -B 30 event-target-shim
│ │ ├─┬ compressible@2.0.14
│ │ │ └── mime-db@1.35.0
│ │ ├── debug@2.6.9 deduped
│ │ ├── on-headers@1.0.1
│ │ ├── safe-buffer@5.1.2
│ │ └── vary@1.1.2
│ ├─┬ connect@3.6.6
│ │ ├── debug@2.6.9 deduped
│ │ ├─┬ finalhandler@1.1.0
│ │ │ ├── debug@2.6.9 deduped
│ │ │ ├── encodeurl@1.0.2 deduped
│ │ │ ├── escape-html@1.0.3 deduped
│ │ │ ├── on-finished@2.3.0 deduped
│ │ │ ├── parseurl@1.3.2 deduped
│ │ │ ├── statuses@1.3.1
│ │ │ └── unpipe@1.0.0
│ │ ├── parseurl@1.3.2
│ │ └── utils-merge@1.0.1
│ ├─┬ create-react-class@15.6.3
│ │ ├── fbjs@0.8.16 deduped
│ │ ├── loose-envify@1.4.0 deduped
│ │ └── object-assign@4.1.1 deduped
│ ├─┬ debug@2.6.9
│ │ └── ms@2.0.0
│ ├── denodeify@1.2.1
│ ├── envinfo@5.10.0
│ ├─┬ errorhandler@1.5.0
│ │ ├── accepts@1.3.5 deduped
│ │ └── escape-html@1.0.3
│ ├── escape-string-regexp@1.0.5
│ ├── event-target-shim@1.1.1

I will try to make manual change to the react-native folder inside of my node_modules to test if 1.0.5 affects the result.

Thank you @ggtmtmgg !! This is a good finding.... I would like to keep my app up-to-date with all dependencies.

[john-hu]

Strange. The same issue cannot be reproduced today. I had re-installed with npm install today. And it works correctly....... I will close this issue since we cannot reproduce it.

[john-hu]

Reopen this issue because it comes to me when I use it with the release build.

[paul-todd2]

Could this be related to the version of iOS you are running? there were changes to the networking stack to strengthen the network calls. See https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

In at least one external site, even though they were correctly using HTTPS I had to disable Perfect Forward Secrecy otherwise I was seeing similar behaviour.

[john-hu]

@paul-todd2 Thanks for the information. Actually, I use Android smart phone to test it. I found it happens randomly. For some unknown cases, I can reproduce it 100%....