From e99b46f7471ea66403a680a5caee345af162ddfb Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Tue, 10 Dec 2024 23:19:55 +0100 Subject: [PATCH 1/2] feat(frontend): adds useIsomorphicLayoutEffect hook --- agenta-web/src/hooks/useIsomorphicLayoutEffect.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 agenta-web/src/hooks/useIsomorphicLayoutEffect.ts diff --git a/agenta-web/src/hooks/useIsomorphicLayoutEffect.ts b/agenta-web/src/hooks/useIsomorphicLayoutEffect.ts new file mode 100644 index 0000000000..b44f3c3c40 --- /dev/null +++ b/agenta-web/src/hooks/useIsomorphicLayoutEffect.ts @@ -0,0 +1,8 @@ +import {useLayoutEffect, useEffect} from "react" + +// useIsomorphicLayoutEffect is a custom hook that uses useLayoutEffect on the client-side +// (when window is defined) and useEffect on the server-side (when window is undefined). +// This ensures that the code runs correctly in both client-side and server-side environments. +const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect + +export default useIsomorphicLayoutEffect From f65f4938a348dcc1ff2bea35b363af50466a668f Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Tue, 10 Dec 2024 23:20:19 +0100 Subject: [PATCH 2/2] chore(fronend): replace problematic useLayoutEffect usage with useIsomorphicLayoutEffect --- agenta-web/src/hooks/usePostHogAg.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/agenta-web/src/hooks/usePostHogAg.ts b/agenta-web/src/hooks/usePostHogAg.ts index 8b3a4655e6..3fbac630cd 100644 --- a/agenta-web/src/hooks/usePostHogAg.ts +++ b/agenta-web/src/hooks/usePostHogAg.ts @@ -2,6 +2,7 @@ import {useLayoutEffect} from "react" import {isDemo, generateOrRetrieveDistinctId} from "@/lib/helpers/utils" import {usePostHog} from "posthog-js/react" import {useProfileData} from "@/contexts/profile.context" +import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect" export const usePostHogAg = () => { const trackingEnabled = process.env.NEXT_PUBLIC_TELEMETRY_TRACKING_ENABLED === "true" @@ -23,11 +24,11 @@ export const usePostHogAg = () => { } } - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (!trackingEnabled) posthog.opt_out_capturing() }, [trackingEnabled]) - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (posthog.get_distinct_id() !== _id) identify() }, [user?.id])