Add error pages for 404, 500, 503 codes

2026-04-15 00:35:05 +03:00
parent 858b8e1d1f
commit 6d3e3ae986
1 changed files with 55 additions and 0 deletions
@@ -0,0 +1,55 @@
+import { useParams } from "@modern-js/runtime/router";
+
+const ERROR_CONFIG: Record<string, { title: string; description: string }> = {
+  "404": {
+    title: "Page not found",
+    description:
+      "The page you are looking for does not exist or the link is broken.",
+  },
+  "500": {
+    title: "Server error",
+    description:
+      "An internal error occurred while processing your request. Please try again later.",
+  },
+  "503": {
+    title: "Service unavailable",
+    description:
+      "The service is temporarily unavailable. Please try again in a few moments.",
+  },
+};
+
+const FALLBACK = {
+  title: "Error",
+  description: "An unexpected error occurred.",
+};
+
+/**
+ * Error page for HTTP-like error codes (404, 500, 503).
+ * Simple text-based UI — no design system dependency yet.
+ * Route: /error/:code
+ */
+export default function ErrorPage(): JSX.Element {
+  const { code } = useParams<{ code: string }>();
+  const config = (code ? ERROR_CONFIG[code] : undefined) ?? FALLBACK;
+
+  return (
+    <main
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: "60vh",
+        padding: "2rem",
+        textAlign: "center",
+      }}
+    >
+      <h1 style={{ fontSize: "3rem", margin: "0 0 0.5rem" }}>{code ?? "?"}</h1>
+      <h2 style={{ margin: "0 0 1rem" }}>{config.title}</h2>
+      <p style={{ maxWidth: "480px", color: "#666" }}>{config.description}</p>
+      <a href="/" style={{ marginTop: "1.5rem" }}>
+        Go to home page
+      </a>
+    </main>
+  );
+}