Revert "fix: 404 collisions (#15249)" (#15339)

This reverts commit 5d01eb2f38. Signed-off-by: zomars <zomars@me.com>
2024-06-05 20:33:19 +00:00
parent 78ea4d2f68
commit 8c2f6ae145
5 changed files with 98 additions and 5 deletions
@@ -0,0 +1,64 @@
+"use client";
+
+/**
+ * Typescript class based component for custom-error
+ * @link https://nextjs.org/docs/advanced-features/custom-error-page
+ */
+import type { NextPage } from "next";
+import type { ErrorProps } from "next/error";
+import React from "react";
+
+import { HttpError } from "@calcom/lib/http-error";
+import logger from "@calcom/lib/logger";
+import { redactError } from "@calcom/lib/redactError";
+
+import { ErrorPage } from "@components/error/error-page";
+
+type NextError = Error & { digest?: string };
+
+// Ref: https://nextjs.org/docs/app/api-reference/file-conventions/error#props
+export type DefaultErrorProps = {
+  error: NextError;
+  reset: () => void; // A function to reset the error boundary
+};
+
+type AugmentedError = NextError | HttpError | null;
+
+type CustomErrorProps = {
+  err?: AugmentedError;
+  statusCode?: number;
+  message?: string;
+} & Omit<ErrorProps, "err" | "statusCode">;
+
+const log = logger.getSubLogger({ prefix: ["[error]"] });
+
+const CustomError: NextPage<DefaultErrorProps> = (props) => {
+  const { error } = props;
+  let errorObject: CustomErrorProps = {
+    message: error.message,
+    err: error,
+  };
+
+  if (error instanceof HttpError) {
+    const redactedError = redactError(error);
+    errorObject = {
+      statusCode: error.statusCode,
+      title: redactedError.name,
+      message: redactedError.message,
+      err: {
+        ...redactedError,
+        ...error,
+      },
+    };
+  }
+
+  // `error.digest` property contains an automatically generated hash of the error that can be used to match the corresponding error in server-side logs
+  log.debug(`${error?.toString() ?? JSON.stringify(error)}`);
+  log.info("errorObject: ", errorObject);
+
+  return (
+    <ErrorPage statusCode={errorObject.statusCode} error={errorObject.err} message={errorObject.message} />
+  );
+};
+
+export default CustomError;
@@ -0,0 +1,17 @@
+"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;
@@ -1,10 +1,9 @@
+import NotFoundPage from "@pages/404";
+import { WithLayout } from "app/layoutHOC";
 import type { GetStaticPropsContext } from "next";

 import { getTranslations } from "@server/lib/getTranslations";

-import NotFoundPage from "./404/page";
-import { WithLayout } from "./layoutHOC";
-
 const getData = async (context: GetStaticPropsContext) => {
  const i18n = await getTranslations(context);

@@ -1,5 +1,6 @@
 "use client";

+import type { GetStaticPropsContext } from "next";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -10,11 +11,14 @@ import {
 } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { DOCS_URL, IS_CALCOM, JOIN_DISCORD, WEBSITE_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HeadSeo, Icon } from "@calcom/ui";
+import { HeadSeo } from "@calcom/ui";
+import { Icon } from "@calcom/ui";
 import { Discord } from "@calcom/ui/components/icon/Discord";

 import PageWrapper from "@components/PageWrapper";

+import { getTranslations } from "@server/lib/getTranslations";
+
 enum pageType {
  ORG = "org",
  TEAM = "team",
@@ -267,3 +271,13 @@ export default function Custom404() {
 }

 Custom404.PageWrapper = PageWrapper;
+
+export const getStaticProps = async (context: GetStaticPropsContext) => {
+  const i18n = await getTranslations(context);
+
+  return {
+    props: {
+      i18n,
+    },
+  };
+};
@@ -370,5 +370,4 @@ export async function doOnOrgDomain(

 // When App directory is there, this is the 404 page text. We should work on fixing the 404 page as it changed due to app directory.
 export const NotFoundPageTextAppDir = "This page does not exist.";
-export const NotFoundPageTextPages = "404: This page could not be found.";
 // export const NotFoundPageText = "ERROR 404";