Issues accessing response body when API Gateway returns 400 #8806
Comments
|
This also seems to be a very common customer issue per a simple Google search |
jamesaucode
added
pending-triage
|
Bumping this -- any update? |
|
I can see my error response when calling a customer HTTP API endpoint. There might be something missing in REST API endpoint setting. |
|
any update? |
|
|
|
Hi @dpilch , I'm having the same behavior in my application. Every time I call an endpoint and the HTTP code of the response is >=300 I just get a message saying the error code (eg Request failed with status code 404) and I don't have access to the payload. I'll use the post method as an example. based on what I understand reading the code of this library the problem occurs because on line 413 of the RestClient.ts file. ( ) .When axios returns an error, the code throws this error to the RestAPI.ts file, line 158. amplify-js/packages/api-rest/src/RestAPI.ts Line 158 in 41ab57a I believe a solution would be to return the err object instead of the err.message when the response parameter is true, something like: return Promise.reject(initParams.isAllResponse ? err : err.message) I tested with the latest version of axios it always throws an error when the http code is >= 300, but I saw in the documentation that it is a configurable behavior through the validateStatus function https://axios -http.com/docs/handling_errors. I used this piece of code to test. if you comment the validateStatus and call a URL that returns http 404 for example, it will fall into the catch block. it would also be a solution to add this behavior to axios, but I think it has more potential to cause problems for those who already use the lib as it is. (or exposing some way to inject parameters to axios instance, there is also another open issue about it.) In my scenario the problem is not with CORS, but this unexpected behavior forced me to change my API responses to code 200 and payload information in order to map the error in the application and continue using this component. for example, the way the code is written at the moment, the only way I found to know an 404 error happened would be parsing the string "Request failed with status code 404". If I can help in any way to solve the problem, let me know. |
|
Hi, |
|
I am using 6.0.9 version and the problem persist. It is related to this other issue #6661. So when the API response with status code greater than or equal to 300 the following code is executed: export const parseJsonError: ErrorParser = async (response?: HttpResponse) => {
if (!response || response.statusCode < 300) {
return;
}
const body = await parseJsonBody(response);
const sanitizeErrorCode = (rawValue: string | number): string => {
const [cleanValue] = rawValue.toString().split(/[\,\:]+/);
if (cleanValue.includes('#')) {
return cleanValue.split('#')[1];
}
return cleanValue;
};
const code = sanitizeErrorCode(
response.headers['x-amzn-errortype'] ??
body.code ??
body.__type ??
'UnknownError'
);
const message = body.message ?? body.Message ?? 'Unknown error';
const error = new Error(message);
return Object.assign(error, {
name: code,
$metadata: parseMetadata(response),
});
};
export const parseJsonBody = async (response: HttpResponse): Promise<any> => {
if (!response.body) {
throw new Error('Missing response payload');
}
const output = await response.body.json();
return Object.assign(output, {
$metadata: parseMetadata(response),
});
};(Both functions are in the same file: In the parseJsonError function the only keys that are being used from the So the only way I have found to handle the error on the frontend is that the backend response looks like this: {
"message": "The error is..."
}I hope this can be useful to solve the problem and to those who need a temporary solution. |
|
Is there any other way to get the content of the body of the error other than changing the backend code? |
|
We've released a fix addressing this and #12943 with Amplify JS v6.0.15. Closing this but if you are still experiencing issues related to accessing the body of error responses, please open a new issue! Also, please refer to our documentation for more info on accessing http responses: https://docs.amplify.aws/react/build-a-backend/restapi/fetch-data/#access-http-response-from-errors |
Before opening, please confirm:
JavaScript Framework
React
Amplify APIs
REST API
Amplify Categories
api
Environment information
Describe the bug
When calling API.get() on a route with CORS enabled and "Default 4xx" configured in the API Gateway console, the 400 response returns a value in the network tab but there is no data on
error.response.datain the catch block. This issue has been discussed ad nauseam around the internet, including here:#6661
Additionally, Amplify in the docs mentions it is a wrapper on Axios, and the issue is documented on the Axios repo here. It does not seem like the underlying Axios issue has ever been resolved
axios/axios#960
Expected behavior
We would expect to be able to access the error response body via
error.response.data.Reproduction steps
Follow the steps as outlined here:
#6661
Code Snippet
Log output
No response
aws-exports.js
No response
Manual configuration
No response
Additional configuration
No response
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
No response
The text was updated successfully, but these errors were encountered: