@leanbase-giangnd/js 0.1.2 → 0.2.2

package/package.json

@@ -1,48 +1,47 @@
 {
-    "name": "@leanbase-giangnd/js",
-    "version": "0.1.2",
-    "description": "Leanbase browser SDK - event tracking, autocapture, and session replay",
-    "repository": {
-        "type": "git",
-        "directory": "packages/leanbase"
-    },
-    "author": "leanbase",
-    "license": "Copyrighted by Leanflag Limited",
-    "main": "dist/index.cjs",
-    "module": "dist/index.mjs",
-    "types": "dist/index.d.ts",
-    "unpkg": "dist/leanbase.iife.js",
-    "jsdelivr": "dist/leanbase.iife.js",
-    "scripts": {
-        "clean": "rimraf dist coverage",
-        "test:unit": "jest -c jest.config.js",
-        "lint": "eslint src test",
-        "lint:fix": "eslint src test --fix",
-        "prebuild": "node -p \"'export const version = \\'' + require('./package.json').version + '\\''\" > src/version.ts",
-        "build": "rollup -c",
-        "dev": "rollup -c -w",
-        "prepublishOnly": "pnpm lint && pnpm test:unit && pnpm build",
-        "package": "mkdir -p ../../target && pnpm pack --pack-destination ../../target"
-    },
-    "files": [
-        "dist",
-        "src",
-        "README.md"
-    ],
-    "publishConfig": {
-        "access": "public"
-    },
-    "dependencies": {
-        "@posthog/core": "workspace:*",
-        "@rrweb/record": "2.0.0-alpha.17",
-        "fflate": "^0.4.8"
-    },
-    "devDependencies": {
-        "@posthog-tooling/tsconfig-base": "workspace:*",
-        "@posthog-tooling/rollup-utils": "workspace:*",
-        "jest": "catalog:",
-        "jest-environment-jsdom": "catalog:",
-        "rollup": "catalog:",
-        "rimraf": "^6.0.1"
-    }
-}
+  "name": "@leanbase-giangnd/js",
+  "version": "0.2.2",
+  "description": "Leanbase browser SDK - event tracking, autocapture, and session replay",
+  "repository": {
+    "type": "git",
+    "directory": "packages/leanbase"
+  },
+  "author": "leanbase",
+  "license": "Copyrighted by Leanflag Limited",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/leanbase.iife.js",
+  "jsdelivr": "dist/leanbase.iife.js",
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@rrweb/record": "2.0.0-alpha.17",
+    "fflate": "^0.4.8",
+    "@posthog/core": "1.3.1"
+  },
+  "devDependencies": {
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rollup": "^4.44.1",
+    "rimraf": "^6.0.1",
+    "@posthog-tooling/tsconfig-base": "1.0.0",
+    "@posthog-tooling/rollup-utils": "1.0.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist coverage",
+    "test:unit": "jest -c jest.config.js",
+    "lint": "eslint src test",
+    "lint:fix": "eslint src test --fix",
+    "prebuild": "node -p \"'export const version = \\'' + require('./package.json').version + '\\''\" > src/version.ts",
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "package": "mkdir -p ../../target && pnpm pack --pack-destination ../../target"
+  }
+}

package/src/extensions/replay/extension-shim.ts

