如何使用 aws-amplify 处理 api 错误？

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-amplify use 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

Answer 2

I also faced the similar issues, It showed the default error message "Request failed with status code 400", instead of the message that is returned from API.

I logged the Error object and it did not show the response attribute in it. But we do have response attribute. I tried logging the Error.response and it did contain the response sent from the API.

Answer 3

Just figured out this by going through the 'Cancel API requests' Amplify docs .

From what I can see this is the contents of the error object returned by the API call:

Heres what I am doing to just print out the error, obviously you would do a lot more here but its a good start.

async uploadUser(state, payload) {

const promise = API.graphql({
    query: createUser,
    variables: { input: payload },
});

try {
    await promise;
} catch (error) {
    // Print out the actual error given back to us.
    console.log(error.errors[0].message);
    
    // If the error is because the request was cancelled we can confirm here.
    if (API.isCancel(error)) {

        // handle user cancellation logic.
        console.log(error.message);
        
    }
}

Hope that helps 😃