From f32638b87a2b45635364b15d5f777567fb206393 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Mon, 9 Dec 2024 15:03:33 +0100 Subject: [PATCH 01/11] enhance(frontend): cleanup _app and move posthog initialization to a custom provider --- .../helpers/analytics/AgPosthogProvider.tsx | 51 +++++++++++++++++++ .../src/lib/helpers/analytics/store/atoms.ts | 4 ++ agenta-web/src/pages/_app.tsx | 34 ++----------- 3 files changed, 58 insertions(+), 31 deletions(-) create mode 100644 agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx create mode 100644 agenta-web/src/lib/helpers/analytics/store/atoms.ts diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx new file mode 100644 index 0000000000..b58e822175 --- /dev/null +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -0,0 +1,51 @@ +import {useCallback, useEffect, useRef} from "react" +import {useRouter} from "next/router" +import {useAtom} from "jotai" +import {posthogAtom} from "./store/atoms" + +const CustomPosthogProvider = ({children}: {children: React.ReactNode}) => { + const router = useRouter() + const loadingPosthog = useRef(false) + const [posthogClient, setPosthogClient] = useAtom(posthogAtom) + + const initPosthog = useCallback(async () => { + if (!!posthogClient) return + if (loadingPosthog.current) return + + loadingPosthog.current = true + + const posthog = (await import("posthog-js")).default + + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { + api_host: "https://app.posthog.com", + // Enable debug mode in development + loaded: (posthog) => { + console.log("initialized posthog", process.env.NEXT_PUBLIC_POSTHOG_API_KEY) + setPosthogClient(posthog) + if (process.env.NODE_ENV === "development") posthog.debug() + }, + capture_pageview: false, + persistence: "localStorage+cookie", + }) + }, [posthogClient, setPosthogClient]) + + useEffect(() => { + initPosthog() + }, [initPosthog]) + + const handleRouteChange = useCallback(() => { + posthogClient?.capture("$pageview", {$current_url: window.location.href}) + }, [posthogClient]) + + useEffect(() => { + router.events.on("routeChangeComplete", handleRouteChange) + + return () => { + router.events.off("routeChangeComplete", handleRouteChange) + } + }, [handleRouteChange, router.events]) + + return <>{children} +} + +export default CustomPosthogProvider diff --git a/agenta-web/src/lib/helpers/analytics/store/atoms.ts b/agenta-web/src/lib/helpers/analytics/store/atoms.ts new file mode 100644 index 0000000000..5907eb709b --- /dev/null +++ b/agenta-web/src/lib/helpers/analytics/store/atoms.ts @@ -0,0 +1,4 @@ +import {atom} from "jotai" +import {type PostHog} from "posthog-js" + +export const posthogAtom = atom(null) diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index c84846caf9..ca98a01c65 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -1,12 +1,7 @@ -import {useEffect} from "react" import type {AppProps} from "next/app" -import {useRouter} from "next/router" import Head from "next/head" import dynamic from "next/dynamic" -import posthog from "posthog-js" -import {PostHogProvider} from "posthog-js/react" - import "@/styles/globals.css" import Layout from "@/components/Layout/Layout" import {dynamicComponent} from "@/lib/helpers/dynamic" @@ -19,37 +14,14 @@ import "ag-grid-community/styles/ag-theme-alpine.css" import {Inter} from "next/font/google" const NoMobilePageWrapper = dynamicComponent("NoMobilePageWrapper/NoMobilePageWrapper") +const CustomPosthogProvider = dynamic(() => import("@/lib/helpers/analytics/AgPosthogProvider")) const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }) -// Initialize the Posthog client -if (typeof window !== "undefined") { - posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { - api_host: "https://app.posthog.com", - // Enable debug mode in development - loaded: (posthog) => { - if (process.env.NODE_ENV === "development") posthog.debug() - }, - capture_pageview: false, - persistence: "localStorage+cookie", - }) -} - export default function App({Component, pageProps}: AppProps) { - const router = useRouter() - - useEffect(() => { - const handleRouteChange = () => - posthog.capture("$pageview", {$current_url: window.location.href}) - router.events.on("routeChangeComplete", handleRouteChange) - - return () => { - router.events.off("routeChangeComplete", handleRouteChange) - } - }, []) return ( <> @@ -57,7 +29,7 @@ export default function App({Component, pageProps}: AppProps) {
- + @@ -70,7 +42,7 @@ export default function App({Component, pageProps}: AppProps) { - +
) From 5aa394e4043ba06fea67167f0b1acfd8cedc9d48 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Mon, 9 Dec 2024 15:03:58 +0100 Subject: [PATCH 02/11] enhance(frontend): update usePostHogAg usage --- .../components/AppSelector/AppSelector.tsx | 2 +- .../Playground/Views/ParametersView.tsx | 2 +- .../Playground/Views/PublishVariantModal.tsx | 2 +- agenta-web/src/contexts/profile.context.tsx | 2 +- agenta-web/src/hooks/useSession.ts | 6 ++-- .../helpers/analytics}/hooks/usePostHogAg.ts | 30 +++++++++++-------- 6 files changed, 25 insertions(+), 19 deletions(-) rename agenta-web/src/{ => lib/helpers/analytics}/hooks/usePostHogAg.ts (51%) diff --git a/agenta-web/src/components/AppSelector/AppSelector.tsx b/agenta-web/src/components/AppSelector/AppSelector.tsx index 6282d8d8b2..abfc24e13f 100644 --- a/agenta-web/src/components/AppSelector/AppSelector.tsx +++ b/agenta-web/src/components/AppSelector/AppSelector.tsx @@ -16,7 +16,7 @@ import {createUseStyles} from "react-jss" import {useAppsData} from "@/contexts/app.context" import {useProfileData} from "@/contexts/profile.context" import CreateAppStatusModal from "./modals/CreateAppStatusModal" -import {usePostHogAg} from "@/hooks/usePostHogAg" +import {usePostHogAg} from "@/lib/helpers/analytics/hooks/usePostHogAg" import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders" import ResultComponent from "../ResultComponent/ResultComponent" import {dynamicContext} from "@/lib/helpers/dynamic" diff --git a/agenta-web/src/components/Playground/Views/ParametersView.tsx b/agenta-web/src/components/Playground/Views/ParametersView.tsx index 1cc74ab20e..a9ba316b5f 100644 --- a/agenta-web/src/components/Playground/Views/ParametersView.tsx +++ b/agenta-web/src/components/Playground/Views/ParametersView.tsx @@ -7,7 +7,7 @@ import {ModelParameters, ObjectParameters, StringParameters} from "./ParametersC import PublishVariantModal from "./PublishVariantModal" import {deleteSingleVariant} from "@/services/playground/api" import {CloudUploadOutlined, DeleteOutlined, HistoryOutlined, SaveOutlined} from "@ant-design/icons" -import {usePostHogAg} from "@/hooks/usePostHogAg" +import {usePostHogAg} from "@/lib/helpers/analytics/hooks/usePostHogAg" import {isDemo} from "@/lib/helpers/utils" import {useQueryParam} from "@/hooks/useQuery" import {dynamicComponent, dynamicService} from "@/lib/helpers/dynamic" diff --git a/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx b/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx index f4f03608a8..dede33f89c 100644 --- a/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx +++ b/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx @@ -1,4 +1,4 @@ -import {usePostHogAg} from "@/hooks/usePostHogAg" +import {usePostHogAg} from "@/lib/helpers/analytics/hooks/usePostHogAg" import {Environment, Variant} from "@/lib/Types" import {variantNameWithRev} from "@/lib/helpers/variantHelper" import {fetchEnvironments, createPublishVariant} from "@/services/deployment/api" diff --git a/agenta-web/src/contexts/profile.context.tsx b/agenta-web/src/contexts/profile.context.tsx index a59ffa4229..bcb6fd8bb7 100644 --- a/agenta-web/src/contexts/profile.context.tsx +++ b/agenta-web/src/contexts/profile.context.tsx @@ -1,4 +1,4 @@ -import {usePostHogAg} from "@/hooks/usePostHogAg" +import {usePostHogAg} from "@/lib/helpers/analytics/hooks/usePostHogAg" import {useSession} from "@/hooks/useSession" import useStateCallback from "@/hooks/useStateCallback" import {isDemo} from "@/lib/helpers/utils" diff --git a/agenta-web/src/hooks/useSession.ts b/agenta-web/src/hooks/useSession.ts index df7fb53c03..827702d408 100644 --- a/agenta-web/src/hooks/useSession.ts +++ b/agenta-web/src/hooks/useSession.ts @@ -1,9 +1,8 @@ import {useProfileData} from "@/contexts/profile.context" import {isDemo} from "@/lib/helpers/utils" import {useRouter} from "next/router" -import posthog from "posthog-js" import {useSessionContext} from "supertokens-auth-react/recipe/session" -import {signOut} from "supertokens-auth-react/recipe/session" +import {signOut} from "supertokens-auth-react/recipe/session/signOut" export const useSession: () => {loading: boolean; doesSessionExist: boolean; logout: () => void} = isDemo() @@ -17,7 +16,8 @@ export const useSession: () => {loading: boolean; doesSessionExist: boolean; log doesSessionExist: (res as any).doesSessionExist, logout: () => { signOut() - .then(() => { + .then(async () => { + const posthog = (await import("posthog-js")).default posthog.reset() reset() router.push("/auth") diff --git a/agenta-web/src/hooks/usePostHogAg.ts b/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts similarity index 51% rename from agenta-web/src/hooks/usePostHogAg.ts rename to agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts index 8b3a4655e6..d1ea894de8 100644 --- a/agenta-web/src/hooks/usePostHogAg.ts +++ b/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts @@ -1,35 +1,41 @@ import {useLayoutEffect} from "react" import {isDemo, generateOrRetrieveDistinctId} from "@/lib/helpers/utils" -import {usePostHog} from "posthog-js/react" import {useProfileData} from "@/contexts/profile.context" +import {useAtom} from "jotai" +import {posthogAtom} from "../store/atoms" +import {type PostHog} from "posthog-js" export const usePostHogAg = () => { const trackingEnabled = process.env.NEXT_PUBLIC_TELEMETRY_TRACKING_ENABLED === "true" const {user} = useProfileData() - const posthog = usePostHog() + const [posthog] = useAtom(posthogAtom) const _id: string | undefined = isDemo() ? user?.email : generateOrRetrieveDistinctId() - - const capture: typeof posthog.capture = (...args) => { + const capture: PostHog["capture"] = (...args) => { if (trackingEnabled && user?.id) { - return posthog.capture(...args) + return posthog?.capture?.(...args) } return undefined } - - const identify: typeof posthog.identify = (id, ...args) => { + const identify: PostHog["identify"] = (id, ...args) => { if (trackingEnabled && user?.id) { - posthog.identify(_id !== undefined ? _id : id, ...args) + console.log("POSTHOG: identify") + posthog?.identify?.(_id !== undefined ? _id : id, ...args) } } - useLayoutEffect(() => { - if (!trackingEnabled) posthog.opt_out_capturing() - }, [trackingEnabled]) + if (!posthog) return + + if (!trackingEnabled) { + console.log("POSTHOG: opt_out_capturing") + posthog.opt_out_capturing() + } + }, [posthog, trackingEnabled]) useLayoutEffect(() => { + if (!posthog) return if (posthog.get_distinct_id() !== _id) identify() - }, [user?.id]) + }, [posthog, _id]) return {...posthog, identify, capture} } From cd680e2dd50a20799dafa66dfbef55715ed98f53 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Mon, 9 Dec 2024 15:33:39 +0100 Subject: [PATCH 03/11] fix(frontend): broken signOut function import --- agenta-web/src/hooks/useSession.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/agenta-web/src/hooks/useSession.ts b/agenta-web/src/hooks/useSession.ts index 827702d408..8312247920 100644 --- a/agenta-web/src/hooks/useSession.ts +++ b/agenta-web/src/hooks/useSession.ts @@ -2,7 +2,7 @@ import {useProfileData} from "@/contexts/profile.context" import {isDemo} from "@/lib/helpers/utils" import {useRouter} from "next/router" import {useSessionContext} from "supertokens-auth-react/recipe/session" -import {signOut} from "supertokens-auth-react/recipe/session/signOut" +import {signOut} from "supertokens-auth-react/recipe/session" export const useSession: () => {loading: boolean; doesSessionExist: boolean; logout: () => void} = isDemo() From 0f874b5ea5e7cf1a973c8de069f5d353e1a66398 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Mon, 9 Dec 2024 16:19:50 +0100 Subject: [PATCH 04/11] chore(frontend): update import path on changed file --- agenta-web/src/components/pages/app-management/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/agenta-web/src/components/pages/app-management/index.tsx b/agenta-web/src/components/pages/app-management/index.tsx index 72b760b8ac..1e557487a2 100644 --- a/agenta-web/src/components/pages/app-management/index.tsx +++ b/agenta-web/src/components/pages/app-management/index.tsx @@ -7,7 +7,7 @@ import {waitForAppToStart} from "@/services/api" import {createUseStyles} from "react-jss" import {useAppsData} from "@/contexts/app.context" import {useProfileData} from "@/contexts/profile.context" -import {usePostHogAg} from "@/hooks/usePostHogAg" +import {usePostHogAg} from "@/lib/helpers/analytics/hooks/usePostHogAg" import {LlmProvider, getAllProviderLlmKeys} from "@/lib/helpers/llmProviders" import {dynamicComponent, dynamicContext} from "@/lib/helpers/dynamic" import dayjs from "dayjs" From 9bbb90c61f98222f53ee8968a709b39b3f89838f Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Mon, 9 Dec 2024 18:57:20 +0100 Subject: [PATCH 05/11] improve for null returns --- .../Playground/Views/ParametersView.tsx | 2 +- .../Playground/Views/PublishVariantModal.tsx | 2 +- .../components/pages/app-management/index.tsx | 2 +- agenta-web/src/contexts/profile.context.tsx | 2 +- .../lib/helpers/analytics/hooks/usePostHogAg.ts | 16 +++++++++++++--- 5 files changed, 17 insertions(+), 7 deletions(-) diff --git a/agenta-web/src/components/Playground/Views/ParametersView.tsx b/agenta-web/src/components/Playground/Views/ParametersView.tsx index a9ba316b5f..72da9eda90 100644 --- a/agenta-web/src/components/Playground/Views/ParametersView.tsx +++ b/agenta-web/src/components/Playground/Views/ParametersView.tsx @@ -128,7 +128,7 @@ const ParametersView: React.FC = ({ onStateChange(false) res(true) }) - posthog.capture("variant_saved", {variant_id: variant.variantId}) + posthog?.capture?.("variant_saved", {variant_id: variant.variantId}) }) } diff --git a/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx b/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx index dede33f89c..ab4221e04c 100644 --- a/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx +++ b/agenta-web/src/components/Playground/Views/PublishVariantModal.tsx @@ -58,7 +58,7 @@ const PublishVariantModal: React.FC = ({ closeModal() await loadEnvironments() message.success(`Published ${variant.variantName} to ${envName}`) - posthog.capture("app_deployed", {app_id: appId, environment: envName}) + posthog?.capture?.("app_deployed", {app_id: appId, environment: envName}) }) } diff --git a/agenta-web/src/components/pages/app-management/index.tsx b/agenta-web/src/components/pages/app-management/index.tsx index 1e557487a2..6a69ef89a7 100644 --- a/agenta-web/src/components/pages/app-management/index.tsx +++ b/agenta-web/src/components/pages/app-management/index.tsx @@ -130,7 +130,7 @@ const AppManagement: React.FC = () => { setFetchingTemplate(false) if (status === "success") { mutate() - posthog.capture("app_deployment", { + posthog?.capture?.("app_deployment", { properties: { app_id: appId, environment: "UI", diff --git a/agenta-web/src/contexts/profile.context.tsx b/agenta-web/src/contexts/profile.context.tsx index bcb6fd8bb7..815b616fcf 100644 --- a/agenta-web/src/contexts/profile.context.tsx +++ b/agenta-web/src/contexts/profile.context.tsx @@ -38,7 +38,7 @@ const ProfileContextProvider: React.FC = ({children}) => { setLoading(true) fetchProfile() .then((profile) => { - posthog.identify() + posthog?.identify?.() setUser(profile.data, onSuccess) }) .catch((error) => { diff --git a/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts b/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts index d1ea894de8..a7ef761edb 100644 --- a/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts +++ b/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts @@ -5,7 +5,12 @@ import {useAtom} from "jotai" import {posthogAtom} from "../store/atoms" import {type PostHog} from "posthog-js" -export const usePostHogAg = () => { +interface ExtendedPostHog extends PostHog { + identify: PostHog["identify"] + capture: PostHog["capture"] +} + +export const usePostHogAg = (): ExtendedPostHog | null => { const trackingEnabled = process.env.NEXT_PUBLIC_TELEMETRY_TRACKING_ENABLED === "true" const {user} = useProfileData() const [posthog] = useAtom(posthogAtom) @@ -19,7 +24,6 @@ export const usePostHogAg = () => { } const identify: PostHog["identify"] = (id, ...args) => { if (trackingEnabled && user?.id) { - console.log("POSTHOG: identify") posthog?.identify?.(_id !== undefined ? _id : id, ...args) } } @@ -37,5 +41,11 @@ export const usePostHogAg = () => { if (posthog.get_distinct_id() !== _id) identify() }, [posthog, _id]) - return {...posthog, identify, capture} + return posthog + ? ({ + ...posthog, + identify, + capture, + } as ExtendedPostHog) + : null } From a81cdffe7f8227628b5e83769d1b623938d80839 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Tue, 10 Dec 2024 11:57:01 +0100 Subject: [PATCH 06/11] chore(frontend): remove console log --- agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx index b58e822175..f7b1011560 100644 --- a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -20,7 +20,6 @@ const CustomPosthogProvider = ({children}: {children: React.ReactNode}) => { api_host: "https://app.posthog.com", // Enable debug mode in development loaded: (posthog) => { - console.log("initialized posthog", process.env.NEXT_PUBLIC_POSTHOG_API_KEY) setPosthogClient(posthog) if (process.env.NODE_ENV === "development") posthog.debug() }, From bfaf2838103da927225ad625b85f6d8d87b5afa1 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Tue, 10 Dec 2024 12:23:36 +0100 Subject: [PATCH 07/11] enhance(frontend): allow posthog provider accept config options --- .../src/lib/helpers/analytics/AgPosthogProvider.tsx | 9 +++++---- agenta-web/src/lib/helpers/analytics/store/atoms.ts | 3 ++- agenta-web/src/lib/helpers/analytics/types.d.ts | 7 +++++++ agenta-web/src/pages/_app.tsx | 6 +++++- 4 files changed, 19 insertions(+), 6 deletions(-) create mode 100644 agenta-web/src/lib/helpers/analytics/types.d.ts diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx index f7b1011560..2f6849c1fc 100644 --- a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -1,9 +1,10 @@ import {useCallback, useEffect, useRef} from "react" import {useRouter} from "next/router" import {useAtom} from "jotai" -import {posthogAtom} from "./store/atoms" +import {posthogAtom, type PostHogConfig} from "./store/atoms" +import {CustomPosthogProviderType} from "./types" -const CustomPosthogProvider = ({children}: {children: React.ReactNode}) => { +const CustomPosthogProvider: CustomPosthogProviderType = ({children, config}) => { const router = useRouter() const loadingPosthog = useRef(false) const [posthogClient, setPosthogClient] = useAtom(posthogAtom) @@ -24,9 +25,9 @@ const CustomPosthogProvider = ({children}: {children: React.ReactNode}) => { if (process.env.NODE_ENV === "development") posthog.debug() }, capture_pageview: false, - persistence: "localStorage+cookie", + ...config, }) - }, [posthogClient, setPosthogClient]) + }, [config, posthogClient, setPosthogClient]) useEffect(() => { initPosthog() diff --git a/agenta-web/src/lib/helpers/analytics/store/atoms.ts b/agenta-web/src/lib/helpers/analytics/store/atoms.ts index 5907eb709b..55acac9d8c 100644 --- a/agenta-web/src/lib/helpers/analytics/store/atoms.ts +++ b/agenta-web/src/lib/helpers/analytics/store/atoms.ts @@ -1,4 +1,5 @@ import {atom} from "jotai" -import {type PostHog} from "posthog-js" +import {type PostHog, type PostHogConfig} from "posthog-js" +export type {PostHogConfig} export const posthogAtom = atom(null) diff --git a/agenta-web/src/lib/helpers/analytics/types.d.ts b/agenta-web/src/lib/helpers/analytics/types.d.ts new file mode 100644 index 0000000000..d55cc0d99c --- /dev/null +++ b/agenta-web/src/lib/helpers/analytics/types.d.ts @@ -0,0 +1,7 @@ +import {type PostHogConfig} from "./store/atoms" + +export interface CustomPosthogProviderType + extends React.FC<{ + children: React.ReactNode + config: Partial + }> {} diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index ca98a01c65..8866c081f8 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -29,7 +29,11 @@ export default function App({Component, pageProps}: AppProps) {
- + From 55e8968aed0a3c0787061e36be59fac45c40c290 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Wed, 11 Dec 2024 13:07:00 +0100 Subject: [PATCH 08/11] enhance(frontend): add import error handling to AgPosthogProvider --- .../helpers/analytics/AgPosthogProvider.tsx | 43 +++++++++++-------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx index 2f6849c1fc..fbd649e547 100644 --- a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -1,4 +1,4 @@ -import {useCallback, useEffect, useRef} from "react" +import {useCallback, useEffect, useRef, useState} from "react" import {useRouter} from "next/router" import {useAtom} from "jotai" import {posthogAtom, type PostHogConfig} from "./store/atoms" @@ -6,28 +6,33 @@ import {CustomPosthogProviderType} from "./types" const CustomPosthogProvider: CustomPosthogProviderType = ({children, config}) => { const router = useRouter() - const loadingPosthog = useRef(false) + const [loadingPosthog, setLoadingPosthog] = useState(false) const [posthogClient, setPosthogClient] = useAtom(posthogAtom) const initPosthog = useCallback(async () => { if (!!posthogClient) return - if (loadingPosthog.current) return - - loadingPosthog.current = true - - const posthog = (await import("posthog-js")).default - - posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { - api_host: "https://app.posthog.com", - // Enable debug mode in development - loaded: (posthog) => { - setPosthogClient(posthog) - if (process.env.NODE_ENV === "development") posthog.debug() - }, - capture_pageview: false, - ...config, - }) - }, [config, posthogClient, setPosthogClient]) + if (loadingPosthog) return + + setLoadingPosthog(true) + + try { + const posthog = (await import("posthog-js")).default + + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { + api_host: "https://app.posthog.com", + // Enable debug mode in development + loaded: (posthog) => { + setPosthogClient(posthog) + if (process.env.NODE_ENV === "development") posthog.debug() + setLoadingPosthog(false) + }, + capture_pageview: false, + ...config, + }) + } catch (loadError) { + setLoadingPosthog(false) + } + }, [loadingPosthog, config, posthogClient, setPosthogClient]) useEffect(() => { initPosthog() From 3aef1fdb5fb0818030df90f7f6912f6d865921ba Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Wed, 11 Dec 2024 14:37:15 +0100 Subject: [PATCH 09/11] utilize finally --- agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx index fbd649e547..0bceff8190 100644 --- a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -18,18 +18,17 @@ const CustomPosthogProvider: CustomPosthogProviderType = ({children, config}) => try { const posthog = (await import("posthog-js")).default - posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { + posthog.init("test", { api_host: "https://app.posthog.com", // Enable debug mode in development loaded: (posthog) => { setPosthogClient(posthog) if (process.env.NODE_ENV === "development") posthog.debug() - setLoadingPosthog(false) }, capture_pageview: false, ...config, }) - } catch (loadError) { + } finally { setLoadingPosthog(false) } }, [loadingPosthog, config, posthogClient, setPosthogClient]) From 69dc703307ae42cf48d7a528e8dc1758888ae51f Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Wed, 11 Dec 2024 14:45:30 +0100 Subject: [PATCH 10/11] chore(frontend): code cleanup --- agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx index 0bceff8190..f4d0b3f7f3 100644 --- a/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx +++ b/agenta-web/src/lib/helpers/analytics/AgPosthogProvider.tsx @@ -18,7 +18,7 @@ const CustomPosthogProvider: CustomPosthogProviderType = ({children, config}) => try { const posthog = (await import("posthog-js")).default - posthog.init("test", { + posthog.init(process.env.NEXT_PUBLIC_POSTHOG_API_KEY!, { api_host: "https://app.posthog.com", // Enable debug mode in development loaded: (posthog) => { From 44aa9816af87df6b5284fab520a6a5e5409bc3b0 Mon Sep 17 00:00:00 2001 From: Arda Erzin Date: Wed, 11 Dec 2024 15:59:45 +0100 Subject: [PATCH 11/11] chore(frontend): fix conflict and bring useIsomorphicLayoutEffect improvements here --- agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts b/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts index a7ef761edb..ab3bb2a08f 100644 --- a/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts +++ b/agenta-web/src/lib/helpers/analytics/hooks/usePostHogAg.ts @@ -1,9 +1,9 @@ -import {useLayoutEffect} from "react" import {isDemo, generateOrRetrieveDistinctId} from "@/lib/helpers/utils" import {useProfileData} from "@/contexts/profile.context" import {useAtom} from "jotai" import {posthogAtom} from "../store/atoms" import {type PostHog} from "posthog-js" +import useIsomorphicLayoutEffect from "@/hooks/useIsomorphicLayoutEffect" interface ExtendedPostHog extends PostHog { identify: PostHog["identify"] @@ -27,7 +27,7 @@ export const usePostHogAg = (): ExtendedPostHog | null => { posthog?.identify?.(_id !== undefined ? _id : id, ...args) } } - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (!posthog) return if (!trackingEnabled) { @@ -36,7 +36,7 @@ export const usePostHogAg = (): ExtendedPostHog | null => { } }, [posthog, trackingEnabled]) - useLayoutEffect(() => { + useIsomorphicLayoutEffect(() => { if (!posthog) return if (posthog.get_distinct_id() !== _id) identify() }, [posthog, _id])