@multiplayer-app/session-recorder-react-native 1.3.23 → 1.3.32

package/src/services/crashBuffer.service.ts

@@ -1,9 +1,14 @@
 import { Platform } from 'react-native';
+import { EventType } from '@rrweb/types';
 import type {
   CrashBufferEventMap,
   CrashBufferEventName,
   CrashBufferErrorSpanAppendedEvent,
   CrashBuffer,
+  CrashBufferRrwebEventPayload,
+  CrashBufferOtelSpanPayload,
+  CrashBufferOtelSpanBatchPayload,
+  CrashBufferSnapshot,
 } from '@multiplayer-app/session-recorder-common';
 import { SpanStatusCode } from '@opentelemetry/api';
 
@@ -43,15 +48,6 @@ const RECORD_PREFIX = 'mp_crash_buffer_rec_v1:';
 const randomId = (): string =>
   `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 10)}`;
 
-export type CrashBufferSnapshot = {
-  rrwebEvents: Array<{ ts: number; event: any }>;
-  otelSpans: Array<{ ts: number; span: any }>;
-  attrs: any | null;
-  windowMs: number;
-  fromTs: number;
-  toTs: number;
-};
-
 export class CrashBufferService implements CrashBuffer {
   private static instance: CrashBufferService | null = null;
 
@@ -59,7 +55,9 @@ export class CrashBufferService implements CrashBuffer {
   private indexLoaded = false;
   private lastPruneAt = 0;
   private opChain: Promise<any> = Promise.resolve();
-  private defaultWindowMs: number = 1 * 60 * 1000;
+  private defaultWindowMs: number = 0.5 * 60 * 1000;
+  private lastSeenEventTs: number = 0;
+
   private listeners = new Map<
     CrashBufferEventName,
     Set<(payload: CrashBufferEventMap[CrashBufferEventName]) => void>
@@ -111,19 +109,34 @@ export class CrashBufferService implements CrashBuffer {
   }
 
   async appendEvent(
-    payload: { ts: number; event: any },
+    payload: CrashBufferRrwebEventPayload,
     windowMs?: number
   ): Promise<void> {
+    const ts = payload?.ts ?? Date.now();
+    this.lastSeenEventTs = Math.max(this.lastSeenEventTs, ts);
+
+    const rawEventType =
+      (payload as any)?.event?.eventType ?? (payload as any)?.event?.type;
+    const isFullSnapshot =
+      Boolean(payload.isFullSnapshot) ||
+      rawEventType === EventType.FullSnapshot;
+
+    const record: CrashBufferRrwebEventPayload = {
+      ...payload,
+      ts,
+      isFullSnapshot,
+    };
+
     return this.appendRecord(
       'rrweb',
-      payload.ts,
-      payload,
+      record.ts,
+      record,
       windowMs ?? this.defaultWindowMs
     );
   }
 
   async appendSpans(
-    payload: Array<{ ts: number; span: any }>,
+    payload: CrashBufferOtelSpanBatchPayload,
     windowMs?: number
   ): Promise<void> {
     if (!payload.length) return;
@@ -161,7 +174,7 @@ export class CrashBufferService implements CrashBuffer {
   }
 
   setDefaultWindowMs(windowMs: number): void {
-    this.defaultWindowMs = Math.max(10_000, windowMs || 1 * 60 * 1000);
+    this.defaultWindowMs = Math.max(10_000, windowMs || 0.5 * 60 * 1000);
   }
 
   on<E extends CrashBufferEventName>(
@@ -281,32 +294,60 @@ export class CrashBufferService implements CrashBuffer {
         }
       }
 
-      const rrwebEvents: Array<{ ts: number; event: any }> = [];
-      const otelSpans: Array<{ ts: number; span: any }> = [];
+      const allEvents: CrashBufferRrwebEventPayload[] = [];
+      const allSpans: CrashBufferOtelSpanPayload[] = [];
 
       for (const e of entries.sort((a, b) => a.ts - b.ts)) {
         const key = `${RECORD_PREFIX}${e.id}`;
         const payload = byKey.get(key);
         if (!payload) continue;
-        if (e.kind === 'rrweb') rrwebEvents.push(payload);
-        if (e.kind === 'span') otelSpans.push(payload);
+        if (e.kind === 'rrweb') allEvents.push(payload);
+        if (e.kind === 'span') allSpans.push(payload);
       }
 
-      let attrs: any | null = null;
-      try {
-        const raw = AsyncStorage ? await AsyncStorage.getItem(ATTRS_KEY) : null;
-        attrs = raw ? JSON.parse(raw) : null;
-      } catch (_e) {
-        attrs = null;
+      // Mirror browser semantics:
+      // - Ensure the rrweb stream starts at Meta -> FullSnapshot (or is empty).
+      // - Only include spans from the replayable window onward.
+      const eventsSorted = allEvents.slice().sort((a, b) => a.ts - b.ts);
+      const firstSnapshotIdx = eventsSorted.findIndex((e) => {
+        const t = (e as any)?.event?.eventType ?? (e as any)?.event?.type;
+        return t === EventType.FullSnapshot;
+      });
+
+      if (firstSnapshotIdx < 0) {
+        return {
+          events: [],
+          spans: [],
+          startedAt: fromTs,
+          stoppedAt: toTs,
+        };
+      }
+
+      let startIdx = firstSnapshotIdx;
+      for (let i = firstSnapshotIdx - 1; i >= 0; i--) {
+        const t =
+          (eventsSorted[i] as any)?.event?.eventType ??
+          (eventsSorted[i] as any)?.event?.type;
+        if (t === EventType.Meta) {
+          startIdx = i;
+          break;
+        }
       }
 
+      const rrwebEvents = eventsSorted.slice(startIdx);
+      const firstEvent = rrwebEvents[0];
+      const replayStartedAt =
+        typeof firstEvent?.ts === 'number' ? firstEvent.ts : fromTs;
+
+      const otelSpans = allSpans
+        .filter((s) => typeof s?.ts === 'number' && s.ts >= replayStartedAt)
+        .sort((a, b) => a.ts - b.ts);
+
       return {
-        rrwebEvents,
-        otelSpans,
-        attrs,
-        windowMs: effectiveWindowMs,
-        fromTs,
-        toTs,
+        spans: otelSpans,
+        events: rrwebEvents,
+        stoppedAt: toTs,
+        startedAt: replayStartedAt,
       };
     });
   }
@@ -317,6 +358,7 @@ export class CrashBufferService implements CrashBuffer {
       await this.ensureIndexLoaded();
       const keys = this.index.map((e) => `${RECORD_PREFIX}${e.id}`);
       this.index = [];
+      this.lastSeenEventTs = 0;
       try {
         await AsyncStorage.multiRemove([INDEX_KEY, ATTRS_KEY, ...keys]);
       } catch (_e) {

package/src/services/socket.service.ts

@@ -216,8 +216,11 @@ export class SocketService extends Observable<SocketServiceEvents> {
     }
   }
 
-  public setUser(userAttributes: IUserAttributes | null): void {
-    this.emitSocketEvent(SOCKET_SET_USER_EVENT, userAttributes);
+  public setUser(data: {
+    userAttributes: IUserAttributes | null;
+    clientId?: string;
+  }): void {
+    this.emitSocketEvent(SOCKET_SET_USER_EVENT, data);
   }
 
   public close(): Promise<void> {

package/src/session-recorder.ts

@@ -180,95 +180,32 @@ class SessionRecorder
     }
   }
 
-  public async flushBuffer(payload?: { reason?: string }): Promise<any> {
-    if (!this._configs?.buffering?.enabled) return null;
-    if (this._isFlushingBuffer) return null;
-    if (this.sessionState !== SessionState.stopped || this.sessionId)
-      return null;
-
-    const windowMs = Math.max(
-      10_000,
-      (this._configs.buffering.windowMinutes || 2) * 60 * 1000
-    );
-
-    this._isFlushingBuffer = true;
-    try {
-      const reason = payload?.reason || 'manual';
-      await this._crashBuffer.setAttrs({
-        sessionAttributes: this.sessionAttributes,
-        resourceAttributes: getNavigatorInfo(),
-        userAttributes: this._userAttributes,
-      });
-
-      const snapshot = await this._crashBuffer.snapshot(windowMs);
-      if (
-        snapshot.rrwebEvents.length === 0 &&
-        snapshot.otelSpans.length === 0
-      ) {
-        return null;
-      }
-
-      const request: StartSessionRequest = {
-        name: `${this._configs.application} ${getFormattedDate(new Date())}`,
-        stoppedAt: new Date().toISOString(),
-        sessionAttributes: this.sessionAttributes,
-        resourceAttributes: getNavigatorInfo(),
-        ...(this._userAttributes
-          ? { userAttributes: this._userAttributes }
-          : {}),
-        debugSessionData: {
-          meta: {
-            reason,
-            windowMs: snapshot.windowMs,
-            fromTs: snapshot.fromTs,
-            toTs: snapshot.toTs,
-          },
-          events: snapshot.rrwebEvents,
-          spans: snapshot.otelSpans.map((s) => s.span),
-          attrs: snapshot.attrs,
-        },
-      };
-
-      try {
-        const res = await this._apiService.startSession(request);
-        await this._crashBuffer.clear();
-        return res;
-      } catch (_e) {
-        // swallow: flush is best-effort; never throw into app code
-        return null;
-      }
-    } finally {
-      this._isFlushingBuffer = false;
-    }
-  }
-
   private async _flushBuffer(sessionId: string): Promise<any> {
-    if (!this._configs?.buffering?.enabled) return null;
-    if (this._isFlushingBuffer) return null;
-    if (this.sessionState !== SessionState.stopped || this.sessionId)
+    if (
+      !sessionId ||
+      !this._crashBuffer ||
+      this._isFlushingBuffer ||
+      !this._configs?.buffering?.enabled ||
+      this.sessionState !== SessionState.stopped
+    ) {
       return null;
-
-    const windowMs = Math.max(
-      10_000,
-      (this._configs.buffering.windowMinutes || 2) * 60 * 1000
-    );
+    }
 
     this._isFlushingBuffer = true;
     try {
-      const snapshot = await this._crashBuffer.snapshot(windowMs);
-      if (
-        snapshot.rrwebEvents.length === 0 &&
-        snapshot.otelSpans.length === 0
-      ) {
+      const { events, spans, startedAt, stoppedAt } =
+        await this._crashBuffer.snapshot();
+      if (events.length === 0 && spans.length === 0) {
         return null;
       }
-      const spans = snapshot.otelSpans.map((s) => s.span);
-      const events = snapshot.rrwebEvents.map((e) => e.event);
       await Promise.all([
-        this._tracer.exportTraces(spans),
-        this._apiService.exportEvents(sessionId, { events }),
+        this._tracer.exportTraces(spans.map((s) => s.span)),
+        this._apiService.exportEvents(sessionId, {
+          events: events.map((e) => e.event),
+        }),
         this._apiService.updateSessionAttributes(sessionId, {
-          name: this._getSessionName(),
+          startedAt: new Date(startedAt).toISOString(),
+          stoppedAt: new Date(stoppedAt).toISOString(),
           sessionAttributes: this.sessionAttributes,
           resourceAttributes: getNavigatorInfo(),
           userAttributes: this._userAttributes || undefined,
@@ -285,7 +222,7 @@ class SessionRecorder
   private async _createExceptionSession(span: any): Promise<void> {
     try {
       const session = await this._apiService.createErrorSession({ span });
-      if (session) {
+      if (session?._id) {
         void this._flushBuffer(session._id);
       }
     } catch (_ignored) {
@@ -341,7 +278,7 @@ class SessionRecorder
     const bufferEnabled = Boolean(this._configs.buffering?.enabled);
     const windowMs = Math.max(
       10_000,
-      (this._configs.buffering?.windowMinutes || 2) * 60 * 1000
+      (this._configs.buffering?.windowMinutes || 0.5) * 60 * 1000
     );
     this._tracer.setCrashBuffer(
       bufferEnabled ? this._crashBuffer : undefined,
@@ -365,8 +302,13 @@ class SessionRecorder
     );
 
     this._crashBuffer.on('error-span-appended', (payload) => {
-      if (this.sessionState !== SessionState.stopped || this.sessionId) return;
-      if (!payload.span) return;
+      if (
+        !payload.span ||
+        this.sessionId ||
+        this.sessionState !== SessionState.stopped
+      ) {
+        return;
+      }
       this._createExceptionSession(payload.span);
     });
 
@@ -387,21 +329,20 @@ class SessionRecorder
   }
 
   private _startBufferOnlyRecording(): void {
-    if (!this._configs?.buffering?.enabled) return;
-    if (this.sessionState !== SessionState.stopped || this.sessionId) return;
+    if (
+      this.sessionId ||
+      !this._crashBuffer ||
+      !this._configs?.buffering?.enabled ||
+      this.sessionState !== SessionState.stopped
+    ) {
+      return;
+    }
 
     const windowMs = Math.max(
       10_000,
-      (this._configs.buffering.windowMinutes || 2) * 60 * 1000
+      (this._configs.buffering.windowMinutes || 0.5) * 60 * 1000
     );
 
-    // Best-effort: persist current attrs so flush has context.
-    this._crashBuffer.setAttrs({
-      sessionAttributes: this.sessionAttributes,
-      resourceAttributes: getNavigatorInfo(),
-      userAttributes: this._userAttributes,
-    });
-
     // Wire buffer into tracer + recorder (only used when sessionId is null).
     this._tracer.setCrashBuffer(this._crashBuffer, windowMs);
     this._recorder.init(this._configs, this._socketService, this._crashBuffer, {
@@ -448,9 +389,7 @@ class SessionRecorder
     });
 
     this._socketService.on(SESSION_SAVE_BUFFER_EVENT, (payload: any) => {
-      if (payload?.debugSession?._id) {
-        void this._flushBuffer(payload.debugSession._id);
-      }
+      this._flushBuffer(payload?.debugSession?._id);
     });
   }
 
@@ -628,7 +567,13 @@ class SessionRecorder
       return;
     }
     this._userAttributes = userAttributes;
-    this._socketService.setUser(this._userAttributes);
+
+    const data = {
+      userAttributes: this._userAttributes,
+      clientId: this._tracer.clientId,
+    };
+
+    this._socketService.setUser(data);
   }
 
   /**

package/src/types/session-recorder.ts

@@ -1,8 +1,11 @@
 import { type Span } from '@opentelemetry/api';
-import { type ISession, type SessionType, type IUserAttributes } from '@multiplayer-app/session-recorder-common';
+import {
+  type ISession,
+  type SessionType,
+  type IUserAttributes,
+} from '@multiplayer-app/session-recorder-common';
 import { type PropagateTraceHeaderCorsUrls } from '@opentelemetry/sdk-trace-web';
 
-
 // WidgetButtonPlacement moved to configs.ts
 
 export enum SessionState {
@@ -157,11 +160,11 @@ export interface SessionRecorderOptions {
   };
 
   /**
-  * @description
-  * If true, webSocket will be used to manage remote recording sessions.
-  * @default true
-  */
-  useWebsocket?: boolean
+   * @description
+   * If true, webSocket will be used to manage remote recording sessions.
+   * @default true
+   */
+  useWebsocket?: boolean;
 
   /**
    * (Optional) Client-side crash buffer configuration.
@@ -169,11 +172,11 @@ export interface SessionRecorderOptions {
    * even if the user did not start a manual/continuous recording.
    */
   buffering?: {
-    /** Enable/disable buffering. @default true */
-    enabled?: boolean
-    /** Rolling window size (minutes). @default 1 */
-    windowMinutes?: number
-  }
+    /** Enable/disable buffering. @default false */
+    enabled?: boolean;
+    /** Rolling window size (minutes). @default 0.5 */
+    windowMinutes?: number;
+  };
 }
 
 /**
@@ -361,12 +364,6 @@ export interface ISessionRecorder {
    * Capture an exception and send it as an error trace
    */
   captureException(error: unknown, errorInfo?: Record<string, any>): void;
-
-  /**
-   * Flush the local crash buffer by creating a debug session and uploading buffered data.
-   * No-op if a live recording is currently active.
-   */
-  flushBuffer(payload?: { reason?: string }): Promise<any>;
 }
 
 /**

package/src/utils/rrweb-events.ts

@@ -1,11 +1,11 @@
 import { Dimensions } from 'react-native';
 import {
-  EventType,
-  type eventWithTime,
   NodeType,
-  type serializedNodeWithId,
+  EventType,
   IncrementalSource,
   type mutationData,
+  type eventWithTime,
+  type serializedNodeWithId,
 } from '@rrweb/types';
 import { getAppMetadata } from './platform';