The browser overwrites the content of the message after receiving the response

I have a little problem with DingoAPI and Vue.js when I'm trying to get my error message from response. I think the browser is replacing my custom message by the default one. Here is my code:

PHP script

if($request->readerId){
      Return succes (this works properly)
else{
      return $this->response->error(
           'No reader',
           400 //(or diffrent code)
      );
}

Vue.js script

await axios.post(API_URL + 'card/', {
            some data
        }, {
            headers: {
                headers
            },
        }).then(({data}) => {
            context.commit(SET_RESPONSE, data);
        }).catch((error) => {
            console.log(error.message);
            throw error
        })

When I'm trying to look on my message in the network tab I can see (so DingoAPI did it correctly):

{"message":"No reader","status_code":400}

But when I'm using console.log(error.message) or trying to show it on the page there is standard error message:

Request failed with status code 400

Is there a way to set error message with DingoAPI and catch it in my .js script? Maybe I need to write my own custom exception?

What you want is access to the data of the response from your error variable.

console.log(error.response.data.message); // No reader

Otherwise you can log error.response to see the object:

console.log(error.response);

If you wonder why it's printing Request failed with status code 400:

The problem is when the console.log tries to output the error, the string representation is printed, not the object structure, so you do not see the .response property.

Source: https://github.com/axios/axios/issues/960#issuecomment-309287911