Skip to content
Merged
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
57 changes: 43 additions & 14 deletions src/content/docs/rules/custom-errors/edit-error-pages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,34 @@ sidebar:
order: 2
---

import { Details, DashButton, Steps } from "~/components";
import { Details, DashButton, Steps, Tabs, TabItem } from "~/components";

## Before you start
You can define custom [Error Pages](/rules/custom-errors/#error-pages) for the following errors and challenges:

- WAF block
- IP/Country block
- IP/Country challenge
- 500 class errors
- 1000 class errors
- Managed challenge / I'm Under Attack Mode
- Rate limiting block

<Details header="Older error page types">

You can only customize the error pages for the following error page types if you have customized their error pages in the past:

- Interactive Challenge
- JavaScript Challenge

These types of challenges are being discouraged in favor of managed challenges.

</Details>

For more information on the different types of Error Pages, refer to [Error page types](/rules/custom-errors/reference/error-page-types/).

To return custom error responses for requests that match specific conditions, use [Custom Error Rules](/rules/custom-errors/#custom-error-rules) instead.

## 1. Design your custom error page

Before defining a custom error page in your Cloudflare account, you will need to design and code that page. It can be hosted on your own web server or using a Cloudflare product like [Snippets](/rules/snippets/).

Expand Down Expand Up @@ -55,45 +80,49 @@ The following HTML code is an example error page for 5XX errors without styling:

---

## Update an error page in the dashboard
## 2. Update an error page in the dashboard

### Account-level custom error page
You can define an error page at the zone level or for your entire account. Zone-level error pages have priority over account-level error pages.

To update an account-level custom error page:
<Tabs> <TabItem label="Zone level">

To edit a zone-level custom error page:

<Steps>

1. In the Cloudflare dashboard, go to the **Settings** page.
1. In the Cloudflare dashboard, go to the **Error Pages** page.

<DashButton url="/?to=/:account/configurations" />
<DashButton url="/?to=/:account/:zone/error-pages" />

2. Go to **Error Pages** and identify your desired custom error page type.
2. Identify your desired custom error page type.
3. (Optional) To preview the current error page (default or custom), select the link in the **Show** column.
4. To edit the error page, select the three dots > **Edit** next to the page type you previously identified.
5. To use Cloudflare's default page, select **Cloudflare default page.** To provide a custom error page, select **Custom page** and enter the URL of the custom error page you created.
6. Select **Confirm**.

</Steps>

### Zone-level custom error page
</TabItem> <TabItem label="Account level">

To edit a zone-level custom error page:
To update an account-level custom error page:

<Steps>

1. In the Cloudflare dashboard, go to the **Error Pages** page.
1. In the Cloudflare dashboard, go to the **Settings** page.

<DashButton url="/?to=/:account/:zone/error-pages" />
<DashButton url="/?to=/:account/configurations" />

2. Identify your desired custom error page type.
2. Go to **Error Pages** and identify your desired custom error page type.
3. (Optional) To preview the current error page (default or custom), select the link in the **Show** column.
4. To edit the error page, select the three dots > **Edit** next to the page type you previously identified.
5. To use Cloudflare's default page, select **Cloudflare default page.** To provide a custom error page, select **Custom page** and enter the URL of the custom error page you created.
6. Select **Confirm**.

</Steps>

### Fetch custom error page again
</TabItem> </Tabs>

## Fetch custom error page again

After successfully setting the content of the custom error page in **Error Pages**, you can remove the page from your origin server.

Expand Down
2 changes: 1 addition & 1 deletion src/content/docs/rules/custom-errors/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -84,4 +84,4 @@ A custom error asset corresponds to a web resource such as an HTML web page (inc

Once the custom error asset is stored in Cloudflare's global network, the URL you initially provided no longer needs to be available. You can update an existing custom error asset by fetching it again. The metadata associated with each custom error asset includes the timestamp when the last fetch occurred, and this information is displayed in the dashboard.

You can use a custom error asset in one or more custom error rules in the same scope where you defined the asset (zone or account).
You can use a custom error asset in one or more [custom error rules](#custom-error-rules) in the same scope where you defined the asset (zone or account).
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { Type, MetaInfo } from "~/components";

## Custom error rules

Custom error rules define when a custom error gets triggered and the content that is served to visitors. Rule parameters are the following:
[Custom error rules](/rules/custom-errors/#custom-error-rules) define when a custom error gets triggered and the content that is served to visitors. Rule parameters are the following:

### Response type

Expand Down Expand Up @@ -71,7 +71,7 @@ If you create an HTML error response, make sure the `referrer` meta tag is not p

## Custom error assets

A custom error asset corresponds to a web resource such as an HTML web page (including any referenced images, CSS, and JavaScript code) that Cloudflare fetches and saves based on a URL you provide, to be served to visitors as an error page.
A [custom error asset](/rules/custom-errors/#custom-error-assets) corresponds to a web resource such as an HTML web page (including any referenced images, CSS, and JavaScript code) that Cloudflare fetches and saves based on a URL you provide, to be served to visitors as an error page.

Custom error assets have the following parameters:

Expand Down