@leanbase-giangnd/js 0.0.0

package/src/extensions/replay/session-recording.ts

@@ -0,0 +1,285 @@
+import { SESSION_RECORDING_IS_SAMPLED, SESSION_RECORDING_REMOTE_CONFIG } from '../../constants'
+import { Leanbase } from '../../leanbase'
+import { Properties, RemoteConfig, SessionRecordingPersistedConfig, SessionStartReason } from '../../types'
+import { type eventWithTime } from './types/rrweb-types'
+
+import { isNullish, isUndefined } from '@posthog/core'
+import { logger } from '../../leanbase-logger'
+import { window } from '../../utils'
+import { LazyLoadedSessionRecording } from './external/lazy-loaded-session-recorder'
+import { DISABLED, LAZY_LOADING, SessionRecordingStatus, TriggerType } from './external/triggerMatching'
+
+const LOGGER_PREFIX = '[SessionRecording]'
+const log = {
+    info: (...args: any[]) => logger.info(LOGGER_PREFIX, ...args),
+    warn: (...args: any[]) => logger.warn(LOGGER_PREFIX, ...args),
+    error: (...args: any[]) => logger.error(LOGGER_PREFIX, ...args),
+}
+
+export class SessionRecording {
+    _forceAllowLocalhostNetworkCapture: boolean = false
+
+    private _receivedFlags: boolean = false
+    private _serverRecordingEnabled: boolean = false
+
+    private _persistFlagsOnSessionListener: (() => void) | undefined = undefined
+    private _lazyLoadedSessionRecording: LazyLoadedSessionRecording | undefined
+
+    public get started(): boolean {
+        return !!this._lazyLoadedSessionRecording?.isStarted
+    }
+
+    /**
+     * defaults to buffering mode until a flags response is received
+     * once a flags response is received status can be disabled, active or sampled
+     */
+    get status(): SessionRecordingStatus {
+        if (this._lazyLoadedSessionRecording) {
+            return this._lazyLoadedSessionRecording.status
+        }
+
+        if (this._receivedFlags && !this._isRecordingEnabled) {
+            return DISABLED
+        }
+
+        return LAZY_LOADING
+    }
+
+    constructor(private readonly _instance: Leanbase) {
+        if (!this._instance.sessionManager) {
+            log.error('started without valid sessionManager')
+            throw new Error(LOGGER_PREFIX + ' started without valid sessionManager. This is a bug.')
+        }
+
+        if (this._instance.config.cookieless_mode === 'always') {
+            throw new Error(LOGGER_PREFIX + ' cannot be used with cookieless_mode="always"')
+        }
+    }
+
+    private get _isRecordingEnabled() {
+        if (!window) {
+            return false
+        }
+
+        if (!this._serverRecordingEnabled) {
+            return false
+        }
+
+        if (this._instance.config.disable_session_recording) {
+            return false
+        }
+
+        return true
+    }
+
+    startIfEnabledOrStop(startReason?: SessionStartReason) {
+        const canRunReplay = !isUndefined(Object.assign) && !isUndefined(Array.from)
+
+        if (!this._isRecordingEnabled || !canRunReplay) {
+            this.stopRecording()
+            return
+        }
+
+        if (this._lazyLoadedSessionRecording?.isStarted) {
+            return
+        }
+
+        // According to the rrweb docs, rrweb is not supported on IE11 and below:
+        // "rrweb does not support IE11 and below because it uses the MutationObserver API, which was supported by these browsers."
+        // https://github.com/rrweb-io/rrweb/blob/master/guide.md#compatibility-note
+        //
+        // However, MutationObserver does exist on IE11, it just doesn't work well and does not detect all changes.
+        // Instead, when we load "recorder.js", the first JS error is about "Object.assign" and "Array.from" being undefined.
+        // Thus instead of MutationObserver, we look for this function and block recording if it's undefined.
+        this._lazyLoadAndStart(startReason)
+        log.info('starting')
+    }
+
+    /**
+     * session recording waits until it receives remote config before loading the script
+     * this is to ensure we can control the script name remotely
+     * and because we wait until we have local and remote config to determine if we should start at all
+     * if start is called and there is no remote config then we wait until there is
+     */
+    private _lazyLoadAndStart(startReason?: SessionStartReason) {
+        // by checking `_isRecordingEnabled` here we know that
+        // we have stored remote config and client config to read
+        // replay waits for both local and remote config before starting
+        if (!this._isRecordingEnabled) {
+            return
+        }
+
+        this._onScriptLoaded(startReason)
+    }
+
+    stopRecording() {
+        this._persistFlagsOnSessionListener?.()
+        this._persistFlagsOnSessionListener = undefined
+        this._lazyLoadedSessionRecording?.stop()
+    }
+
+    private _resetSampling() {
+        this._instance.persistence?.unregister(SESSION_RECORDING_IS_SAMPLED)
+    }
+
+    private _persistRemoteConfig(response: RemoteConfig): void {
+        if (this._instance.persistence) {
+            const persistence = this._instance.persistence
+
+            const persistResponse = () => {
+                const sessionRecordingConfigResponse =
+                    response.sessionRecording === false ? undefined : response.sessionRecording
+
+                const receivedSampleRate = sessionRecordingConfigResponse?.sampleRate
+
+                const parsedSampleRate = isNullish(receivedSampleRate) ? null : parseFloat(receivedSampleRate)
+                if (isNullish(parsedSampleRate)) {
+                    this._resetSampling()
+                }
+
+                const receivedMinimumDuration = sessionRecordingConfigResponse?.minimumDurationMilliseconds
+
+                persistence.register({
+                    [SESSION_RECORDING_REMOTE_CONFIG]: {
+                        enabled: !!sessionRecordingConfigResponse,
+                        ...sessionRecordingConfigResponse,
+                        networkPayloadCapture: {
+                            capturePerformance: response.capturePerformance,
+                            ...sessionRecordingConfigResponse?.networkPayloadCapture,
+                        },
+                        canvasRecording: {
+                            enabled: sessionRecordingConfigResponse?.recordCanvas,
+                            fps: sessionRecordingConfigResponse?.canvasFps,
+                            quality: sessionRecordingConfigResponse?.canvasQuality,
+                        },
+                        sampleRate: parsedSampleRate,
+                        minimumDurationMilliseconds: isUndefined(receivedMinimumDuration)
+                            ? null
+                            : receivedMinimumDuration,
+                        endpoint: sessionRecordingConfigResponse?.endpoint,
+                        triggerMatchType: sessionRecordingConfigResponse?.triggerMatchType,
+                        masking: sessionRecordingConfigResponse?.masking,
+                        urlTriggers: sessionRecordingConfigResponse?.urlTriggers,
+                    } satisfies SessionRecordingPersistedConfig,
+                })
+            }
+
+            persistResponse()
+
+            // in case we see multiple flags responses, we should only use the response from the most recent one
+            this._persistFlagsOnSessionListener?.()
+            // we 100% know there is a session manager by this point
+            this._persistFlagsOnSessionListener = this._instance.sessionManager?.onSessionId(persistResponse)
+        }
+    }
+
+    private _clearRemoteConfig() {
+        this._instance.persistence?.unregister(SESSION_RECORDING_REMOTE_CONFIG)
+        this._resetSampling()
+    }
+
+    onRemoteConfig(response: RemoteConfig) {
+        if (!('sessionRecording' in response)) {
+            // if sessionRecording is not in the response, we do nothing
+            log.info('skipping remote config with no sessionRecording', response)
+            return
+        }
+        this._receivedFlags = true
+
+        if (response.sessionRecording === false) {
+            this._serverRecordingEnabled = false
+            this._clearRemoteConfig()
+            this.stopRecording()
+            return
+        }
+
+        this._serverRecordingEnabled = true
+        this._persistRemoteConfig(response)
+        this.startIfEnabledOrStop()
+    }
+
+    log(message: string, level: 'log' | 'warn' | 'error' = 'log') {
+        if (this._lazyLoadedSessionRecording?.log) {
+            this._lazyLoadedSessionRecording.log(message, level)
+        } else {
+            logger.warn('log called before recorder was ready')
+        }
+    }
+
+    private _onScriptLoaded(startReason?: SessionStartReason) {
+        if (!this._lazyLoadedSessionRecording) {
+            this._lazyLoadedSessionRecording = new LazyLoadedSessionRecording(this._instance)
+            ;(this._lazyLoadedSessionRecording as any)._forceAllowLocalhostNetworkCapture =
+                this._forceAllowLocalhostNetworkCapture
+        }
+
+        this._lazyLoadedSessionRecording.start(startReason)
+    }
+
+    /**
+     * this is maintained on the public API only because it has always been on the public API
+     * if you are calling this directly you are certainly doing something wrong
+     * @deprecated
+     */
+    onRRwebEmit(rawEvent: eventWithTime) {
+        this._lazyLoadedSessionRecording?.onRRwebEmit?.(rawEvent)
+    }
+
+    /**
+     * this ignores the linked flag config and (if other conditions are met) causes capture to start
+     *
+     * It is not usual to call this directly,
+     * instead call `posthog.startSessionRecording({linked_flag: true})`
+     * */
+    public overrideLinkedFlag() {
+        // TODO what if this gets called before lazy loading is done
+        this._lazyLoadedSessionRecording?.overrideLinkedFlag()
+    }
+
+    /**
+     * this ignores the sampling config and (if other conditions are met) causes capture to start
+     *
+     * It is not usual to call this directly,
+     * instead call `posthog.startSessionRecording({sampling: true})`
+     * */
+    public overrideSampling() {
+        // TODO what if this gets called before lazy loading is done
+        this._lazyLoadedSessionRecording?.overrideSampling()
+    }
+
+    /**
+     * this ignores the URL/Event trigger config and (if other conditions are met) causes capture to start
+     *
+     * It is not usual to call this directly,
+     * instead call `posthog.startSessionRecording({trigger: 'url' | 'event'})`
+     * */
+    public overrideTrigger(triggerType: TriggerType) {
+        // TODO what if this gets called before lazy loading is done
+        this._lazyLoadedSessionRecording?.overrideTrigger(triggerType)
+    }
+
+    /*
+     * whenever we capture an event, we add these properties to the event
+     * these are used to debug issues with the session recording
+     * when looking at the event feed for a session
+     */
+    get sdkDebugProperties(): Properties {
+        return (
+            this._lazyLoadedSessionRecording?.sdkDebugProperties || {
+                $recording_status: this.status,
+            }
+        )
+    }
+
+    /**
+     * This adds a custom event to the session recording
+     *
+     * It is not intended for arbitrary public use - playback only displays known custom events
+     * And is exposed on the public interface only so that other parts of the SDK are able to use it
+     *
+     * if you are calling this from client code, you're probably looking for `posthog.capture('$custom_event', {...})`
+     */
+    tryAddCustomEvent(tag: string, payload: any): boolean {
+        return !!this._lazyLoadedSessionRecording?.tryAddCustomEvent(tag, payload)
+    }
+}