@@ -1,23 +1,132 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { window as win } from '../../utils'
-import { record as rrwebRecord } from '@rrweb/record'
-import { LazyLoadedSessionRecording } from './external/lazy-loaded-session-recorder'
-import { getRecordNetworkPlugin } from './external/network-plugin'
+
+// We avoid importing '@rrweb/record' at module load time to prevent IIFE builds
+// from requiring a top-level global. Instead, expose a lazy proxy that will
+// dynamically import the module the first time it's used.
+
+let _cachedRRWeb: any | null = null
+
+async function _loadRRWebModule(): Promise<any> {
+    if (_cachedRRWeb) return _cachedRRWeb
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mod: any = await import('@rrweb/record')
+        _cachedRRWeb = mod
+        return _cachedRRWeb
+    } catch (e) {
+        return null
+    }
+}
+
+// queue for method calls before rrweb loads
+const _queuedCalls: Array<() => void> = []
+
+// Create a proxy function that delegates to the real rrweb.record when called
+const rrwebRecordProxy: any = function (...args: any[]) {
+    let realStop: (() => void) | undefined
+    let calledReal = false
+
+    // Start loading asynchronously and call the real record when available
+    void (async () => {
+        const mod = await _loadRRWebModule()
+        const real = mod && (mod.record ?? mod.default?.record)
+        if (real) {
+            try {
+                calledReal = true
+                realStop = real(...args)
+                // flush any queued calls that were waiting for rrweb
+                while (_queuedCalls.length) {
+                    try {
+                        const fn = _queuedCalls.shift()!
+                        fn()
+                    } catch (e) {
+                        // ignore
+                    }
+                }
+            } catch (e) {
+                // ignore
+            }
+        }
+    })()
+
+    // return a stop function that will call the real stop when available
+    return () => {
+        if (realStop) {
+            try {
+                realStop()
+            } catch (e) {
+                // ignore
+            }
+        } else if (!calledReal) {
+            // If rrweb hasn't been initialised yet, queue a stop request that will
+            // call the real stop once available.
+            _queuedCalls.push(() => {
+                try {
+                    realStop?.()
+                } catch (e) {
+                    // ignore
+                }
+            })
+        }
+    }
+}
+
+// methods that can be called on the rrweb.record object - queue until real module is available
+rrwebRecordProxy.addCustomEvent = function (tag?: string, payload?: any) {
+    const call = () => {
+        try {
+            const real = _cachedRRWeb && (_cachedRRWeb.record ?? _cachedRRWeb.default?.record)
+            real?.addCustomEvent?.(tag, payload)
+        } catch (e) {
+            // ignore
+        }
+    }
+    if (_cachedRRWeb) call()
+    else _queuedCalls.push(call)
+}
+
+rrwebRecordProxy.takeFullSnapshot = function () {
+    const call = () => {
+        try {
+            const real = _cachedRRWeb && (_cachedRRWeb.record ?? _cachedRRWeb.default?.record)
+            real?.takeFullSnapshot?.()
+        } catch (e) {
+            // ignore
+        }
+    }
+    if (_cachedRRWeb) call()
+    else _queuedCalls.push(call)
+}
+// Delay importing heavy modules to avoid circular dependencies at build time.
+// They will be required lazily when used at runtime.
+// We avoid requiring the lazy-loaded recorder here to prevent circular dependencies during bundling.
+// Instead, `LazyLoadedSessionRecording` will register a factory on the global under
+// `__PosthogExtensions__._initSessionRecordingFactory` when it loads.
+type InitSessionRecordingFactory = (instance: any) => any
 
 // Use a safe global target (prefer `win`, fallback to globalThis)
 const _target: any = (win as any) ?? (globalThis as any)
 
 _target.__PosthogExtensions__ = _target.__PosthogExtensions__ || {}
 
-// Expose rrweb.record under the same contract
+// Expose rrweb.record under the same contract. We provide a lazy proxy so
+// builds that execute this file don't require rrweb at module evaluation time.
 _target.__PosthogExtensions__.rrweb = _target.__PosthogExtensions__.rrweb || {
-    record: rrwebRecord,
+    record: rrwebRecordProxy,
 }
 
 // Provide initSessionRecording if not present — return a new LazyLoadedSessionRecording when called
 _target.__PosthogExtensions__.initSessionRecording =
     _target.__PosthogExtensions__.initSessionRecording ||
     ((instance: any) => {
-        return new LazyLoadedSessionRecording(instance)
+        const factory: InitSessionRecordingFactory | undefined =
+            _target.__PosthogExtensions__._initSessionRecordingFactory
+        if (factory) {
+            return factory(instance)
+        }
+        // If no factory is registered yet, return undefined — callers should handle lazy-loading.
+        return undefined
     })
 
 // Provide a no-op loadExternalDependency that calls the callback immediately (since rrweb is bundled)
