question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Only Android] fetch Error : [Network request failed]

See original GitHub issue

Description

—My Code—

const reverseGeocoding = async (location: Location) => {
    const params = new URLSearchParams({
        "orders": `admcode`,
        "output": "json",
        "coords": `${location.longitude},${location.latitude}`
    }).toString()
        const resultBare = await fetch(`${Config.REVERSE_GEOCODING_URL}?${params}`, {
            method: "GET",
            headers: {
                "X-NCP-APIGW-API-KEY-ID": `${Config.NCP_AI_CLIENT_ID}`,
                "X-NCP-APIGW-API-KEY": `${Config.NCP_AI_CLIENT_SECRET}`,
            }
        })
        const jsonResult = await resultBare.json()
        console.log(JSON.stringify(jsonResult))
        return jsonResult;
}

—Not working solution—

  1. android:usesCleartextTraffic=“true”
  2. commenting out line number 43 in this file android/app/src/debug/java/com/**/ReactNativeFlipper.java
38      NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
39      NetworkingModule.setCustomClientBuilder(
40          new NetworkingModule.CustomClientBuilder() {
41            @Override
42            public void apply(OkHttpClient.Builder builder) {
43      //        builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
44            }
45          });
46      client.addPlugin(networkFlipperPlugin);
  1. Change FLIPPER_VERSION
27  # Version of flipper SDK to use with React Native
28  FLIPPER_VERSION=0.39.0  // edit this manually

its too old solution my code already 0.99.0

—Error—

Possible Unhandled Promise Rejection (id: 0):
TypeError: Network request failed
http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:25357:33
http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:29572:26
_callTimer@http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:29492:17
callTimers@http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:29693:19
__callFunction@http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:3056:36
http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:2780:31
__guard@http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:3007:15
callFunctionReturnFlushedQueue@http://192.168.1.13:8081/index.bundle?platform=android&dev=true&minify=false&app={package.my.project}&modulesOnly=false&runModule=true:2779:21
callFunctionReturnFlushedQueue@[native code]

fetch not working only android emulators , physical device too

Version

0.66.4

Output of npx react-native info

System: OS: macOS 11.1 CPU: (16) x64 Intel® Core™ i9-9880H CPU @ 2.30GHz Memory: 3.60 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 17.3.1 - /usr/local/bin/node Yarn: Not Found npm: 8.3.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: Not Found IDEs: Android Studio: 4.2 AI-202.7660.26.42.7351085 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Java: 11.0.9.1 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: 0.66.4 => 0.66.4 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

just using fetch, axios etc… any networking tools

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

No response

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:6
  • Comments:21 (1 by maintainers)

github_iconTop GitHub Comments

7reactions
fwestling-lorcommented, Dec 6, 2022

For me, I was able to fix this by adding a mime-type of the file to the upload (wasn’t required previously or on iOS):

const chunk = {
   uri: `file://${file.path}`,
   type: "application/octet-stream", // I wasn't including this;  works if I use the proper type (e.g. image/jpeg) as well
   name: file.name,
   size: file.size
}
const formData = new FormData();
formData.append("Chunk", chunk);
formData.append("OtherData", data);

await axios.post("upload", formData, {
   headers: {
      "Content-Type": `multipart/form-data`, 
   },
});

Hope that helps someone

7reactions
Hashir524commented, Apr 4, 2022

Any Update? Facing the Same Issue

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native fetch() Network Request Failed - Stack Overflow
1) To find out the exact error in the logs, I first enabled 'Debug JS Remotely' using Cmd + M on the app...
Read more >
Fetch Error : [TypeError: Network request failed] : r/reactnative
When I want to make a request to an endpoint that I want, it throws me the error [TypeError: Network request failed], but...
Read more >
How to solve 'TypeError: Network request failed' in React ...
two thing : 1. add android :usesCleartextTraffic="true" in your Android manifest android /app/src/main/AndroidManifest.xml2.
Read more >
Improve "TypeError: Network request failed" error message
Network request failed, this error occurs usually when api call failed or you have some internet issue. In android emulator, sometimes this error...
Read more >
[typeerror: network request failed] - You.com | The AI Search ...
Since your Android device has an IP of its own, you need to point the URL to your computers IP address instead of...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found