生成 Cloudflare 风格错误页

站点挂了之后，用户最先看到的往往是一张冷冰冰的默认错误页。如果你想要那种大家一眼就认识的「Browser / Cloudflare / Host」三栏状态页，可以用开源项目 donlon/cloudflare-error-page 自己生成。它不是 Cloudflare 官方工具，但视觉上很接近那套经典错误页，也能嵌进自己的站点。

它能做什么

这个生成器会输出一整页 HTML：标题、错误码、三栏状态（浏览器 / Cloudflare / 源站）、Ray ID、客户端 IP，以及「发生了什么 / 我能做什么」两段说明。图标和样式会内联进单个文件，不需要再挂额外静态资源。

在线可视化编辑器在 magicalforest.io/cferr/editor，调完参数就能预览和导出。

Node.js / Express 快速接入

安装包：

npm install cloudflare-error-page

在 Express 错误中间件里调用 render：

import express from 'express';
import { render as render_cf_error_page } from 'cloudflare-error-page';

const app = express();

app.use((err, req, res, next) => {
  res.status(500).send(render_cf_error_page({
    title: 'Internal server error',
    error_code: '500',
    what_happened: err.toString(),
    what_can_i_do: 'Please try again in a few minutes.',
  }));
});

app.listen(3000);

生产里可以把 what_happened 换成更友好的固定文案，把真实异常只写进日志，避免把堆栈直接暴露给用户。

Python / Flask 用法

pip install cloudflare-error-page

from cloudflare_error_page import render as render_cf_error_page

html = render_cf_error_page({
    'browser_status': {'status': 'ok'},
    'cloudflare_status': {
        'status': 'error',
        'status_text': 'Error',
    },
    'host_status': {
        'status': 'ok',
        'location': 'example.com',
    },
    'error_source': 'cloudflare',
    'what_happened': '<p>Internal server error on the network.</p>',
    'what_can_i_do': '<p>Please try again in a few minutes.</p>',
})

with open('error.html', 'w') as f:
    f.write(html)

仓库里有 Flask 示例和多个 live demo，比如默认 500 页，以及把三栏全标成出错的「灾难性基础设施故障」玩笑页。

常用参数

完整参数很多，日常够用的是这些：

• title / error_code：大标题和状态码
• browser_status / cloudflare_status / host_status：每栏的 status（ok 或 error）、文案和颜色
• error_source：红叉打在哪一栏，可选 browser、cloudflare、host
• what_happened / what_can_i_do：底部两段说明（支持 HTML）
• ray_id / client_ip：不填会显示随机值；想更真一点，可以从请求头 Cf-Ray 拆出 Ray ID 和机房三字码

Cf-Ray 形如 230b030023ae2822-SJC，后半段是数据中心代码，城市名可以对照 cloudflare-colo-list 查。

部署到 Cloudflare Pages 的 React 版

如果更想静态站、零后端，可以看 oftx/cloudflare-error-page。它在原项目基础上做了 React / Vite 实现，可直接接到 Cloudflare Pages。构建时把 Root directory 设成 react-app，用环境变量改标题、错误码和三栏状态，不用改代码。

使用注意

项目自己也写得很清楚：页面外观贴近 Cloudflare，商标和假装官方都有法律风险。自己玩、做演示或明显改成玩笑文案没问题；真要挂到生产自定义错误页，最好改掉文案，让用户知道这是你自己的页。更重要的是，别让错误页长期挂着，修好源站才是正经事。

小结

想快速做出熟悉的 Cloudflare 风格错误页：Node 或 Python 安装同名包即可，嫌写代码麻烦就用在线编辑器。参数主要是三栏状态、error_source 和两段说明；要更真，再补上 Cf-Ray 和客户端 IP。React Pages 场景可以直接用 oftx 那个 fork。