Merge pull request #1236 from mykonos-ibiza/feat-product-analytics

feat: analytics on various events

Author: escapade-mckv

frontend/instrumentation-client.ts

@@ -0,0 +1,11 @@
+import posthog from 'posthog-js';
+
+if (process.env.NEXT_PUBLIC_POSTHOG_KEY) {
+  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
+    api_host: '/ingest',
+    ui_host: 'https://eu.posthog.com',
+    defaults: '2025-05-24',
+    capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
+    debug: process.env.NODE_ENV === 'development',
+  });
+}

frontend/next.config.ts

@@ -2,6 +2,23 @@ import type { NextConfig } from 'next';
 
 const nextConfig = (): NextConfig => ({
   output: (process.env.NEXT_OUTPUT as 'standalone') || undefined,
+  async rewrites() {
+    return [
+      {
+        source: '/ingest/static/:path*',
+        destination: 'https://eu-assets.i.posthog.com/static/:path*',
+      },
+      {
+        source: '/ingest/:path*',
+        destination: 'https://eu.i.posthog.com/:path*',
+      },
+      {
+        source: '/ingest/flags',
+        destination: 'https://eu.i.posthog.com/flags',
+      },
+    ];
+  },
+  skipTrailingSlashRedirect: true,
 });
 
 export default nextConfig;

frontend/package-lock.json

@@ -89,6 +89,8 @@
     "papaparse": "^5.5.2",
     "pdfjs-dist": "4.8.69",
     "postcss": "8.4.33",
+    "posthog-js": "^1.258.6",
+    "posthog-node": "^5.6.0",
     "react": "^18",
     "react-day-picker": "^8.10.1",
     "react-diff-viewer-continued": "^3.4.0",

frontend/package.json

@@ -9,6 +9,7 @@ import { Analytics } from '@vercel/analytics/react';
 import { GoogleAnalytics } from '@next/third-parties/google';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import Script from 'next/script';
+import { PostHogIdentify } from '@/components/posthog-identify';
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -152,6 +153,7 @@ export default function RootLayout({
           <Analytics />
           <GoogleAnalytics gaId="G-6ETJFB3PT3" />
           <SpeedInsights />
+          <PostHogIdentify />
         </ThemeProvider>
       </body>
     </html>

frontend/src/app/layout.tsx

@@ -16,6 +16,7 @@ import {
 import { toast } from 'sonner';
 import { isLocalMode, isYearlyCommitmentDowngrade, isPlanChangeAllowed, getPlanInfo } from '@/lib/config';
 import { useSubscription, useSubscriptionCommitment } from '@/hooks/react-query';
+import posthog from 'posthog-js';
 
 // Constants
 export const SUBSCRIPTION_PLANS = {
@@ -241,6 +242,7 @@ function PricingTier({
         case 'checkout_created':
         case 'commitment_created':
           if (response.url) {
+            posthog.capture('plan_purchase_attempted');
             window.location.href = response.url;
           } else {
             console.error(
@@ -255,6 +257,7 @@ function PricingTier({
             ? `Subscription upgraded from $${response.details.current_price} to $${response.details.new_price}`
             : 'Subscription updated successfully';
           toast.success(upgradeMessage);
+          posthog.capture('plan_upgraded');
           if (onSubscriptionUpdate) onSubscriptionUpdate();
           break;
         case 'commitment_blocks_downgrade':
@@ -276,6 +279,7 @@ function PricingTier({
               </p>
             </div>,
           );
+          posthog.capture('plan_downgraded');
           if (onSubscriptionUpdate) onSubscriptionUpdate();
           break;
         case 'no_change':

frontend/src/components/home/sections/pricing-section.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import posthog from 'posthog-js';
+import { useEffect } from 'react';
+import { createClient } from '@/lib/supabase/client';
+
+export const PostHogIdentify = () => {
+  useEffect(() => {
+    const supabase = createClient();
+    const listener = supabase.auth.onAuthStateChange((_, session) => {
+      if (session) {
+        posthog.identify(session.user.id, { email: session.user.email });
+      } else {
+        posthog.reset();
+      }
+    });
+
+    return () => {
+      listener.data.subscription.unsubscribe();
+    };
+  }, []);
+
+  return null;
+};

frontend/src/components/posthog-identify.tsx

@@ -41,6 +41,7 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import { cn } from '@/lib/utils';
 import { usePathname, useSearchParams } from 'next/navigation';
 import { useFeatureFlags } from '@/lib/feature-flags';
+import posthog from 'posthog-js';
 
 export function SidebarLeft({
   ...props
@@ -150,7 +151,7 @@ export function SidebarLeft({
           <Link href="/dashboard">
             <SidebarMenuButton className={cn({
               'bg-accent text-accent-foreground font-medium': pathname === '/dashboard',
-            })}>
+            })} onClick={() => posthog.capture('new_task_clicked')}>
               <Plus className="h-4 w-4 mr-1" />
               <span className="flex items-center justify-between w-full">
                 New Task

frontend/src/components/sidebar/sidebar-left.tsx

@@ -28,6 +28,7 @@ import { useSubscriptionWithStreaming } from '@/hooks/react-query/subscriptions/
 import { isLocalMode } from '@/lib/config';
 import { BillingModal } from '@/components/billing/billing-modal';
 import { useRouter } from 'next/navigation';
+import posthog from 'posthog-js';
 
 export interface ChatInputHandles {
   getPendingFiles: () => File[];
@@ -282,6 +283,8 @@ export const ChatInput = forwardRef<ChatInputHandles, ChatInputProps>(
         thinkingEnabled = true;
       }
 
+      posthog.capture("task_prompt_submitted", { message });
+
       onSubmit(message, {
         model_name: baseModelName,
         enable_thinking: thinkingEnabled,

frontend/src/components/thread/chat-input/chat-input.tsx

@@ -1,5 +1,6 @@
 import { createClient } from '@/lib/supabase/client';
 import { handleApiError } from './error-handler';
+import posthog from 'posthog-js';
 
 // Get backend URL from environment variables
 const API_URL = process.env.NEXT_PUBLIC_BACKEND_URL || '';
@@ -838,6 +839,8 @@ export const stopAgent = async (agentRunId: string): Promise<void> => {
     cache: 'no-store',
   });
 
+  posthog.capture('task_abandoned', { agentRunId });
+
   if (!response.ok) {
     const stopError = new Error(`Error stopping agent: ${response.statusText}`);
     handleApiError(stopError, { operation: 'stop agent', resource: 'AI assistant' });