feat: add PostHog telemetry provider for cloud builds

- Add posthog-js dependency
- Create PostHogTelemetryProvider following MixpanelTelemetryProvider pattern
- Register provider in initTelemetry.ts
- Read posthog_project_token and posthog_api_host from window.__CONFIG__ (runtime config from /features endpoint)
- Tree-shaken away in OSS builds (verified)

Author: robinjhuang

global.d.ts

@@ -33,6 +33,8 @@ interface Window {
     gtm_container_id?: string
     ga_measurement_id?: string
     mixpanel_token?: string
+    posthog_project_token?: string
+    posthog_api_host?: string
     require_whitelist?: boolean
     subscription_required?: boolean
     max_upload_size?: number

package.json

@@ -100,6 +100,7 @@
     "loglevel": "^1.9.2",
     "marked": "^15.0.11",
     "pinia": "catalog:",
+    "posthog-js": "catalog:",
     "primeicons": "catalog:",
     "primevue": "catalog:",
     "reka-ui": "catalog:",

pnpm-lock.yaml

@@ -86,6 +86,7 @@ catalog:
   picocolors: ^1.1.1
   pinia: ^3.0.4
   postcss-html: ^1.8.0
+  posthog-js: ^1.358.1
   pretty-bytes: ^7.1.0
   primeicons: ^7.0.0
   primevue: ^4.2.5

pnpm-workspace.yaml

@@ -29,6 +29,8 @@ export type RemoteConfig = {
   gtm_container_id?: string
   ga_measurement_id?: string
   mixpanel_token?: string
+  posthog_project_token?: string
+  posthog_api_host?: string
   subscription_required?: boolean
   server_health_alert?: ServerHealthAlert
   max_upload_size?: number

src/platform/remoteConfig/types.ts

@@ -24,18 +24,21 @@ export async function initTelemetry(): Promise<void> {
       { TelemetryRegistry },
       { MixpanelTelemetryProvider },
       { GtmTelemetryProvider },
-      { ImpactTelemetryProvider }
+      { ImpactTelemetryProvider },
+      { PostHogTelemetryProvider }
     ] = await Promise.all([
       import('./TelemetryRegistry'),
       import('./providers/cloud/MixpanelTelemetryProvider'),
       import('./providers/cloud/GtmTelemetryProvider'),
-      import('./providers/cloud/ImpactTelemetryProvider')
+      import('./providers/cloud/ImpactTelemetryProvider'),
+      import('./providers/cloud/PostHogTelemetryProvider')
     ])
 
     const registry = new TelemetryRegistry()
     registry.registerProvider(new MixpanelTelemetryProvider())
     registry.registerProvider(new GtmTelemetryProvider())
     registry.registerProvider(new ImpactTelemetryProvider())
+    registry.registerProvider(new PostHogTelemetryProvider())
 
     setTelemetryRegistry(registry)
   })()

src/platform/telemetry/initTelemetry.ts

