@multiplayer-app/session-recorder-react-native 1.3.15 → 1.3.21

package/src/otel/index.ts

@@ -1,14 +1,22 @@
 import { resourceFromAttributes } from '@opentelemetry/resources';
-import { W3CTraceContextPropagator } from '@opentelemetry/core';
-import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base';
+import {
+  W3CTraceContextPropagator,
+  type ExportResult,
+} from '@opentelemetry/core';
+import {
+  AlwaysOnSampler,
+  BatchSpanProcessor,
+  type ReadableSpan,
+} from '@opentelemetry/sdk-trace-base';
 import * as SemanticAttributes from '@opentelemetry/semantic-conventions';
 import { registerInstrumentations } from '@opentelemetry/instrumentation';
 import {
   SessionType,
-  ATTR_MULTIPLAYER_SESSION_ID,
+  SessionRecorderSdk,
   SessionRecorderIdGenerator,
-  SessionRecorderTraceIdRatioBasedSampler,
   SessionRecorderBrowserTraceExporter,
+  ATTR_MULTIPLAYER_SESSION_ID,
+  MULTIPLAYER_TRACE_CLIENT_ID_LENGTH,
 } from '@multiplayer-app/session-recorder-common';
 import { type TracerReactNativeConfig } from '../types';
 import { getInstrumentations } from './instrumentations';
@@ -17,28 +25,37 @@ 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';
 
 export class TracerReactNativeSDK {
+  clientId = '';
   private tracerProvider?: WebTracerProvider;
   private config?: TracerReactNativeConfig;
 
   private sessionId = '';
   private idGenerator?: SessionRecorderIdGenerator;
-  private exporter?: any;
+  private exporter?: SessionRecorderBrowserTraceExporter;
+  private batchSpanProcessor?: BatchSpanProcessor;
   private globalErrorHandlerRegistered = false;
+  private crashBuffer?: CrashBufferService;
 
-  constructor() { }
+  constructor() {}
 
   private _setSessionId(
     sessionId: string,
     sessionType: SessionType = SessionType.MANUAL
   ) {
     this.sessionId = sessionId;
-    this.idGenerator?.setSessionId(sessionId, sessionType);
+    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;
 
@@ -49,6 +66,8 @@ export class TracerReactNativeSDK {
       url: getExporterEndpoint(options.exporterEndpoint),
     });
 
+    this.batchSpanProcessor = new BatchSpanProcessor(this.exporter);
+
     this.tracerProvider = new WebTracerProvider({
       resource: resourceFromAttributes({
         [SemanticAttributes.SEMRESATTRS_SERVICE_NAME]: application,
@@ -57,12 +76,14 @@ export class TracerReactNativeSDK {
         ...getPlatformAttributes(),
       }),
       idGenerator: this.idGenerator,
-      sampler: new SessionRecorderTraceIdRatioBasedSampler(
-        this.config.sampleTraceRatio || 0.15
-      ),
+      sampler: new AlwaysOnSampler(),
       spanProcessors: [
         this._getSpanSessionIdProcessor(),
-        new BatchSpanProcessor(this.exporter),
+        new CrashBufferSpanProcessor(
+          this.batchSpanProcessor,
+          this.crashBuffer,
+          this.exporter.serializeSpan.bind(this.exporter)
+        ),
       ],
     });
 
@@ -79,17 +100,41 @@ export class TracerReactNativeSDK {
     this._registerGlobalErrorHandlers();
   }
 
+  setCrashBuffer(
+    crashBuffer: CrashBufferService | undefined,
+    windowMs?: number
+  ): void {
+    this.crashBuffer = crashBuffer;
+    if (
+      crashBuffer &&
+      typeof windowMs === 'number' &&
+      Number.isFinite(windowMs)
+    ) {
+      crashBuffer.setDefaultWindowMs(windowMs);
+    }
+  }
+
+  async exportTraces(
+    spans: ReadableSpan[]
+  ): Promise<ExportResult | undefined | void> {
+    if (this.batchSpanProcessor) {
+      spans.map((span) => {
+        this.batchSpanProcessor?.onEnd(span);
+      });
+      return Promise.resolve();
+    }
+
+    throw new Error('Buffer span processor not initialized');
+  }
+
   private _getSpanSessionIdProcessor() {
     return {
       onStart: (span: any) => {
         if (this.sessionId) {
           span.setAttribute(ATTR_MULTIPLAYER_SESSION_ID, this.sessionId);
         }
-        // Add React Native specific attributes
-        span.setAttribute('platform', 'react-native');
-        span.setAttribute('timestamp', Date.now());
       },
-      onEnd: () => { },
+      onEnd: () => {},
       shutdown: () => Promise.resolve(),
       forceFlush: () => Promise.resolve(),
     };
@@ -143,32 +188,36 @@ export class TracerReactNativeSDK {
     if (!error) return;
     // Prefer attaching to the active span to keep correlation intact
     try {
-      const activeSpan = trace.getSpan(context.active())
+      const activeSpan = trace.getSpan(context.active());
       if (activeSpan) {
-        this._recordException(activeSpan, error, errorInfo)
-        return
+        this._recordException(activeSpan, error, errorInfo);
+        return;
       }
-    } catch (_ignored) { }
+    } 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) { }
+      const tracer = trace.getTracer('exception');
+      const span = tracer.startSpan(error.name || 'Error');
+      this._recordException(span, error, errorInfo);
+      span.end();
+    } catch (_ignored) {}
   }
 
