# How to customize an error response page

import DocButton from '~/components/webkit/DocButton.vue';
import Tabs from '~/components/tabs/Tabs'
import Apiv4Rollout from '~/includes/snippets/apiv4Rollout/en/snippet.mdx'

<Apiv4Rollout />

Find out how to configure your Azion application to show custom error pages for your user based on HTTP error statuses. For this guide you must already have an Application, a Connector and a Workload already setup.

There are separate instructions for API v3 using [legacy Error Responses](/en/documentation/products/build/applications/error-responses/) settings and API v4 using the new [Custom Pages](/en/documentation/products/secure/custom-pages/) product.

:::tip
If you're not sure which steps apply to your account, see [the Verify Your Account Migration guide](/en/documentation/products/guides/verify-account-migration/) to determine if your account has already been migrated.
:::

<Tabs client:visible>
    <Fragment slot="tab.consolecustompages">Console - Custom Pages</Fragment>
    <Fragment slot="tab.consoleerrorresponses">Console - Error Responses</Fragment>

<Fragment slot="panel.consolecustompages">

To create a Custom Page, follow the steps:

1. Access [Azion Console](/en/documentation/products/guides/how-to-access-azion-console/) > **Custom Pages**.
2. Click on the **+ Custom Page** button.
3. To customize specific error codes, click on the **+ Custom Page Code** button.
4. Select the **Page Code**. This represents the code recieved from the Connector when fetching your content.
5. Select the **Connector**.
6. In the **Page Path** field, you can add a *path* to an error page created in your origin.
7. Change the cache TTL in the **Response TTL** field.
8. In the **Response Custom Status Code** field, you can customize the HTTP status that will be received by the user.
9. Click the **Save** button.

Now to bind your Error Pages to your Workload, follow the steps:

1. Access [Azion Console](/en/documentation/products/guides/how-to-access-azion-console/) > **Workloads**.
2. In the Deployment Settings section, select the Custom Page you created.
3. Click the **Save** button.

Done. Your application will now display an error page with the new configuration.

</Fragment>
<Fragment slot="panel.consoleerrorresponses">

To customize an error response page, follow the steps:

1. Access [Azion Console](/en/documentation/products/guides/how-to-access-azion-console/) > **Applications**.
2. Select the application linked to the domain that needs the new error page.
3. Select the **Error Responses** tab.
4. The first **Status Code** field is disabled, but in **Default Response TTL** you can set the cache *time-to-live* (TTL), in seconds, of all error pages.
    - This first status code serves as a placeholder to cache the page in case an unexpected status is received.
5. To customize specific error codes, click the **+ Add Error Response** button.
6. In the new **Status Code** field, select the status code you want to customize.
7. Change the cache TTL in the **Custom Response TTL** field.
   - You can keep the same cache TTL set in the previous field or add a different TTL.
8. In the **Page Path** field, you can add a *path* to an error page created in the source.
9. In the **Response Status Code** field, you can customize the HTTP status that will be received by the user.
10. In the **Set Origin** section, you can define the origin of error page URIs.
    - You can configure their origins in the application's **Origins** tab.
11. Click the **Save** button.

Done. Your application will now display an error page with the new configuration.
</Fragment>
</Tabs>