how to handle network request failed error?

Question

my problem differs from React Native fetch() Network Request Failed, I'm not struggling with http or https, I just want to provide a nice error to the user if the request fails due to the internet connection, wrong API, etc. instead of getting react native error.

I have a form and want to send it to a server and get a response so I wrote this:

submitForm = async () => {
  fetch("www.somewhere.com", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(some_data)
  })
  .then((response) => response.json())
  .then((responseJson) => {
     // do something
  })
  .catch((error) => {
      this.setState({server_error: "request failed try again."});
  });
};

But It seems that my catch doesn't work correctly because if the request fails I get an error from react native like this: and in production, it just jumps out of the app, how can I avoid this?

Answer 1

Don't know if this will solve your problem, but your fetch code tries to create JSON, even if the response is a 404, for example.

You also need to check if the response is OK before creating JSON

submitForm = async () => {
  fetch("www.somewhere.com", {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(some_data)
  })
  .then((response) => {
        if(response.statusText == "OK" && response.status >= 200 && response.status < 300) {
            return response.json()
        } else {
            throw new Error("Server can't be reached!")
        }
    })
  .then((json) => {
     console.log("hooray! we have json!")
     console.log(json)
  })
  .catch((error) => {
      console.log("error fetching data")
      console.log(error)
      console.log(error.message) // Server can't be reached!
      this.setState({server_error: "request failed try again."});
  });
};