Update instrumentation clients

Author: samkim

components/scripts.tsx

@@ -1,46 +1,14 @@
-"use client";
+'use client';
 
-import inEU from "@segment/in-eu";
-import { usePathname, useSearchParams } from "next/navigation";
-import { Router } from "next/router";
-import Script from "next/script";
-import posthog from "posthog-js";
-import { Suspense, useEffect, useState } from "react";
+import inEU from '@segment/in-eu';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { Router } from 'next/router';
+import Script from 'next/script';
+import posthog from 'posthog-js';
+import { Suspense, useEffect, useState } from 'react';
 
-const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === "production";
-const baseDir = process.env.NEXT_PUBLIC_BASE_DIR || "";
-
-function Reo() {
-  const reoClientId = process.env.NEXT_PUBLIC_REO_CLIENT_ID;
-  const [loadReo, setLoadReo] = useState(false);
-  const [afterLoad, setAfterLoad] = useState(false);
-
-  useEffect(() => {
-    if (window) {
-      setLoadReo(!inEU());
-    }
-  }, [loadReo]);
-
-  useEffect(() => {
-    // @ts-ignore
-    if (afterLoad && window.Reo) {
-      // @ts-ignore
-      window.Reo.init({ clientID: reoClientId });
-    }
-  }, [afterLoad]);
-
-  return (
-    <div>
-      {reoClientId && isProd && loadReo && (
-        <Script
-          src={`https://static.reo.dev/${reoClientId}/reo.js`}
-          onLoad={() => setAfterLoad(true)}
-          defer
-        ></Script>
-      )}
-    </div>
-  );
-}
+const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
+const baseDir = process.env.NEXT_PUBLIC_BASE_DIR || '';
 
 function HubSpot() {
   const hsId = process.env.NEXT_PUBLIC_HUBSPOT_ID;
@@ -63,8 +31,8 @@ function HubSpot() {
       if (searchParams && searchParams.toString()) {
         path = path + `?${searchParams.toString()}`;
       }
-      hs.push(["setPath", path]);
-      hs.push(["trackPageView"]);
+      hs.push(['setPath', path]);
+      hs.push(['trackPageView']);
     }
   }, [afterLoad, pathname, searchParams]);
 
@@ -83,39 +51,10 @@ function HubSpot() {
   );
 }
 
-function Posthog() {
-  useEffect(() => {
-    if (inEU() || !process.env.NEXT_PUBLIC_POSTHOG_KEY) {
-      return;
-    }
-
-    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? "", {
-      api_host: isProd ? "/i" : process.env.NEXT_PUBLIC_POSTHOG_HOST, // See Posthog rewrites in next config
-      ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-      person_profiles: "always",
-      loaded: (posthog) => {
-        if (process.env.NODE_ENV === "development") posthog.debug();
-      },
-    });
-
-    const handleRouteChange = () => posthog?.capture("$pageview");
-
-    Router.events.on("routeChangeComplete", handleRouteChange);
-
-    return () => {
-      Router.events.off("routeChangeComplete", handleRouteChange);
-    };
-  }, []);
-
-  return <></>;
-}
-
 export default function Scripts() {
   return (
     <Suspense fallback={<></>}>
-      <Reo />
       <HubSpot />
-      <Posthog />
     </Suspense>
   );
 }

instrumentation-client.ts

@@ -0,0 +1,22 @@
+import posthog from 'posthog-js';
+import inEU from '@segment/in-eu';
+
+const isProd = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production';
+
+const initPostHog = () => {
+  if (inEU() || !process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+    return;
+  }
+
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY ?? '', {
+    api_host: isProd ? '/i' : process.env.NEXT_PUBLIC_POSTHOG_HOST, // See Posthog rewrites in next config
+    ui_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
+    defaults: '2025-11-30',
+    person_profiles: 'always',
+    loaded: (posthog) => {
+      if (process.env.NODE_ENV === 'development') posthog.debug();
+    },
+  });
+};
+
+initPostHog();