Error bubbles to console even though it is handled

Question

I am using isomorphic-fetch to perform AJAX requests from my react-redux application. In my api middleware I have the following function which calls the external resource:

import fetch from 'isomorphic-fetch';

function callApi({ endpoint, method, body, params = {} }) {
    let route = generateRoute(endpoint, params);
    return fetch(route, generateFetchOptions(method, body))
        .then(response =>  {
            if (!response.ok) {
                return Promise.reject(response);
            }

            return response.json();
        });
}

The above function is called by the following piece of code:

return callApi(callAPI).then(
    response => next(actionWith({
        response,
        type: successType,
        statusCode: 200
    })),
    error => error.json().then(errorObject => {
        return next(actionWith({
            type: failureType,
            statusCode: errorObject.statusCode,
            error: errorObject.message || 'Something bad happened'
        }));
    })
);

If I reject with Promise.reject(response) the error is being handled by the error handler, but for some reason the error also bubbles to the browser console (in my case Chrome).

Here is a screenshot from the console which shows what is happening (api.js:34 is the second line of the callApi method):

Which error specifically? The `response` you're rejecting with isn't even an `Error`. — Bergi, Dec 26 '16 at 15:23
Any error which I return as Promise.reject. I do handle them but they somehow manage to get to the console — David Tzoor, Dec 26 '16 at 15:25
Please post a screenshot of your console. The response object is not an error and shouldn't be shown as such on the console. However, there are many other things in your code that could go wrong and cause an error that would be shown there. — Bergi, Dec 26 '16 at 15:27
`error` is an object with a function called `json` which returns a promise. It is part of the `fetch` API. — David Tzoor, Jan 01 '17 at 14:42
@Bergi I added a screenshot of the console. Hope this somehow helps. — David Tzoor, Jan 01 '17 at 14:46
That's not an error from any javascript, that's just the browser telling you by default that there was a http error (not found resource). — Bergi, Jan 01 '17 at 15:06

score 2 · Answer 1 · edited May 23 '17 at 11:53

This is the usual behavior (in probably every browser?) when hitting an error during an HTTP request (no matter whether a linked image cannot be found, or an XHR fails). No matter if and how you handle those errors, they will always be logged to the console. There is no way to suppress this behavior.

References:

Error bubbles to console even though it is handled

1 Answers1