---
title: Creating error pages with custom responses
summary: null
url: >-
  https://www.fastly.com/documentation/guides/full-site-delivery/responses/creating-error-pages-with-custom-responses
---


The default error responses served by Fastly can be jarring for your users, especially when using Fastly for consumer applications. To mitigate this, consider configuring your service to present them with a custom page or a synthetic response when Fastly receives an error code from your origin.

Fastly offers two quick configuration options for [creating 404 and 503 error pages](/guides/full-site-delivery/responses/creating-error-pages-with-custom-responses#creating-error-pages-for-404-and-503-errors) directly in the Fastly control panel, but you can also use [create custom error pages for other status codes](/guides/full-site-delivery/responses/creating-error-pages-with-custom-responses#creating-error-pages-for-other-status-codes). If you're working with large blocks of content when styling your error pages, consider [creating custom responses using VCL snippets](/guides/full-site-delivery/responses/creating-error-pages-with-custom-responses#creating-custom-responses-about-fastly-vcl-snippets) instead.

> **HINT:** Instead of an error message, Fastly can optionally serve stale content when there is a problem with your origin server. For more information, check out our guide on [serving stale content](/guides/full-site-delivery/performance/serving-stale-content).

## Creating error pages for 404 and 503 errors

To create error pages with custom responses for 404 and 503 errors, follow the steps below:

1. <Partial name='step-login' inline />
1. <Partial name='step-select-service' inline />
1. <Partial name='step-click-edit' inline />
1. <Partial name='step-click-content-tab' inline />
1. To create error pages with custom responses for 404 and 503 errors, click the **404 page** and **503 page** switches.

   ![404 and 503 error quick config fields](/img/404-503-quick-config.png)

1. In the **HTML response** fields, customize the response for the 404 and 503 error pages.
1. Click **Save** to save the responses.
1. <Partial name='step-activate-deploy' inline />

## Creating error pages for other status codes

You can also create error pages for other HTTP status codes. We provide example HTML, but you can use any HTML you see fit. The response object will require that you use a condition in order for a custom error page to be served, otherwise a generic error page will be served.

To create and configure an error page for an HTTP status code other than 404 or 503, follow the steps below to create the custom [response](/guides/full-site-delivery/responses/responses-tutorial) and the [condition](/guides/full-site-delivery/conditions/about-conditions) under which it should be applied using the Fastly control panel:

1. <Partial name='step-login' inline />
1. <Partial name='step-select-service' inline />
1. <Partial name='step-click-edit' inline />
1. <Partial name='step-click-content-tab' inline />
1. Click **Set up advanced response**.

   ![the Create a synthetic response page](/img/new-synthetic-response-custom-404.png)

1. Fill out the **Create a synthetic response** fields as follows:
   * In the **Name** field, enter a name for the response you're creating (e.g., `Custom 404`).
   * From the **Status** menu, select the appropriate status (e.g., `404 Not Found`).
   * In the **MIME Type** field, specify the Content-Type of the response (e.g., `text/html`).
   * In the **Response** field, enter the content to be served when delivering a response.

1. Click **Create**.
1. Click the **Attach a condition** link to the right of the name of your new response.

    ![the New Condition window](/img/new-404-condition.png)

1. Fill out the **Create a new condition** fields as follows:
   * From the **Type** menu, select the type of condition you're creating (e.g., `Cache`).
   * In the **Name** field, enter a name for the condition you're creating (e.g., `404 Not Found`).
   * In the **Apply if** field, enter the condition under which the new response occurs in the following format:

    ```
    beresp.status == ###
    ```

    where `###` equals the status condition you're creating the response for. For example, using the value of `beresp.status == 404` in the **Apply if** field here tells Fastly to use this response object whenever origin servers return a 404 status. (See the [Conditions guides](/guides/full-site-delivery/conditions/about-conditions) for more detailed information on conditions.)

1. Click **Save and apply to**.
1. <Partial name='step-activate-deploy' inline /> Fastly will now serve your custom HTML error page when required.

## Creating custom responses using VCL snippets

To create the custom response using [VCL snippets](/guides/full-site-delivery/fastly-vcl/vcl-snippets/using-vcl-snippets), create two separate snippets: one to trigger the condition for an internal Fastly error and the second to create the response to that error.

### Create a VCL Snippet for a condition

1. <Partial name='step-login' inline />
1. <Partial name='step-select-service' inline />
1. <Partial name='step-click-edit' inline />
1. Click **VCL**.
1. Click **VCL snippets**.
1. Click **Add snippet**.
1. Fill out the **Add VCL snippet** fields as follows:
   * Using the **Type** controls, select **Regular** to create a regular VCL snippet.
   * In the **Name** field, enter an appropriate name (e.g., `Catch Error for Custom Response`).
   * Using the **Placement** controls, select **Within subroutine**.
   * From the **Subroutine** menu, select **fetch (`vcl_fetch`)**.
   * *(Optional)* In the **Priority** field, enter the order in which you want the snippet to execute. Lower numbers execute first.
   * In the VCL editor, add the following code:

     ```vcl
     if (beresp.status == ###) {
       error 600 "### Custom Response"
     }
     ```

     where `###` is the status condition you're creating the response for. The error code used here, `600`, is a random number that doesn't conflict with standard HTTP error codes. Consider using custom error code numbers in the 600’s or 700’s to avoid confusion.

1. Click **Add** to create the snippet.

### Create a VCL Snippet for a synthetic response

1. Click **VCL snippets**.
1. Click **Add snippet**.
1. Fill out the **Add VCL snippet** fields as follows:
   * Using the **Type** controls, select **Regular** to create a regular VCL snippet.
   * In the **Name** field, enter an appropriate name (e.g., `Create Custom Response Synthetic`).
   * Using the **Placement** controls, select **Within subroutine**.
   * From the **Subroutine** menu, select **error (`vcl_error`)**.
   * *(Optional)* In the **Priority** field, enter the order in which you want the snippet to execute. Lower numbers execute first.
   * In the VCL editor, add the following code:

     ```vcl
     if (obj.status == 600) {
       set obj.status = 404;
       set obj.response = "Not Found";
       synthetic {"
         <html>
           <head>
           </head>
           <body>
             <h1>Custom Response</h1>
           </body>
         </html>
       "};
       return(deliver);
     }
     ```

     replacing `Custom Response` with your custom, synthetic response. This VCL tells Fastly to respond with your custom response if a request for an object meets the condition you created in `vcl_fetch`.

     > **HINT:** Synthetic responses don't have a character limit, but including them in the custom VCL file may push that file over its [size limit](https://docs.fastly.com/products/network-services-resource-limits#vcl-and-configuration-limits).

1. Click **Add** to create the snippet.
1. <Partial name='step-activate-deploy' inline />

## Related content

* [Response object API documentation](/reference/api/vcl-services/response-object/)