[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-73601":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":27,"readmeContent":28,"aiSummary":29,"trendingCount":16,"starSnapshotCount":16,"syncStatus":30,"lastSyncTime":31,"discoverSource":32},73601,"cloudflare-error-page","donlon\u002Fcloudflare-error-page","donlon","✅Browser ❌Cloudflare ✅Host — Generator of customized Cloudflare error pages (unofficial)","https:\u002F\u002Fmagicalforest.io\u002Fcferr\u002Feditor\u002F",null,"HTML",5457,279,6,3,0,13,19,119,39,38.34,"MIT License",false,"main",true,[],"2026-06-12 02:03:15","# Cloudflare Error Page Generator\n\n📢 **Update (2025\u002F12\u002F09)**: 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.\n\n## What does this project do?\n\nThis project creates customized error pages that mimic the well-known Cloudflare error page. You can also embed it into your own website.\n\n## Online Editor\n\nHere's an online editor to create customized error pages and example server apps. Try it out [here](https:\u002F\u002Fvirt.moe\u002Fcferr\u002Feditor\u002F).\n\n![Editor](https:\u002F\u002Fgithub.com\u002Fdonlon\u002Fcloudflare-error-page\u002Fblob\u002Fimages\u002Feditor.png?raw=true)\n\n## Quickstart for Programmers\n\n### Python\n\nInstall `cloudflare-error-page` using pip.\n\n``` Bash\n# Install from PyPI\npip install cloudflare-error-page\n\n# Or, install the latest version from this repo\npip install git+https:\u002F\u002Fgithub.com\u002Fdonlon\u002Fcloudflare-error-page.git\n```\n\nThen an error page can be generated using the `render` function provided by the package. ([example.py](examples\u002Fexample.py))\n\n``` Python\nimport webbrowser\nfrom cloudflare_error_page import render as render_cf_error_page\n\n# This function renders an error page based on the input parameters\nerror_page = render_cf_error_page({\n    # Browser status is ok\n    'browser_status': {\n        \"status\": 'ok',\n    },\n    # Cloudflare status is error\n    'cloudflare_status': {\n        \"status\": 'error',\n        \"status_text\": 'Error',\n    },\n    # Host status is also ok\n    'host_status': {\n        \"status\": 'ok',\n        \"location\": 'example.com',\n    },\n    # Position of the error indicator, valid options are 'browser', 'cloudflare', and 'host'\n    'error_source': 'cloudflare',\n\n    # Texts shown in the bottom of the page\n    'what_happened': '\u003Cp>There is an internal server error on Cloudflare\\'s network.\u003C\u002Fp>',\n    'what_can_i_do': '\u003Cp>Please try again in a few minutes.\u003C\u002Fp>',\n})\n\n# Write generated webpage to file\nwith open('error.html', 'w') as f:\n    f.write(error_page)\n\n# Open the generated page in browser\nwebbrowser.open('error.html')\n```\n\nYou can also see live demo [here](https:\u002F\u002Fvirt.moe\u002Fcferr\u002Fexamples\u002Fdefault).\n\nA demo server using Flask is also available in [flask_demo.py](examples\u002Fflask_demo.py).\n\n### JavaScript\u002FNodeJS\n\nInstall the `cloudflare-error-page` package using npm:\n\n``` Bash\nnpm install cloudflare-error-page\n```\n\nThe following example demonstrates how to create an Express application that automatically handles server errors.\n\n``` JavaScript\nimport express from 'express';\nimport { render as render_cf_error_page } from 'cloudflare-error-page';\n\nconst app = express();\n\napp.get('\u002F', (req, res) => {\n  \u002F* Some code that break prod. Pushed by a new employee recently. *\u002F\n  let [feature_values, _] = features\n    .append_with_names(self.config.feature_names)\n    .unwrap();\n}\n\napp.use((err, req, res) => {\n  \u002F* Handle the error intelligently by using a custom handler *\u002F\n  res.status(500).send(render_cf_error_page({\n    \"title\": \"Internal server error\",\n    \"error_code\": \"500\",\n    \"what_happened\": err.toString(),\n    \"what_can_i_do\": \"Please try again in a few minutes.\",\n  }));\n});\n\napp.listen(3000);\n```\n\n(Thanks [@junduck](https:\u002F\u002Fgithub.com\u002Fjunduck) for creating the original NodeJS version.)\n\n### PHP\n\n``` PHP\n\u002F* Coming soon! *\u002F\n```\n\n## More Examples\n\n### Catastrophic infrastructure failure\n\n``` Python\nparams = {\n    \"title\": \"Catastrophic infrastructure failure\",\n    \"more_information\": {\n        \"for\": \"no information\",\n    },\n    \"browser_status\": {\n        \"status\": \"error\",\n        \"status_text\": \"Out of Memory\",\n    },\n    \"cloudflare_status\": {\n        \"status\": \"error\",\n        \"location\": \"Everywhere\",\n        \"status_text\": \"Error\",\n    },\n    \"host_status\": {\n        \"status\": \"error\",\n        \"location\": \"example.com\",\n        \"status_text\": \"On Fire\",\n    },\n    \"error_source\": \"cloudflare\",\n    \"what_happened\": \"\u003Cp>There is a catastrophic failure.\u003C\u002Fp>\",\n    \"what_can_i_do\": \"\u003Cp>Please try again in a few years.\u003C\u002Fp>\",\n}\n```\n\n![Catastrophic infrastructure failure](https:\u002F\u002Fgithub.com\u002Fdonlon\u002Fcloudflare-error-page\u002Fblob\u002Fimages\u002Fexample.png?raw=true)\n\n[Demo](https:\u002F\u002Fvirt.moe\u002Fcferr\u002Fexamples\u002Fcatastrophic)\n\n### Web server is working\n\n``` Python\nparams = {\n    \"title\": \"Web server is working\",\n    \"error_code\": \"200\",\n    \"more_information\": {\n        \"hidden\": True,\n    },\n    \"browser_status\": {\n        \"status\": \"ok\",\n        \"status_text\": \"Seems Working\",\n    },\n    \"cloudflare_status\": {\n        \"status\": \"ok\",\n        \"status_text\": \"Often Working\",\n    },\n    \"host_status\": {\n        \"status\": \"ok\",\n        \"location\": \"example.com\",\n        \"status_text\": \"Almost Working\",\n    },\n    \"error_source\": \"host\",\n    \"what_happened\": \"\u003Cp>This site is still working. And it looks great.\u003C\u002Fp>\",\n    \"what_can_i_do\": \"\u003Cp>Visit the site before it crashes someday.\u003C\u002Fp>\",\n}\n```\n\n![Web server is working](https:\u002F\u002Fgithub.com\u002Fdonlon\u002Fcloudflare-error-page\u002Fblob\u002Fimages\u002Fexample2.png?raw=true)\n\n[Demo](https:\u002F\u002Fvirt.moe\u002Fcferr\u002Fexamples\u002Fworking)\n\n## FAQ\n\n### 💡 How to show real user IP \u002F Cloudflare Ray ID \u002F data center location in the error page so that it looks more realistic?\n\nRay 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 at [Cloudflare documentation](https:\u002F\u002Fdevelopers.cloudflare.com\u002Ffundamentals\u002Freference\u002Fhttp-headers\u002F#cf-ray).\n\nTo lookup the city name of the data center corresponding to the three letter code in the header, you can use a location list [here](https:\u002F\u002Fgithub.com\u002FNetrvin\u002Fcloudflare-colo-list\u002Fblob\u002Fmain\u002FDC-Colos.json)\n\nThe demo server runs in our website did handle these. Take a look at [this file](https:\u002F\u002Fgithub.com\u002Fdonlon\u002Fcloudflare-error-page\u002Fblob\u002Fe2226ff5bb7a877c9fe3ac09deadccdc58b0c1c7\u002Feditor\u002Fserver\u002Futils.py#L78) for reference.\n\n### 🤔 Is putting this on my website totally legal? As it contains trademarked logo\u002Fname and it's pretending to be an official one.\n\nUse it at you own risk. There're still chances Cloudflare send you takedown request or take legal actions. But it depends on if you use it properly. It's better to change texts on the page so users know it's a joke.\n\nIf you do want to use an error page that pretends to be a Cloudflare one on your production environment, don't forget to fix your server quickly when it goes down so that they won't find that you are faking their error page. (See [#4](https:\u002F\u002Fgithub.com\u002Fdonlon\u002Fcloudflare-error-page\u002Fissues\u002F4#issuecomment-4445691769))\n\n## See also\n\n- [cloudflare-error-page-3th.pages.dev](https:\u002F\u002Fcloudflare-error-page-3th.pages.dev\u002F)\n\n    Error page of every HTTP status code (reload to show random pages).\n\n- [oftx\u002Fcloudflare-error-page](https:\u002F\u002Fgithub.com\u002Foftx\u002Fcloudflare-error-page)\n\n    React reimplementation of the original page, and can be deployed directly to Cloudflare Pages.\n\n\n## Full Parameter Reference\n``` JavaScript\n{\n    \"html_title\": \"cloudflare.com | 500: Internal server error\",\n    \"title\": \"Internal server error\",\n    \"error_code\": \"500\",\n    \"time\": \"2025-11-18 12:34:56 UTC\",  \u002F\u002F Current UTC time will be shown if empty\n\n    \u002F\u002F Configuration of \"Visit ... for more information\"\n    \"more_information\": {\n        \"hidden\": false,\n        \"text\": \"cloudflare.com\", \n        \"link\": \"https:\u002F\u002Fwww.cloudflare.com\u002F\",\n        \"for\": \"more information\",\n    },\n\n    \u002F\u002F Configuration of the Browser\u002FCloudflare\u002FHost status block\n    \"browser_status\": {\n        \"status\": \"ok\", \u002F\u002F \"ok\" or \"error\"\n        \"location\": \"You\",\n        \"name\": \"Browser\",\n        \"status_text\": \"Working\",\n        \"status_text_color\": \"#9bca3e\",\n    },\n    \"cloudflare_status\": {\n        \"status\": \"error\",\n        \"location\": \"Cloud\",\n        \"name\": \"Cloudflare\",\n        \"status_text\": \"Error\",\n        \"status_text_color\": \"#bd2426\",\n    },\n    \"host_status\": {\n        \"status\": \"ok\",\n        \"location\": \"Website\",\n        \"name\": \"Host\",\n        \"status_text\": \"Working\",\n        \"status_text_color\": \"#9bca3e\",\n    },\n    \u002F\u002F Position of the error indicator, valid options are 'browser', 'cloudflare', and 'host'\n    \"error_source\": \"host\",\n\n    \"what_happened\": \"\u003Cp>There is an internal server error on Cloudflare's network.\u003C\u002Fp>\",\n    \"what_can_i_do\": \"\u003Cp>Please try again in a few minutes.\u003C\u002Fp>\",\n\n    \"ray_id\": '0123456789abcdef',  \u002F\u002F Random hex string will be shown if empty\n    \"client_ip\": '1.1.1.1',\n\n    \u002F\u002F Configuration of 'Performance & security by ...' in the footer\n    \"perf_sec_by\": {\n        \"text\": \"Cloudflare\",\n        \"link\": \"https:\u002F\u002Fwww.cloudflare.com\u002F\",\n    },\n}\n```\n","该项目用于生成自定义的Cloudflare风格错误页面。它允许用户创建与Cloudflare官方错误页面外观相似但完全可定制的错误页，并且可以轻松嵌入到任何网站中。核心功能包括通过在线编辑器或编程接口（支持Python和Node.js）来设计个性化错误信息，同时项目还优化了图标为矢量资源并将其内联到单个文件中，减少了额外资源托管的需求，从而提高了用户体验。适用于需要改进其站点错误页面展示效果的开发者或网站管理员，在保持专业外观的同时提供更加友好的错误提示。",2,"2026-06-11 03:46:19","high_star"]