Axios 422 error handling: how to prevent console message?

Question

I am creating an application: Laravel as backend and Vue as frontend. For responses in case of validation errors I use code 422 (according to the recommendations from this article).

My PHP code (form RegisterController):

if ($this->validator($request->all())->fails()) {
    return response()->json(['errors'=>$this->validator($request->all())->errors()], 422);
}

In my Vue application I am using Vuex. My SignUp action looks like that:

const actions = {
    ACTION_SIGN_UP: async (context, payload) => {
        Axios
            .post('/api/v1/register', payload)
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                if (error.response) {
                    console.log(error.response.data);
                    console.log(error.response.status);
                    console.log(error.response.headers);
                } else if (error.request) {
                    console.log(error.request);
                } else {
                    console.log('Error', error.message);
                }
                console.log(error.config);
            });
    }
};

The error is handled, but at the same time an error message appears in the console:

So how to prevent console message?

From the browsers point of view, a request is something that should get a response in a specific time window. If the timeout is reached and there was no response, the browser decides to log an error, because that's unexpected behavior. So, you need to be aware that there is no way to avoid any errors in the browser console. It's nothing bad though, why would you want to hide those? — toaster_fan, Aug 27 '20 at 15:11

score 0 · Answer 1 · answered Aug 30 '20 at 17:34

This topic has been discussed for a long time at this point, see this related SO post from 3 years ago where this is mentioned as a long debated point.

The gist of it is that this is intended functionality that should not (and cannot in Chromium) be changed by developers. These networking errors are being sent back from the backend resources being accessed and it is intended functionality for errors to be logged in the dev console.

This said, there is no reason to hide them, try opening up your dev console and checking out some of the biggest websites (twitter, facebook, etc.), you will most likely see some response errors logged.

Have a good one!

Axios 422 error handling: how to prevent console message?

1 Answers1