cloudflare-error

v1.0.2

Published

a month ago

React component rendering the Cloudflare-style error page

0High
0Medium
0Low

shitanshukumar

cloudflare error-page react component

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

import React from "react";
import ReactDOMServer from "react-dom/server";
import CloudflareErrorPage from "cloudflare-error/error.mjs";

const html = ReactDOMServer.renderToStaticMarkup(
  <CloudflareErrorPage
    errorCode={521}
    title="Web server is down"
    rayId="1234abcd"
    clientIp="203.0.113.42"
    errorSource="host"
    hostStatus={{ status: "error", status_text: "Down" }}
    whatHappened="<p>The origin server refused the connection.</p>"
    whatCanIDo="<p>Please check your origin server.</p>"
  />
);

Render in a React app:

import React from "react";
import CloudflareErrorPage from "cloudflare-error/error.mjs";

export function ErrorScreen() {
  return <CloudflareErrorPage time={new Date().toUTCString()} rayId="abcd" />;
}

TypeScript example:

import CloudflareErrorPage, {
  CloudflareErrorPageProps,
  StatusDetails,
} from "cloudflare-error";

const hostStatus: StatusDetails = { status: "error", status_text: "Offline" };

export function ErrorScreen(props: CloudflareErrorPageProps) {
  return (
    <CloudflareErrorPage
      {...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): <title> tag override; falls back to "<errorCode>: <title>".
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 <html>/<head>). 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.
CSS is inlined to match the original Cloudflare error page.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Cloudflare Error React Component

Installation

Usage

Props

Notes