From 5c7d7579ee3f06450e0e69b16acf55191cf5d6b5 Mon Sep 17 00:00:00 2001 From: Benny Joo Date: Mon, 7 Apr 2025 02:51:14 -0400 Subject: [PATCH] fix: improve booking page error boundary + remove dynamic imports from Booker (#20560) * improve booking page error boundary + remove dynamic imports from Booker * safer * fix * fix test * change name --- apps/web/app/error.tsx | 3 ++- .../error/BookingPageErrorBoundary.tsx | 5 ++++- apps/web/components/error/error-page.tsx | 10 +++++++--- packages/features/bookings/Booker/Booker.tsx | 19 ++++++------------- .../bookings/Booker/__tests__/Booker.test.tsx | 9 +++++++++ 5 files changed, 28 insertions(+), 18 deletions(-) diff --git a/apps/web/app/error.tsx b/apps/web/app/error.tsx index 0dd34475ec..ad5ec46b3a 100644 --- a/apps/web/app/error.tsx +++ b/apps/web/app/error.tsx @@ -17,7 +17,7 @@ export type ErrorProps = { reset?: () => void; }; -export default function Error({ error }: ErrorProps) { +export default function Error({ error, reset }: ErrorProps) { React.useEffect(() => { log.error(error); @@ -51,6 +51,7 @@ export default function Error({ error }: ErrorProps) { return ( } + fallbackRender={({ error, resetErrorBoundary }) => ( + + )} onError={(error, info) => { + console.error(error); captureReactException(error, info); }}> {children} diff --git a/apps/web/components/error/error-page.tsx b/apps/web/components/error/error-page.tsx index 4cb2aa786c..1ed087665d 100644 --- a/apps/web/components/error/error-page.tsx +++ b/apps/web/components/error/error-page.tsx @@ -12,6 +12,7 @@ type Props = { /** Display debugging information */ displayDebug?: boolean; children?: never; + reset?: () => void; }; const defaultProps = { @@ -53,7 +54,10 @@ const ErrorDebugPanel: React.FC<{ error: Props["error"]; children?: never }> = ( export const ErrorPage: React.FC = (props) => { const { message, statusCode, error, displayDebug } = { ...defaultProps, ...props }; - + const handleReset = () => { + window.location.reload(); + props.reset?.(); + }; return ( <>
@@ -77,8 +81,8 @@ export const ErrorPage: React.FC = (props) => {
- diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx index f54395e553..173578c551 100644 --- a/packages/features/bookings/Booker/Booker.tsx +++ b/packages/features/bookings/Booker/Booker.tsx @@ -1,5 +1,4 @@ import { AnimatePresence, LazyMotion, m } from "framer-motion"; -import dynamic from "next/dynamic"; import { useEffect, useMemo, useRef } from "react"; import StickyBox from "react-sticky-box"; import { Toaster } from "sonner"; @@ -8,6 +7,8 @@ import { shallow } from "zustand/shallow"; import BookingPageTagManager from "@calcom/app-store/BookingPageTagManager"; import { useIsPlatformBookerEmbed } from "@calcom/atoms/hooks/useIsPlatformBookerEmbed"; import dayjs from "@calcom/dayjs"; +import PoweredBy from "@calcom/ee/components/PoweredBy"; +import TurnstileCaptcha from "@calcom/features/auth/Turnstile"; import useSkipConfirmStep from "@calcom/features/bookings/Booker/components/hooks/useSkipConfirmStep"; import { getQueryParam } from "@calcom/features/bookings/Booker/utils/query-param"; import { useNonEmptyScheduleDays } from "@calcom/features/schedules"; @@ -16,11 +17,13 @@ import { CLOUDFLARE_SITE_ID, CLOUDFLARE_USE_TURNSTILE_IN_BOOKER } from "@calcom/ import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { BookerLayouts } from "@calcom/prisma/zod-utils"; import classNames from "@calcom/ui/classNames"; +import { UnpublishedEntity } from "@calcom/ui/components/unpublished-entity"; import { VerifyCodeDialog } from "../components/VerifyCodeDialog"; import { AvailableTimeSlots } from "./components/AvailableTimeSlots"; import { BookEventForm } from "./components/BookEventForm"; import { BookFormAsModal } from "./components/BookEventForm/BookFormAsModal"; +import { DatePicker } from "./components/DatePicker"; import { DryRunMessage } from "./components/DryRunMessage"; import { EventMeta } from "./components/EventMeta"; import { HavingTroubleFindingTime } from "./components/HavingTroubleFindingTime"; @@ -33,22 +36,12 @@ import { BookerSection } from "./components/Section"; import { NotFound } from "./components/Unavailable"; import { useIsQuickAvailabilityCheckFeatureEnabled } from "./components/hooks/useIsQuickAvailabilityCheckFeatureEnabled"; import { fadeInLeft, getBookerSizeClassNames, useBookerResizeAnimation } from "./config"; +import framerFeatures from "./framer-features"; import { useBookerStore } from "./store"; import type { BookerProps, WrappedBookerProps } from "./types"; import { isBookingDryRun } from "./utils/isBookingDryRun"; import { isTimeSlotAvailable } from "./utils/isTimeslotAvailable"; -const TurnstileCaptcha = dynamic(() => import("@calcom/features/auth/Turnstile"), { ssr: false }); - -const loadFramerFeatures = () => import("./framer-features").then((res) => res.default); -const PoweredBy = dynamic(() => import("@calcom/ee/components/PoweredBy").then((mod) => mod.default)); -const UnpublishedEntity = dynamic(() => - import("@calcom/ui/components/unpublished-entity").then((mod) => mod.UnpublishedEntity) -); -const DatePicker = dynamic(() => import("./components/DatePicker").then((mod) => mod.DatePicker), { - ssr: false, -}); - const BookerComponent = ({ username, eventSlug, @@ -586,7 +579,7 @@ const BookerComponent = ({ export const Booker = (props: BookerProps & WrappedBookerProps) => { return ( - + ); diff --git a/packages/features/bookings/Booker/__tests__/Booker.test.tsx b/packages/features/bookings/Booker/__tests__/Booker.test.tsx index e30c83e205..60f3db2251 100644 --- a/packages/features/bookings/Booker/__tests__/Booker.test.tsx +++ b/packages/features/bookings/Booker/__tests__/Booker.test.tsx @@ -20,6 +20,13 @@ import { Booker } from "../Booker"; import { useBookerStore } from "../store"; import type { BookerState } from "../types"; +vi.mock("framer-motion", async (importOriginal) => { + const actual = await importOriginal(); + return { + ...actual, + }; +}); + // Mock components that we don't want to test vi.mock("../components/BookEventForm", () => ({ BookEventForm: ({ @@ -176,6 +183,8 @@ describe("Booker", () => { beforeEach(() => { constantsScenarios.set({ PUBLIC_QUICK_AVAILABILITY_ROLLOUT: 100, + POWERED_BY_URL: "https://go.cal.com/booking", + APP_NAME: "Cal.com", }); vi.clearAllMocks(); });