Cloudflare Error React Component

A drop-in React component that renders the Cloudflare-style error page from error.ejs, packaged as an ESM module.

Installation

``
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):