fix(replay): wait for new config before recording decision

.changeset/tiny-glasses-pump.md

@@ -0,0 +1,5 @@
+---
+'posthog-js': patch
+---
+
+wait for fresh config before recording start decision, add new recorder status, output recording started event

packages/browser/playwright/mocked/session-recording/lazy-session-recording-sampling.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 
 const startOptions = {
     options: {
@@ -34,6 +34,7 @@ test.describe('Session recording - sampling', () => {
                 await start(startOptions, page, context)
             },
         })
+        await waitForSessionRecordingToStart(page)
 
         await page.expectCapturedEventsToBe(['$pageview'])
         await page.resetCapturedEvents()

packages/browser/playwright/mocked/session-recording/lazy-session-recording.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 import { Page } from '@playwright/test'
 import { isUndefined } from '@posthog/core'
 
@@ -99,6 +99,7 @@ test.describe('Session recording - array.js', () => {
                 await start(startOptions, page, context)
             },
         })
+        await waitForSessionRecordingToStart(page)
         await page.expectCapturedEventsToBe(['$pageview'])
         await page.resetCapturedEvents()
     })
@@ -108,7 +109,12 @@ test.describe('Session recording - array.js', () => {
             const ph = (window as WindowWithPostHog).posthog
             return ph?.get_session_id()
         })
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         await page.evaluate(() => {
             const ph = (window as WindowWithPostHog).posthog
@@ -122,7 +128,12 @@ test.describe('Session recording - array.js', () => {
             ph?.startSessionRecording()
         })
 
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         // the session id is not rotated by stopping and starting the recording
         const finishingSessionId = await page.evaluate(() => {
@@ -134,7 +145,14 @@ test.describe('Session recording - array.js', () => {
 
     test('captures snapshots when the mouse moves', async ({ page }) => {
         // first make sure the page is booted and recording
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
+        // Explicitly wait for recording to be fully started before timing-sensitive operations
+        await waitForSessionRecordingToStart(page)
         await page.resetCapturedEvents()
         // Allow any pending async operations (e.g. flags loading, buffer flushes) to settle
         // before starting the timing-sensitive mouse move sequence
@@ -228,7 +246,12 @@ test.describe('Session recording - array.js', () => {
         })
         expect(startingSessionId).not.toBeNull()
 
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         await page.resetCapturedEvents()
         await page.evaluate(() => {
@@ -336,7 +359,12 @@ test.describe('Session recording - array.js', () => {
 
     test('adds debug properties to captured events', async ({ page }) => {
         // make sure recording is running
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         await page.evaluate(() => {
             const ph = (window as WindowWithPostHog).posthog

packages/browser/playwright/mocked/session-recording/session-linking.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 
 const startOptions = {
     options: {
@@ -25,6 +25,7 @@ test.describe('Session Recording - Session Linking', () => {
                 await start(startOptions, page, context)
             },
         })
+        await waitForSessionRecordingToStart(page)
         await page.expectCapturedEventsToBe(['$pageview'])
         await page.resetCapturedEvents()
     })

packages/browser/playwright/mocked/session-recording/session-recording-array-full.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 
 const startOptions = {
     options: {
@@ -21,6 +21,7 @@ const startOptions = {
 test.describe('session recording in array.full.js', () => {
     test('captures session events', async ({ page, context }) => {
         await start(startOptions, page, context)
+        await waitForSessionRecordingToStart(page)
 
         await page.waitingForNetworkCausedBy({
             urlPatternsToWaitFor: ['**/ses/*'],
@@ -46,8 +47,9 @@ test.describe('session recording in array.full.js', () => {
         expect(snapshotData[2].type).toEqual(5) // custom event with remote config
         expect(snapshotData[3].type).toEqual(5) // custom event with options
         expect(snapshotData[4].type).toEqual(5) // custom event with posthog config
+        expect(snapshotData[5].type).toEqual(5) // custom event with recording_started
         // Making a set from the rest should all be 3 - incremental snapshots
-        const incrementalSnapshots = snapshotData.slice(5)
+        const incrementalSnapshots = snapshotData.slice(6)
         expect(Array.from(new Set(incrementalSnapshots.map((s: any) => s.type)))).toStrictEqual([3])
 
         expect(capturedEvents[2]['properties']['$session_recording_start_reason']).toEqual('recording_initialized')

packages/browser/playwright/mocked/session-recording/session-recording-idle-timeout.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 import { Page } from '@playwright/test'
 
 async function ensureRecordingIsStopped(page: Page) {
@@ -88,6 +88,7 @@ test.describe('Session recording - idle timeout behavior', () => {
                 await start(startOptions, page, context)
             },
         })
+        await waitForSessionRecordingToStart(page)
         await page.expectCapturedEventsToBe(['$pageview'])
         await page.resetCapturedEvents()
     })

packages/browser/playwright/mocked/session-recording/session-recording-linked-flags.spec.ts

@@ -1,5 +1,5 @@
 import { test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start, StartOptions } from '../utils/setup'
+import { start, StartOptions, waitForRemoteConfig } from '../utils/setup'
 import { assertThatRecordingStarted, pollUntilEventCaptured } from '../utils/event-capture-utils'
 import { BrowserContext, Page } from '@playwright/test'
 
@@ -42,6 +42,7 @@ test.describe('Session recording - linked flags', () => {
             page,
             context
         )
+        await waitForRemoteConfig(page)
         await page.expectCapturedEventsToBe(expectedStartingEvents)
         await page.resetCapturedEvents()
     }

packages/browser/playwright/mocked/session-recording/session-recording-network-recorder.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 import { Page } from '@playwright/test'
 
 test.beforeEach(async ({ context }) => {
@@ -90,6 +90,7 @@ test.beforeEach(async ({ context }) => {
                     )
                 },
             })
+            await waitForSessionRecordingToStart(page)
 
             // also wrap after posthog is loaded
             await page.evaluate((isBadlyBehaved) => {

packages/browser/playwright/mocked/session-recording/session-recording-sampling.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 
 const startOptions = {
     options: {
@@ -36,6 +36,7 @@ test.describe('Session recording - sampling', () => {
                 await start(startOptions, page, context)
             },
         })
+        await waitForSessionRecordingToStart(page)
 
         await page.expectCapturedEventsToBe(['$pageview'])
         await page.resetCapturedEvents()

packages/browser/playwright/mocked/session-recording/session-recording.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForSessionRecordingToStart } from '../utils/setup'
 import { Page } from '@playwright/test'
 import { isUndefined } from '@posthog/core'
 
@@ -101,6 +101,7 @@ test.describe('Session recording - array.js', () => {
                 await start(startOptions, page, context)
             },
         })
+        await waitForSessionRecordingToStart(page)
         await page.expectCapturedEventsToBe(['$pageview'])
         await page.resetCapturedEvents()
     })
@@ -110,7 +111,12 @@ test.describe('Session recording - array.js', () => {
             const ph = (window as WindowWithPostHog).posthog
             return ph?.get_session_id()
         })
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         await page.evaluate(() => {
             const ph = (window as WindowWithPostHog).posthog
@@ -124,7 +130,12 @@ test.describe('Session recording - array.js', () => {
             ph?.startSessionRecording()
         })
 
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         // the session id is not rotated by stopping and starting the recording
         const finishingSessionId = await page.evaluate(() => {
@@ -136,7 +147,14 @@ test.describe('Session recording - array.js', () => {
 
     test('captures snapshots when the mouse moves', async ({ page }) => {
         // first make sure the page is booted and recording
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
+        // Explicitly wait for recording to be fully started before timing-sensitive operations
+        await waitForSessionRecordingToStart(page)
         await page.resetCapturedEvents()
         // Allow any pending async operations (e.g. flags loading, buffer flushes) to settle
         // before starting the timing-sensitive mouse move sequence
@@ -230,7 +248,12 @@ test.describe('Session recording - array.js', () => {
         })
         expect(startingSessionId).not.toBeNull()
 
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         await page.resetCapturedEvents()
         await page.evaluate(() => {
@@ -338,7 +361,12 @@ test.describe('Session recording - array.js', () => {
 
     test('adds debug properties to captured events', async ({ page }) => {
         // make sure recording is running
-        await ensureActivitySendsSnapshots(page, ['$remote_config_received', '$session_options', '$posthog_config'])
+        await ensureActivitySendsSnapshots(page, [
+            '$remote_config_received',
+            '$session_options',
+            '$posthog_config',
+            '$recording_started',
+        ])
 
         await page.evaluate(() => {
             const ph = (window as WindowWithPostHog).posthog

packages/browser/playwright/mocked/session-recording/triggerMatch-type.spec.ts

@@ -1,6 +1,6 @@
 import { RemoteConfig } from '@/types'
 import { expect, test, WindowWithPostHog } from '../utils/posthog-playwright-test-base'
-import { start } from '../utils/setup'
+import { start, waitForRemoteConfig } from '../utils/setup'
 import { pollUntilEventCaptured } from '../utils/event-capture-utils'
 
 const startOptions = {
@@ -52,6 +52,7 @@ test.describe('Session recording - trigger match types 0% sampling + event trigg
                     await start(anyMatchOptions, page, context)
                 },
             })
+            await waitForRemoteConfig(page)
             await page.expectCapturedEventsToBe(['$pageview'])
             await page.resetCapturedEvents()
         })
@@ -94,6 +95,7 @@ test.describe('Session recording - trigger match types 0% sampling + event trigg
                     await start(allMatchOptions, page, context)
                 },
             })
+            await waitForRemoteConfig(page)
             await page.expectCapturedEventsToBe(['$pageview'])
             await page.resetCapturedEvents()
         })
@@ -172,6 +174,7 @@ test.describe('Session recording - trigger match types 0% sampling + event trigg
                     await start(anyMatchOptions, page, context)
                 },
             })
+            await waitForRemoteConfig(page)
             await page.expectCapturedEventsToBe(['$pageview'])
             await page.resetCapturedEvents()
         })
@@ -230,6 +233,7 @@ test.describe('Session recording - trigger match types 0% sampling + event trigg
                     await start(allMatchOptions, page, context)
                 },
             })
+            await waitForRemoteConfig(page)
             await page.expectCapturedEventsToBe(['$pageview'])
             await page.resetCapturedEvents()
         })