add /error page

Author: Lordfirespeed

client/src/app/error/error-page-client.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { useSearchParams } from "next/navigation"
+
+import { ServerErrorPage } from "@/components/server-error"
+import { isValidStatusCode, statusMessages } from "@/lib/status-codes"
+
+export default function ErrorPageClient() {
+  const searchParams = useSearchParams()
+
+  const statusCode = Number(searchParams.get("status_code"))
+
+  if (isValidStatusCode(statusCode)) {
+    return <ServerErrorPage statusCode={statusCode.toString()} message={statusMessages[statusCode]} />
+  }
+
+  if (!Number.isNaN(statusCode)) {
+    return <ServerErrorPage statusCode={statusCode.toString()} message="Something strange..." />
+  }
+
+  return <ServerErrorPage message="Something strange..." />
+}

client/src/app/error/page.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next"
+import * as React from "react"
+
+import ErrorPageClient from "@/app/error/error-page-client"
+
+export const metadata: Metadata = {
+  title: "Error",
+}
+
+export default function ErrorPage() {
+  return (
+    <React.Suspense fallback={null}>
+      <ErrorPageClient />
+    </React.Suspense>
+  )
+}

client/src/components/server-error.tsx

@@ -0,0 +1,58 @@
+import type React from "react"
+
+const styles: Record<string, React.CSSProperties> = {
+  error: {
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  desc: {
+    display: "flex",
+    height: "96px",
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  h1: {
+    display: "inline-block",
+    margin: "0 20px 0 0",
+    paddingRight: 23,
+    fontSize: 48,
+    fontWeight: 500,
+    verticalAlign: "top",
+    borderRight: "1px solid hsl(var(--foreground) / 0.5)",
+  },
+  h2: {
+    fontSize: 28,
+    fontWeight: 400,
+    lineHeight: "28px",
+  },
+  wrap: {
+    display: "inline-block",
+  },
+}
+
+export type HttpErrorProps = {
+  statusCode?: string
+  message: string
+} & React.HTMLAttributes<HTMLDivElement>
+
+export function ServerErrorPage({ style, ...props }: HttpErrorProps) {
+  style ??= {}
+  style.minHeight = "100vh"
+  return <ServerError style={style} {...props} />
+}
+
+export function ServerError({ statusCode, message, style, ...props }: HttpErrorProps) {
+  return (
+    <main style={{ ...styles.error, ...style }} {...props}>
+      <div style={styles.desc}>
+        {statusCode ? <h1 style={styles.h1}>{statusCode}</h1> : null}
+        <div style={styles.wrap}>
+          <h2 style={styles.h2}>{message}.</h2>
+        </div>
+      </div>
+    </main>
+  )
+}

client/src/lib/status-codes.ts

@@ -0,0 +1,141 @@
+export const statusMessages = {
+  100: "Continue",
+  101: "Switching Protocols",
+  102: "Processing",
+  103: "Early Hints",
+  200: "OK",
+  201: "Created",
+  202: "Accepted",
+  203: "Non-Authoritative Information",
+  204: "No Content",
+  205: "Reset Content",
+  206: "Partial Content",
+  207: "Multi-Status",
+  208: "Already Reported",
+  226: "IM Used",
+  300: "Multiple Choices",
+  301: "Moved Permanently",
+  302: "Found",
+  303: "See Other",
+  304: "Not Modified",
+  305: "Use Proxy",
+  307: "Temporary Redirect",
+  308: "Permanent Redirect",
+  400: "Bad Request",
+  401: "Unauthorized",
+  402: "Payment Required",
+  403: "Forbidden",
+  404: "Not Found",
+  405: "Method Not Allowed",
+  406: "Not Acceptable",
+  407: "Proxy Authentication Required",
+  408: "Request Timeout",
+  409: "Conflict",
+  410: "Gone",
+  411: "Length Required",
+  412: "Precondition Failed",
+  413: "Payload Too Large",
+  414: "URI Too Long",
+  415: "Unsupported Media Type",
+  416: "Range Not Satisfiable",
+  417: "Expectation Failed",
+  418: "I'm a Teapot",
+  421: "Misdirected Request",
+  422: "Unprocessable Entity",
+  423: "Locked",
+  424: "Failed Dependency",
+  425: "Too Early",
+  426: "Upgrade Required",
+  428: "Precondition Required",
+  429: "Too Many Requests",
+  431: "Request Header Fields Too Large",
+  451: "Unavailable For Legal Reasons",
+  500: "Internal Server Error",
+  501: "Not Implemented",
+  502: "Bad Gateway",
+  503: "Service Unavailable",
+  504: "Gateway Timeout",
+  505: "HTTP Version Not Supported",
+  506: "Variant Also Negotiates",
+  507: "Insufficient Storage",
+  508: "Loop Detected",
+  509: "Bandwidth Limit Exceeded",
+  510: "Not Extended",
+  511: "Network Authentication Required",
+}
+
+export enum HttpStatus {
+  Continue = 100,
+  SwitchingProtocols = 101,
+  Processing = 102,
+  EarlyHints = 103,
+
+  OK = 200,
+  Created = 201,
+  Accepted = 202,
+  NonAuthoritativeInformation = 203,
+  NoContent = 204,
+  ResetContent = 205,
+  PartialContent = 206,
+  MultiStatus = 207,
+  AlreadyReported = 208,
+  IMUsed = 226,
+
+  MultipleChoices = 300,
+  MovedPermanently = 301,
+  Found = 302,
+  SeeOther = 303,
+  NotModified = 304,
+  UseProxy = 305,
+  TemporaryRedirect = 307,
+  PermanentRedirect = 308,
+
+  BadRequest = 400,
+  Unauthorized = 401,
+  PaymentRequired = 402,
+  Forbidden = 403,
+  NotFound = 404,
+  MethodNotAllowed = 405,
+  NotAcceptable = 406,
+  ProxyAuthenticationRequired = 407,
+  RequestTimeout = 408,
+  Conflict = 409,
+  Gone = 410,
+  LengthRequired = 411,
+  PreconditionFailed = 412,
+  PayloadTooLarge = 413,
+  URITooLong = 414,
+  UnsupportedMediaType = 415,
+  RangeNotSatisfiable = 416,
+  ExpectationFailed = 417,
+  IAmATeapot = 418,
+  MisdirectedRequest = 421,
+  UnprocessableEntity = 422,
+  Locked = 423,
+  FailedDependency = 424,
+  TooEarly = 425,
+  UpgradeRequired = 426,
+  PreconditionRequired = 428,
+  TooManyRequests = 429,
+  RequestHeaderFieldsTooLarge = 431,
+  UnavailableForLegalReasons = 451,
+
+  InternalServerError = 500,
+  NotImplemented = 501,
+  BadGateway = 502,
+  ServiceUnavailable = 503,
+  GatewayTimeout = 504,
+  HttpVersionNotSupported = 505,
+  VariantAlsoNegotiates = 506,
+  InsufficientStorage = 507,
+  LoopDetected = 508,
+  BandwidthLimitExceeded = 509,
+  NotExtended = 510,
+  NetworkAuthenticationRequired = 511,
+}
+
+export type StatusCode = keyof typeof statusMessages
+
+export function isValidStatusCode(statusCode: unknown): statusCode is StatusCode {
+  return typeof statusCode === "number" && Object.hasOwn(statusMessages, statusCode)
+}