Handling failed API call in fetch

Question

I have the following code that makes an API call and based on HTTP response, it dispatches certain actions in my redux reducer.

The problem is that if the API call fails, it shows it in the console even though the part of the code that handles unsuccessful calls executes fine. How can I prevent that? I'm already handling unsuccessful API calls so nothing should show up in the console.

export const someApiCall = () => {

    return (dispatch) => fetch('/api/somefunction', fetchOptionsGet())
        .then((response) => {
            if(response.ok) {
                // Success. Dispatch some actions
            } else {
                // Failed call. Dispatch some other actions
            }
        })
}

Possible duplicate of [Suppress Chrome 'Failed to load resource' messages in console](https://stackoverflow.com/questions/4500741/suppress-chrome-failed-to-load-resource-messages-in-console) — Bergi, Nov 24 '18 at 16:48

score 0 · Accepted Answer · answered Jan 03 '17 at 01:10

0

There is nothing wrong with this, don't worry. The browser still display http errors in console even though you are dealing with this errors in your http library.

answered Jan 03 '17 at 01:10

Dherik

17,757
11
115
164

score 0 · Answer 2 · answered Jan 03 '17 at 06:10

As @Dherik told, It is the default functionality of the browsers.

But if you are worried about the HTTP errors displayed in the console, then you can handle this to not display in the console by making changes to your API.

So, Redesign your error flow to return a status code of 2XX with an error code and message in the response body and handle it as you do now.

Handling failed API call in fetch

2 Answers2