How to handle api errors using aws-amplify?

Question

I'm currently trying to POST data to my aws lambda functions triggered by aws api-gateway using the aws-amplify react lib.

Here is the code :

API.post("snippets","snippets/", {
        body: data,
    }).then(response => response).catch(console.log(err))

In the main case, everything is OK.

But my lambda function is design to validate the input data and return a status code 400 with a returned payload looking like that :

{
    "errors": [
        {
            "field": "title",
            "message": "This field is required"
        }
    ]
}

I would like to catch those errors in order to display them in the frontend but aws-amplify seems to have an undocumented behavior.

By default, status code 400 returned are throw with a default error message :

Error: Request failed with status code 400
    at createError (createError.js:16)
    at settle (settle.js:18)
    at XMLHttpRequest.handleLoad (xhr.js:77)

Is there a way to get the returned payload instead of this magical error?

Answer 1

It turns out that under the hood, aws-amplifyuse Axios to make http calls.

When using Axios, you have to console.log(error.response): https://github.com/axios/axios/issues/960

Here is the fix I've made :

API.post("snippets","snippets/", {
        body: data,
    }).then(response => response).catch(error => console.log(error.response.data))

A Pull Request on the aws-amplify documentation is open : https://github.com/aws/aws-amplify/pull/633