Network request failed using fetch

[nimabrownlee]

🐛 Bug Report

Summary of Issue

Network request failed
- node_modules/whatwg-fetch/dist/fetch.umd.js:527:17 in setTimeout$argument_0
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:130:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:383:16 in callTimers
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

I've no idea why but recently no fetching works and I get this error above. It's so frustrating because I have no clue what the actual problem is. I've looked at similar bug reports and many of them say it's because of https vs http or LAN issues.

But I am using an external API with https so it can't be that. I am using useSWR but I am pretty sure it has nothing to do with that specific library. It's either React Native/Expo or some problem with the whatwg-fetch polyfill.

Environment - output of expo diagnostics & the platform(s) you're targeting

  Expo CLI 3.28.0 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
      Yarn: 1.22.10 - /usr/local/bin/yarn
      npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm
    Managers:
      CocoaPods: 1.9.1 - /usr/local/bin/pod
    SDKs:
      iOS SDK:
        Platforms: iOS 14.1, DriverKit 19.0, macOS 10.15, tvOS 14.0, watchOS 7.0
    IDEs:
      Android Studio: 4.1 AI-201.8743.12.41.6858069
      Xcode: 12.1/12A7403 - /usr/bin/xcodebuild
    npmPackages:
      expo: ~39.0.2 => 39.0.3 
      react: 16.13.1 => 16.13.1 
      react-dom: 16.13.1 => 16.13.1 
      react-native: ~0.63.3 => 0.63.3 
      react-native-web: ~0.13.12 => 0.13.18 
    npmGlobalPackages:
      expo-cli: 3.28.0
    Expo Workflow: bare

Reproducible Demo

This one is actually difficult to demo as I don't know how to reproduce.

Steps to Reproduce

I am using useSWR if that's any good info. Other than that I've honestly no idea. I just am using fetch.

  fetch(url, {
    headers: {
      Accept: 'application/json',
      Authorization: `Bearer ${token}`,
    },
  }).then((res) => res.json())

Expected Behavior vs Actual Behavior

I shouldn’t get a Network request failed error.

[byCedric]

Hi @nimabrownlee! It's unfortunate that the error stack isn't helpful here. I've looked around in the React Native repository too, and it looks like it might be related to a regression issue from whatwg-fetch. It seems that the Content-Type header sometimes isn't sent with the request, which causes the request to fail randomly (but only in React Native).

These threads might help:

• https://github.com/facebook/react-native/issues/30176
• https://github.com/github/fetch/issues/823

For now, I'll mark this issue as upstream. It seems like this is coming from React Native itself. If you are able to, could you create a small example where this consistently happens? That would be extremely helpful for us, so we can focus on fixing this. You should be able to use any public API, like https://httpbin.org/anything, with fake bearer tokens.

Hope this helps!

[nimabrownlee]

@byCedric You're so nice. Thanks for the quick response. My issue is fixed now. All I did was to restart my computer and reset expo caching. I've have honestly no idea what would cause this.

[solisoft]

I have the same issue ... It was working previously ... Here my code :

formData.append('files[]', {
        uri: this.state.picture,            // this is the path to your file. see Expo ImagePicker or React Native ImagePicker
        type: `image/jpeg`,  // example: image/jpg
        name: `upload.jpg`    // example: upload.jpg
});

          fetch(GLOBAL.domain + '/file/upload/' + json.referral._key + '/datasets/pictures', {
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'multipart/form-data',
              'X-Session-Id': self.props.route.params.token
            },
            body: formData
          })
          .then((response) => response.json())
          .then((json_picture) => {
            console.log(json_picture)
            self.setState({ uploading: false, account_created: true })
          })
          .catch((error) => {
            console.error(error);
          });

and here the result

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
at [native code]:null in callFunctionReturnFlushedQueue

[meli07-sudo]

Me too. I installed a new expo project to test by using expo init but I've got the same error. there is my App.js code :

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  fetch("192.168.1.53:5000").then(()=>{console.log("success");}).catch((err)=>{console.log(err);})
  return (
    <View style={styles.container}>
      <Text>Network request test</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

here is the result of promise catch :

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0
at [native code]:null in callFunctionReturnFlushedQueue

[meli07-sudo]

App.js is the only file that I've modified after use expo init command

[meli07-sudo]

I've founded the problem. My linux firewall block all request on any port of my machine. A simple sudo ufw disable or sudo ufw allow 5000/tcp (5000 is my server port number) and it's ok.

[teewuane]

I found that by setting the "Content-Type" header on the fetch request (in my case to "application/json") fixes this issue.

fetch('https://some.url/something', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        ...authorizationHeaders,
      },
      body: JSON.stringify({
        'something': 'hi',
        'something_else': 'hey',
      })
    })
    .then((response) => response.json())
    .then((json) => {
        console.log(json);
    })

[mooseburger]

I was banging my head over this issue for days. For my particular case (trying to use fetch on an https domain in android), the issue was I had my server (IIS) configured to request client certificates. Turned that option off, and it worked..

[etherealsunshine]

Hi is there any general workaround to this as of now?

[robwatkin]

@etherealSunshine I am also having an issue with fetch with Post 'Content-Type': 'multipart/form-data'. Perhaps we can compare notes.

[ariccio]

