Setup client side analytics

apps/app/app/(authenticated)/components/posthog-identifier.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useUser } from '@clerk/nextjs';
+import { analytics } from '@repo/design-system/lib/analytics/client';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useRef } from 'react';
+
+export const PostHogIdentifier = () => {
+  const { user } = useUser();
+  const identified = useRef(false);
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    // Track pageviews
+    if (pathname && analytics) {
+      let url = window.origin + pathname;
+      if (searchParams.toString()) {
+        url = `${url}?${searchParams.toString()}`;
+      }
+      analytics.capture('$pageview', {
+        $current_url: url,
+      });
+    }
+  }, [pathname, searchParams]);
+
+  useEffect(() => {
+    if (!user || identified.current) {
+      return;
+    }
+
+    analytics.identify(user.id, {
+      email: user.emailAddresses.at(0)?.emailAddress,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      createdAt: user.createdAt,
+      avatar: user.imageUrl,
+      phoneNumber: user.phoneNumbers.at(0)?.phoneNumber,
+    });
+
+    identified.current = true;
+  }, [user]);
+
+  return null;
+};

apps/app/app/(authenticated)/layout.tsx

@@ -2,6 +2,7 @@ import { auth, currentUser } from '@clerk/nextjs/server';
 import { SidebarProvider } from '@repo/design-system/components/ui/sidebar';
 import { showBetaFeature } from '@repo/feature-flags';
 import type { ReactElement, ReactNode } from 'react';
+import { PostHogIdentifier } from './components/posthog-identifier';
 import { GlobalSidebar } from './components/sidebar';
 
 type AppLayoutProperties = {
@@ -29,6 +30,7 @@ const AppLayout = async ({
         )}
         {children}
       </GlobalSidebar>
+      <PostHogIdentifier />
     </SidebarProvider>
   );
 };

packages/design-system/lib/analytics/client.ts

@@ -1,3 +1,17 @@
-import posthog from 'posthog-js';
+import posthog, { type PostHog } from 'posthog-js';
 
-export const analytics = posthog;
+const posthogApiKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
+const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST;
+
+if (!posthogApiKey || !posthogHost) {
+  throw new Error(
+    'NEXT_PUBLIC_POSTHOG_KEY or NEXT_PUBLIC_POSTHOG_HOST is not set'
+  );
+}
+
+export const analytics = posthog.init(posthogApiKey, {
+  api_host: '/ingest',
+  ui_host: 'https://us.posthog.com',
+  person_profiles: 'identified_only',
+  capture_pageview: false, // Disable automatic pageview capture, as we capture manually
+}) as PostHog;

packages/design-system/providers/posthog.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import posthog from 'posthog-js';
 import { PostHogProvider as PostHogProviderRaw } from 'posthog-js/react';
 import type { ReactNode } from 'react';
+import { analytics } from '../lib/analytics/client';
 
 const posthogKey = process.env.NEXT_PUBLIC_POSTHOG_KEY;
 const posthogHost = process.env.NEXT_PUBLIC_POSTHOG_HOST;
@@ -14,11 +14,12 @@ if (!posthogKey || !posthogHost) {
 }
 
 if (typeof window !== 'undefined') {
-  posthog.init(posthogKey, {
+  analytics.init(posthogKey, {
     api_host: posthogHost,
     person_profiles: 'identified_only', // or 'always' to create profiles for anonymous users as well
   });
 }
+
 export const PostHogProvider = ({ children }: { children: ReactNode }) => (
-  <PostHogProviderRaw client={posthog}>{children}</PostHogProviderRaw>
+  <PostHogProviderRaw client={analytics}>{children}</PostHogProviderRaw>
 );

packages/feature-flags/access.ts

@@ -20,8 +20,6 @@ export const getFlags = async (request: NextRequest) => {
     ])
   );
 
-  console.log(definitions, 'definitions');
-
   return NextResponse.json<ApiData>({
     definitions,
   });