Skip to content

feat: add error handling page for Storage & Auth #8288

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/directory/directory.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,9 @@ export const directory = {
},
{
path: 'src/pages/[platform]/build-a-backend/auth/connect-your-frontend/multi-step-sign-in/index.mdx'
},
{
path: 'src/pages/[platform]/build-a-backend/auth/connect-your-frontend/error-handling/index.mdx'
}
]
},
Expand Down Expand Up @@ -390,6 +393,9 @@ export const directory = {
},
{
path: 'src/pages/[platform]/build-a-backend/storage/manage-with-amplify-console/index.mdx'
},
{
path: 'src/pages/[platform]/build-a-backend/storage/error-handling/index.mdx'
}
]
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';

export const meta = {
title: 'Error handling',
description:
'Handling errors from Amplify Auth',
platforms: [
'angular',
'javascript',
'nextjs',
'react',
'vue',
'react-native'
]
};

export const getStaticPaths = async () => {
return getCustomStaticPath(meta.platforms);
};

export function getStaticProps(context) {
return {
props: {
platform: context.params.platform,
meta
}
};
}

The runtime errors thrown by the Amplify Auth APIs may contain additional information helpful with identifying root-causes of problems. This information is available if the error is an instance of `AuthError`.

```javascript
import { AuthError, confirmSignUp } from 'aws-amplify/auth';

try {
const result = await confirmSignUp({
username: "[email protected]",
confirmationCode: "123456"
});
} catch (error) {
if (error instanceof AuthError) {
console.error('Auth error', error.name);
if (error.metadata) {
console.error('request ID: ', error.metadata.requestId);
}
}
// Further error handling...
}
```

`AuthError` may also be thrown by the Storage APIs.

## All `AuthError` properties

Property | Type | Required | Description |
| -- | -- | -- | ----------- |
| name | String | Required | Client-side error name or server-side error code. |
| message | String | Required | Error message. |
| stack | String | Optional | Stack trace. |
| recoverySuggestion | String | Optional | Common cause of the error and human-readable recommendation to fix the error.|
| metadata | Object | Optional | Bag of additional error information. |
| metadata.httpStatusCode | number | Optional | The response HTTP status code if the error is caused by erroneous HTTP response. |
| metadata.requestId | String | Optional | The request ID used by AWS when [contacting AWS Support](https://docs.aws.amazon.com/AmazonS3/latest/API/get-request-ids.html). |
| metadata.extendedRequestId | String | Optional | The extended request ID used by AWS when [contacting AWS Support](https://docs.aws.amazon.com/AmazonS3/latest/API/get-request-ids.html). |


Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';

export const meta = {
title: 'Error handling',
description:
'Handling errors from Amplify Storage',
platforms: [
'angular',
'javascript',
'nextjs',
'react',
'vue',
'react-native'
]
};

export const getStaticPaths = async () => {
return getCustomStaticPath(meta.platforms);
};

export function getStaticProps(context) {
return {
props: {
platform: context.params.platform,
meta
}
};
}

The runtime errors thrown by the Amplify Storage APIs may contain additional information helpful with identifying root-causes of problems. This information is available if the error is an instance of `StorageError`.

```javascript
import { StorageError, uploadData } from 'aws-amplify/storage';

try {
const result = await uploadData({
path: "album/2024/1.jpg",
data: file,
}).result;
console.log('Succeeded: ', result);
} catch (error) {
if (error instanceof StorageError) {
console.error('Storage error', error.name);
if (error.metadata) {
console.error('request ID: ', error.metadata.requestId);
}
}
// Further error handling...
}
```

`AuthError` may also be thrown by the Storage APIs.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe add a bit more detail here. Feels weird to say this and then show a table of the StorageError properties.


## All `StorageError` properties

Property | Type | Required | Description |
| -- | -- | -- | ----------- |
| name | String | Required | Client-side error name or server-side error code. |
| message | String | Required | Error message. |
| stack | String | Optional | Stack trace. |
| recoverySuggestion | String | Optional | Common cause of the error and human-readable recommendation to fix the error.|
| metadata | Object | Optional | Bag of additional error information. |
| metadata.httpStatusCode | number | Optional | The response HTTP status code if the error is caused by erroneous HTTP response. |
| metadata.requestId | String | Optional | The request ID used by AWS when [contacting AWS Support](https://docs.aws.amazon.com/AmazonS3/latest/API/get-request-ids.html). |
| metadata.extendedRequestId | String | Optional | The extended request ID used by AWS when [contacting AWS Support](https://docs.aws.amazon.com/AmazonS3/latest/API/get-request-ids.html). |