@@ -29,7 +138,8 @@ _target.__PosthogExtensions__.loadExternalDependency =
 
 // Provide rrwebPlugins object with network plugin factory if not present
 _target.__PosthogExtensions__.rrwebPlugins = _target.__PosthogExtensions__.rrwebPlugins || {}
+// Default to undefined; the lazy-loaded recorder will register the real factory when it initializes.
 _target.__PosthogExtensions__.rrwebPlugins.getRecordNetworkPlugin =
-    _target.__PosthogExtensions__.rrwebPlugins.getRecordNetworkPlugin || (() => getRecordNetworkPlugin)
+    _target.__PosthogExtensions__.rrwebPlugins.getRecordNetworkPlugin || (() => undefined)
 
 export {}

package/src/extensions/replay/external/lazy-loaded-session-recorder.ts

@@ -1,4 +1,4 @@
-import { record as rrwebRecord } from '@rrweb/record'
+/* eslint-disable posthog-js/no-direct-function-check */
 import '../extension-shim'
 import { clampToRange, includes, isBoolean, isNullish, isNumber, isObject, isString, isUndefined } from '@posthog/core'
 import type { recordOptions, rrwebRecord as rrwebRecordType } from '../types/rrweb'
@@ -11,7 +11,7 @@ import {
     RecordPlugin,
 } from '../types/rrweb-types'
 import { buildNetworkRequestOptions } from './config'
-import { getRecordNetworkPlugin } from './network-plugin'
+// network plugin factory will be provided via __PosthogExtensions__.rrwebPlugins.getRecordNetworkPlugin
 import {
     ACTIVE,
     allMatchSessionRecordingStatus,
@@ -72,6 +72,21 @@ const FIVE_MINUTES = ONE_MINUTE * 5
 
 export const RECORDING_IDLE_THRESHOLD_MS = FIVE_MINUTES
 
+// Register a factory on the global extensions object so the extension shim can
+// instantiate a LazyLoadedSessionRecording without importing this module directly.
+try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const ext = (globalThis as any).__PosthogExtensions__
+    if (ext) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ext._initSessionRecordingFactory =
+            ext._initSessionRecordingFactory || ((instance: any) => new LazyLoadedSessionRecording(instance))
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+} catch (e) {
+    // ignore
+}
+
 export const RECORDING_MAX_EVENT_SIZE = ONE_KB * ONE_KB * 0.9 // ~1mb (with some wiggle room)
 export const RECORDING_BUFFER_TIMEOUT = 2000 // 2 seconds
 export const SESSION_RECORDING_BATCH_KEY = 'recordings'
@@ -129,7 +144,43 @@ function getRRWebRecord(): rrwebRecordType | undefined {
         // ignore
     }
 
