feat(posthog): added posthog for analytics (#1523)

* feat(posthog): added posthog for analytics

* added envvars to env.ts

Author: waleedlatif1

apps/sim/instrumentation-client.ts

@@ -5,7 +5,34 @@
  * It respects the user's telemetry preferences stored in localStorage.
  *
  */
-import { env } from './lib/env'
+import posthog from 'posthog-js'
+import { env, getEnv, isTruthy } from './lib/env'
+
+// Initialize PostHog only if explicitly enabled
+if (isTruthy(getEnv('NEXT_PUBLIC_POSTHOG_ENABLED')) && getEnv('NEXT_PUBLIC_POSTHOG_KEY')) {
+  posthog.init(getEnv('NEXT_PUBLIC_POSTHOG_KEY')!, {
+    api_host: '/ingest',
+    ui_host: 'https://us.posthog.com',
+    person_profiles: 'identified_only',
+    capture_pageview: true,
+    capture_pageleave: true,
+    capture_performance: true,
+    session_recording: {
+      maskAllInputs: false,
+      maskInputOptions: {
+        password: true,
+        email: false,
+      },
+      recordCrossOriginIframes: false,
+      recordHeaders: true,
+      recordBody: true,
+    },
+    autocapture: true,
+    capture_dead_clicks: true,
+    persistence: 'localStorage+cookie',
+    enable_heatmaps: true,
+  })
+}
 
 if (typeof window !== 'undefined') {
   const TELEMETRY_STATUS_KEY = 'simstudio-telemetry-status'

apps/sim/lib/env.ts

@@ -90,6 +90,7 @@ export const env = createEnv({
     TELEMETRY_ENDPOINT:                    z.string().url().optional(),            // Custom telemetry/analytics endpoint
     COST_MULTIPLIER:                       z.number().optional(),                  // Multiplier for cost calculations
     LOG_LEVEL:                             z.enum(['DEBUG', 'INFO', 'WARN', 'ERROR']).optional(), // Minimum log level to display (defaults to ERROR in production, DEBUG in development)
+    POSTHOG_ENABLED:                       z.boolean().optional(),                 // Enable PostHog analytics and session recording
 
     // External Services
     BROWSERBASE_API_KEY:                   z.string().min(1).optional(),           // Browserbase API key for browser automation
@@ -258,6 +259,8 @@ export const env = createEnv({
     // Analytics & Tracking
     NEXT_PUBLIC_GOOGLE_API_KEY:            z.string().optional(),                  // Google API key for client-side API calls
     NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER:     z.string().optional(),                  // Google project number for Drive picker
+    NEXT_PUBLIC_POSTHOG_ENABLED:           z.boolean().optional(),                 // Enable PostHog analytics (client-side)
+    NEXT_PUBLIC_POSTHOG_KEY:               z.string().optional(),                  // PostHog project API key
 
     // UI Branding & Whitelabeling
     NEXT_PUBLIC_BRAND_NAME:                z.string().optional(),                  // Custom brand name (defaults to "Sim")
@@ -317,6 +320,8 @@ export const env = createEnv({
     NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED: process.env.NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED,
     NEXT_PUBLIC_E2B_ENABLED: process.env.NEXT_PUBLIC_E2B_ENABLED,
     NEXT_PUBLIC_COPILOT_TRAINING_ENABLED: process.env.NEXT_PUBLIC_COPILOT_TRAINING_ENABLED,
+    NEXT_PUBLIC_POSTHOG_ENABLED: process.env.NEXT_PUBLIC_POSTHOG_ENABLED,
+    NEXT_PUBLIC_POSTHOG_KEY: process.env.NEXT_PUBLIC_POSTHOG_KEY,
     NODE_ENV: process.env.NODE_ENV,
     NEXT_TELEMETRY_DISABLED: process.env.NEXT_TELEMETRY_DISABLED,
   },

apps/sim/lib/session/session-context.tsx

@@ -2,6 +2,7 @@
 
 import type React from 'react'
 import { createContext, useCallback, useEffect, useMemo, useState } from 'react'
+import posthog from 'posthog-js'
 import { client } from '@/lib/auth-client'
 
 export type AppSession = {
@@ -52,6 +53,25 @@ export function SessionProvider({ children }: { children: React.ReactNode }) {
     loadSession()
   }, [loadSession])
 
+  useEffect(() => {
+    if (isPending || typeof posthog.identify !== 'function') {
+      return
+    }
+
+    try {
+      if (data?.user) {
+        posthog.identify(data.user.id, {
+          email: data.user.email,
+          name: data.user.name,
+          email_verified: data.user.emailVerified,
+          created_at: data.user.createdAt,
+        })
+      } else {
+        posthog.reset()
+      }
+    } catch {}
+  }, [data, isPending])
+
   const value = useMemo<SessionHookResult>(
     () => ({ data, isPending, error, refetch: loadSession }),
     [data, isPending, error, loadSession]

apps/sim/next.config.ts

@@ -238,6 +238,22 @@ const nextConfig: NextConfig = {
 
     return redirects
   },
+  async rewrites() {
+    if (!isTruthy(env.POSTHOG_ENABLED)) {
+      return []
+    }
+
+    return [
+      {
+        source: '/ingest/static/:path*',
+        destination: 'https://us-assets.i.posthog.com/static/:path*',
+      },
+      {
+        source: '/ingest/:path*',
+        destination: 'https://us.i.posthog.com/:path*',
+      },
+    ]
+  },
 }
 
 export default nextConfig

apps/sim/package.json

@@ -28,8 +28,8 @@
     "@aws-sdk/s3-request-presigner": "^3.779.0",
     "@azure/communication-email": "1.0.0",
     "@azure/storage-blob": "12.27.0",
-    "@better-auth/stripe": "1.3.12",
     "@better-auth/sso": "1.3.12",
+    "@better-auth/stripe": "1.3.12",
     "@browserbasehq/stagehand": "^2.0.0",
     "@cerebras/cerebras_cloud_sdk": "^1.23.0",
     "@e2b/code-interpreter": "^2.0.0",
@@ -93,6 +93,8 @@
     "openai": "^4.91.1",
     "papaparse": "5.5.3",
     "pdf-parse": "1.1.1",
+    "posthog-js": "1.268.9",
+    "posthog-node": "5.9.2",
     "prismjs": "^1.30.0",
     "react": "19.1.0",
     "react-colorful": "5.6.1",