From 78c0203a459448933c90e217a9b2f92ca49bf408 Mon Sep 17 00:00:00 2001
From: Benny Joo <sldisek783@gmail.com>
Date: Fri, 25 Apr 2025 09:55:52 -0300
Subject: [PATCH] chore: leverage error.tsx in app router (#20955)

---
 .../(main-nav)/availability/error.tsx         |  7 ++
 .../(main-nav)/availability/page.tsx          | 68 +++++++++----------
 .../admin/organizations/[id]/edit/error.tsx   |  7 ++
 .../admin/organizations/[id]/edit/page.tsx    | 27 +++-----
 .../admin/users/[id]/edit/error.tsx           |  7 ++
 .../admin/users/[id]/edit/page.tsx            | 27 +++-----
 .../workflows/[workflow]/error.tsx            |  7 ++
 .../workflows/[workflow]/page.tsx             |  4 +-
 8 files changed, 81 insertions(+), 73 deletions(-)
 create mode 100644 apps/web/app/(use-page-wrapper)/(main-nav)/availability/error.tsx
 create mode 100644 apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/error.tsx
 create mode 100644 apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/error.tsx
 create mode 100644 apps/web/app/(use-page-wrapper)/workflows/[workflow]/error.tsx

diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/availability/error.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/availability/error.tsx
new file mode 100644
index 0000000000..a722a613a4
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/availability/error.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { Alert } from "@calcom/ui/components/alert";
+
+export default function Error() {
+  return <Alert severity="error" title="Something went wrong" />;
+}
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx
index a7bea5611f..901ff60376 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx
@@ -1,7 +1,6 @@
 import { createRouterCaller } from "app/_trpc/context";
 import type { PageProps } from "app/_types";
 import { _generateMetadata, getTranslate } from "app/_utils";
-import { notFound } from "next/navigation";
 
 import { AvailabilitySliderTable } from "@calcom/features/timezone-buddy/components/AvailabilitySliderTable";
 import { OrganizationRepository } from "@calcom/lib/server/repository/organization";
@@ -25,43 +24,40 @@ export const generateMetadata = async () => {
 const Page = async ({ searchParams: _searchParams }: PageProps) => {
   const searchParams = await _searchParams;
   const t = await getTranslate();
-  try {
-    const [meCaller, availabilityCaller] = await Promise.all([
-      createRouterCaller(meRouter),
-      createRouterCaller(availabilityRouter),
-    ]);
 
-    const [me, availabilities] = await Promise.all([meCaller.get(), availabilityCaller.list()]);
-    const organizationId = me.organization?.id ?? me.profiles[0]?.organizationId;
-    const isOrgPrivate = organizationId
-      ? await OrganizationRepository.checkIfPrivate({
-          orgId: organizationId,
-        })
-      : false;
-    const canViewTeamAvailability = me.organization?.isOrgAdmin || !isOrgPrivate;
+  const [meCaller, availabilityCaller] = await Promise.all([
+    createRouterCaller(meRouter),
+    createRouterCaller(availabilityRouter),
+  ]);
 
-    return (
-      <ShellMainAppDir
-        heading={t("availability")}
-        subtitle={t("configure_availability")}
-        CTA={
-          <AvailabilityCTA
-            toggleGroupOptions={[
-              { value: "mine", label: t("my_availability") },
-              ...(canViewTeamAvailability ? [{ value: "team", label: t("team_availability") }] : []),
-            ]}
-          />
-        }>
-        {searchParams?.type === "team" && canViewTeamAvailability ? (
-          <AvailabilitySliderTable userTimeFormat={me?.timeFormat ?? null} isOrg={!!organizationId} />
-        ) : (
-          <AvailabilityList availabilities={availabilities ?? { schedules: [] }} me={me} />
-        )}
-      </ShellMainAppDir>
-    );
-  } catch (error) {
-    notFound();
-  }
+  const [me, availabilities] = await Promise.all([meCaller.get(), availabilityCaller.list()]);
+  const organizationId = me.organization?.id ?? me.profiles[0]?.organizationId;
+  const isOrgPrivate = organizationId
+    ? await OrganizationRepository.checkIfPrivate({
+        orgId: organizationId,
+      })
+    : false;
+  const canViewTeamAvailability = me.organization?.isOrgAdmin || !isOrgPrivate;
+
+  return (
+    <ShellMainAppDir
+      heading={t("availability")}
+      subtitle={t("configure_availability")}
+      CTA={
+        <AvailabilityCTA
+          toggleGroupOptions={[
+            { value: "mine", label: t("my_availability") },
+            ...(canViewTeamAvailability ? [{ value: "team", label: t("team_availability") }] : []),
+          ]}
+        />
+      }>
+      {searchParams?.type === "team" && canViewTeamAvailability ? (
+        <AvailabilitySliderTable userTimeFormat={me?.timeFormat ?? null} isOrg={!!organizationId} />
+      ) : (
+        <AvailabilityList availabilities={availabilities ?? { schedules: [] }} me={me} />
+      )}
+    </ShellMainAppDir>
+  );
 };
 
 export default Page;
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/error.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/error.tsx
new file mode 100644
index 0000000000..a722a613a4
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/error.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { Alert } from "@calcom/ui/components/alert";
+
+export default function Error() {
+  return <Alert severity="error" title="Something went wrong" />;
+}
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx
index acfd6e185e..b8c4ee8a05 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx
@@ -1,6 +1,5 @@
 import { type Params } from "app/_types";
 import { _generateMetadata, getTranslate } from "app/_utils";
-import { notFound } from "next/navigation";
 import { z } from "zod";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
@@ -36,23 +35,17 @@ export const generateMetadata = async ({ params }: { params: Params }) => {
 const Page = async ({ params }: { params: Params }) => {
   const input = orgIdSchema.safeParse(await params);
 
-  if (!input.success) notFound();
+  if (!input.success) throw new Error("Invalid access");
 
-  try {
-    const org = await OrganizationRepository.adminFindById({ id: input.data.id });
-    const t = await getTranslate();
-    return (
-      <SettingsHeader
-        title={`${t("editing_org")}: ${org.name}`}
-        description={t("admin_orgs_edit_description")}>
-        <LicenseRequired>
-          <OrgForm org={org} />
-        </LicenseRequired>
-      </SettingsHeader>
-    );
-  } catch {
-    notFound();
-  }
+  const org = await OrganizationRepository.adminFindById({ id: input.data.id });
+  const t = await getTranslate();
+  return (
+    <SettingsHeader title={`${t("editing_org")}: ${org.name}`} description={t("admin_orgs_edit_description")}>
+      <LicenseRequired>
+        <OrgForm org={org} />
+      </LicenseRequired>
+    </SettingsHeader>
+  );
 };
 
 export default Page;
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/error.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/error.tsx
new file mode 100644
index 0000000000..a722a613a4
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/error.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { Alert } from "@calcom/ui/components/alert";
+
+export default function Error() {
+  return <Alert severity="error" title="Something went wrong" />;
+}
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/page.tsx
index 017dae6b45..be1e7dc61c 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/users/[id]/edit/page.tsx
@@ -1,6 +1,5 @@
 import { type Params } from "app/_types";
 import { _generateMetadata, getTranslate } from "app/_utils";
-import { notFound } from "next/navigation";
 import { z } from "zod";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
@@ -36,24 +35,18 @@ export const generateMetadata = async ({ params }: { params: Params }) => {
 const Page = async ({ params }: { params: Params }) => {
   const input = userIdSchema.safeParse(await params);
 
-  if (!input.success) {
-    notFound();
-  }
+  if (!input.success) throw new Error("Invalid access");
 
-  try {
-    const user = await UserRepository.adminFindById(input.data.id);
-    const t = await getTranslate();
+  const user = await UserRepository.adminFindById(input.data.id);
+  const t = await getTranslate();
 
-    return (
-      <SettingsHeader title={t("editing_user")} description={t("admin_users_edit_description")}>
-        <LicenseRequired>
-          <UsersEditView user={user} />
-        </LicenseRequired>
-      </SettingsHeader>
-    );
-  } catch {
-    notFound();
-  }
+  return (
+    <SettingsHeader title={t("editing_user")} description={t("admin_users_edit_description")}>
+      <LicenseRequired>
+        <UsersEditView user={user} />
+      </LicenseRequired>
+    </SettingsHeader>
+  );
 };
 
 export default Page;
diff --git a/apps/web/app/(use-page-wrapper)/workflows/[workflow]/error.tsx b/apps/web/app/(use-page-wrapper)/workflows/[workflow]/error.tsx
new file mode 100644
index 0000000000..a722a613a4
--- /dev/null
+++ b/apps/web/app/(use-page-wrapper)/workflows/[workflow]/error.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { Alert } from "@calcom/ui/components/alert";
+
+export default function Error() {
+  return <Alert severity="error" title="Something went wrong" />;
+}
diff --git a/apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx b/apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx
index cca7232a21..b3ca5b722d 100644
--- a/apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/workflows/[workflow]/page.tsx
@@ -44,9 +44,7 @@ const Page = async ({ params }: PageProps) => {
   // const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
   // const user = session?.user;
   const parsed = querySchema.safeParse(await params);
-  if (!parsed.success) {
-    notFound();
-  }
+  if (!parsed.success) throw new Error("Invalid workflow id");
 
   // const workflow = await WorkflowRepository.getById({ id: +parsed.data.workflow });
   // let verifiedEmails, verifiedNumbers;