React component rendering the Cloudflare-style error page
npm install cloudflare-errorerror.ejs, packaged as an ESM module.
npm install cloudflare-error
`
Peer deps: React and ReactDOM (v17+). Type definitions are included via error.d.ts.
Usage
Render to string (SSR):
`jsx
import React from "react";
import ReactDOMServer from "react-dom/server";
import CloudflareErrorPage from "cloudflare-error/error.mjs";
const html = ReactDOMServer.renderToStaticMarkup(
errorCode={521}
title="Web server is down"
rayId="1234abcd"
clientIp="203.0.113.42"
errorSource="host"
hostStatus={{ status: "error", status_text: "Down" }}
whatHappened="The origin server refused the connection.
"
whatCanIDo="Please check your origin server.
"
/>
);
`
Render in a React app:
`jsx
import React from "react";
import CloudflareErrorPage from "cloudflare-error/error.mjs";
export function ErrorScreen() {
return ;
}
`
TypeScript example:
`tsx
import CloudflareErrorPage, {
CloudflareErrorPageProps,
StatusDetails,
} from "cloudflare-error";
const hostStatus: StatusDetails = { status: "error", status_text: "Offline" };
export function ErrorScreen(props: CloudflareErrorPageProps) {
return (
{...props}
errorCode={520}
title="Unknown Error"
hostStatus={hostStatus}
/>
);
}
`
Props
Top-level props override anything in params (a convenience object matching the original EJS shape).
- errorCode (number): Error code. Default 500.
- title (string): Heading text. Default "Internal server error".
- htmlTitle (string): tag override; falls back to ".
- time (string): Timestamp shown under the header.
- rayId (string): Ray ID in the footer.
- clientIp (string): IP shown after reveal. Default "1.1.1.1".
- whatHappened (string | ReactNode): Content for "What happened?"; string is injected as HTML.
- whatCanIDo (string | ReactNode): Content for "What can I do?"; string is injected as HTML.
- errorSource ("browser" | "cloudflare" | "host"): Highlights the matching status block.
- moreInformation ({ link, text, for, hidden }): Controls the header link/visibility.
- perfSecBy ({ link, text }): Footer provider link/text.
- creatorInfo ({ link, text, hidden }): Optional footer credit.
- browserStatus / cloudflareStatus / hostStatus:
- { status: "ok" | "error", status_text, status_text_color, location, name }
- params (object): Optional legacy-style object with the same keys as above (error_code, title, html_title, time, ray_id, client_ip, what_happened, what_can_i_do, error_source, more_information, perf_sec_by, creator_info, browser_status, cloudflare_status, host_status).
Notes
- The component renders full HTML (including /). For client-side usage inside an existing app shell, you can copy the inner markup or wrap in your layout as needed.
- Strings passed to whatHappened and whatCanIDo are injected via dangerouslySetInnerHTML`; sanitize user input if necessary.