Show all your application error using Cloudflare Error Page
Cloudflare Error Page Generator
📢 Update (2025/12/09): All icons used in the error page have been fully redrawn as vector assets. These icons along with the stylesheet are also inlined into a single file of the error page, eliminating any need of hosting additional resources and ensuring better experience for you and your end users.
What does this project do?
This project creates customized error pages that mimics the well-known Cloudflare error page. You can also embed it into your website.
Online Editor
Here’s an online editor to create customized error pages. Try it out here.
(And thank @rynzland for the idea!)
Quickstart for Programmers
Python
Install cloudflare-error-page with pip.
pip install git+https://github.com/donlon/cloudflare-error-page.git
Then you can generate an error page with the render function. (example.py)
‘,
‘what_can_i_do’: ‘
Please try again in a few minutes.
‘,
})
with open(‘error.html’, ‘w’) as f:
f.write(error_page)
webbrowser.open(‘error.html’)”>
import webbrowser from cloudflare_error_page import render as render_cf_error_page # This function renders an error page based on the input parameters error_page = render_cf_error_page({ # Browser status is ok 'browser_status': { "status": 'ok', }, # Cloudflare status is error 'cloudflare_status': { "status": 'error', "status_text": 'Error', }, # Host status is also ok 'host_status': { "status": 'ok', "location": 'example.com', }, # can be 'browser', 'cloudflare', or 'host' 'error_source': 'cloudflare', # Texts shown in the bottom of the page 'what_happened': 'There is an internal server error on Cloudflare's network.
', 'what_can_i_do': 'Please try again in a few minutes.
', }) with open('error.html', 'w') as f: f.write(error_page) webbrowser.open('error.html')
You can also see live demo here.
A demo server using Flask is also available in flask_demo.py.
Node.js
PHP
More Examples
Catastrophic infrastructure failure
“,
“what_can_i_do”: “
Please try again in a few years.
“,
}”>
params = { "title": "Catastrophic infrastructure failure", "more_information": { "for": "no information", }, "browser_status": { "status": "error", "status_text": "Out of Memory", }, "cloudflare_status": { "status": "error", "location": "Everywhere", "status_text": "Error", }, "host_status": { "status": "error", "location": "example.com", "status_text": "On Fire", }, "error_source": "cloudflare", "what_happened": "There is a catastrophic failure.
", "what_can_i_do": "Please try again in a few years.
", }
Web server is working
“,
“what_can_i_do”: “
Visit the site before it crashes someday.
“,
}”>
params = { "title": "Web server is working", "error_code": 200, "more_information": { "hidden": True, }, "browser_status": { "status": "ok", "status_text": "Seems Working", }, "cloudflare_status": { "status": "ok", "status_text": "Often Working", }, "host_status": { "status": "ok", "location": "example.com", "status_text": "Almost Working", }, "error_source": "host", "what_happened": "This site is still working. And it looks great.
", "what_can_i_do": "Visit the site before it crashes someday.
", }
FAQ
How to show real user IP / Cloudflare Ray ID / data center location in the error page so that it looks more realistic?
Ray ID and user IP field in the error page can be set by ray_id and client_ip properties in the params argument passed to the render function. The real Cloudflare Ray ID and the data center location of current request can be extracted from the Cf-Ray request header (e.g. Cf-Ray: 230b030023ae2822-SJC). Detailed description of this header can be found in Cloudflare documentation.
To lookup the city name of the data center corresponding to the three letter code in the header, you can use a location list from here
The demo server runs in our website did handle these. Take a look at this file for reference.
See also
-
cloudflare-error-page-3th.pages.dev:
Error page of every HTTP status code (reload to show random page).
-
React reimplementation of the original page, and can be deployed directly to Cloudflare Pages.
Full Parameter Reference
“,
“what_can_i_do”: “
Please try again in a few minutes.
“,
“ray_id”: ‘0123456789abcdef’, // if not set, random hex string is shown
“client_ip”: ‘1.1.1.1’,
// Configuration for ‘Performance & security by …’ in the footer
“perf_sec_by”: {
“text”: “Cloudflare”,
“link”: “https://www.cloudflare.com/”,
},
}”>
{ "html_title": "cloudflare.com | 500: Internal server error", "title": "Internal server error", "error_code": 500, "time": "2025-11-18 12:34:56 UTC", // if not set, current UTC time is shown // Configuration for "Visit ... for more information" line "more_information": { "hidden": false, "text": "cloudflare.com", "link": "https://www.cloudflare.com/", "for": "more information", }, // Configuration for the Browser/Cloudflare/Host status "browser_status": { "status": "ok", // "ok" or "error" "location": "You", "name": "Browser", "status_text": "Working", "status_text_color": "#9bca3e", }, "cloudflare_status": { "status": "error", "location": "Cloud", "name": "Cloudflare", "status_text": "Error", "status_text_color": "#bd2426", }, "host_status": { "status": "ok", "location": "The Site", "name": "Host", "status_text": "Working", "status_text_color": "#9bca3e", }, "error_source": "host", // Position of the error indicator, can be "browser", "cloudflare", or "host" "what_happened": "There is an internal server error on Cloudflare's network.
", "what_can_i_do": "Please try again in a few minutes.
", "ray_id": '0123456789abcdef', // if not set, random hex string is shown "client_ip": '1.1.1.1', // Configuration for 'Performance & security by ...' in the footer "perf_sec_by": { "text": "Cloudflare", "link": "https://www.cloudflare.com/", }, }
