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?

Kokodoko · Answer 1 · 2019-02-22T11:24:33.583

5

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."});
  });
};

edited Feb 22 '19 at 11:24

answered Feb 12 '19 at 17:37

Kokodoko

26,167
33
120
197

So a fetch().catch() is essentially "I could not complete this request" but doesn't provide information beyond that? Because my thinking was it could still catch if response.json() failed. – ericjam Feb 21 '19 at 18:51
Yes, you can log the error, `catch(error => console.log(error.message))`. But catch only catches actual errors, for example if the internet is down or the url does not exist. A `404` is not considered an error because the server still returns information. BUT you can throw your own error if you get a `404`! I will edit the answer! – Kokodoko Feb 22 '19 at 11:22

how to handle network request failed error?

1 Answers1