How to send multiple Validation Errors to React using Flask and Marshmallow in Backend and Axios for React-Native in Frontend

Question

I am using Marshmallow to validate incoming fields for a simple put request. Now I am testing the error handling in the frontend to make sure I send the right error messages for the frontend.

I am usually sending data of type

{
 password: string,
 email: string
}

For now Marshmallow checks if the password is long enough and if the email is of format Email. I collect all errors in a expect statement and send it to the frontend like this:

    except ValidationError as err:
    return make_response(
        {"errors": err.messages}, status.HTTP_400_BAD_REQUEST
    )

with Postman giving me e.g. this response:

{
"errors": {
    "email": [
        "Missing data for required field."
    ],
    "password": [
        "Missing data for required field."
    ],
}

}

All error messages are therefore collected within the field errors and sent back to the frontend.

When the error is sent back to the frontend I catch my error and all I get is this object:

  Object {
  "data": null,
  "error": [Error: Request failed with status code 400],
   }

How do I correctly send or receive the

errors: err.messages

field in the frontend within a make_response error response?

Answer 1

I found the solution to the problem I had here: github.com/axios/axios/issues/960. Apparently you have to access the response object or the error object that is send to axios. There is no interceptor needed. What I changed was this line, when resolving the promise to:

try {
    resolved.data = await promise;
} catch (e) {
    resolved.error = e.response.data;
}

before that I accessed the error with:

try {
    resolved.data = await promise;
} catch (e) {
    resolved.error = e;
}

The errors are stored within the response.data.