@@ -0,0 +1,232 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { TelemetryEvents } from '../../types'
+
+const hoisted = vi.hoisted(() => {
+  const mockCapture = vi.fn()
+  const mockInit = vi.fn()
+  const mockIdentify = vi.fn()
+  const mockPeopleSet = vi.fn()
+  const mockOnUserResolved = vi.fn()
+
+  return {
+    mockCapture,
+    mockInit,
+    mockIdentify,
+    mockPeopleSet,
+    mockOnUserResolved,
+    mockPosthog: {
+      default: {
+        init: mockInit,
+        capture: mockCapture,
+        identify: mockIdentify,
+        people: { set: mockPeopleSet }
+      }
+    }
+  }
+})
+
+vi.mock('vue', async () => {
+  const actual = await vi.importActual('vue')
+  return {
+    ...actual,
+    watch: vi.fn()
+  }
+})
+
+vi.mock('@/composables/auth/useCurrentUser', () => ({
+  useCurrentUser: () => ({
+    onUserResolved: hoisted.mockOnUserResolved
+  })
+}))
+
+vi.mock('@/platform/remoteConfig/remoteConfig', () => ({
+  remoteConfig: { value: null }
+}))
+
+vi.mock('posthog-js', () => hoisted.mockPosthog)
+
+import { PostHogTelemetryProvider } from './PostHogTelemetryProvider'
+
+function createProvider(
+  config: Partial<typeof window.__CONFIG__> = {}
+): PostHogTelemetryProvider {
+  const original = window.__CONFIG__
+  window.__CONFIG__ = { ...original, ...config }
+  const provider = new PostHogTelemetryProvider()
+  window.__CONFIG__ = original
+  return provider
+}
+
+describe('PostHogTelemetryProvider', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.__CONFIG__ = {
+      posthog_project_token: 'phc_test_token'
+    } as typeof window.__CONFIG__
+  })
+
+  describe('initialization', () => {
+    it('disables itself when posthog_project_token is not provided', async () => {
+      const provider = createProvider({ posthog_project_token: undefined })
+      await vi.dynamicImportSettled()
+
+      provider.trackSignupOpened()
+
+      expect(hoisted.mockCapture).not.toHaveBeenCalled()
+    })
+
+    it('calls posthog.init with the token and default api_host', async () => {
+      createProvider()
+      await vi.dynamicImportSettled()
+
+      expect(hoisted.mockInit).toHaveBeenCalledWith('phc_test_token', {
+        api_host: 'https://ph.comfy.org',
+        autocapture: false,
+        capture_pageview: false,
+        capture_pageleave: false,
+        persistence: 'localStorage+cookie'
+      })
+    })
+
+    it('uses custom api_host from config when provided', async () => {
+      window.__CONFIG__ = {
+        posthog_project_token: 'phc_test_token',
+        posthog_api_host: 'https://custom.host.com'
+      } as typeof window.__CONFIG__
+      new PostHogTelemetryProvider()
+      await vi.dynamicImportSettled()
+
+      expect(hoisted.mockInit).toHaveBeenCalledWith(
+        'phc_test_token',
+        expect.objectContaining({ api_host: 'https://custom.host.com' })
+      )
+    })
+
+    it('registers onUserResolved callback after init', async () => {
+      createProvider()
+      await vi.dynamicImportSettled()
+
+      expect(hoisted.mockOnUserResolved).toHaveBeenCalledOnce()
+    })
+
+    it('identifies user when onUserResolved fires', async () => {
+      createProvider()
+      await vi.dynamicImportSettled()
+
+      const callback = hoisted.mockOnUserResolved.mock.calls[0][0]
+      callback({ id: 'user-123' })
+
+      expect(hoisted.mockIdentify).toHaveBeenCalledWith('user-123')
+    })
+  })
+
+  describe('event tracking', () => {
+    it('captures events after initialization', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackSignupOpened()
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.USER_SIGN_UP_OPENED,
+        {}
+      )
+    })
+
+    it('captures events with metadata', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackAuth({ method: 'google' })
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.USER_AUTH_COMPLETED,
+        { method: 'google' }
+      )
+    })
+
+    it('queues events before initialization and flushes after', async () => {
+      const provider = createProvider()
+
+      provider.trackUserLoggedIn()
+      expect(hoisted.mockCapture).not.toHaveBeenCalled()
+
+      await vi.dynamicImportSettled()
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.USER_LOGGED_IN,
+        {}
+      )
+    })
+  })
+
+  describe('disabled events', () => {
+    it('does not capture default disabled events', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackWorkflowOpened({
+        missing_node_count: 0,
+        missing_node_types: []
+      })
+
+      expect(hoisted.mockCapture).not.toHaveBeenCalled()
+    })
+
+    it('captures events not in the disabled list', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackMonthlySubscriptionSucceeded()
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.MONTHLY_SUBSCRIPTION_SUCCEEDED,
+        {}
+      )
+    })
+  })
+
+  describe('survey tracking', () => {
+    it('sets user properties on survey submission', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      const responses = { familiarity: 'beginner', industry: 'tech' }
+      provider.trackSurvey('submitted', responses)
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.USER_SURVEY_SUBMITTED,
+        expect.objectContaining({ familiarity: 'beginner' })
+      )
+      expect(hoisted.mockPeopleSet).toHaveBeenCalled()
+    })
+
+    it('does not set user properties on survey opened', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackSurvey('opened')
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.USER_SURVEY_OPENED,
+        {}
+      )
+      expect(hoisted.mockPeopleSet).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('page view', () => {
+    it('captures page view with page_name property', async () => {
+      const provider = createProvider()
+      await vi.dynamicImportSettled()
+
+      provider.trackPageView('workflow_editor')
+
+      expect(hoisted.mockCapture).toHaveBeenCalledWith(
+        TelemetryEvents.PAGE_VIEW,
+        { page_name: 'workflow_editor' }
+      )
+    })
+  })
+})