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?

score 26 · Accepted Answer · answered Apr 11 '18 at 14:53

26

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

answered Apr 11 '18 at 14:53

Sébastien Le Gall

620
1
5
13

3

is this still valid for the current version of amplify? I don't seem to receive a `Error.response` attribute. – natee.biz Oct 25 '18 at 05:15
I am also having the issue where there is no `error.response` attribute as well, I think we might need to update this at some point – Ash Oldershaw Jan 27 '21 at 14:50
This worked for me, however now I have to update my entire app. Is there a way to send it from the server-side that way I can just use `error.message` instead of `error.response.data.message`. I am using amplify-express-server – Isaac I9 Jun 07 '21 at 14:13
I'm using Amplify v6.2.1 and this answer worked for me. – codeinaire Oct 10 '21 at 02:52

score 1 · Answer 2 · answered Sep 24 '20 at 05:37

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.

score -2 · Answer 3 · answered May 06 '21 at 10:34

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

How to handle api errors using aws-amplify?

3 Answers3