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

package/src/otel/index.ts

@@ -4,7 +4,6 @@ import {
   type ExportResult,
 } from '@opentelemetry/core';
 import {
-  AlwaysOnSampler,
   BatchSpanProcessor,
   type ReadableSpan,
 } from '@opentelemetry/sdk-trace-base';
@@ -17,17 +16,21 @@ import {
   SessionRecorderBrowserTraceExporter,
   ATTR_MULTIPLAYER_SESSION_ID,
   MULTIPLAYER_TRACE_CLIENT_ID_LENGTH,
+  SessionRecorderTraceIdRatioBasedSampler,
 } from '@multiplayer-app/session-recorder-common';
 import { type TracerReactNativeConfig } from '../types';
 import { getInstrumentations } from './instrumentations';
 import { getExporterEndpoint } from './helpers';
-import { trace, SpanStatusCode, context, type Span } from '@opentelemetry/api';
 
 import { getPlatformAttributes } from '../utils/platform';
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
 import { CrashBufferService } from '../services/crashBuffer.service';
 import { CrashBufferSpanProcessor } from './CrashBufferSpanProcessor';
 
+const clientIdGenerator = SessionRecorderSdk.getIdGenerator(
+  MULTIPLAYER_TRACE_CLIENT_ID_LENGTH
+);
+
 export class TracerReactNativeSDK {
   clientId = '';
   private tracerProvider?: WebTracerProvider;
@@ -36,7 +39,6 @@ export class TracerReactNativeSDK {
   private sessionId = '';
   private idGenerator?: SessionRecorderIdGenerator;
   private exporter?: SessionRecorderBrowserTraceExporter;
-  private batchSpanProcessor?: BatchSpanProcessor;
   private globalErrorHandlerRegistered = false;
   private crashBuffer?: CrashBufferService;
 
@@ -47,42 +49,50 @@ export class TracerReactNativeSDK {
     sessionType: SessionType = SessionType.MANUAL
   ) {
     this.sessionId = sessionId;
-    this.idGenerator?.setSessionId(sessionId, sessionType, this.clientId);
+
+    if (!this.idGenerator) {
+      throw new Error('Id generator not initialized');
+    }
+
+    this.idGenerator.setSessionId(sessionId, sessionType, this.clientId);
   }
 
   init(options: TracerReactNativeConfig): void {
     this.config = options;
-    const clientIdGenerator = SessionRecorderSdk.getIdGenerator(
-      MULTIPLAYER_TRACE_CLIENT_ID_LENGTH
-    );
     this.clientId = clientIdGenerator();
 
     const { application, version, environment } = this.config;
 
     this.idGenerator = new SessionRecorderIdGenerator();
 
+    this._setSessionId('', SessionType.SESSION_CACHE);
+
     this.exporter = new SessionRecorderBrowserTraceExporter({
       apiKey: options.apiKey,
       url: getExporterEndpoint(options.exporterEndpoint),
     });
 
-    this.batchSpanProcessor = new BatchSpanProcessor(this.exporter);
+    const resourceAttributes = resourceFromAttributes({
+      [SemanticAttributes.SEMRESATTRS_SERVICE_NAME]: application,
+      [SemanticAttributes.SEMRESATTRS_SERVICE_VERSION]: version,
+      [SemanticAttributes.SEMRESATTRS_DEPLOYMENT_ENVIRONMENT]: environment,
+      ...getPlatformAttributes(),
+    });
+
+    SessionRecorderSdk.setResourceAttributes(resourceAttributes.attributes);
 
     this.tracerProvider = new WebTracerProvider({
-      resource: resourceFromAttributes({
-        [SemanticAttributes.SEMRESATTRS_SERVICE_NAME]: application,
-        [SemanticAttributes.SEMRESATTRS_SERVICE_VERSION]: version,
-        [SemanticAttributes.SEMRESATTRS_DEPLOYMENT_ENVIRONMENT]: environment,
-        ...getPlatformAttributes(),
-      }),
+      resource: resourceAttributes,
       idGenerator: this.idGenerator,
-      sampler: new AlwaysOnSampler(),
+      sampler: new SessionRecorderTraceIdRatioBasedSampler(
+        this.config.sampleTraceRatio
+      ),
       spanProcessors: [
         this._getSpanSessionIdProcessor(),
+        new BatchSpanProcessor(this.exporter),
         new CrashBufferSpanProcessor(
-          this.batchSpanProcessor,
           this.crashBuffer,
-          this.exporter.serializeSpan.bind(this.exporter)
+          this.exporter.serializeSpan
         ),
       ],
     });
@@ -117,27 +127,22 @@ export class TracerReactNativeSDK {
   async exportTraces(
     spans: ReadableSpan[]
   ): Promise<ExportResult | undefined | void> {
-    if (this.batchSpanProcessor) {
-      spans.map((span) => {
-        this.batchSpanProcessor?.onEnd(span);
-      });
+    if (!this.exporter) {
+      throw new Error('Trace exporter not initialized');
+    }
+    if (!spans || spans.length === 0) {
       return Promise.resolve();
     }
 
-    throw new Error('Buffer span processor not initialized');
-  }
+    const readableSpans = spans.map((s: any) =>
+      TracerReactNativeSDK._toReadableSpanLike(s)
+    );
 
-  private _getSpanSessionIdProcessor() {
-    return {
-      onStart: (span: any) => {
-        if (this.sessionId) {
-          span.setAttribute(ATTR_MULTIPLAYER_SESSION_ID, this.sessionId);
-        }
-      },
-      onEnd: () => {},
-      shutdown: () => Promise.resolve(),
-      forceFlush: () => Promise.resolve(),
-    };
+    return new Promise((resolve) => {
+      this.exporter?.exportBuffer(readableSpans, (result) => {
+        resolve(result);
+      });
+    });
   }
 
   start(sessionId: string, sessionType: SessionType): void {
@@ -157,7 +162,7 @@ export class TracerReactNativeSDK {
       );
     }
 
-    this._setSessionId('');
+    this._setSessionId('', SessionType.SESSION_CACHE);
   }
 
   setApiKey(apiKey: string): void {
@@ -167,16 +172,7 @@ export class TracerReactNativeSDK {
       );
     }
 
-    this.exporter.setApiKey?.(apiKey);
-  }
-
-  setSessionId(sessionId: string, sessionType: SessionType): void {
-    this._setSessionId(sessionId, sessionType);
-  }
-
-  // Shutdown (React Native specific)
-  shutdown(): Promise<void> {
-    return Promise.resolve();
+    this.exporter.setApiKey(apiKey);
   }
 
   /**
@@ -186,39 +182,20 @@ export class TracerReactNativeSDK {
    */
   captureException(error: Error, errorInfo?: Record<string, any>): void {
     if (!error) return;
-    // Prefer attaching to the active span to keep correlation intact
-    try {
-      const activeSpan = trace.getSpan(context.active());
-      if (activeSpan) {
-        this._recordException(activeSpan, error, errorInfo);
-        return;
-      }
-    } catch (_ignored) {}
-
-    // Fallback: create a short-lived span to hold the exception details
-    try {
-      const tracer = trace.getTracer('exception');
-      const span = tracer.startSpan(error.name || 'Error');
-      this._recordException(span, error, errorInfo);
-      span.end();
-    } catch (_ignored) {}
+    SessionRecorderSdk.captureException(error, errorInfo);
   }
 
-  private _recordException(
-    span: Span,
-    error: Error,
-    errorInfo?: Record<string, any>
-  ): void {
-    span.recordException(error);
-    span.setStatus({ code: SpanStatusCode.ERROR, message: error.message });
-    span.setAttribute('exception.type', error.name || 'Error');
-    span.setAttribute('exception.message', error.message);
-    span.setAttribute('exception.stacktrace', error.stack || '');
-    if (errorInfo) {
-      Object.entries(errorInfo).forEach(([key, value]) => {
-        span.setAttribute(`error_info.${key}`, value);
-      });
-    }
+  private _getSpanSessionIdProcessor() {
+    return {
+      onStart: (span: any) => {
+        if (this.sessionId) {
+          span.setAttribute(ATTR_MULTIPLAYER_SESSION_ID, this.sessionId);
+        }
+      },
+      onEnd: () => {},
+      shutdown: () => Promise.resolve(),
+      forceFlush: () => Promise.resolve(),
+    };
   }
 
   private _registerGlobalErrorHandlers(): void {
@@ -249,4 +226,75 @@ export class TracerReactNativeSDK {
       this.globalErrorHandlerRegistered = true;
     }
   }
+
+  private static _toReadableSpanLike(span: any): ReadableSpan {
+    if (
+      span &&
+      typeof span.spanContext === 'function' &&
+      span.instrumentationScope
+    ) {
+      return span as ReadableSpan;
+    }
+
+    const spanContext =
+      typeof span?.spanContext === 'function'
+        ? span.spanContext()
+        : span?._spanContext;
+    const normalizedCtx =
+      spanContext ||
+      ({
+        traceId: span?.traceId,
+        spanId: span?.spanId,
+        traceFlags: span?.traceFlags,
+        traceState: span?.traceState,
+      } as any);
+
+    const instrumentationScope =
+      span?.instrumentationScope ||
+      span?.instrumentationLibrary ||
+      ({
+        name: 'multiplayer-buffer',
+        version: undefined,
+        schemaUrl: undefined,
+      } as any);
+
+    const normalizedScope = {
+      name: instrumentationScope?.name || 'multiplayer-buffer',
+      version: instrumentationScope?.version,
+      schemaUrl: instrumentationScope?.schemaUrl,
+    };
+
+    const resource = span?.resource || {
+      attributes: {},
+      asyncAttributesPending: false,
+    };
+    const parentSpanId = span?.parentSpanId;
+
+    return {
+      name: span?.name || '',
+      kind: span?.kind,
+      spanContext: () => normalizedCtx,
+      parentSpanContext: parentSpanId
+        ? ({
+            traceId: normalizedCtx?.traceId,
+            spanId: parentSpanId,
+            traceFlags: normalizedCtx?.traceFlags,
+            traceState: normalizedCtx?.traceState,
+          } as any)
+        : undefined,
+      startTime: span?.startTime,
+      endTime: span?.endTime ?? span?.startTime,
+      duration: span?.duration,
+      status: span?.status,
+      attributes: span?.attributes || {},
+      links: span?.links || [],
+      events: span?.events || [],
+      ended: typeof span?.ended === 'boolean' ? span.ended : true,
+      droppedAttributesCount: span?.droppedAttributesCount || 0,
+      droppedEventsCount: span?.droppedEventsCount || 0,
+      droppedLinksCount: span?.droppedLinksCount || 0,
+      resource,
+      instrumentationScope: normalizedScope as any,
+    } as any;
+  }
 }

package/src/recorder/index.ts

@@ -40,7 +40,7 @@ export class RecorderReactNativeSDK implements EventRecorder {
     this.bufferingEnabled = Boolean(buffering?.enabled);
     this.bufferWindowMs = Math.max(
       10_000,
-      buffering?.windowMs || 1 * 60 * 1000
+      buffering?.windowMs || 0.5 * 60 * 1000
     );
     this.screenRecorder.init(config, this);
     this.navigationTracker.init(config, this.screenRecorder);

package/src/services/api.service.ts

@@ -93,7 +93,8 @@ export class ApiService {
   async updateSessionAttributes(
     sessionId: string,
     requestBody: {
-      name?: string;
+      startedAt?: string;
+      stoppedAt?: string;
       userAttributes?: IUserAttributes;
       sessionAttributes?: ISessionAttributes;
       resourceAttributes?: IResourceAttributes;

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> {