@leanbase-giangnd/js 0.2.2 → 0.2.4

package/dist/index.d.ts

@@ -6127,6 +6127,10 @@ declare class Leanbase extends PostHogCore {
     consent: ConsentManager;
     sessionRecording?: SessionRecording$1;
     isRemoteConfigLoaded?: boolean;
+    private _remoteConfigLoadAttempted;
+    private _remoteConfigResolved;
+    private _featureFlagsResolved;
+    private _maybeStartedSessionRecording;
     personProcessingSetOncePropertiesSent: boolean;
     isLoaded: boolean;
     initialPageviewCaptured: boolean;
@@ -6137,6 +6141,7 @@ declare class Leanbase extends PostHogCore {
     capturePageLeave(): void;
     loadRemoteConfig(): Promise<void>;
     onRemoteConfig(config: RemoteConfig$1): void;
+    private _maybeStartSessionRecording;
     fetch(url: string, options: PostHogFetchOptions): Promise<PostHogFetchResponse>;
     setConfig(config: Partial<LeanbaseConfig>): void;
     getLibraryId(): string;

package/dist/index.mjs

@@ -1169,7 +1169,7 @@ const detectDeviceType = function (user_agent) {
   }
 };
 
-var version = "0.2.2";
+var version = "0.2.4";
 var packageInfo = {
 	version: version};
 
@@ -3845,34 +3845,49 @@ class MutationThrottler {
       }
       return [id, node];
     };
