From 012e30801e590f0c158aa44e0eb1a2f97392fe62 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Thu, 23 Oct 2025 18:10:42 +0300 Subject: [PATCH] docs: add error page (#13839) --- www/apps/api-reference/app/fonts.ts | 12 + www/apps/api-reference/app/global-error.tsx | 21 + www/apps/api-reference/app/layout.tsx | 13 +- www/apps/book/app/global-error.tsx | 21 + www/apps/cloud/app/fonts.ts | 12 + www/apps/cloud/app/global-error.tsx | 21 + www/apps/cloud/app/layout.tsx | 13 +- www/apps/resources/app/fonts.ts | 12 + www/apps/resources/app/global-error.tsx | 21 + www/apps/resources/app/layout.tsx | 13 +- .../app/references/[...slug]/page.tsx | 3 +- www/apps/ui/app/fonts.ts | 12 + www/apps/ui/app/global-error.tsx | 21 + www/apps/ui/app/layout.tsx | 13 +- www/apps/user-guide/app/fonts.ts | 12 + www/apps/user-guide/app/global-error.tsx | 21 + www/apps/user-guide/app/layout.tsx | 13 +- .../src/components/ErrorPage/Icon/index.tsx | 428 ++++++++++++++++++ .../src/components/ErrorPage/index.tsx | 32 ++ www/packages/docs-ui/src/components/index.ts | 1 + 20 files changed, 653 insertions(+), 62 deletions(-) create mode 100644 www/apps/api-reference/app/fonts.ts create mode 100644 www/apps/api-reference/app/global-error.tsx create mode 100644 www/apps/book/app/global-error.tsx create mode 100644 www/apps/cloud/app/fonts.ts create mode 100644 www/apps/cloud/app/global-error.tsx create mode 100644 www/apps/resources/app/fonts.ts create mode 100644 www/apps/resources/app/global-error.tsx create mode 100644 www/apps/ui/app/fonts.ts create mode 100644 www/apps/ui/app/global-error.tsx create mode 100644 www/apps/user-guide/app/fonts.ts create mode 100644 www/apps/user-guide/app/global-error.tsx create mode 100644 www/packages/docs-ui/src/components/ErrorPage/Icon/index.tsx create mode 100644 www/packages/docs-ui/src/components/ErrorPage/index.tsx diff --git a/www/apps/api-reference/app/fonts.ts b/www/apps/api-reference/app/fonts.ts new file mode 100644 index 0000000000..e6c4972f38 --- /dev/null +++ b/www/apps/api-reference/app/fonts.ts @@ -0,0 +1,12 @@ +import { Inter, Roboto_Mono } from "next/font/google" + +export const inter = Inter({ + subsets: ["latin"], + variable: "--font-inter", + weight: ["400", "500"], +}) + +export const robotoMono = Roboto_Mono({ + subsets: ["latin"], + variable: "--font-roboto-mono", +}) diff --git a/www/apps/api-reference/app/global-error.tsx b/www/apps/api-reference/app/global-error.tsx new file mode 100644 index 0000000000..d6b2a13309 --- /dev/null +++ b/www/apps/api-reference/app/global-error.tsx @@ -0,0 +1,21 @@ +"use client" + +import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui" +import { inter, robotoMono } from "./fonts" +import clsx from "clsx" +import "./globals.css" + +export default function Error() { + return ( + + + + + + + + ) +} diff --git a/www/apps/api-reference/app/layout.tsx b/www/apps/api-reference/app/layout.tsx index aff0e2ebac..e83ae89cf5 100644 --- a/www/apps/api-reference/app/layout.tsx +++ b/www/apps/api-reference/app/layout.tsx @@ -1,9 +1,9 @@ import "./globals.css" import Providers from "../providers" import { BareboneLayout, WideLayout } from "docs-ui" -import { Inter, Roboto_Mono } from "next/font/google" import clsx from "clsx" import { Metadata } from "next" +import { inter, robotoMono } from "./fonts" const ogImage = "https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg" @@ -36,17 +36,6 @@ export const metadata: Metadata = { }, } -const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", - weight: ["400", "500"], -}) - -const robotoMono = Roboto_Mono({ - subsets: ["latin"], - variable: "--font-roboto-mono", -}) - export default function RootLayout({ children, }: { diff --git a/www/apps/book/app/global-error.tsx b/www/apps/book/app/global-error.tsx new file mode 100644 index 0000000000..d6b2a13309 --- /dev/null +++ b/www/apps/book/app/global-error.tsx @@ -0,0 +1,21 @@ +"use client" + +import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui" +import { inter, robotoMono } from "./fonts" +import clsx from "clsx" +import "./globals.css" + +export default function Error() { + return ( + + + + + + + + ) +} diff --git a/www/apps/cloud/app/fonts.ts b/www/apps/cloud/app/fonts.ts new file mode 100644 index 0000000000..e6c4972f38 --- /dev/null +++ b/www/apps/cloud/app/fonts.ts @@ -0,0 +1,12 @@ +import { Inter, Roboto_Mono } from "next/font/google" + +export const inter = Inter({ + subsets: ["latin"], + variable: "--font-inter", + weight: ["400", "500"], +}) + +export const robotoMono = Roboto_Mono({ + subsets: ["latin"], + variable: "--font-roboto-mono", +}) diff --git a/www/apps/cloud/app/global-error.tsx b/www/apps/cloud/app/global-error.tsx new file mode 100644 index 0000000000..d6b2a13309 --- /dev/null +++ b/www/apps/cloud/app/global-error.tsx @@ -0,0 +1,21 @@ +"use client" + +import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui" +import { inter, robotoMono } from "./fonts" +import clsx from "clsx" +import "./globals.css" + +export default function Error() { + return ( + + + + + + + + ) +} diff --git a/www/apps/cloud/app/layout.tsx b/www/apps/cloud/app/layout.tsx index 6eb2bd5c82..5e50973837 100644 --- a/www/apps/cloud/app/layout.tsx +++ b/www/apps/cloud/app/layout.tsx @@ -1,11 +1,11 @@ import type { Metadata } from "next" -import { Inter, Roboto_Mono } from "next/font/google" import Providers from "@/providers" import "./globals.css" import { BareboneLayout, TightLayout } from "docs-ui" import { config } from "@/config" import clsx from "clsx" import Footer from "../components/Footer" +import { inter, robotoMono } from "./fonts" const ogImage = "https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg" @@ -42,17 +42,6 @@ export const metadata: Metadata = { }, } -export const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", - weight: ["400", "500"], -}) - -export const robotoMono = Roboto_Mono({ - subsets: ["latin"], - variable: "--font-roboto-mono", -}) - export default function RootLayout({ children, }: { diff --git a/www/apps/resources/app/fonts.ts b/www/apps/resources/app/fonts.ts new file mode 100644 index 0000000000..e6c4972f38 --- /dev/null +++ b/www/apps/resources/app/fonts.ts @@ -0,0 +1,12 @@ +import { Inter, Roboto_Mono } from "next/font/google" + +export const inter = Inter({ + subsets: ["latin"], + variable: "--font-inter", + weight: ["400", "500"], +}) + +export const robotoMono = Roboto_Mono({ + subsets: ["latin"], + variable: "--font-roboto-mono", +}) diff --git a/www/apps/resources/app/global-error.tsx b/www/apps/resources/app/global-error.tsx new file mode 100644 index 0000000000..d6b2a13309 --- /dev/null +++ b/www/apps/resources/app/global-error.tsx @@ -0,0 +1,21 @@ +"use client" + +import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui" +import { inter, robotoMono } from "./fonts" +import clsx from "clsx" +import "./globals.css" + +export default function Error() { + return ( + + + + + + + + ) +} diff --git a/www/apps/resources/app/layout.tsx b/www/apps/resources/app/layout.tsx index e3e4540776..1e8f3cb58a 100644 --- a/www/apps/resources/app/layout.tsx +++ b/www/apps/resources/app/layout.tsx @@ -1,11 +1,11 @@ import type { Metadata } from "next" -import { Inter, Roboto_Mono } from "next/font/google" import Providers from "@/providers" import "./globals.css" import { BareboneLayout, TightLayout } from "docs-ui" import { config } from "@/config" import clsx from "clsx" import Footer from "../components/Footer" +import { inter, robotoMono } from "./fonts" const ogImage = "https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg" @@ -42,17 +42,6 @@ export const metadata: Metadata = { }, } -export const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", - weight: ["400", "500"], -}) - -export const robotoMono = Roboto_Mono({ - subsets: ["latin"], - variable: "--font-roboto-mono", -}) - export default function RootLayout({ children, }: { diff --git a/www/apps/resources/app/references/[...slug]/page.tsx b/www/apps/resources/app/references/[...slug]/page.tsx index d645fb9ef5..27b50c81d2 100644 --- a/www/apps/resources/app/references/[...slug]/page.tsx +++ b/www/apps/resources/app/references/[...slug]/page.tsx @@ -1,5 +1,4 @@ -import { cache, Suspense } from "react" -import { Loading } from "docs-ui" +import { cache } from "react" import path from "path" import fs from "fs/promises" import { ReferenceMDX } from "../../../components/ReferenceMDX" diff --git a/www/apps/ui/app/fonts.ts b/www/apps/ui/app/fonts.ts new file mode 100644 index 0000000000..e6c4972f38 --- /dev/null +++ b/www/apps/ui/app/fonts.ts @@ -0,0 +1,12 @@ +import { Inter, Roboto_Mono } from "next/font/google" + +export const inter = Inter({ + subsets: ["latin"], + variable: "--font-inter", + weight: ["400", "500"], +}) + +export const robotoMono = Roboto_Mono({ + subsets: ["latin"], + variable: "--font-roboto-mono", +}) diff --git a/www/apps/ui/app/global-error.tsx b/www/apps/ui/app/global-error.tsx new file mode 100644 index 0000000000..d6b2a13309 --- /dev/null +++ b/www/apps/ui/app/global-error.tsx @@ -0,0 +1,21 @@ +"use client" + +import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui" +import { inter, robotoMono } from "./fonts" +import clsx from "clsx" +import "./globals.css" + +export default function Error() { + return ( + + + + + + + + ) +} diff --git a/www/apps/ui/app/layout.tsx b/www/apps/ui/app/layout.tsx index a18fa25a58..a8645ca6c1 100644 --- a/www/apps/ui/app/layout.tsx +++ b/www/apps/ui/app/layout.tsx @@ -1,11 +1,11 @@ import type { Metadata } from "next" -import { Inter, Roboto_Mono } from "next/font/google" import Providers from "@/providers" import "./globals.css" import { BareboneLayout, TightLayout } from "docs-ui" import { config } from "@/config" import clsx from "clsx" import Footer from "@/components/Footer" +import { inter, robotoMono } from "./fonts" const ogImage = "https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg" @@ -42,17 +42,6 @@ export const metadata: Metadata = { }, } -export const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", - weight: ["400", "500"], -}) - -export const robotoMono = Roboto_Mono({ - subsets: ["latin"], - variable: "--font-roboto-mono", -}) - export default function RootLayout({ children, }: { diff --git a/www/apps/user-guide/app/fonts.ts b/www/apps/user-guide/app/fonts.ts new file mode 100644 index 0000000000..e6c4972f38 --- /dev/null +++ b/www/apps/user-guide/app/fonts.ts @@ -0,0 +1,12 @@ +import { Inter, Roboto_Mono } from "next/font/google" + +export const inter = Inter({ + subsets: ["latin"], + variable: "--font-inter", + weight: ["400", "500"], +}) + +export const robotoMono = Roboto_Mono({ + subsets: ["latin"], + variable: "--font-roboto-mono", +}) diff --git a/www/apps/user-guide/app/global-error.tsx b/www/apps/user-guide/app/global-error.tsx new file mode 100644 index 0000000000..d6b2a13309 --- /dev/null +++ b/www/apps/user-guide/app/global-error.tsx @@ -0,0 +1,21 @@ +"use client" + +import { BareboneLayout, BrowserProvider, ErrorPage } from "docs-ui" +import { inter, robotoMono } from "./fonts" +import clsx from "clsx" +import "./globals.css" + +export default function Error() { + return ( + + + + + + + + ) +} diff --git a/www/apps/user-guide/app/layout.tsx b/www/apps/user-guide/app/layout.tsx index 3759aa7522..88a9a2828a 100644 --- a/www/apps/user-guide/app/layout.tsx +++ b/www/apps/user-guide/app/layout.tsx @@ -1,11 +1,11 @@ import type { Metadata } from "next" -import { Inter, Roboto_Mono } from "next/font/google" import Providers from "@/providers" import "./globals.css" import { BareboneLayout, TightLayout } from "docs-ui" import { config } from "@/config" import clsx from "clsx" import Footer from "../components/Footer" +import { inter, robotoMono } from "./fonts" const ogImage = "https://res.cloudinary.com/dza7lstvk/image/upload/v1732200992/Medusa%20Resources/opengraph-image_daq6nx.jpg" @@ -41,17 +41,6 @@ export const metadata: Metadata = { }, } -export const inter = Inter({ - subsets: ["latin"], - variable: "--font-inter", - weight: ["400", "500"], -}) - -export const robotoMono = Roboto_Mono({ - subsets: ["latin"], - variable: "--font-roboto-mono", -}) - export default function RootLayout({ children, }: { diff --git a/www/packages/docs-ui/src/components/ErrorPage/Icon/index.tsx b/www/packages/docs-ui/src/components/ErrorPage/Icon/index.tsx new file mode 100644 index 0000000000..de1a18e8b0 --- /dev/null +++ b/www/packages/docs-ui/src/components/ErrorPage/Icon/index.tsx @@ -0,0 +1,428 @@ +import React from "react" + +export const ErrorPageIcon = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/www/packages/docs-ui/src/components/ErrorPage/index.tsx b/www/packages/docs-ui/src/components/ErrorPage/index.tsx new file mode 100644 index 0000000000..6f9cfcb885 --- /dev/null +++ b/www/packages/docs-ui/src/components/ErrorPage/index.tsx @@ -0,0 +1,32 @@ +import React from "react" +import { ErrorPageIcon } from "./Icon" +import Link from "next/link" +import { Button } from "../Button" +import { GITHUB_ISSUES_LINK } from "../../constants" + +export const ErrorPage = () => { + return ( +
+
+ +
+

+ Oops! Something went wrong. +

+ + Don’t worry. Our team have automatically been notified of this issue + and they are working on it. Please try again later. + +
+
+ + + + + + +
+
+
+ ) +} diff --git a/www/packages/docs-ui/src/components/index.ts b/www/packages/docs-ui/src/components/index.ts index cfe06c6705..35c0944daf 100644 --- a/www/packages/docs-ui/src/components/index.ts +++ b/www/packages/docs-ui/src/components/index.ts @@ -22,6 +22,7 @@ export * from "./Details/Summary" export * from "./DetailsList" export * from "./DottedSeparator" export * from "./EditButton" +export * from "./ErrorPage" export * from "./Notices/ExpandableNotice" export * from "./Notices/FeatureFlagNotice" export * from "./Notices/DeprecatedNotice"