Fetch API error handling

Question

I want to display error message from my API, problem is that I can't reach that error if I check for response.ok, it returns Fetch error, not the one from API..

If I don't use if(response.ok)... it returns the error from API but it dispatches the success action.

Here is the example, login action:

export const signIn = data => dispatch => {
  dispatch({ 
    type: SIGN_IN
    }) 
  fetch(API_URL+'/login', { 
   method: 'POST',
   headers: {
      'content-type': 'application/json'
      },
   body: JSON.stringify(data),
    })
    .then( response => {
    if (!response.ok) { throw response }
    return response.json()  //we only get here if there is no error
  })
  .then( json => {
    dispatch({
      type: SIGN_IN_SUCCESS, payload: json
    }),
    localStorage.setItem("token", 'Bearer '+json.token)
    localStorage.setItem("user", JSON.stringify(json.user))
  })
  .catch( err => {
    dispatch({
      type: SIGN_IN_FAILED, payload: err
    })
  })
    
}

This is the code for action that dispatches the right message but as success action, not as failed one..

export const signIn = data => dispatch => {
  dispatch({ 
    type: SIGN_IN
    }) 
  fetch(API_URL+'/login', { 
   method: 'POST',
   headers: {
      'content-type': 'application/json'
      },
   body: JSON.stringify(data),
    })
    .then( response => response.json())
  .then( json => {
    dispatch({
      type: SIGN_IN_SUCCESS, payload: json
    }),
    localStorage.setItem("token", 'Bearer '+json.token)
    localStorage.setItem("user", JSON.stringify(json.user))
  })
  .catch( err => {
    dispatch({
      type: SIGN_IN_FAILED, payload: err
    })
  })
    
}

you should get that error in your catch block. can you show your err object? — Tushar Walzade
– Tushar Walzade, Commented May 14, 2018 at 13:08
Try this one github.com/github/fetch/issues/203#issuecomment-143347675 — Usman Iqbal
– Usman Iqbal, Commented Feb 4, 2020 at 9:51

Sazzadur Rahman · Accepted Answer · 2020-07-05 18:22:04Z

With the following solution one can handle JSON API error, Generic API error and Generic fetch error

fetch("api/v1/demo", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({
        "data": "demo"
    })
})
    .then(response => {
        if (!response.ok) {
            return Promise.reject(response);
        }
        return response.json();
    })
    .then(data => {
        console.log("Success");
        console.log(data);
    })
    .catch(error => {
        if (typeof error.json === "function") {
            error.json().then(jsonError => {
                console.log("Json error from API");
                console.log(jsonError);
            }).catch(genericError => {
                console.log("Generic error from API");
                console.log(error.statusText);
            });
        } else {
            console.log("Fetch error");
            console.log(error);
        }
    });

Amir Mohammad Moradi · Accepted Answer · 2020-02-16 21:53:36Z

according to This Article :

Per MDN, the fetch() API only rejects a promise when

“a network error is encountered, although this usually means permissions issues or similar.”

Basically fetch() will only reject a promise if the user is offline, or some unlikely networking error occurs, such a DNS lookup failure.

then, you can use this part of code to use non-network error handlings and make your code more readable

function handleErrors(response) {
    if (!response.ok) throw new Error(response.status);
    return response;
}

fetch("API URL")
    // handle network err/success
    .then(handleErrors)
    // use response of network on fetch Promise resolve
    .then(response => console.log("ok") )
    // handle fetch Promise error
    .catch(error => console.log(error) );

@AndreasGelever Yes !!! and I don't know why this answer got three +1 :D but it has an indirect answer in itself ;)
throw Error(response.status) should be throw new Error(response.status)

Andreas Gelever · Accepted Answer · 2019-06-18 14:26:26Z

19

In order to extract API message from server in case of some error, you have to use the following idiom (which doesn't lie on the surface though), see link

     fetch("http://localhost:8090/test/error", {
        method: 'GET',
        headers: {
            'Accept': 'application/json'
        }
    })
        .then(result => {
            //Here body is not ready yet, throw promise
            if (!result.ok) throw result;
            return result.json();
        })
        .then(result => {
            //Successful request processing
            console.log(result);
        }).catch(error => {
            //Here is still promise
            console.log(error);
            error.json().then((body) => {
                //Here is already the payload from API
                console.log(body);
            });
        })

Verbose - yes!, but does exactly what is needed.

edited Jun 18, 2019 at 14:26

answered Jun 18, 2019 at 14:20

Andreas Gelever

2,0463 gold badges22 silver badges28 bronze badges

2 Comments

fi11222 Over a year ago

Not working. It tells me : "error.json is not a function"

RcoderNY Over a year ago

@fi11222 That's bc this answer doesn't properly handle when fetch() itself throws an Error, like if the user is offline, or a networking error occurs, such as a DNS lookup failure. When that happens, there will be no json property on the error object. The error object will actually be a TypeError that goes directly to catch without stopping at any of the .thens. There are numerous ways to handle this, one is checking if json exists on error, another is if (error instanceof TypeError). That tells you if it was fetch that threw an Error or you just got a non-2xx response.

Collectives™ on Stack Overflow

Fetch API error handling

3 Answers 3

Comments

3 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

2 Comments

Linked

Related