-    this._getNode = id => this._rrweb.mirror.getNode(id);
+    this._getNode = id => {
+      // eslint-disable-next-line posthog-js/no-direct-undefined-check, posthog-js/no-direct-null-check
+      if (id === null || id === undefined) {
+        return null;
+      }
+      try {
+        return this._rrweb.mirror.getNode(id) ?? null;
+      } catch {
+        return null;
+      }
+    };
     this._numberOfChanges = data => {
       return (data.removes?.length ?? 0) + (data.attributes?.length ?? 0) + (data.texts?.length ?? 0) + (data.adds?.length ?? 0);
     };
     this.throttleMutations = event => {
-      if (event.type !== INCREMENTAL_SNAPSHOT_EVENT_TYPE || event.data.source !== MUTATION_SOURCE_TYPE) {
+      try {
+        if (event.type !== INCREMENTAL_SNAPSHOT_EVENT_TYPE || event.data.source !== MUTATION_SOURCE_TYPE) {
+          return event;
+        }
+        const data = event.data;
+        const initialMutationCount = this._numberOfChanges(data);
+        if (data.attributes) {
+          // Most problematic mutations come from attrs where the style or minor properties are changed rapidly
+          data.attributes = data.attributes.filter(attr => {
+            const id = attr?.id;
+            if (typeof id !== 'number') {
+              return true;
+            }
+            const [nodeId] = this._getNodeOrRelevantParent(id);
+            const isRateLimited = this._rateLimiter.consumeRateLimit(nodeId);
+            return !isRateLimited;
+          });
+        }
+        // Check if every part of the mutation is empty in which case there is nothing to do
+        const mutationCount = this._numberOfChanges(data);
+        if (mutationCount === 0 && initialMutationCount !== mutationCount) {
+          // If we have modified the mutation count and the remaining count is 0, then we don't need the event.
+          return;
+        }
+        return event;
+      } catch {
         return event;
       }
-      const data = event.data;
-      const initialMutationCount = this._numberOfChanges(data);
-      if (data.attributes) {
-        // Most problematic mutations come from attrs where the style or minor properties are changed rapidly
-        data.attributes = data.attributes.filter(attr => {
-          const [nodeId] = this._getNodeOrRelevantParent(attr.id);
-          const isRateLimited = this._rateLimiter.consumeRateLimit(nodeId);
-          if (isRateLimited) {
-            return false;
-          }
-          return attr;
-        });
-      }
-      // Check if every part of the mutation is empty in which case there is nothing to do
-      const mutationCount = this._numberOfChanges(data);
-      if (mutationCount === 0 && initialMutationCount !== mutationCount) {
-        // If we have modified the mutation count and the remaining count is 0, then we don't need the event.
-        return;
-      }
-      return event;
     };
     const configuredBucketSize = this._options.bucketSize ?? 100;
     const effectiveBucketSize = Math.max(configuredBucketSize - 1, 1);
@@ -4110,6 +4125,9 @@ class LazyLoadedSessionRecording {
      */
     this._queuedRRWebEvents = [];
     this._isIdle = 'unknown';
+    // Replay should not process rrweb emits until all critical dependencies are ready.
+    this._isFullyReady = false;
+    this._loggedMissingEndpointFor = false;
     // we need to be able to check the state of the event and url triggers separately
     // as we make some decisions based on them without referencing LinkedFlag etc
     this._triggerMatching = new PendingTriggerMatching();
@@ -4290,7 +4308,11 @@ class LazyLoadedSessionRecording {
     }
   }
   _tryAddCustomEvent(tag, payload) {
-    return this._tryRRWebMethod(newQueuedEvent(() => getRRWebRecord().addCustomEvent(tag, payload)));
+    const rrwebRecord = getRRWebRecord();
+    if (!rrwebRecord || typeof rrwebRecord.addCustomEvent !== 'function') {
+      return false;
+    }
+    return this._tryRRWebMethod(newQueuedEvent(() => rrwebRecord.addCustomEvent(tag, payload)));
   }
   _pageViewFallBack() {
     try {
@@ -4336,7 +4358,11 @@ class LazyLoadedSessionRecording {
     }
   }
   _tryTakeFullSnapshot() {
-    return this._tryRRWebMethod(newQueuedEvent(() => getRRWebRecord().takeFullSnapshot()));
+    const rrwebRecord = getRRWebRecord();
+    if (!rrwebRecord || typeof rrwebRecord.takeFullSnapshot !== 'function') {
+      return false;
+    }
+    return this._tryRRWebMethod(newQueuedEvent(() => rrwebRecord.takeFullSnapshot()));
   }
   get _fullSnapshotIntervalMillis() {
     if (this._triggerMatching.triggerStatus(this.sessionId) === TRIGGER_PENDING && !['sampled', 'active'].includes(this.status)) {
@@ -4412,6 +4438,7 @@ class LazyLoadedSessionRecording {
     return parsedConfig;
   }
   async start(startReason) {
+    this._isFullyReady = false;
     const config = this._remoteConfig;
     if (!config) {
       logger.info('remote config must be stored in persistence before recording can start');
@@ -4446,6 +4473,14 @@ class LazyLoadedSessionRecording {
     });
     this._makeSamplingDecision(this.sessionId);
     await this._startRecorder();
+    // If rrweb failed to load/start, do not proceed further.
+    // This prevents installing listeners that assume rrweb is active.
+    if (!this.isStarted) {
+      return;
+    }
+    // Only start processing rrweb emits once the ingestion endpoint is available.
+    // If it isn't available, we must degrade to a no-op (never crash the host app).
+    this._isFullyReady = this._canCaptureSnapshots();
     // calling addEventListener multiple times is safe and will not add duplicates
     addEventListener(win, 'beforeunload', this._onBeforeUnload);
     addEventListener(win, 'offline', this._onOffline);
@@ -4523,77 +4558,100 @@ class LazyLoadedSessionRecording {
     this._queuedRRWebEvents = [];
     this._stopRrweb?.();
     this._stopRrweb = undefined;
+    this._isFullyReady = false;
     logger.info('stopped');
   }
+  _snapshotIngestionUrl() {
+    const endpointFor = this._instance?.requestRouter?.endpointFor;
+    if (typeof endpointFor !== 'function') {
+      return null;
+    }
+    try {
+      return endpointFor('api', this._endpoint);
+    } catch {
+      return null;
+    }
+  }
+  _canCaptureSnapshots() {
+    return !!this._snapshotIngestionUrl();
+  }
   onRRwebEmit(rawEvent) {
-    this._processQueuedEvents();
-    if (!rawEvent || !isObject(rawEvent)) {
+    // Never process rrweb emits until we're fully ready.
+    if (!this._isFullyReady || !this.isStarted) {
       return;
     }
-    if (rawEvent.type === EventType.Meta) {
-      const href = this._maskUrl(rawEvent.data.href);
-      this._lastHref = href;
-      if (!href) {
+    try {
+      this._processQueuedEvents();
+      if (!rawEvent || !isObject(rawEvent)) {
         return;
       }
-      rawEvent.data.href = href;
-    } else {
-      this._pageViewFallBack();
-    }
-    // Check if the URL matches any trigger patterns
-    this._urlTriggerMatching.checkUrlTriggerConditions(() => this._pauseRecording(), () => this._resumeRecording(), triggerType => this._activateTrigger(triggerType));
-    // always have to check if the URL is blocked really early,
-    // or you risk getting stuck in a loop
-    if (this._urlTriggerMatching.urlBlocked && !isRecordingPausedEvent(rawEvent)) {
-      return;
-    }
-    // we're processing a full snapshot, so we should reset the timer
-    if (rawEvent.type === EventType.FullSnapshot) {
-      this._scheduleFullSnapshot();
-      // Full snapshots reset rrweb's node IDs, so clear any logged node tracking
-      this._mutationThrottler?.reset();
-    }
-    // Clear the buffer if waiting for a trigger and only keep data from after the current full snapshot
-    // we always start trigger pending so need to wait for flags before we know if we're really pending
-    if (rawEvent.type === EventType.FullSnapshot && this._triggerMatching.triggerStatus(this.sessionId) === TRIGGER_PENDING) {
-      this._clearBufferBeforeMostRecentMeta();
-    }
-    const throttledEvent = this._mutationThrottler ? this._mutationThrottler.throttleMutations(rawEvent) : rawEvent;
-    if (!throttledEvent) {
-      return;
-    }
-    // TODO: Re-add ensureMaxMessageSize once we are confident in it
-    const event = truncateLargeConsoleLogs(throttledEvent);
-    this._updateWindowAndSessionIds(event);
-    // When in an idle state we keep recording but don't capture the events,
-    // we don't want to return early if idle is 'unknown'
-    if (this._isIdle === true && !isSessionIdleEvent(event)) {
-      return;
-    }
-    if (isSessionIdleEvent(event)) {
-      // session idle events have a timestamp when rrweb sees them
-      // which can artificially lengthen a session
-      // we know when we detected it based on the payload and can correct the timestamp
-      const payload = event.data.payload;
-      if (payload) {
-        const lastActivity = payload.lastActivityTimestamp;
-        const threshold = payload.threshold;
-        event.timestamp = lastActivity + threshold;
+      if (rawEvent.type === EventType.Meta) {
+        const href = this._maskUrl(rawEvent.data.href);
+        this._lastHref = href;
+        if (!href) {
+          return;
+        }
+        rawEvent.data.href = href;
+      } else {
+        this._pageViewFallBack();
       }
+      // Check if the URL matches any trigger patterns
+      this._urlTriggerMatching.checkUrlTriggerConditions(() => this._pauseRecording(), () => this._resumeRecording(), triggerType => this._activateTrigger(triggerType));
+      // always have to check if the URL is blocked really early,
+      // or you risk getting stuck in a loop
+      if (this._urlTriggerMatching.urlBlocked && !isRecordingPausedEvent(rawEvent)) {
+        return;
+      }
+      // we're processing a full snapshot, so we should reset the timer
+      if (rawEvent.type === EventType.FullSnapshot) {
+        this._scheduleFullSnapshot();
+        // Full snapshots reset rrweb's node IDs, so clear any logged node tracking
+        this._mutationThrottler?.reset();
+      }
+      // Clear the buffer if waiting for a trigger and only keep data from after the current full snapshot
+      // we always start trigger pending so need to wait for flags before we know if we're really pending
+      if (rawEvent.type === EventType.FullSnapshot && this._triggerMatching.triggerStatus(this.sessionId) === TRIGGER_PENDING) {
+        this._clearBufferBeforeMostRecentMeta();
+      }
+      const throttledEvent = this._mutationThrottler ? this._mutationThrottler.throttleMutations(rawEvent) : rawEvent;
+      if (!throttledEvent) {
+        return;
+      }
+      // TODO: Re-add ensureMaxMessageSize once we are confident in it
+      const event = truncateLargeConsoleLogs(throttledEvent);
+      this._updateWindowAndSessionIds(event);
+      // When in an idle state we keep recording but don't capture the events,
+      // we don't want to return early if idle is 'unknown'
+      if (this._isIdle === true && !isSessionIdleEvent(event)) {
+        return;
+      }
+      if (isSessionIdleEvent(event)) {
+        // session idle events have a timestamp when rrweb sees them
+        // which can artificially lengthen a session
+        // we know when we detected it based on the payload and can correct the timestamp
+        const payload = event.data.payload;
+        if (payload) {
+          const lastActivity = payload.lastActivityTimestamp;
+          const threshold = payload.threshold;
+          event.timestamp = lastActivity + threshold;
+        }
+      }
+      const eventToSend = this._instance.config.session_recording?.compress_events ?? true ? compressEvent(event) : event;
+      const size = estimateSize(eventToSend);
+      const properties = {
+        $snapshot_bytes: size,
+        $snapshot_data: eventToSend,
+        $session_id: this._sessionId,
+        $window_id: this._windowId
+      };
+      if (this.status === DISABLED) {
+        this._clearBuffer();
+        return;
+      }
+      this._captureSnapshotBuffered(properties);
+    } catch (e) {
+      logger.error('error processing rrweb event', e);
     }
-    const eventToSend = this._instance.config.session_recording?.compress_events ?? true ? compressEvent(event) : event;
-    const size = estimateSize(eventToSend);
-    const properties = {
-      $snapshot_bytes: size,
-      $snapshot_data: eventToSend,
-      $session_id: this._sessionId,
-      $window_id: this._windowId
-    };
-    if (this.status === DISABLED) {
-      this._clearBuffer();
-      return;
-    }
-    this._captureSnapshotBuffered(properties);
   }
   get status() {
     return this._statusMatcher({
@@ -4671,6 +4729,16 @@ class LazyLoadedSessionRecording {
       }, RECORDING_BUFFER_TIMEOUT);
       return this._buffer;
     }
+    if (!this._canCaptureSnapshots()) {
+      if (!this._loggedMissingEndpointFor) {
+        this._loggedMissingEndpointFor = true;
+        logger.warn('snapshot capture skipped because requestRouter.endpointFor is unavailable');
+      }
+      this._flushBufferTimer = setTimeout(() => {
+        this._flushBuffer();
+      }, RECORDING_BUFFER_TIMEOUT);
+      return this._buffer;
+    }
     if (this._buffer.data.length > 0) {
       const snapshotEvents = splitBuffer(this._buffer);
       snapshotEvents.forEach(snapshotBuffer => {
@@ -4703,13 +4771,25 @@ class LazyLoadedSessionRecording {
     }
   }
   _captureSnapshot(properties) {
-    // :TRICKY: Make sure we batch these requests, use a custom endpoint and don't truncate the strings.
-    this._instance.capture('$snapshot', properties, {
-      _url: this._instance.requestRouter.endpointFor('api', this._endpoint),
-      _noTruncate: true,
-      _batchKey: SESSION_RECORDING_BATCH_KEY,
-      skip_client_rate_limiting: true
-    });
+    const url = this._snapshotIngestionUrl();
+    if (!url) {
+      if (!this._loggedMissingEndpointFor) {
+        this._loggedMissingEndpointFor = true;
+        logger.warn('snapshot capture skipped because requestRouter.endpointFor is unavailable');
+      }
+      return;
+    }
+    try {
+      // :TRICKY: Make sure we batch these requests, use a custom endpoint and don't truncate the strings.
+      this._instance.capture('$snapshot', properties, {
+        _url: url,
+        _noTruncate: true,
+        _batchKey: SESSION_RECORDING_BATCH_KEY,
+        skip_client_rate_limiting: true
+      });
+    } catch (e) {
+      logger.error('failed to capture snapshot', e);
+    }
   }
   _snapshotUrl() {
     const host = this._instance.config.host || '';
@@ -4979,13 +5059,23 @@ class LazyLoadedSessionRecording {
       }
     });
     const activePlugins = this._gatherRRWebPlugins();
-    this._stopRrweb = rrwebRecord({
-      emit: event => {
-        this.onRRwebEmit(event);
-      },
-      plugins: activePlugins,
-      ...sessionRecordingOptions
-    });
+    try {
+      this._stopRrweb = rrwebRecord({
+        emit: event => {
+          try {
+            this.onRRwebEmit(event);
+          } catch (e) {
+            logger.error('error in rrweb emit handler', e);
+          }
+        },
+        plugins: activePlugins,
+        ...sessionRecordingOptions
+      });
+    } catch (e) {
+      logger.error('failed to start rrweb recorder', e);
+      this._stopRrweb = undefined;
+      return;
+    }
     // We reset the last activity timestamp, resetting the idle timer
     this._lastActivityTimestamp = Date.now();
     // stay unknown if we're not sure if we're idle or not
@@ -5171,18 +5261,25 @@ class SessionRecording {
     // 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._forceAllowLocalhostNetworkCapture = this._forceAllowLocalhostNetworkCapture;
+        const maybeRecording = assignableWindow.__PosthogExtensions__?.initSessionRecording(this._instance);
+        if (maybeRecording && typeof maybeRecording.start === 'function') {
+          this._lazyLoadedSessionRecording = maybeRecording;
+          this._lazyLoadedSessionRecording._forceAllowLocalhostNetworkCapture = this._forceAllowLocalhostNetworkCapture;
+        } else {
+          log.warn('initSessionRecording was present but did not return a recorder instance; falling back to local recorder');
+        }
       }
-      try {
-        const maybePromise = this._lazyLoadedSessionRecording.start(startReason);
-        if (maybePromise && typeof maybePromise.catch === 'function') {
-          maybePromise.catch(e => logger$2.error('error starting session recording', e));
+      if (this._lazyLoadedSessionRecording) {
+        try {
+          const maybePromise = this._lazyLoadedSessionRecording.start(startReason);
+          if (maybePromise && typeof maybePromise.catch === 'function') {
+            maybePromise.catch(e => logger$2.error('error starting session recording', e));
+          }
+        } catch (e) {
+          logger$2.error('error starting session recording', e);
         }
-      } catch (e) {
-        logger$2.error('error starting session recording', e);
+        return;
       }
-      return;
     }
     if (!this._lazyLoadedSessionRecording) {
       this._lazyLoadedSessionRecording = new LazyLoadedSessionRecording(this._instance);
@@ -5297,6 +5394,10 @@ class Leanbase extends PostHogCore {
       token
     });
     super(token, mergedConfig);
+    this._remoteConfigLoadAttempted = false;
+    this._remoteConfigResolved = false;
+    this._featureFlagsResolved = false;
+    this._maybeStartedSessionRecording = false;
     this.personProcessingSetOncePropertiesSent = false;
     this.isLoaded = false;
     this.config = mergedConfig;
@@ -5320,10 +5421,20 @@ class Leanbase extends PostHogCore {
     this.replayAutocapture.startIfEnabled();
     if (this.sessionManager && this.config.cookieless_mode !== 'always') {
       this.sessionRecording = new SessionRecording(this);
-      this.sessionRecording.startIfEnabledOrStop();
     }
+    // Start session recording only once flags + remote config have been resolved.
+    // This matches the PostHog browser SDK where replay activation is driven by remote config and flags.
     if (this.config.preloadFeatureFlags !== false) {
-      this.reloadFeatureFlags();
+      this.reloadFeatureFlags({
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        cb: _err => {
+          this._featureFlagsResolved = true;
+          this._maybeStartSessionRecording();
+        }
+      });
+    } else {
+      // If feature flags preload is explicitly disabled, treat this requirement as satisfied.
+      this._featureFlagsResolved = true;
     }
     this.config.loaded?.(this);
     if (this.config.capture_pageview) {
@@ -5333,9 +5444,26 @@ class Leanbase extends PostHogCore {
         }
       }, 1);
     }
-    addEventListener(document, 'DOMContentLoaded', () => {
-      this.loadRemoteConfig();
-    });
+    const triggerRemoteConfigLoad = reason => {
+      logger$2.info(`remote config load triggered via ${reason}`);
+      void this.loadRemoteConfig();
+    };
+    if (document) {
+      if (document.readyState === 'loading') {
+        logger$2.info('remote config load deferred until DOMContentLoaded');
+        const onDomReady = () => {
+          document?.removeEventListener('DOMContentLoaded', onDomReady);
+          triggerRemoteConfigLoad('dom');
+        };
+        addEventListener(document, 'DOMContentLoaded', onDomReady, {
+          once: true
+        });
+      } else {
+        triggerRemoteConfigLoad('immediate');
+      }
+    } else {
+      triggerRemoteConfigLoad('no-document');
+    }
     addEventListener(window, 'onpagehide' in self ? 'pagehide' : 'unload', this.capturePageLeave.bind(this), {
       passive: false
     });
@@ -5372,11 +5500,19 @@ class Leanbase extends PostHogCore {
     }
   }
   async loadRemoteConfig() {
-    if (!this.isRemoteConfigLoaded) {
+    if (this._remoteConfigLoadAttempted) {
+      return;
+    }
+    this._remoteConfigLoadAttempted = true;
+    try {
       const remoteConfig = await this.reloadRemoteConfigAsync();
       if (remoteConfig) {
         this.onRemoteConfig(remoteConfig);
       }
+    } finally {
+      // Regardless of success/failure, we consider remote config "resolved" so replay isn't blocked forever.
+      this._remoteConfigResolved = true;
+      this._maybeStartSessionRecording();
     }
   }
   onRemoteConfig(config) {
@@ -5389,6 +5525,26 @@ class Leanbase extends PostHogCore {
     this.isRemoteConfigLoaded = true;
     this.replayAutocapture?.onRemoteConfig(config);
     this.sessionRecording?.onRemoteConfig(config);
+    // Remote config has been applied; allow replay start if flags are also ready.
+    this._remoteConfigResolved = true;
+    this._maybeStartSessionRecording();
+  }
+  _maybeStartSessionRecording() {
+    if (this._maybeStartedSessionRecording) {
+      return;
+    }
+    if (!this.sessionRecording) {
+      return;
+    }
+    if (!this._featureFlagsResolved || !this._remoteConfigResolved) {
+      return;
+    }
+    this._maybeStartedSessionRecording = true;
+    try {
+      this.sessionRecording.startIfEnabledOrStop();
+    } catch (e) {
+      logger$2.error('Failed to start session recording', e);
+    }
   }
   fetch(url, options) {
     const fetchFn = getFetch();