-    return rrwebRecord as unknown as rrwebRecordType
+    // If we've previously loaded rrweb via dynamic import, return the cached reference
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const cached = (getRRWebRecord as any)._cachedRRWebRecord as rrwebRecordType | undefined
+    return cached as unknown as rrwebRecordType | undefined
+}
+
+async function loadRRWeb(): Promise<rrwebRecordType | null> {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const ext = (globalThis as any).__PosthogExtensions__
+        if (ext && ext.rrweb && ext.rrweb.record) {
+            ;(getRRWebRecord as any)._cachedRRWebRecord = ext.rrweb.record as unknown as rrwebRecordType
+            return ext.rrweb.record as unknown as rrwebRecordType
+        }
+
+        // If already cached, return it
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const already = (getRRWebRecord as any)._cachedRRWebRecord as rrwebRecordType | undefined
+        if (already) {
+            return already
+        }
+
+        // Dynamic import - let the bundler (IIFE build) include rrweb in the bundle or allow lazy-load
+        // Note: we intentionally use a dynamic import so rrweb is not referenced at the module top-level
+        // which would cause IIFE builds to assume a global is present at script execution.
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const mod: any = await import('@rrweb/record')
+        const rr = (mod && (mod.record ?? (mod.default && mod.default.record))) as rrwebRecordType
+        if (rr) {
+            ;(getRRWebRecord as any)._cachedRRWebRecord = rr
+            return rr
+        }
+    } catch (e) {
+        logger.error('could not dynamically load rrweb', e)
+    }
+
+    return null
 }
 
 export type compressedFullSnapshotEvent = {
@@ -468,11 +519,15 @@ export class LazyLoadedSessionRecording {
             const canRecordNetwork = !isLocalhost() || this._forceAllowLocalhostNetworkCapture
 
             if (canRecordNetwork) {
-                plugins.push(
-                    getRecordNetworkPlugin(
-                        buildNetworkRequestOptions(this._instance.config, this._networkPayloadCapture)
+                const assignableWindow: any = globalThis
+                const networkFactory = assignableWindow.__PosthogExtensions__?.rrwebPlugins?.getRecordNetworkPlugin?.()
+                if (typeof networkFactory === 'function') {
+                    plugins.push(
+                        networkFactory(buildNetworkRequestOptions(this._instance.config, this._networkPayloadCapture))
                     )
-                )
+                } else {
+                    logger.info('Network plugin factory not available yet; skipping network plugin')
+                }
             } else {
                 logger.info('NetworkCapture not started because we are on localhost.')
             }
@@ -661,7 +716,7 @@ export class LazyLoadedSessionRecording {
         return parsedConfig as SessionRecordingPersistedConfig
     }
 
-    start(startReason?: SessionStartReason) {
+    async start(startReason?: SessionStartReason) {
         const config = this._remoteConfig
         if (!config) {
             logger.info('remote config must be stored in persistence before recording can start')
@@ -702,7 +757,7 @@ export class LazyLoadedSessionRecording {
         })
 
         this._makeSamplingDecision(this.sessionId)
-        this._startRecorder()
+        await this._startRecorder()
 
         // calling addEventListener multiple times is safe and will not add duplicates
         addEventListener(window, 'beforeunload', this._onBeforeUnload)
@@ -1282,7 +1337,7 @@ export class LazyLoadedSessionRecording {
         }
     }
 
-    private _startRecorder() {
+    private async _startRecorder() {
         if (this._stopRrweb) {
             return
         }
@@ -1333,7 +1388,13 @@ export class LazyLoadedSessionRecording {
             sessionRecordingOptions.blockSelector = this._masking.blockSelector ?? undefined
         }
 
-        const rrwebRecord = getRRWebRecord()
+        // Ensure rrweb is loaded (either via global extension or dynamic import)
+        let rrwebRecord = getRRWebRecord()
+        if (!rrwebRecord) {
+            const loaded = await loadRRWeb()
+            rrwebRecord = loaded ?? undefined
+        }
+
         if (!rrwebRecord) {
             logger.error(
                 '_startRecorder was called but rrwebRecord is not available. This indicates something has gone wrong.'

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

@@ -1,3 +1,4 @@
+/* eslint-disable posthog-js/no-direct-function-check */
 import { SESSION_RECORDING_IS_SAMPLED, SESSION_RECORDING_REMOTE_CONFIG } from '../../constants'
 import { Leanbase } from '../../leanbase'
 import { Properties, RemoteConfig, SessionRecordingPersistedConfig, SessionStartReason } from '../../types'
@@ -5,7 +6,7 @@ import { type eventWithTime } from './types/rrweb-types'
 
 import { isNullish, isUndefined } from '@posthog/core'
 import { logger } from '../../leanbase-logger'
-import { window } from '../../utils'
+import { assignableWindow, window } from '../../utils'
 import { LazyLoadedSessionRecording } from './external/lazy-loaded-session-recorder'
 import { DISABLED, LAZY_LOADING, SessionRecordingStatus, TriggerType } from './external/triggerMatching'
 
@@ -91,6 +92,19 @@ export class SessionRecording {
             return
         }
 
+        // If extensions provide a loader, use it. Otherwise fallback to the local _onScriptLoaded which
+        // will create the local LazyLoadedSessionRecording (so tests that mock it work correctly).
+        const loader = assignableWindow.__PosthogExtensions__?.loadExternalDependency
+        if (typeof loader === 'function') {
+            loader(this._instance, this._scriptName as any, (err: any) => {
+                if (err) {
+                    return log.error('could not load recorder', err)
+                }
+                this._onScriptLoaded(startReason)
+            })
+            return
+        }
+
         this._onScriptLoaded(startReason)
     }
 
@@ -188,14 +202,50 @@ export class SessionRecording {
         }
     }
 
+    private get _scriptName() {
+        const remoteConfig: SessionRecordingPersistedConfig | undefined = this._instance?.persistence?.get_property(
+            SESSION_RECORDING_REMOTE_CONFIG
+        )
+        return (remoteConfig?.scriptConfig?.script as any) || 'lazy-recorder'
+    }
+
     private _onScriptLoaded(startReason?: SessionStartReason) {
+        // If extensions provide an init function, use it. Otherwise, fall back to the local LazyLoadedSessionRecording
+        if (assignableWindow.__PosthogExtensions__?.initSessionRecording) {
+            if (!this._lazyLoadedSessionRecording) {
+                this._lazyLoadedSessionRecording = assignableWindow.__PosthogExtensions__?.initSessionRecording(
+                    this._instance
+                )
+                ;(this._lazyLoadedSessionRecording as any)._forceAllowLocalhostNetworkCapture =
+                    this._forceAllowLocalhostNetworkCapture
+            }
+
+            try {
+                const maybePromise: any = this._lazyLoadedSessionRecording!.start(startReason)
+                if (maybePromise && typeof maybePromise.catch === 'function') {
+                    maybePromise.catch((e: any) => logger.error('error starting session recording', e))
+                }
+            } catch (e: any) {
+                logger.error('error starting session recording', e)
+            }
+            return
+        }
+
         if (!this._lazyLoadedSessionRecording) {
             this._lazyLoadedSessionRecording = new LazyLoadedSessionRecording(this._instance)
             ;(this._lazyLoadedSessionRecording as any)._forceAllowLocalhostNetworkCapture =
                 this._forceAllowLocalhostNetworkCapture
         }
 
-        this._lazyLoadedSessionRecording.start(startReason)
+        // start may perform a dynamic import; handle both sync and Promise returns
+        try {
+            const maybePromise: any = this._lazyLoadedSessionRecording!.start(startReason)
+            if (maybePromise && typeof maybePromise.catch === 'function') {
+                maybePromise.catch((e: any) => logger.error('error starting session recording', e))
+            }
+        } catch (e: any) {
+            logger.error('error starting session recording', e)
+        }
     }
 
     /**

package/src/utils/index.ts

@@ -22,6 +22,9 @@ export const AbortController = global?.AbortController
 export const userAgent = navigator?.userAgent
 export { win as window }
 
+// assignableWindow mirrors browser package's assignableWindow for extension loading shims
+export const assignableWindow: (Window & typeof globalThis) | any = win ?? ({} as any)
+
 export function eachArray<E = any>(
     obj: E[] | null | undefined,
     iterator: (value: E, key: number) => void | Breaker,

package/src/version.ts

@@ -1 +1 @@
-export const version = '0.1.2'
+export const version = '0.2.2'