Files
supabase/apps/studio/lib/telemetry.tsx
Sean Oliver e3e8528f72 feat: add client-side PostHog telemetry tracking (#37442)
Adds client-side PostHog tracking to run in parallel with server-side telemetry across studio, docs, and www. This enables session replays and resolves a race condition where page views arrive before group assignments resulting in attribution errors.

Changes:
- Created PostHog client wrapper with consent-aware initialization in common package
- Integrated PostHog client calls into existing telemetry functions to send events to both PostHog (client) and backend (server)
- Updated CSP to allow connections to PostHog endpoints
- Added environment variable support for all apps
- PostHog client accepts consent as a parameter and respects user preferences
- Events can be distinguished in PostHog by $lib property (posthog-js vs posthog-node)
- PostHog URL configured based on environment (staging/local uses ph.supabase.green)
- Maintains full backward compatibility with existing telemetry system

Resolves GROWTH-438
Resolves GROWTH-271
2025-08-06 09:15:51 -07:00

25 lines
910 B
TypeScript

import { PageTelemetry } from 'common'
import { API_URL, IS_PLATFORM } from 'lib/constants'
import { useConsentToast } from 'ui-patterns/consent'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
export function Telemetry() {
// Although this is "technically" breaking the rules of hooks
// IS_PLATFORM never changes within a session, so this won't cause any issues
// eslint-disable-next-line react-hooks/rules-of-hooks
const { hasAcceptedConsent } = IS_PLATFORM ? useConsentToast() : { hasAcceptedConsent: true }
// Get org from selected organization query because it's not
// always available in the URL params
const { data: organization } = useSelectedOrganizationQuery()
return (
<PageTelemetry
API_URL={API_URL}
hasAcceptedConsent={hasAcceptedConsent}
enabled={IS_PLATFORM}
organizationSlug={organization?.slug}
/>
)
}