chore: app router 404 page (#18597)

* wip

* wip

* fix not found page

* render middleware for /settings pages

* fix

* remove global-error page

* add metadata to not-found page

* make not-found page static

* remove 404

* adding not-found to middleware is not necessary

* add every routes to config.matcher

* fix test

* fix style

* use i18n string

* fix tests

* fix

* fix

* revert unneeded changes

* fix

* fix

* fix

* fix style

* fix

* remove 404

* remove log

* fix

* fix

* fix

* fix

* better naming

* parallel testing

---------

Co-authored-by: Benny Joo <sldisek783@gmail.com>

apps/web/app/global-error.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import { type NextPage } from "next";
-
-import CustomError, { type DefaultErrorProps } from "./error";
-
-export const GlobalError: NextPage<DefaultErrorProps> = (props) => {
-  return (
-    <html>
-      <body>
-        <CustomError {...props} />
-      </body>
-    </html>
-  );
-};
-
-export default GlobalError;

apps/web/app/not-found.tsx

@@ -1,12 +1,243 @@
-import React from "react";
+import { _generateMetadata, getTranslate } from "app/_utils";
+import { WithLayout } from "app/layoutHOC";
+import { headers } from "next/headers";
+import Link from "next/link";
+
+import {
+  getOrgDomainConfigFromHostname,
+  subdomainSuffix,
+} from "@calcom/features/ee/organizations/lib/orgDomains";
+import { DOCS_URL, IS_CALCOM, WEBSITE_URL } from "@calcom/lib/constants";
+import { Icon } from "@calcom/ui";
+
+enum PageType {
+  ORG = "ORG",
+  TEAM = "TEAM",
+  USER = "USER",
+  OTHER = "OTHER",
+}
+
+function getPageInfo(pathname: string, host: string) {
+  const { isValidOrgDomain, currentOrgDomain } = getOrgDomainConfigFromHostname({ hostname: host });
+  const [routerUsername] = pathname?.replace("%20", "-").split(/[?#]/) ?? [];
+  if (!routerUsername || (isValidOrgDomain && currentOrgDomain)) {
+    return {
+      username: currentOrgDomain ?? "",
+      pageType: PageType.ORG,
+      url: `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${
+        currentOrgDomain?.replace("/", "") ?? ""
+      }`,
+    };
+  }
+
+  const splitPath = routerUsername.split("/");
+  if (splitPath[1] === "team" && splitPath.length === 3) {
+    return {
+      username: splitPath[2],
+      pageType: PageType.TEAM,
+      url: `${WEBSITE_URL}/signup?callbackUrl=settings/teams/new%3Fslug%3D${splitPath[2].replace("/", "")}`,
+    };
+  }
+
+  return {
+    username: routerUsername,
+    pageType: PageType.USER,
+    url: `${WEBSITE_URL}/signup?username=${routerUsername.replace("/", "")}`,
+  };
+}
+
+async function NotFound() {
+  const t = await getTranslate();
+  const headersList = headers();
+  const host = headersList.get("x-forwarded-host") ?? "";
+  const pathname = headersList.get("x-pathname") ?? "";
+
+  const { username, pageType, url } = getPageInfo(pathname, host);
+  const isBookingSuccessPage = pathname?.startsWith("/booking");
+  const isSubpage = pathname?.includes("/", 2) || isBookingSuccessPage;
+  const isInsights = pathname?.startsWith("/insights");
+
+  const links = [
+    {
+      title: t("enterprise"),
+      description: "Learn more about organizations and subdomains in our enterprise plan.",
+      icon: "shield" as const,
+      href: `${WEBSITE_URL}/enterprise`,
+    },
+    {
+      title: t("documentation"),
+      description: t("documentation_description"),
+      icon: "file-text" as const,
+      href: DOCS_URL,
+    },
+    {
+      title: t("blog"),
+      description: t("blog_description"),
+      icon: "book-open" as const,
+      href: `${WEBSITE_URL}/blog`,
+    },
+  ];
+
+  /**
+   * If we're on 404 and the route is insights it means it is disabled
+   * TODO: Abstract this for all disabled features
+   **/
+  if (isInsights) {
+    return (
+      <div className="min-h-screen bg-white px-4" data-testid="404-page">
+        <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
+          <div className="text-center">
+            <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
+            <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
+              {t("feature_currently_disabled") ?? "Feature is currently disabled"}
+            </h1>
+          </div>
+          <div className="mt-12">
+            <div className="mt-8">
+              <Link href={WEBSITE_URL} className="text-base font-medium text-black hover:text-gray-500">
+                {t("or_go_back_home")}
+                <span aria-hidden="true"> &rarr;</span>
+              </Link>
+            </div>
+          </div>
+        </main>
+      </div>
+    );
+  }
 
-const NotFound = () => {
   return (
-    <div data-testid="404-page">
-      <h1>404 - Page Not Found</h1>
-      <p>Sorry, the page you are looking for does not exist.</p>
+    <div className="bg-default min-h-screen px-4" data-testid="404-page">
+      <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
+        <div className="text-center">
+          <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{t("error_404")}</p>
+          <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
+            {isBookingSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
+          </h1>
+          {isSubpage && pageType !== PageType.TEAM ? (
+            <span className="mt-2 inline-block text-lg">{t("check_spelling_mistakes_or_go_back")}</span>
+          ) : IS_CALCOM ? (
+            <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
+              {t(`404_the_${pageType.toLowerCase()}`)}
+
+              {username ? (
+                <>
+                  <strong className="text-blue-500">{username}</strong> {t("is_still_available")}{" "}
+                  <span className="text-blue-500">{t("register_now")}</span>.
+                </>
+              ) : null}
+            </a>
+          ) : (
+            <span className="mt-2 inline-block text-lg">
+              {t(`404_the_${pageType.toLowerCase()}`)}{" "}
+              {username ? (
+                <>
+                  <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
+                  {t("is_still_available")}
+                </>
+              ) : null}
+            </span>
+          )}
+        </div>
+        <div className="mt-12">
+          {((!isSubpage && IS_CALCOM) || pageType === PageType.ORG || pageType === PageType.TEAM) && (
+            <ul role="list" className="my-4">
+              <li className="border-2 border-green-500 px-4 py-2">
+                <a
+                  href={url}
+                  target="_blank"
+                  className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
+                  rel="noreferrer">
+                  <div className="flex-shrink-0">
+                    <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
+                      <Icon name="check" className="h-6 w-6 text-green-500" aria-hidden="true" />
+                    </span>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <h3 className="text-emphasis text-base font-medium">
+                      <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
+                        <span className="focus:outline-none">
+                          <span className="absolute inset-0" aria-hidden="true" />
+                          {t("register")}{" "}
+                          <strong className="text-green-500">{`${
+                            pageType === PageType.TEAM ? `${new URL(WEBSITE_URL).host}/team/` : ""
+                          }${username}${pageType === PageType.ORG ? `.${subdomainSuffix()}` : ""}`}</strong>
+                        </span>
+                      </span>
+                    </h3>
+                    <p className="text-subtle text-base">{t(`404_claim_entity_${pageType.toLowerCase()}`)}</p>
+                  </div>
+                  <div className="flex-shrink-0 self-center">
+                    <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
+                  </div>
+                </a>
+              </li>
+            </ul>
+          )}
+          <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">{t("popular_pages")}</h2>
+          <ul role="list" className="border-subtle divide-subtle divide-y">
+            {links
+              .filter((_, idx) => pageType === PageType.ORG || idx !== 0)
+              .map((link, linkIdx) => (
+                <li key={linkIdx} className="px-4 py-2">
+                  <a
+                    href={link.href}
+                    className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
+                    <div className="flex-shrink-0">
+                      <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                        <Icon name={link.icon} className="text-default h-6 w-6" aria-hidden="true" />
+                      </span>
+                    </div>
+                    <div className="min-w-0 flex-1">
+                      <h3 className="text-emphasis text-base font-medium">
+                        <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
+                          <span className="absolute inset-0" aria-hidden="true" />
+                          {link.title}
+                        </span>
+                      </h3>
+                      <p className="text-subtle text-base">{link.description}</p>
+                    </div>
+                    <div className="flex-shrink-0 self-center">
+                      <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
+                    </div>
+                  </a>
+                </li>
+              ))}
+          </ul>
+          <div className="mt-8">
+            <Link href={WEBSITE_URL} className="hover:text-subtle text-emphasis text-base font-medium">
+              {t("or_go_back_home")}
+              <span aria-hidden="true"> &rarr;</span>
+            </Link>
+          </div>
+        </div>
+      </main>
     </div>
   );
+}
+
+export const generateMetadata = async () => {
+  const headersList = headers();
+  const pathname = headersList.get("x-pathname") ?? "";
+  const isInsights = pathname?.startsWith("/insights");
+
+  const metadata = await _generateMetadata(
+    (t) =>
+      isInsights
+        ? t("feature_currently_disabled") ?? "Feature is currently disabled"
+        : t("404_page_not_found"),
+    (t) => t("404_page_not_found")
+  );
+  return {
+    ...metadata,
+    robots: {
+      index: false,
+      follow: false,
+    },
+  };
 };
 
-export default NotFound;
+export const dynamic = "force-static";
+
+export default WithLayout({
+  ServerPage: NotFound,
+});

apps/web/middleware.ts

@@ -160,6 +160,7 @@ export const config = {
   matcher: [
     "/403",
     "/500",
+    "/icons",
     "/d/:path*",
     "/more/:path*",
     "/maintenance/:path*",
@@ -171,6 +172,11 @@ export const config = {
     "/api/auth/signup",
     "/api/trpc/:path*",
     "/login",
+    "/auth/:path*",
+    "/apps/:path*",
+    "/event-types/:path*",
+    "/workflows/:path*",
+    "/getting-started/:path*",
     "/auth/login",
     "/future/auth/login",
     "/workflows/:path*",
@@ -181,11 +187,18 @@ export const config = {
     "/bookings/:status/",
     "/video/:path*",
     "/teams",
-    "/future/teams/",
+    "/signup",
     "/settings/:path*",
     "/reschedule/:path*",
     "/availability/:path*",
     "/booking/:path*",
+    "/payment/:path*",
+    "/router/:path*",
+    "/routing-forms/:path*",
+    "/org/:path*",
+    "/team/:path*",
+    "/:user/:type/",
+    "/:user/",
   ],
 };
 

apps/web/pages/404.tsx

@@ -1,259 +0,0 @@
-"use client";
-
-import type { GetStaticPropsContext } from "next";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
-
-import {
-  getOrgDomainConfigFromHostname,
-  subdomainSuffix,
-} from "@calcom/features/ee/organizations/lib/orgDomains";
-import { DOCS_URL, IS_CALCOM, WEBSITE_URL } from "@calcom/lib/constants";
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HeadSeo } from "@calcom/ui";
-import { Icon } from "@calcom/ui";
-
-import PageWrapper from "@components/PageWrapper";
-
-import { getTranslations } from "@server/lib/getTranslations";
-
-enum pageType {
-  ORG = "org",
-  TEAM = "team",
-  USER = "user",
-  OTHER = "other",
-}
-
-export default function Custom404() {
-  const pathname = usePathname();
-  const { t } = useLocale();
-  const [username, setUsername] = useState<string>("");
-  const [currentPageType, setCurrentPageType] = useState<pageType>(pageType.USER);
-
-  const links = [
-    {
-      title: t("enterprise"),
-      description: "Learn more about organizations and subdomains in our enterprise plan.",
-      icon: "shield" as const,
-      href: `${WEBSITE_URL}/enterprise`,
-    },
-    {
-      title: t("documentation"),
-      description: t("documentation_description"),
-      icon: "file-text" as const,
-      href: DOCS_URL,
-    },
-    {
-      title: t("blog"),
-      description: t("blog_description"),
-      icon: "book-open" as const,
-      href: `${WEBSITE_URL}/blog`,
-    },
-  ];
-
-  const [url, setUrl] = useState(`${WEBSITE_URL}/signup`);
-  useEffect(() => {
-    const { isValidOrgDomain, currentOrgDomain } = getOrgDomainConfigFromHostname({
-      hostname: window.location.host,
-    });
-
-    const [routerUsername] = pathname?.replace("%20", "-").split(/[?#]/) ?? [];
-    if (routerUsername && (!isValidOrgDomain || !currentOrgDomain)) {
-      const splitPath = routerUsername.split("/");
-      if (splitPath[1] === "team" && splitPath.length === 3) {
-        // Accessing a non-existent team
-        setUsername(splitPath[2]);
-        setCurrentPageType(pageType.TEAM);
-        setUrl(
-          `${WEBSITE_URL}/signup?callbackUrl=settings/teams/new%3Fslug%3D${splitPath[2].replace("/", "")}`
-        );
-      } else {
-        setUsername(routerUsername);
-        setUrl(`${WEBSITE_URL}/signup?username=${routerUsername.replace("/", "")}`);
-      }
-    } else {
-      setUsername(currentOrgDomain ?? "");
-      setCurrentPageType(pageType.ORG);
-      setUrl(
-        `${WEBSITE_URL}/signup?callbackUrl=settings/organizations/new%3Fslug%3D${
-          currentOrgDomain?.replace("/", "") ?? ""
-        }`
-      );
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const isSuccessPage = pathname?.startsWith("/booking");
-  const isSubpage = pathname?.includes("/", 2) || isSuccessPage;
-
-  /**
-   * If we're on 404 and the route is insights it means it is disabled
-   * TODO: Abstract this for all disabled features
-   **/
-  const isInsights = pathname?.startsWith("/insights");
-  if (isInsights) {
-    return (
-      <>
-        <HeadSeo
-          title="Feature is currently disabled"
-          description={t("404_page_not_found")}
-          nextSeoProps={{
-            nofollow: true,
-            noindex: true,
-          }}
-        />
-        <div className="min-h-screen bg-white px-4" data-testid="404-page">
-          <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
-            <div className="text-center">
-              <p className="text-sm font-semibold uppercase tracking-wide text-black">{t("error_404")}</p>
-              <h1 className="font-cal mt-2 text-4xl font-extrabold text-gray-900 sm:text-5xl">
-                Feature is currently disabled
-              </h1>
-            </div>
-            <div className="mt-12">
-              <div className="mt-8">
-                <Link href={WEBSITE_URL} className="text-base font-medium text-black hover:text-gray-500">
-                  {t("or_go_back_home")}
-                  <span aria-hidden="true"> &rarr;</span>
-                </Link>
-              </div>
-            </div>
-          </main>
-        </div>
-      </>
-    );
-  }
-
-  if (!username) return null;
-
-  return (
-    <>
-      <HeadSeo
-        title={t("404_page_not_found")}
-        description={t("404_page_not_found")}
-        nextSeoProps={{
-          nofollow: true,
-          noindex: true,
-        }}
-      />
-      <div className="bg-default min-h-screen px-4" data-testid="404-page">
-        <main className="mx-auto max-w-xl pb-6 pt-16 sm:pt-24">
-          <div className="text-center">
-            <p className="text-emphasis text-sm font-semibold uppercase tracking-wide">{t("error_404")}</p>
-            <h1 className="font-cal text-emphasis mt-2 text-4xl font-extrabold sm:text-5xl">
-              {isSuccessPage ? "Booking not found" : t("page_doesnt_exist")}
-            </h1>
-            {isSubpage && currentPageType !== pageType.TEAM ? (
-              <span className="mt-2 inline-block text-lg ">{t("check_spelling_mistakes_or_go_back")}</span>
-            ) : IS_CALCOM ? (
-              <a target="_blank" href={url} className="mt-2 inline-block text-lg" rel="noreferrer">
-                {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
-                <strong className="text-blue-500">{username}</strong> {t("is_still_available")}{" "}
-                <span className="text-blue-500">{t("register_now")}</span>.
-              </a>
-            ) : (
-              <span className="mt-2 inline-block text-lg">
-                {t(`404_the_${currentPageType.toLowerCase()}`)}{" "}
-                <strong className="text-lgtext-green-500 mt-2 inline-block">{username}</strong>{" "}
-                {t("is_still_available")}
-              </span>
-            )}
-          </div>
-          <div className="mt-12">
-            {((!isSubpage && IS_CALCOM) ||
-              currentPageType === pageType.ORG ||
-              currentPageType === pageType.TEAM) && (
-              <ul role="list" className="my-4">
-                <li className="border-2 border-green-500 px-4 py-2">
-                  <a
-                    href={url}
-                    target="_blank"
-                    className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
-                    rel="noreferrer">
-                    <div className="flex-shrink-0">
-                      <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
-                        <Icon name="check" className="h-6 w-6 text-green-500" aria-hidden="true" />
-                      </span>
-                    </div>
-                    <div className="min-w-0 flex-1">
-                      <h3 className="text-emphasis text-base font-medium">
-                        <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
-                          <span className="focus:outline-none">
-                            <span className="absolute inset-0" aria-hidden="true" />
-                            {t("register")}{" "}
-                            <strong className="text-green-500">{`${
-                              currentPageType === pageType.TEAM ? `${new URL(WEBSITE_URL).host}/team/` : ""
-                            }${username}${
-                              currentPageType === pageType.ORG ? `.${subdomainSuffix()}` : ""
-                            }`}</strong>
-                          </span>
-                        </span>
-                      </h3>
-                      <p className="text-subtle text-base">
-                        {t(`404_claim_entity_${currentPageType.toLowerCase()}`)}
-                      </p>
-                    </div>
-                    <div className="flex-shrink-0 self-center">
-                      <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
-                    </div>
-                  </a>
-                </li>
-              </ul>
-            )}
-            <h2 className="text-subtle text-sm font-semibold uppercase tracking-wide">
-              {t("popular_pages")}
-            </h2>
-            <ul role="list" className="border-subtle divide-subtle divide-y">
-              {links
-                .filter((_, idx) => currentPageType === pageType.ORG || idx !== 0)
-                .map((link, linkIdx) => (
-                  <li key={linkIdx} className="px-4 py-2">
-                    <a
-                      href={link.href}
-                      className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                      <div className="flex-shrink-0">
-                        <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
-                          <Icon name={link.icon} className="text-default h-6 w-6" aria-hidden="true" />
-                        </span>
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <h3 className="text-emphasis text-base font-medium">
-                          <span className="focus-within:ring-empthasis rounded-sm focus-within:ring-2 focus-within:ring-offset-2">
-                            <span className="absolute inset-0" aria-hidden="true" />
-                            {link.title}
-                          </span>
-                        </h3>
-                        <p className="text-subtle text-base">{link.description}</p>
-                      </div>
-                      <div className="flex-shrink-0 self-center">
-                        <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
-                      </div>
-                    </a>
-                  </li>
-                ))}
-            </ul>
-            <div className="mt-8">
-              <Link href={WEBSITE_URL} className="hover:text-subtle text-emphasis text-base font-medium">
-                {t("or_go_back_home")}
-                <span aria-hidden="true"> &rarr;</span>
-              </Link>
-            </div>
-          </div>
-        </main>
-      </div>
-    </>
-  );
-}
-
-Custom404.PageWrapper = PageWrapper;
-
-export const getStaticProps = async (context: GetStaticPropsContext) => {
-  const i18n = await getTranslations(context);
-
-  return {
-    props: {
-      i18n,
-    },
-  };
-};

apps/web/playwright/organization/booking.e2e.ts

@@ -31,6 +31,8 @@ function getOrgOrigin(orgSlug: string | null) {
   return orgOrigin;
 }
 
+test.describe.configure({ mode: "parallel" });
+
 test.describe("Bookings", () => {
   test.afterEach(async ({ orgs, users, page }) => {
     await users.deleteAll();

apps/web/public/static/locales/en/common.json

@@ -2919,6 +2919,7 @@
   "dry_run_mode_active": "You are doing a test booking.",
   "icon_showcase": "Icon showcase",
   "icons_showcase": "Icons showcase",
+  "feature_currently_disabled": "Feature is currently disabled",
   "choose_an_option": "Choose an option",
   "enter_option_value": "Enter option value",
   "remove_option": "Remove option",

apps/web/test/lib/pagesAndRewritePaths.test.ts

@@ -23,7 +23,6 @@ describe("pagesAndRewritePaths", () => {
       "video",
       "workflows",
       "403",
-      "404",
       "500",
       "bookings",
       "event-types",