@leanbase-giangnd/js 0.0.4 → 0.0.7

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

@@ -1,29 +1,28 @@
 import { SESSION_RECORDING_IS_SAMPLED, SESSION_RECORDING_REMOTE_CONFIG } from '../../constants'
-import { Leanbase } from '../../leanbase'
+import { PostHog } from '../../posthog-core'
 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 { createLogger } from '../../utils/logger'
+import {
+    assignableWindow,
+    LazyLoadedSessionRecordingInterface,
+    PostHogExtensionKind,
+    window,
+} from '../../utils/globals'
 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),
-}
+const logger = createLogger(LOGGER_PREFIX)
 
 export class SessionRecording {
     _forceAllowLocalhostNetworkCapture: boolean = false
 
     private _receivedFlags: boolean = false
-    private _serverRecordingEnabled: boolean = false
 
     private _persistFlagsOnSessionListener: (() => void) | undefined = undefined
-    private _lazyLoadedSessionRecording: LazyLoadedSessionRecording | undefined
+    private _lazyLoadedSessionRecording: LazyLoadedSessionRecordingInterface | undefined
 
     public get started(): boolean {
         return !!this._lazyLoadedSessionRecording?.isStarted
@@ -45,9 +44,9 @@ export class SessionRecording {
         return LAZY_LOADING
     }
 
-    constructor(private readonly _instance: Leanbase) {
+    constructor(private readonly _instance: PostHog) {
         if (!this._instance.sessionManager) {
-            log.error('started without valid sessionManager')
+            logger.error('started without valid sessionManager')
             throw new Error(LOGGER_PREFIX + ' started without valid sessionManager. This is a bug.')
         }
 
@@ -57,30 +56,14 @@ export class SessionRecording {
     }
 
     private get _isRecordingEnabled() {
-        if (!window) {
-            return false
-        }
-
-        if (!this._serverRecordingEnabled) {
-            return false
-        }
-
-        if (this._instance.config.disable_session_recording) {
-            return false
-        }
-
-        return true
+        const enabled_server_side = !!this._instance.get_property(SESSION_RECORDING_REMOTE_CONFIG)?.enabled
+        const enabled_client_side = !this._instance.config.disable_session_recording
+        const isDisabled = this._instance.config.disable_session_recording || !!this._instance.consent?.isOptedOut?.()
+        return window && enabled_server_side && enabled_client_side && !isDisabled
     }
 
     startIfEnabledOrStop(startReason?: SessionStartReason) {
-        const canRunReplay = !isUndefined(Object.assign) && !isUndefined(Array.from)
-
-        if (!this._isRecordingEnabled || !canRunReplay) {
-            this.stopRecording()
-            return
-        }
-
-        if (this._lazyLoadedSessionRecording?.isStarted) {
+        if (this._isRecordingEnabled && this._lazyLoadedSessionRecording?.isStarted) {
             return
         }
 
@@ -91,8 +74,13 @@ export class SessionRecording {
         // 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')
+        const canRunReplay = !isUndefined(Object.assign) && !isUndefined(Array.from)
+        if (this._isRecordingEnabled && canRunReplay) {
+            this._lazyLoadAndStart(startReason)
+            logger.info('starting')
+        } else {
+            this.stopRecording()
+        }
     }
 
     /**
@@ -109,7 +97,25 @@ export class SessionRecording {
             return
         }
 
-        this._onScriptLoaded(startReason)
+        // If recorder.js is already loaded (if array.full.js snippet is used or posthog-js/dist/recorder is
+        // imported), don't load the script. Otherwise, remotely import recorder.js from cdn since it hasn't been loaded.
+        if (
+            !assignableWindow?.__PosthogExtensions__?.rrweb?.record ||
+            !assignableWindow.__PosthogExtensions__?.initSessionRecording
+        ) {
+            assignableWindow.__PosthogExtensions__?.loadExternalDependency?.(
+                this._instance,
+                this._scriptName,
+                (err) => {
+                    if (err) {
+                        return logger.error('could not load recorder', err)
+                    }
+                    this._onScriptLoaded(startReason)
+                }
+            )
+        } else {
+            this._onScriptLoaded(startReason)
+        }
     }
 
     stopRecording() {
@@ -173,28 +179,20 @@ export class SessionRecording {
         }
     }
 
-    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)
+            logger.info('skipping remote config with no sessionRecording', response)
             return
         }
-        this._receivedFlags = true
-
         if (response.sessionRecording === false) {
-            this._serverRecordingEnabled = false
-            this._clearRemoteConfig()
-            this.stopRecording()
+            // remotely disabled
+            this._receivedFlags = true
             return
         }
 
-        this._serverRecordingEnabled = true
         this._persistRemoteConfig(response)
+        this._receivedFlags = true
         this.startIfEnabledOrStop()
     }
 
@@ -206,9 +204,22 @@ export class SessionRecording {
         }
     }
 
+    private get _scriptName(): PostHogExtensionKind {
+        const remoteConfig: SessionRecordingPersistedConfig | undefined = this._instance?.persistence?.get_property(
+            SESSION_RECORDING_REMOTE_CONFIG
+        )
+        return (remoteConfig?.scriptConfig?.script as PostHogExtensionKind) || 'lazy-recorder'
+    }
+
     private _onScriptLoaded(startReason?: SessionStartReason) {
+        if (!assignableWindow.__PosthogExtensions__?.initSessionRecording) {
+            throw Error('Called on script loaded before session recording is available')
+        }
+
         if (!this._lazyLoadedSessionRecording) {
-            this._lazyLoadedSessionRecording = new LazyLoadedSessionRecording(this._instance)
+            this._lazyLoadedSessionRecording = assignableWindow.__PosthogExtensions__?.initSessionRecording(
+                this._instance
+            )
             ;(this._lazyLoadedSessionRecording as any)._forceAllowLocalhostNetworkCapture =
                 this._forceAllowLocalhostNetworkCapture
         }

package/src/extensions/utils/stylesheet-loader.ts

@@ -0,0 +1,27 @@
+import { PostHog } from '../../posthog-core'
+import { createLogger } from '../../utils/logger'
+import { isUndefined, isNull } from '@posthog/core'
+
+const logger = createLogger('[Stylesheet Loader]')
+
+export const prepareStylesheet = (document: Document, innerText: string, posthog?: PostHog) => {
+    // Forcing the existence of `document` requires this function to be called in a browser environment
+    let stylesheet: HTMLStyleElement | null = document.createElement('style')
+    stylesheet.innerText = innerText
+
+    if (posthog?.config?.prepare_external_dependency_stylesheet) {
+        const result = posthog.config.prepare_external_dependency_stylesheet(stylesheet)
+        if (!isUndefined(result) && !isNull(result)) {
+            stylesheet = result
+        } else {
+            stylesheet = null
+        }
+    }
+
+    if (!stylesheet) {
+        logger.error('prepare_external_dependency_stylesheet returned null')
+        return null
+    }
+
+    return stylesheet
+}

package/src/leanbase.ts

@@ -1,13 +1,13 @@
 import {
     PostHogCore,
     getFetch,
-    isArray,
     isEmptyObject,
     isEmptyString,
     isNumber,
     isObject,
     isString,
     isUndefined,
+    isFunction,
 } from '@posthog/core'
 import type {
     PostHogEventProperties,
@@ -32,31 +32,25 @@ import {
     navigator,
     userAgent,
 } from './utils'
-import { decompressSync, strFromU8 } from 'fflate'
 import Config from './config'
 import { Autocapture } from './autocapture'
 import { logger } from './leanbase-logger'
-import { COOKIELESS_MODE_FLAG_PROPERTY, USER_STATE, SESSION_RECORDING_REMOTE_CONFIG } from './constants'
+import { COOKIELESS_MODE_FLAG_PROPERTY, USER_STATE } from './constants'
 import { getEventProperties } from './utils/event-utils'
 import { SessionIdManager } from './sessionid'
 import { SessionPropsManager } from './session-props'
+import { RequestRouter } from './utils/request-router'
 import { uuidv7 } from './uuidv7'
 import { PageViewManager } from './page-view'
 import { ScrollManager } from './scroll-manager'
 import { isLikelyBot } from './utils/blocked-uas'
-import { SessionRecording } from './extensions/replay/session-recording'
 
 const defaultConfig = (): LeanbaseConfig => ({
     host: 'https://i.leanbase.co',
+    api_host: 'https://i.leanbase.co',
     token: '',
     autocapture: true,
     rageclick: true,
-    disable_session_recording: false,
-    session_recording: {
-        // Force-enable session recording locally unless explicitly disabled via config
-        forceClientRecording: true,
-    },
-    enable_recording_console_log: undefined,
     persistence: 'localStorage+cookie',
     capture_pageview: 'history_change',
     capture_pageleave: 'if_capture_pageview',
@@ -77,6 +71,7 @@ const defaultConfig = (): LeanbaseConfig => ({
     opt_out_useragent_filter: false,
     properties_string_max_length: 65535,
     loaded: () => {},
+    session_recording: {} as any,
 })
 
 export class Leanbase extends PostHogCore {
@@ -89,7 +84,8 @@ export class Leanbase extends PostHogCore {
     sessionPersistence?: LeanbasePersistence
     sessionManager?: SessionIdManager
     sessionPropsManager?: SessionPropsManager
-    sessionRecording?: SessionRecording
+    sessionRecording?: any
+    requestRouter: RequestRouter
     isRemoteConfigLoaded?: boolean
     personProcessingSetOncePropertiesSent = false
     isLoaded: boolean = false
@@ -106,6 +102,7 @@ export class Leanbase extends PostHogCore {
         this.initialPageviewCaptured = false
         this.scrollManager = new ScrollManager(this)
         this.pageViewManager = new PageViewManager(this)
+        this.requestRouter = new RequestRouter(this)
         this.init(token, mergedConfig)
     }
 
@@ -117,16 +114,19 @@ export class Leanbase extends PostHogCore {
         )
         this.isLoaded = true
         this.persistence = new LeanbasePersistence(this.config)
-
-        if (this.config.cookieless_mode !== 'always') {
-            this.sessionManager = new SessionIdManager(this)
-            this.sessionPropsManager = new SessionPropsManager(this, this.sessionManager, this.persistence)
-        }
-
         this.replayAutocapture = new Autocapture(this)
         this.replayAutocapture.startIfEnabled()
 
-        if (this.sessionManager && this.config.cookieless_mode !== 'always') {
+        // Initialize session manager and props before session recording (matches browser behavior)
+        if (this.config.cookieless_mode !== 'always') {
+            if (!this.sessionManager) {
+                this.sessionManager = new SessionIdManager(this)
+                this.sessionPropsManager = new SessionPropsManager(this, this.sessionManager, this.persistence as any)
+            }
+
+            // runtime require to lazy-load replay code; allowed for browser parity
+            // @ts-expect-error - runtime import only available in browser build
+            const { SessionRecording } = require('./extensions/replay/session-recording') // eslint-disable-line @typescript-eslint/no-require-imports
             this.sessionRecording = new SessionRecording(this)
             this.sessionRecording.startIfEnabledOrStop()
         }
@@ -207,135 +207,12 @@ export class Leanbase extends PostHogCore {
 
         this.isRemoteConfigLoaded = true
         this.replayAutocapture?.onRemoteConfig(config)
-        this.sessionRecording?.onRemoteConfig(config)
     }
 
-    async fetch(url: string, options: PostHogFetchOptions): Promise<PostHogFetchResponse> {
+    fetch(url: string, options: PostHogFetchOptions): Promise<PostHogFetchResponse> {
         const fetchFn = getFetch()
         if (!fetchFn) {
-            throw new Error('Fetch API is not available in this environment.')
-        }
-
-        try {
-            const isPost = !options.method || options.method.toUpperCase() === 'POST'
-            const isBatchEndpoint = typeof url === 'string' && url.endsWith('/batch/')
-
-            if (isPost && isBatchEndpoint && options && options.body) {
-                let parsed: any = null
-                try {
-                    const headers = (options.headers || {}) as Record<string, any>
-                    const contentEncoding = (
-                        headers['Content-Encoding'] ||
-                        headers['content-encoding'] ||
-                        ''
-                    ).toLowerCase()
-
-                    const toUint8 = async (body: any): Promise<Uint8Array | null> => {
-                        if (typeof body === 'string') return new TextEncoder().encode(body)
-                        if (typeof Blob !== 'undefined' && body instanceof Blob) {
-                            const ab = await body.arrayBuffer()
-                            return new Uint8Array(ab)
-                        }
-                        if (body instanceof ArrayBuffer) return new Uint8Array(body)
-                        if (ArrayBuffer.isView(body)) return new Uint8Array((body as any).buffer ?? body)
-                        try {
-                            return new TextEncoder().encode(String(body))
-                        } catch {
-                            return null
-                        }
-                    }
-
-                    if (contentEncoding === 'gzip' || contentEncoding === 'deflate') {
-                        const u8 = await toUint8(options.body)
-                        if (u8) {
-                            try {
-                                const dec = decompressSync(u8)
-                                const s = strFromU8(dec)
-                                parsed = JSON.parse(s)
-                            } catch {
-                                parsed = null
-                            }
-                        }
-                    } else {
-                        if (typeof options.body === 'string') {
-                            parsed = JSON.parse(options.body)
-                        } else {
-                            const u8 = await toUint8(options.body)
-                            if (u8) {
-                                try {
-                                    parsed = JSON.parse(new TextDecoder().decode(u8))
-                                } catch {
-                                    parsed = null
-                                }
-                            } else {
-                                try {
-                                    parsed = JSON.parse(String(options.body))
-                                } catch {
-                                    parsed = null
-                                }
-                            }
-                        }
-                    }
-                } catch {
-                    parsed = null
-                }
-
-                if (parsed && isArray(parsed.batch)) {
-                    const hasSnapshot = parsed.batch.some((item: any) => item && item.event === '$snapshot')
-                    // Debug logging to help diagnose routing issues
-                    try {
-                        // eslint-disable-next-line no-console
-                        console.debug(
-                            '[Leanbase.fetch] parsed.batch.length=',
-                            parsed.batch.length,
-                            'hasSnapshot=',
-                            hasSnapshot
-                        )
-                    } catch {}
-
-                    // If remote config has explicitly disabled session recording, drop snapshot events
-                    try {
-                        // Read persisted remote config that SessionRecording stores
-                        const persisted: any = this.get_property(SESSION_RECORDING_REMOTE_CONFIG)
-                        const serverAllowsRecording = !(
-                            (persisted && persisted.enabled === false) ||
-                            this.config.disable_session_recording === true
-                        )
-
-                        if (!serverAllowsRecording && hasSnapshot) {
-                            // remove snapshot events from the batch before sending to /batch/
-                            parsed.batch = parsed.batch.filter((item: any) => !(item && item.event === '$snapshot'))
-                            // If no events remain, short-circuit and avoid sending an empty batch
-                            if (!parsed.batch.length) {
-                                try {
-                                    // eslint-disable-next-line no-console
-                                    console.debug(
-                                        '[Leanbase.fetch] sessionRecording disabled, dropping snapshot-only batch'
-                                    )
-                                } catch {}
-                                return { status: 200, json: async () => ({}) } as any
-                            }
-                            // re-encode the body so the underlying fetch receives the modified batch
-                            try {
-                                const newBody = JSON.stringify(parsed)
-                                options = { ...options, body: newBody }
-                            } catch {}
-                        }
-                    } catch {}
-
-                    if (hasSnapshot) {
-                        const host = (this.config && this.config.host) || ''
-                        const newUrl = host ? `${host.replace(/\/$/, '')}/s/` : url
-                        try {
-                            // eslint-disable-next-line no-console
-                            console.debug('[Leanbase.fetch] routing snapshot batch to', newUrl)
-                        } catch {}
-                        return fetchFn(newUrl, options)
-                    }
-                }
-            }
-        } catch {
-            return fetchFn(url, options)
+            return Promise.reject(new Error('Fetch API is not available in this environment.'))
         }
 
         return fetchFn(url, options)
@@ -347,7 +224,6 @@ export class Leanbase extends PostHogCore {
             extend(this.config, config)
             this.persistence?.update_config(this.config, oldConfig)
             this.replayAutocapture?.startIfEnabled()
-            this.sessionRecording?.startIfEnabledOrStop()
         }
 
         const isTempStorage = this.config.persistence === 'sessionStorage' || this.config.persistence === 'memory'
@@ -372,14 +248,43 @@ export class Leanbase extends PostHogCore {
         return this.persistence?.get_property(key)
     }
 
-    get_property<T = any>(key: string): T | undefined {
+    setPersistedProperty<T>(key: PostHogPersistedProperty, value: T | null): void {
+        this.persistence?.set_property(key, value)
+    }
+
+    // Backwards-compatible aliases expected by replay/browser code
+    get_property(key: string): any {
         return this.persistence?.get_property(key)
     }
 
-    setPersistedProperty<T>(key: PostHogPersistedProperty, value: T | null): void {
+    set_property(key: string, value: any): void {
         this.persistence?.set_property(key, value)
     }
 
+    register_for_session(properties: Record<string, any>): void {
+        // PostHogCore may expose registerForSession; call it if available
+        if (isFunction((this as any).registerForSession)) {
+            ;(this as any).registerForSession(properties)
+            return
+        }
+
+        // fallback: store properties in sessionPersistence
+        if (this.sessionPersistence) {
+            Object.keys(properties).forEach((k) => this.sessionPersistence?.set_property(k, properties[k]))
+        }
+    }
+
+    unregister_for_session(property: string): void {
+        if (isFunction((this as any).unregisterForSession)) {
+            ;(this as any).unregisterForSession(property)
+            return
+        }
+
+        if (this.sessionPersistence) {
+            this.sessionPersistence.set_property(property, null)
+        }
+    }
+
     calculateEventProperties(
         eventName: string,
         eventProperties: PostHogEventProperties,
@@ -429,14 +334,6 @@ export class Leanbase extends PostHogCore {
             extend(properties, this.sessionPropsManager.getSessionProps())
         }
 
-        try {
-            if (this.sessionRecording) {
-                extend(properties, this.sessionRecording.sdkDebugProperties)
-            }
-        } catch (e: any) {
-            properties['$sdk_debug_error_capturing_properties'] = String(e)
-        }
-
         let pageviewProperties: Record<string, any> = this.pageViewManager.doEvent()
         if (eventName === '$pageview' && !readOnly) {
             pageviewProperties = this.pageViewManager.doPageView(timestamp, uuid)

package/src/posthog-core.ts

@@ -0,0 +1,12 @@
+import type { Leanbase } from './leanbase'
+
+// PostHog shim: Leanbase runtime with a widened onFeatureFlags signature
+export type PostHog = Leanbase & {
+    onFeatureFlags?: (cb: (...args: any[]) => void) => () => void
+    consent?: {
+        isOptedOut?: () => boolean
+    }
+}
+
+export { default as Config } from './config'
+export { logger } from './utils/logger'