For my case, the 'Content-Type': 'application/json' bit worked. What the heck??

[ArneGockeln]

Hi,

I have the same error but it doesn't matter if I try to run on iOS, Android or Web. After building the bundle I get

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0

every second. The fun thing is: I don't even use fetch in my code.

I am working on macOS 12.2.1 and these are my dependencies:

"dependencies": {
    "@defichain/jellyfish-address": "^2.25.2",
    "@defichain/jellyfish-api-core": "^2.25.2",
    "@defichain/jellyfish-network": "^2.25.2",
    "@defichain/jellyfish-transaction": "^2.25.2",
    "@defichain/jellyfish-transaction-builder": "^2.25.2",
    "@defichain/jellyfish-wallet": "^2.25.2",
    "@defichain/jellyfish-wallet-encrypted": "^2.25.2",
    "@defichain/jellyfish-wallet-mnemonic": "^2.25.2",
    "@defichain/playground-api-client": "^0.17.0",
    "@defichain/whale-api-client": "^0.26.3",
    "@defichain/whale-api-wallet": "^0.26.3",
    "@expo-google-fonts/ibm-plex-sans": "^0.2.2",
    "@expo/vector-icons": "^12.0.0",
    "@gorhom/bottom-sheet": "^4.1.5",
    "@react-native-async-storage/async-storage": "~1.15.0",
    "@react-native-community/netinfo": "7.1.3",
    "@react-native-community/slider": "4.1.12",
    "@react-native-masked-view/masked-view": "0.2.6",
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "@reduxjs/toolkit": "^1.8.0",
    "bignumber.js": "^9.0.2",
    "bitcoinjs-message": "^2.2.0",
    "buffer": "^6.0.3",
    "classnames": "^2.3.1",
    "dayjs": "^1.10.7",
    "defichain": "^2.25.2",
    "expo": "^44.0.6",
    "expo-asset": "~8.4.6",
    "expo-barcode-scanner": "~11.2.0",
    "expo-cli": "^5.3.0",
    "expo-clipboard": "~2.1.0",
    "expo-constants": "~13.0.1",
    "expo-crypto": "~10.1.1",
    "expo-font": "~10.0.4",
    "expo-linking": "~3.0.0",
    "expo-local-authentication": "~12.1.0",
    "expo-localization": "~12.0.0",
    "expo-random": "~12.1.1",
    "expo-secure-store": "~11.1.0",
    "expo-splash-screen": "~0.14.1",
    "expo-status-bar": "~1.2.0",
    "expo-updates": "~0.11.6",
    "expo-web-browser": "~10.1.0",
    "i18n-js": "^3.8.0",
    "install": "^0.13.0",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "lru-cache": "^7.4.0",
    "react": "17.0.1",
    "react-content-loader": "^6.1.0",
    "react-devtools": "^4.22.1",
    "react-dom": "17.0.1",
    "react-hook-form": "^7.27.0",
    "react-native": "0.64.3",
    "react-native-boring-avatars": "^1.0.1",
    "react-native-collapsible": "^1.6.0",
    "react-native-confirmation-code-field": "^7.3.0",
    "react-native-gesture-handler": "~2.1.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-progress": "^5.0.0",
    "react-native-qrcode-svg": "^6.1.2",
    "react-native-reanimated": "^2.3.1",
    "react-native-redash": "^16.2.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-svg": "12.1.1",
    "react-native-swiper-flatlist": "^3.0.16",
    "react-native-web": "0.17.1",
    "react-number-format": "^4.9.1",
    "react-overlays": "^5.1.1",
    "react-redux": "^7.2.6",
    "semver": "^7.3.5",
    "smart-buffer": "^4.2.0",
    "stream-browserify": "^3.0.0",
    "tailwind-rn": "^3.0.1",
    "tailwindcss": "^2.2.19"
  }

[brentvatne]

@ArneGockeln - it sounds like one of the libraries in your app is using fetch. you might want to try narrowing down a minimal reproducible example to get more info. https://expo.fyi/manual-debugging

[ArneGockeln]

@ArneGockeln - it sounds like one of the libraries in your app is using fetch. you might want to try narrowing down a minimal reproducible example to get more info. https://expo.fyi/manual-debugging

I did that but it didn't fix the problem. Instead I found that it is not a bug of my application. I have had installed the expo-cli to /usr/local/bin. When I remove the expo-cli and use the expo-cli from node_modules everything works as expected. Don't know why, but it works.

[rabbit949]

I found that by setting the "Content-Type" header on the fetch request (in my case to "application/json") fixes this issue.

fetch('https://some.url/something', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        ...authorizationHeaders,
      },
      body: JSON.stringify({
        'something': 'hi',
        'something_else': 'hey',
      })
    })
    .then((response) => response.json())
    .then((json) => {
        console.log(json);
    })

setting content type seems to fix the issue

[dilas12345]

Hi, Thanks rabbit949 though I have tried your solution but my issue still persist, just wondering what could be the issue here, if its expo or my local machine.

[MurtazaPakawala]

@rabbit949 it doesn't work :(

[rabbit949]

@rabbit949 it doesn't work :(

You can try rebuilding your app and hopefully it'll work !

[mariocozta]

For some reason network request fail and succed on and off for no apparent reason for me.