Network Error - React Native iOS Simulator

user_6127225 0
Viewed 1132

I have a react native app that is throwing a Network Error when trying to communicate with the backend api.

Troubleshooting I've tried:

  • The same payload works in Postman (so the problem is the simulator/app, not the api)
  • Using Axios (via await axios(config))
  • Tried using both the localhost (http) and production (https) servers as the backend, same error
  • Enabled all the App Transport Security Settings configs (Allow Arbitrary Loads, added Exception Domains)
  • The content type is specified in the headers
  • The simulator is connected to internet (I tried the browser)

Config:

 {"data": null, "headers": {"Content-Type": "application/json", "X-JWT": "..."}, "method": "GET", "url": "https://example.com/..."}

Error:

{"message":"Network Error",
 "name":"Error",
 "stack":"createError@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:156907:26\nhandleError@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:156693:69\ndispatchEvent@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:30339:31\nsetReadyState@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:29485:33\n__didCompleteResponse@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:29291:29\nemit@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:2264:42\n__callFunction@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:3086:36\n@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:2810:31\n__guard@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:3037:15\ncallFunctionReturnFlushedQueue@http://localhost:8081/index.bundle?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=com.exampleapp:2809:21\ncallFunctionReturnFlushedQueue@[native code]",
 "config":{
    "transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,
    "headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json","X-JWT":"..."},
    "url":"https://example.com/...",
    "method":"get",
    "data":"null"
  },
 "status":null}

Technical Environment:

  • React Native: 0.64.1
  • Simulator: iOS 15.2 iPhone 13
  • Device: macOS Monterey (12.0.1), Apple M1
axios react-native https ios-simulator ios
2 Answers

I have the same issue using RN 0.64.2

The issue seem to be related to Chrome debugger.

To fix the network error I just disable the debugger or use react-native-debugger:

https://github.com/jhen0409/react-native-debugger

If still not working try to set data: undefined for the GET request

Source for data: undefined fix and other possible fixes: https://github.com/axios/axios/issues/3192

UPDATE: for newer RN versions I use Flipper: RN 0.66, Flipper App 0.99 and Flipper dependencies 0.99. Flipper App 0.149+ works too but on Android network extension doesn't seem work very well sometimes.

I noticed using the Flipper version recommended in the react native upgrade helper for my specific RN version worked best for both Android and iOS in my case.

user_19798610

An awesome repo lets us know the APIs calls list with all headers and data being passed to API.

Check out the react-native-network-logger

We also can put see the exact error message as error.response.message in the catch of Axios call.

Hope this will help you to resolve your issue with Axios call.

For Ex.

try {
    const addReminderRes = await axios({
        url: `authentication/addreminder`,
        data: formData,
        method: 'POST'
    })

    console.log('addReminderRes : ', addReminderRes)
} catch (err) {
    console.log("Error : ", err.response.data)
}
user_172440190
Related