-
Notifications
You must be signed in to change notification settings - Fork 52
feat: posthog #472
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
feat: posthog #472
Changes from 9 commits
2dc727a
d1f66c2
588952e
1025dae
43384c8
965d52c
259c870
e33b4fb
6dd2f88
8a352f7
805a02d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,8 @@ | ||
| 'use client'; | ||
| import { PostHogProvider } from '@posthog/react'; | ||
| import { Analytics } from '@vercel/analytics/react'; | ||
| import { PropsWithChildren } from 'react'; | ||
| import posthog from 'posthog-js'; | ||
| import { PropsWithChildren, useEffect } from 'react'; | ||
| import { ToastContainer, Zoom } from 'react-toastify'; | ||
| import 'react-toastify/dist/ReactToastify.css'; | ||
| import { MiniPayNoCeloBanner } from 'src/components/banner/MiniPayNoCeloBanner'; | ||
|
|
@@ -11,32 +13,89 @@ import { Header } from 'src/components/nav/Header'; | |
| import { LegalRestrict } from 'src/components/police'; | ||
| import { WagmiContext } from 'src/config/wagmi'; | ||
| import { TransactionModal } from 'src/features/transactions/TransactionModal'; | ||
| import { scrubEventUrlProperties } from 'src/utils/posthog'; | ||
| import { useIsSsr } from 'src/utils/ssr'; | ||
| import ENSProvider from 'src/utils/useAddressToLabel'; | ||
| import HistoryProvider from 'src/utils/useHistory'; | ||
| import StakingModeProvider from 'src/utils/useStakingMode'; | ||
| import 'src/vendor/inpage-metamask.js'; | ||
| import 'src/vendor/polyfill'; | ||
|
|
||
| function PHProvider({ children }: PropsWithChildren) { | ||
| useEffect(() => { | ||
| if (posthog.__loaded) return; | ||
| posthog.init(process.env.NEXT_PUBLIC_POSTHOG_PROJECT_TOKEN as string, { | ||
| api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST, | ||
| person_profiles: 'never', | ||
| autocapture: true, | ||
|
shazarre marked this conversation as resolved.
|
||
| mask_all_text: true, | ||
|
Comment on lines
+27
to
+31
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
This initialization never opts users out of session recording, so replay capture remains on by default unless the PostHog project is separately configured to disable it. In production environments where replay is enabled server-side, this can still collect DOM snapshots while the code and new privacy page state replay is disabled, creating a privacy/compliance gap. Set Useful? React with 👍 / 👎. |
||
| mask_all_element_attributes: true, | ||
| capture_pageview: true, | ||
| capture_pageleave: true, | ||
| persistence: 'sessionStorage', | ||
| defaults: '2026-01-30', | ||
| internal_or_test_user_hostname: null, | ||
| debug: false, | ||
| loaded: (posthog) => { | ||
| if (process.env.NODE_ENV === 'development') { | ||
| posthog.debug(); | ||
| } | ||
| }, | ||
| before_send: (event) => { | ||
| if (event !== null) { | ||
| delete event.properties['$ip']; | ||
| scrubEventUrlProperties(event.properties); | ||
| } | ||
|
|
||
| return event; | ||
| }, | ||
| }); | ||
| }, []); | ||
|
|
||
| useEffect(() => { | ||
| const markNoCapture = (mutations: MutationRecord[]) => { | ||
| for (const mutation of mutations) { | ||
| for (const node of mutation.addedNodes) { | ||
| if (!(node instanceof Element)) continue; | ||
| if (node.matches('[data-rk] [role="dialog"]')) { | ||
| node.classList.add('ph-no-capture'); | ||
| } | ||
| node.querySelectorAll('[data-rk] [role="dialog"]').forEach((el) => { | ||
| el.classList.add('ph-no-capture'); | ||
| }); | ||
| } | ||
| } | ||
| }; | ||
|
|
||
| const observer = new MutationObserver(markNoCapture); | ||
| observer.observe(document.body, { childList: true, subtree: true }); | ||
|
shazarre marked this conversation as resolved.
|
||
| return () => observer.disconnect(); | ||
| }, []); | ||
|
|
||
| return <PostHogProvider client={posthog}>{children}</PostHogProvider>; | ||
| } | ||
|
|
||
| export function App({ children }: PropsWithChildren<any>) { | ||
| return ( | ||
| <ErrorBoundary> | ||
| <SafeHydrate> | ||
| <WagmiContext> | ||
| <HistoryProvider> | ||
| <StakingModeProvider> | ||
| <ENSProvider> | ||
| <LegalRestrict> | ||
| <BodyLayout>{children}</BodyLayout> | ||
| </LegalRestrict> | ||
| <TransactionModal /> | ||
| <ErrorBoundaryInline> | ||
| <ToastContainer transition={Zoom} position="bottom-right" limit={12} /> | ||
| </ErrorBoundaryInline> | ||
| </ENSProvider> | ||
| </StakingModeProvider> | ||
| </HistoryProvider> | ||
| </WagmiContext> | ||
| <PHProvider> | ||
| <WagmiContext> | ||
| <HistoryProvider> | ||
| <StakingModeProvider> | ||
| <ENSProvider> | ||
| <LegalRestrict> | ||
| <BodyLayout>{children}</BodyLayout> | ||
| </LegalRestrict> | ||
| <TransactionModal /> | ||
| <ErrorBoundaryInline> | ||
| <ToastContainer transition={Zoom} position="bottom-right" limit={12} /> | ||
| </ErrorBoundaryInline> | ||
| </ENSProvider> | ||
| </StakingModeProvider> | ||
| </HistoryProvider> | ||
| </WagmiContext> | ||
| </PHProvider> | ||
| </SafeHydrate> | ||
| <Analytics /> | ||
| </ErrorBoundary> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| import { describe, expect, it } from 'vitest'; | ||
| import { scrubAddressesFromUrl, scrubEventUrlProperties } from './posthog'; | ||
|
|
||
| const ADDR = '0xAbCdEf1234567890abcdef1234567890AbCdEf12'; | ||
| const ADDR2 = '0x1111111111111111111111111111111111111111'; | ||
|
|
||
| describe('scrubAddressesFromUrl', () => { | ||
| it('replaces a single address in a path', () => { | ||
| expect(scrubAddressesFromUrl(`/validators/${ADDR}`)).toBe('/validators/[address]'); | ||
| }); | ||
|
|
||
| it('replaces multiple addresses', () => { | ||
| expect(scrubAddressesFromUrl(`/from/${ADDR}/to/${ADDR2}`)).toBe('/from/[address]/to/[address]'); | ||
| }); | ||
|
|
||
| it('is case-insensitive', () => { | ||
| expect(scrubAddressesFromUrl(`/delegate/${ADDR.toLowerCase()}`)).toBe('/delegate/[address]'); | ||
| }); | ||
|
|
||
| it('leaves strings without addresses unchanged', () => { | ||
| expect(scrubAddressesFromUrl('/governance/proposals')).toBe('/governance/proposals'); | ||
| }); | ||
|
|
||
| it('does not match a hex string shorter than 40 chars', () => { | ||
| const short = '0x1234abcd'; | ||
| expect(scrubAddressesFromUrl(`/foo/${short}`)).toBe(`/foo/${short}`); | ||
| }); | ||
|
|
||
| it('handles a full URL', () => { | ||
| expect(scrubAddressesFromUrl(`https://example.com/validators/${ADDR}?ref=home`)).toBe( | ||
| `https://example.com/validators/[address]?ref=home`, | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| describe('scrubEventUrlProperties', () => { | ||
| it('scrubs $current_url', () => { | ||
| const props: Record<string, unknown> = { $current_url: `/validators/${ADDR}` }; | ||
| scrubEventUrlProperties(props); | ||
| expect(props['$current_url']).toBe('/validators/[address]'); | ||
| }); | ||
|
|
||
| it('scrubs $pathname', () => { | ||
| const props: Record<string, unknown> = { $pathname: `/delegate/${ADDR}` }; | ||
| scrubEventUrlProperties(props); | ||
| expect(props['$pathname']).toBe('/delegate/[address]'); | ||
| }); | ||
|
|
||
| it('scrubs $referrer and $initial_referrer', () => { | ||
| const props: Record<string, unknown> = { | ||
| $referrer: `https://example.com/validators/${ADDR}`, | ||
| $initial_referrer: `https://example.com/delegate/${ADDR2}`, | ||
| }; | ||
| scrubEventUrlProperties(props); | ||
| expect(props['$referrer']).toBe('https://example.com/validators/[address]'); | ||
| expect(props['$initial_referrer']).toBe('https://example.com/delegate/[address]'); | ||
| }); | ||
|
|
||
| it('ignores non-string property values', () => { | ||
| const props: Record<string, unknown> = { $current_url: 42 }; | ||
| scrubEventUrlProperties(props); | ||
| expect(props['$current_url']).toBe(42); | ||
| }); | ||
|
|
||
| it('leaves unrelated properties untouched', () => { | ||
| const props: Record<string, unknown> = { | ||
| $current_url: '/governance', | ||
| walletType: 'MetaMask', | ||
| }; | ||
| scrubEventUrlProperties(props); | ||
| expect(props['$current_url']).toBe('/governance'); | ||
| expect(props['walletType']).toBe('MetaMask'); | ||
| }); | ||
| }); |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| const EVM_ADDRESS_IN_PATH_RE = /0x[a-fA-F0-9]{40}/gi; | ||
| const REPLACEMENT = '[address]'; | ||
|
|
||
| const SCRUBBED_URL_PROPS = ['$current_url', '$pathname', '$referrer', '$initial_referrer'] as const; | ||
|
|
||
| export function scrubAddressesFromUrl(url: string): string { | ||
| return url.replace(EVM_ADDRESS_IN_PATH_RE, REPLACEMENT); | ||
| } | ||
|
|
||
| export function scrubEventUrlProperties(properties: Record<string, unknown>): void { | ||
| for (const prop of SCRUBBED_URL_PROPS) { | ||
| const value = properties[prop]; | ||
| if (typeof value === 'string') { | ||
| properties[prop] = scrubAddressesFromUrl(value); | ||
| } | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,13 @@ | ||
| import { usePostHog } from '@posthog/react'; | ||
| import { useCallback, useEffect, useState } from 'react'; | ||
| import { AnalyticsEventMap, AnalyticsEventName } from 'src/types/analytics'; | ||
| import { v4 as uuidv4, validate as validateUUID } from 'uuid'; | ||
| import { trackEvent } from './analytics'; | ||
|
|
||
| const SESSION_STORAGE_KEY = 'analytics_session_id'; | ||
|
|
||
| // React hook for analytics tracking with session management | ||
| export function useTrackEvent() { | ||
| const posthog = usePostHog(); | ||
| const [sessionId, setSessionId] = useState<string>(''); | ||
|
|
||
| useEffect(() => { | ||
|
|
@@ -40,8 +41,9 @@ export function useTrackEvent() { | |
| const track = useCallback( | ||
| <T extends AnalyticsEventName>(eventName: T, properties: AnalyticsEventMap[T]) => { | ||
| trackEvent(eventName, properties, sessionId); | ||
| posthog?.capture(eventName, properties); | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Useful? React with 👍 / 👎. |
||
| }, | ||
| [sessionId], | ||
| [sessionId, posthog], | ||
| ); | ||
|
|
||
| return track; | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When
BRIDGE_COUNTS_SOURCEis set toposthog, any transient PostHog failure (rate limit, bad key, network issue) currently drops into the sharedcatchpath and returns an empty list, which makes bridge rankings collapse to all-zero even though the app is still writing analytics events to the local database. This introduces an avoidable production reliability regression for the bridge page; in the PostHog path, failures should fall back togetBridgeClickedCountsFromDb()instead of returning[].Useful? React with 👍 / 👎.