Issue with Amplify Error Handling in v6

NiharikaBaliboyna9 commented 10 months ago

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

REST API

Amplify Categories

api

Environment information

``` # Put output below this line System: OS: macOS 13.6.3 CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz Memory: 45.94 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.7.0 - ~/.nvm/versions/node/v20.7.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 10.1.0 - ~/.nvm/versions/node/v20.7.0/bin/npm Browsers: Chrome: 120.0.6099.129 Safari: 16.6 npmPackages: @testing-library/jest-dom: ^5.17.0 => 5.17.0 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^13.5.0 => 13.5.0 aws-amplify: ^6.0.9 => 6.0.9 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 react-scripts: 5.0.1 => 5.0.1 web-vitals: ^2.1.4 => 2.1.4 npmGlobalPackages: @aws-amplify/cli: 12.8.2 corepack: 0.19.0 n: 9.2.0 npm: 10.1.0 typescript: 5.3.3 ```

Describe the bug

When trying to parse out the repsonse from errors that are returned from a rest api and amplify is wrapping our errors in an

UnknownError: Unknown error
    at buildRestApiServiceError (serviceError.ts:9:26)
    at parseRestApiServiceError (serviceError.ts:22:26)
    at async job (createCancellableOperation.ts:23:23)
    at async HttpService.get (index.ts?t=1702936464036:14:24)

This prevents us from being able to access the error message body to reflect the issue to the frontend.

Expected behavior

In v5 the following is logged

data : "this is test error "
headers : AxiosHeaders {content-length: '28', content-type: 'application/json'}
request : XMLHttpRequest
onabort : ƒ handleAbort()
onerror : ƒ handleError()
onload: null
onloadend: ƒ onloadend()
onloadstart: null
onprogress: null
onreadystatechange: null
ontimeout: ƒ handleTimeout()
readyState: 4
response: "\"this is test error\""
responseText: "\"this is test error by\""
responseType: ""
responseURL: "https://abcde.execute-api.us-west-1.amazonaws.com/dev/items?name=param"
responseXML: null
status: 400
statusText: ""
timeout: 0
upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …}
withCredentials: false

Reproduction steps

v6

Add a REST API in amplify application

Set the lambda function to throw an error.

try{
    throw new Error("this is test error");
}
catch(error){
     return {
    statusCode: 400,
    body: JSON.stringify(error.message),
//  Uncomment below to enable CORS requests
 headers: {
     "Access-Control-Allow-Origin": "*",
     "Access-Control-Allow-Headers": "*"
 },
};
}

Next, while making GET request from the amplify application, the following error message will be given.

UnknownError: Unknown error
at buildRestApiServiceError (serviceError.ts:9:1)
at parseRestApiServiceError (serviceError.ts:22:1)
at async job (createCancellableOperation.ts:24:1)
at async getTodo (App.js:31:1)

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line ```

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

israx commented 10 months ago

Hello @NiharikaBaliboyna9 . Sorry for any inconvenience with the library. Can you trying accessing the underlyingError ? E.g error.underlyingError

dorin-moldoveanu-assist commented 10 months ago

Hey

The lambda function needs to return an object containing message and code and this will map accordingly to what aws-amplify has defined in their lib.

Check this -> https://github.com/aws-amplify/amplify-js/blob/main/packages/core/src/clients/serde/json.ts#L26-L37

Also, it might remain an open issue since, if you do send the x-amzn-errortype header, in the react app, you will still not be able to grab it since it's being uppercased. ( So as a resolution, the header should also be checked against uppercase version, like X-AMZN-ERRORTYPE ).

PS:...but as I said before, you can send the code property in the mean time ( while the header issue is solved )

cwomack commented 10 months ago

@NiharikaBaliboyna9, thanks for opening this issue. It looks like it's a duplicate of the previously opened #12730 and a known bug that we are already tracking and working on a fix for!

I'll close this issue as a duplicate (since the other issue has more context/comments) and ask that any additional comments be made there

CC: @dorin-moldoveanu-assist, and thank you for that additional context!

aws-amplify / amplify-js