-  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 || '')
+  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)
-      })
+        span.setAttribute(`error_info.${key}`, value);
+      });
     }
   }
 
@@ -182,11 +231,18 @@ export class TracerReactNativeSDK {
       const previous = ErrorUtilsRef.getGlobalHandler?.();
       ErrorUtilsRef.setGlobalHandler((error: any, isFatal?: boolean) => {
         try {
-          const err = error instanceof Error ? error : new Error(String(error?.message || error));
+          const err =
+            error instanceof Error
+              ? error
+              : new Error(String(error?.message || error));
           this.captureException(err);
         } finally {
           if (typeof previous === 'function') {
-            try { previous(error, isFatal); } catch (_e) { /* ignore */ }
+            try {
+              previous(error, isFatal);
+            } catch (_e) {
+              /* ignore */
+            }
           }
         }
       });

package/src/patch/fetch.ts

@@ -35,28 +35,90 @@ function _tryReadFetchBody({
   return `[Fetch] Cannot read body of type ${Object.prototype.toString.call(body)}`
 }
 
+/**
+ * Detects if a response is a streaming response that should NOT have its body read.
+ * Reading the body of streaming responses (SSE, chunked streams, etc.) will either:
+ * - Block forever (SSE streams never end)
+ * - Corrupt the stream for the actual consumer
+ */
+function _isStreamingResponse(response: Response): boolean {
+  const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''
+
+  // SSE - Server-Sent Events (infinite stream)
+  if (contentType.includes('text/event-stream')) {
+    return true
+  }
+
+  // Binary streams that are typically long-running
+  if (contentType.includes('application/octet-stream')) {
+    return true
+  }
+
+  // NDJSON streaming (newline-delimited JSON, common in streaming APIs)
+  if (contentType.includes('application/x-ndjson') || contentType.includes('application/ndjson')) {
+    return true
+  }
+
+  // gRPC-web streaming
+  if (contentType.includes('application/grpc')) {
+    return true
+  }
+
+  // Check for chunked transfer encoding (often indicates streaming)
+  const transferEncoding = response.headers.get('transfer-encoding')?.toLowerCase()
+  if (transferEncoding?.includes('chunked')) {
+    // Chunked alone isn't definitive, but combined with no content-length = streaming
+    const contentLength = response.headers.get('content-length')
+    if (!contentLength) {
+      return true
+    }
+  }
+
+  return false
+}
+
+/**
+ * Safely reads response body for non-streaming responses.
+ * Returns null for streaming responses to avoid blocking/corruption.
+ */
 async function _tryReadResponseBody(response: Response): Promise<string | null> {
+  // CRITICAL: Never attempt to read streaming response bodies
+  if (_isStreamingResponse(response)) {
+    return null
+  }
+
   try {
     // Clone the response to avoid consuming the original stream.
     const clonedResponse = response.clone()
+    const contentType = response.headers.get('content-type')?.toLowerCase() ?? ''
+
+    // Check content-length to avoid reading massive responses
+    const contentLength = response.headers.get('content-length')
+    if (contentLength) {
+      const length = parseInt(contentLength, 10)
+      if (!isNaN(length) && length > configs.maxCapturingHttpPayloadSize) {
+        return `[Fetch] Response too large (${length} bytes)`
+      }
+    }
 
-    const contentType = response.headers.get('content-type') || ''
     if (contentType.includes('application/json')) {
       const json = await clonedResponse.json()
       return JSON.stringify(json)
-    } else if (contentType.includes('text/')) {
+    }
+
+    if (contentType.includes('text/')) {
       return await clonedResponse.text()
-    } else {
-      // For other content types, try text first, fallback to arrayBuffer
+    }
+
+    // For unknown types, attempt text read
+    try {
+      return await clonedResponse.text()
+    } catch {
       try {
-        return await clonedResponse.text()
+        const arrayBuffer = await clonedResponse.arrayBuffer()
+        return `[Fetch] Binary data (${arrayBuffer.byteLength} bytes)`
       } catch {
-        try {
-          const arrayBuffer = await clonedResponse.arrayBuffer()
-          return `[Fetch] Binary data (${arrayBuffer.byteLength} bytes)`
-        } catch {
-          return '[Fetch] Unable to read response body'
-        }
+        return '[Fetch] Unable to read response body'
       }
     }
   } catch (error) {

package/src/recorder/index.ts

@@ -1,6 +1,7 @@
 import { SessionType } from '@multiplayer-app/session-recorder-common';
 // import { pack } from '@rrweb/packer' // Removed to avoid blob creation issues in Hermes
 import { SocketService } from '../services/socket.service';
+import { CrashBufferService } from '../services/crashBuffer.service';
 import { logger } from '../utils';
 import { ScreenRecorder } from './screenRecorder';
 import { GestureRecorder } from './gestureRecorder';
@@ -15,6 +16,9 @@ export class RecorderReactNativeSDK implements EventRecorder {
   private navigationTracker: NavigationTracker;
   private recordedEvents: eventWithTime[] = [];
   private socketService!: SocketService;
+  private crashBuffer?: CrashBufferService;
+  private bufferingEnabled: boolean = false;
+  private bufferWindowMs: number = 2 * 60 * 1000;
   private sessionId: string | null = null;
   private sessionType: SessionType = SessionType.MANUAL;
 
@@ -24,15 +28,25 @@ export class RecorderReactNativeSDK implements EventRecorder {
     this.navigationTracker = new NavigationTracker();
   }
 
-  init(config: RecorderConfig, socketService: SocketService): void {
+  init(
+    config: RecorderConfig,
+    socketService: SocketService,
+    crashBuffer?: CrashBufferService,
+    buffering?: { enabled: boolean; windowMs: number }
+  ): void {
     this.config = config;
     this.socketService = socketService;
+    this.crashBuffer = crashBuffer;
+    this.bufferingEnabled = Boolean(buffering?.enabled);
+    this.bufferWindowMs = Math.max(
+      10_000,
+      buffering?.windowMs || 1 * 60 * 1000
+    );
     this.screenRecorder.init(config, this);
     this.navigationTracker.init(config, this.screenRecorder);
     this.gestureRecorder.init(config, this, this.screenRecorder);
   }
 
-
   start(sessionId: string | null, sessionType: SessionType): void {
     if (!this.config) {
       throw new Error(
@@ -88,8 +102,21 @@ export class RecorderReactNativeSDK implements EventRecorder {
       return;
     }
 
+    // Buffer-only mode (no active debug session): persist locally.
+    if (!this.sessionId && this.crashBuffer && this.bufferingEnabled) {
+      void this.crashBuffer.appendEvent(
+        { ts: event.timestamp, event },
+        this.bufferWindowMs
+      );
+      return;
+    }
+
     if (this.socketService) {
-      logger.debug('RecorderReactNativeSDK', 'Sending to socket service', event);
+      logger.debug(
+        'RecorderReactNativeSDK',
+        'Sending to socket service',
+        event
+      );
       // Skip packing to avoid blob creation issues in Hermes
       // const packedEvent = pack(event)
       this.socketService.send({

package/src/services/api.service.ts

@@ -3,10 +3,8 @@ import type {
   ISessionAttributes,
   IResourceAttributes,
 } from '@multiplayer-app/session-recorder-common';
-import {
-  type ApiServiceConfig,
-
-} from '../types';
+import { type ApiServiceConfig } from '../types';
+import type { eventWithTime } from '@rrweb/types';
 
 export interface StartSessionRequest {
   name?: string;
@@ -23,11 +21,14 @@ export interface StopSessionRequest {
   stoppedAt: string | number;
 }
 
-
 export interface CheckRemoteSessionRequest {
-  sessionAttributes?: ISessionAttributes
-  resourceAttributes?: IResourceAttributes
-  userAttributes?: IUserAttributes
+  sessionAttributes?: ISessionAttributes;
+  resourceAttributes?: IResourceAttributes;
+  userAttributes?: IUserAttributes;
+}
+
+export interface CreateErrorSpanSessionRequest {
+  span: any;
 }
 
 export class ApiService {
@@ -72,6 +73,60 @@ export class ApiService {
     }
   }
 
+  /**
+   * Create a new error span session
+   * @param request - Session create error span request data
+   * @param signal - Optional AbortSignal for request cancellation
+   */
+  async createErrorSession(
+    request: CreateErrorSpanSessionRequest,
+    signal?: AbortSignal
+  ): Promise<any> {
+    return this.makeRequest(
+      '/debug-sessions/error-span/start',
+      'POST',
+      request,
+      signal
+    );
+  }
+
+  async updateSessionAttributes(
+    sessionId: string,
+    requestBody: {
+      name?: string;
+      userAttributes?: IUserAttributes;
+      sessionAttributes?: ISessionAttributes;
+      resourceAttributes?: IResourceAttributes;
+    },
+    signal?: AbortSignal
+  ): Promise<any> {
+    return this.makeRequest(
+      `/debug-sessions/${sessionId}`,
+      'PATCH',
+      requestBody,
+      signal
+    );
+  }
+
+  /**
+   * Export events to the session debugger API
+   * @param sessionId - ID of the session to export events
+   * @param requestBody - Request body containing events
+   * @param signal - Optional AbortSignal for request cancellation
+   */
+  async exportEvents(
+    sessionId: string,
+    requestBody: { events: eventWithTime[] },
+    signal?: AbortSignal
+  ): Promise<any> {
+    return this.makeRequest(
+      `/debug-sessions/${sessionId}/rrweb-events`,
+      'POST',
+      requestBody,
+      signal
+    );
+  }
+
   /**
    * Make a request to the session debugger API
    * @param path - API endpoint path (relative to the base URL)
@@ -212,17 +267,17 @@ export class ApiService {
   }
 
   /**
-  * Check debug session should be started remotely
-  */
+   * Check debug session should be started remotely
+   */
   async checkRemoteSession(
     requestBody: CheckRemoteSessionRequest,
-    signal?: AbortSignal,
+    signal?: AbortSignal
   ): Promise<{ state: 'START' | 'STOP' }> {
     return this.makeRequest(
       '/remote-debug-session/check',
       'POST',
       requestBody,
-      signal,
-    )
+      signal
+    );
   }
 }