feat: do not start recorder active-active (#1839)

* feat: do not start recorder active-active

* flyby maybe reduction

* that's just testing the mock

* CSP needs updating 🤷

Author: pauldambra

playground/nextjs/pages/_app.tsx

@@ -60,6 +60,7 @@ export default function App({ Component, pageProps }: AppProps) {
                     script-src 'self' 'unsafe-eval' 'unsafe-inline' ${localhostDomain} https://*.posthog.com ${CDP_DOMAINS};
                     style-src 'self' 'unsafe-inline' ${localhostDomain} https://*.posthog.com;
                     img-src 'self' ${localhostDomain} https://*.posthog.com https://lottie.host https://cataas.com ${CDP_DOMAINS};
+                    worker-src 'self' blob:;
                 `}
                 />
             </Head>

src/__tests__/extensions/replay/sessionrecording.test.ts

@@ -1478,7 +1478,7 @@ describe('SessionRecording', () => {
     describe('idle timeouts', () => {
         let startingTimestamp = -1
 
-        function emitInactiveEvent(activityTimestamp: number, expectIdle: boolean = false) {
+        function emitInactiveEvent(activityTimestamp: number, expectIdle: boolean | 'unknown' = false) {
             const snapshotEvent = {
                 event: 123,
                 type: INCREMENTAL_SNAPSHOT_EVENT_TYPE,
@@ -1540,6 +1540,29 @@ describe('SessionRecording', () => {
             jest.useRealTimers()
         })
 
+        it('starts neither idle nor active', () => {
+            expect(sessionRecording['isIdle']).toEqual('unknown')
+        })
+
+        it('does not emit events until after first active event', () => {
+            const a = emitInactiveEvent(startingTimestamp + 100, 'unknown')
+            const b = emitInactiveEvent(startingTimestamp + 110, 'unknown')
+            const c = emitInactiveEvent(startingTimestamp + 120, 'unknown')
+            _emit(createFullSnapshot({}), 'unknown')
+            expect(sessionRecording['isIdle']).toEqual('unknown')
+            expect(posthog.capture).not.toHaveBeenCalled()
+
+            const d = emitActiveEvent(startingTimestamp + 200)
+            expect(sessionRecording['isIdle']).toEqual(false)
+            // but all events are buffered
+            expect(sessionRecording['buffer']).toEqual({
+                data: [a, b, c, createFullSnapshot({}), d],
+                sessionId: sessionId,
+                size: 442,
+                windowId: expect.any(String),
+            })
+        })
+
         it('does not emit plugin events when idle', () => {
             const emptyBuffer = {
                 ...EMPTY_BUFFER,
@@ -2163,7 +2186,6 @@ describe('SessionRecording', () => {
             sessionRecording.onRRwebEmit(createIncrementalSnapshot({ data: { source: 1 } }) as any)
 
             expect(sessionRecording['queuedRRWebEvents']).toHaveLength(0)
-            expect(sessionRecording['rrwebRecord']).not.toBeUndefined()
         })
     })
 
@@ -2255,6 +2277,9 @@ describe('SessionRecording', () => {
             posthog.config.session_recording.compress_events = true
             sessionRecording.onRemoteConfig(makeDecideResponse({ sessionRecording: { endpoint: '/s/' } }))
             sessionRecording.startIfEnabledOrStop()
+            // need to have active event to start recording
+            _emit(createIncrementalSnapshot({ type: 3 }))
+            sessionRecording['_flushBuffer']()
         })
 
         it('compresses full snapshot data', () => {

src/extensions/replay/sessionrecording.ts

@@ -54,6 +54,10 @@ import { sampleOnProperty } from '../sampling'
 const LOGGER_PREFIX = '[SessionRecording]'
 const logger = createLogger(LOGGER_PREFIX)
 
+function getRRWebRecord(): rrwebRecord | undefined {
+    return assignableWindow?.__PosthogExtensions__?.rrweb?.record
+}
+
 type SessionStartReason =
     | 'sampling_overridden'
     | 'recording_initialized'
@@ -256,7 +260,7 @@ export class SessionRecording {
     private _captureStarted: boolean
     private stopRrweb: listenerHandler | undefined
     private receivedDecide: boolean
-    private isIdle = false
+    private isIdle: boolean | 'unknown' = 'unknown'
 
     private _linkedFlagSeen: boolean = false
     private _lastActivityTimestamp: number = Date.now()
@@ -290,10 +294,6 @@ export class SessionRecording {
         return this.instance.config.session_recording.session_idle_threshold_ms || RECORDING_IDLE_THRESHOLD_MS
     }
 
-    private get rrwebRecord(): rrwebRecord | undefined {
-        return assignableWindow?.__PosthogExtensions__?.rrweb?.record
-    }
-
     public get started(): boolean {
         // TODO could we use status instead of _captureStarted?
         return this._captureStarted
@@ -795,7 +795,7 @@ export class SessionRecording {
 
         // If recorder.js is already loaded (if array.full.js snippet is used or posthog-js/dist/recorder is
         // imported), don't load script. Otherwise, remotely import recorder.js from cdn since it hasn't been loaded.
-        if (!this.rrwebRecord) {
+        if (!getRRWebRecord()) {
             assignableWindow.__PosthogExtensions__?.loadExternalDependency?.(this.instance, this.scriptName, (err) => {
                 if (err) {
                     return logger.error('could not load recorder', err)
@@ -863,13 +863,18 @@ export class SessionRecording {
         if (isUserInteraction) {
             this._lastActivityTimestamp = event.timestamp
             if (this.isIdle) {
+                const idleWasUnknown = this.isIdle === 'unknown'
                 // Remove the idle state
                 this.isIdle = false
-                this._tryAddCustomEvent('sessionNoLongerIdle', {
-                    reason: 'user activity',
-                    type: event.type,
-                })
-                returningFromIdle = true
+                // if the idle state was unknown, we don't want to add an event, since we're just in bootup
+                // whereas if it was true, we know we've been idle for a while, and we can mark ourselves as returning from idle
+                if (!idleWasUnknown) {
+                    this._tryAddCustomEvent('sessionNoLongerIdle', {
+                        reason: 'user activity',
+                        type: event.type,
+                    })
+                    returningFromIdle = true
+                }
             }
         }
 
@@ -918,11 +923,11 @@ export class SessionRecording {
     }
 
     private _tryAddCustomEvent(tag: string, payload: any): boolean {
-        return this._tryRRWebMethod(newQueuedEvent(() => this.rrwebRecord!.addCustomEvent(tag, payload)))
+        return this._tryRRWebMethod(newQueuedEvent(() => getRRWebRecord()!.addCustomEvent(tag, payload)))
     }
 
     private _tryTakeFullSnapshot(): boolean {
-        return this._tryRRWebMethod(newQueuedEvent(() => this.rrwebRecord!.takeFullSnapshot()))
+        return this._tryRRWebMethod(newQueuedEvent(() => getRRWebRecord()!.takeFullSnapshot()))
     }
 
     private _onScriptLoaded() {
@@ -972,7 +977,8 @@ export class SessionRecording {
             sessionRecordingOptions.blockSelector = this.masking.blockSelector ?? undefined
         }
 
-        if (!this.rrwebRecord) {
+        const rrwebRecord = getRRWebRecord()
+        if (!rrwebRecord) {
             logger.error(
                 'onScriptLoaded was called but rrwebRecord is not available. This indicates something has gone wrong.'
             )
@@ -981,7 +987,7 @@ export class SessionRecording {
 
         this.mutationRateLimiter =
             this.mutationRateLimiter ??
-            new MutationRateLimiter(this.rrwebRecord, {
+            new MutationRateLimiter(rrwebRecord, {
                 refillRate: this.instance.config.session_recording.__mutationRateLimiterRefillRate,
                 bucketSize: this.instance.config.session_recording.__mutationRateLimiterBucketSize,
                 onBlockedNode: (id, node) => {
@@ -995,7 +1001,7 @@ export class SessionRecording {
             })
 
         const activePlugins = this._gatherRRWebPlugins()
-        this.stopRrweb = this.rrwebRecord({
+        this.stopRrweb = rrwebRecord({
             emit: (event) => {
                 this.onRRwebEmit(event)
             },
@@ -1005,7 +1011,8 @@ export class SessionRecording {
 
         // We reset the last activity timestamp, resetting the idle timer
         this._lastActivityTimestamp = Date.now()
-        this.isIdle = false
+        // stay unknown if we're not sure if we're idle or not
+        this.isIdle = isBoolean(this.isIdle) ? this.isIdle : 'unknown'
 
         this._tryAddCustomEvent('$session_options', {
             sessionRecordingOptions,
@@ -1022,7 +1029,7 @@ export class SessionRecording {
             clearInterval(this._fullSnapshotTimer)
         }
         // we don't schedule snapshots while idle
-        if (this.isIdle) {
+        if (this.isIdle === true) {
             return
         }
 
@@ -1109,7 +1116,8 @@ export class SessionRecording {
         this._updateWindowAndSessionIds(event)
 
         // When in an idle state we keep recording, but don't capture the events,
-        if (this.isIdle && !isSessionIdleEvent(event)) {
+        // we don't want to return early if idle is 'unknown'
+        if (this.isIdle === true && !isSessionIdleEvent(event)) {
             return
         }