Possible Unhandled Promise Rejection (Id:0) Error: Network Error in React Native

React Native: Possible unhandled promise rejection

catch function in your api should either return some data which could be handled by Api call in React class or throw new error which should be caught using a catch function in your React class code. Latter approach should be something like:

return fetch(url)
.then(function(response){
  return response.json();
})
.then(function(json){
  return {
    city: json.name,
    temperature: kelvinToF(json.main.temp),
    description: _.capitalize(json.weather[0].description)
  }
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
 // ADD THIS THROW error
  throw error;
});

Then in your React Class:

Api(region.latitude, region.longitude)
  .then((data) => {
    console.log(data);
    this.setState(data);
  }).catch((error)=>{
     console.log("Api call error");
     alert(error.message);
  });

Possible Unhandled Promise Rejection (id: 0) React Native

You're surrounding the problematic code with try/catch, which is good - but then you're re-throwing the error:

catch (err) {
    if(DocumentPicker.isCancel(err)) {
        console.log("user cancelled");
    }
    throw err;
}

which will result in an unhandled rejection unless there's another try/catch or .catch around that.

Only throw if there's something higher up on the call stack that can handle it. In this case, there isn't - openDocumentFile should handle everything itself - so don't re-throw in case of there's a problem.

catch (err) {
    if(DocumentPicker.isCancel(err)) {
        console.log("user cancelled");
    }
}

You also need to properly await the call to RNS3.put - right now, it's not being waited for, so it's not connected with the try/catch. This:

        RNS3.put(file, options)
        .then(response => {
            if (response.status !== 201){
                console.log(response.status);
              throw new Error("Failed to upload image to S3");
            }
            console.log(response.body);
        });

should be

const response = await RNS3.put(file, options)
if (response.status !== 201){
    console.log(response.status);
    throw new Error("Failed to upload image to S3");
}
console.log(response.body);

Generally, don't mix await and .then unless you understand Promises completely and know what you're doing - otherwise, to avoid confusing yourself, I'd recommend using only one or the other in a particular segment of code. Either await (and try/catch), or use .then, but not both in the same section of asynchronous logic.

React Native Possible Unhandled Promise Error with axios

You are receiving a HTTP 429 error code which means:

The HTTP 429 Too Many Requests response status code indicates the user has sent too many requests in a given amount of time ("rate limiting").

You are calling the API too many times, what's happening is:

• axios is called.
• setData() is executed and your state variable updates.
• The rerender is causing axios to run again.
• Congratulations, you're now in a loop!

Refactor your code to only run the API call at appropriate times. Something like this:

useEffect(() => {
   axios.all([
        axios.get('https://jsonplaceholder.typicode.com/nation'),
        axios.get('https://jsonplaceholder.typicode.com/state')
      ])
      .then(responseArr => {
        setData(responseArr[0].data);
        setData1(responseArr[1].data);
      });
}, []); // Ensure any dependencies are added here.

For good measure you should also handle the rejection, which is what the original error is mentioning.

axios.all().then().catch() - You're missing a catch statement.

---

For the question in the comments, you need to use back ticks when interpolating strings.

<Image 
  source={{
    uri: `https://jsonplaceholder.typicode.com/nation/image/${item.nation_image}`
  }}
/>

Possible Unhandled Promise Rejection with an android application

You have used several async calls and working on the returned promises in your Details.js class. But in each such case, you have only handled the success (promise resolve) path by providing only the then callback.

For example, consider this

getTv(movieId).then(movieTv => {
    if(movieTv == null) {
        setLoaded(false);
    }
    else {
        setMovieTv(movieTv);
        setLoaded(true);
    }
});

Here your application will work well, as long as the network call is successful and the backend returns a successful (e.g. 2xx) response. But if any error occurred, your application will crash as you haven't handled the error by handling the promise rejection.

So what you should do is add a catch callback to each of these promises and handles the error scenario gracefully. You can do things like logging the error, set any flag to indicate the loading was failed, show an error on the UI etc.

getTv(movieId).then(movieTv => {
    if(movieTv == null) {
        setLoaded(false);
    }
    else {
        setMovieTv(movieTv);
        setLoaded(true);
    }
}).catch(err => {
  console.log(err);
  setLoaded(false);
});

Possible Unhandled Promise Rejection Network Error in React Native

Solved.

return axios.get('http://localhost:3000/hello')

to

return axios.get('http://10.0.0.2:3000/hello')

and It works.

In Android emulator, the localhost refers its device.

https://github.com/facebook/react-native/issues/10404

Possible Unhandled Promise Rejection (id: 0): axios in Redux

You need to move try/catch inside the dispatch function:

 return async dispatch => {
    try {
      const res = await axios({
        method: "POST",
        url: BASE_URL + "/login.php",
        data: formdata, //'emphone','pass','submit
        // body: formdata,
      });
      if (res.data) {
        dispatch({
          type: Action.USER_LOGGED_IN,
          payload: {
            userPhone: formdata.get("emphone"),
            userToken: res.data.response.token,
          },
        });
        console.log(res.data);
      }
    } catch (error) {
      console.log(error);
    }
  };

---

Related Topics