replay: wait for new config before recording decision

Author: Kim Dugan

.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()
     })

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/*'],

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,7 @@ 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 +125,7 @@ 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 +137,7 @@ 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'])
         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 +231,7 @@ 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 +339,7 @@ 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