can't seems to read the error message in react js(axios) from flask api (using jsonify)

Question

here is the line of code returning the error message from flask api

return jsonify(message='wrong username or password'),400

reading it from here in react js

  axios
    .post("http://127.0.0.1:5000/authentication/login", body)
    .then((res) => {
        console.log(res)
    })
    .catch((error) => {
      console.log(error);
    });

and this is what i see in the console

{"message":"Request failed with status code 400","name":"Error","stack":"Error: Request failed with status code 400\n    at createError (http://localhost:3000/static/js/1.chunk.js:854:15)\n    at settle (http://localhost:3000/static/js/1.chunk.js:1075:12)\n    at XMLHttpRequest.handleLoad (http://localhost:3000/static/js/1.chunk.js:329:7)","config":{"url":"http://127.0.0.1:5000/auth/login","method":"post","data":"{\"phone\":\"\",\"password\":\"\"}","headers":{"Accept":"application/json, text/plain, */*","Content-Type":"application/json"},"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1}}

The results doesn't not contain the custom message 'wrong username or password'

Answer 1

have actually gotten the solution, something simple

the error data can be accessed from

console.log(error.response.data);

Answer 2

flask by default returns html page instead of json when error is thrown. to make run return normal json as with 200's responses write this in your flask app:

from werkzeug.exceptions import HTTPException

@app.errorhandler(HTTPException)
def handle_exception(e):
    """Return JSON instead of HTML for HTTP errors."""
    print(e)
    # start with the correct headers and status code from the error
    response = e.get_response()
    # replace the body with JSON
    response.data = json.dumps({
        "code": e.code,
        "name": e.name,
        "description": e.description,
    })
    response.content_type = "application/json"
    return response

then for example for such return in flask

...
return json.dumps(str(e)), 409

and then you can catch in your js:

...
    }).then(function(response) {
      ...
    
    }).catch((error) => {
      console.log(error.response.data); // will log your error as string
    })