@multiplayer-app/session-recorder-react-native 0.0.1-alpha.7 → 0.0.1-alpha.9

package/src/otel/instrumentations/reactNativeInstrumentation.ts

@@ -1,4 +1,5 @@
 import { InstrumentationBase } from '@opentelemetry/instrumentation'
+import { logger } from '../../utils'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
@@ -18,7 +19,7 @@ export class ReactNativeInstrumentation extends InstrumentationBase {
         this._wrap(AsyncStorage, 'setItem', this._wrapAsyncStorage)
       }
     } catch (error) {
-      console.warn('@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
+      logger.warn('DEBUGGER_LIB', '@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
     }
   }
 

package/src/patch/xhr.ts

@@ -92,7 +92,7 @@ function _tryReadXHRBody({
 
         if (
           requestBody?.length
-          && new Blob([requestBody]).size <= maxCapturingHttpPayloadSize
+          && requestBody.length <= maxCapturingHttpPayloadSize
         ) {
           networkRequest.requestBody = requestBody
         }
@@ -126,7 +126,7 @@ function _tryReadXHRBody({
 
         if (
           responseBody?.length
-          && new Blob([responseBody]).size <= maxCapturingHttpPayloadSize
+          && responseBody.length <= maxCapturingHttpPayloadSize
         ) {
           networkRequest.responseBody = responseBody
         }

package/src/recorder/eventExporter.ts

@@ -1,6 +1,7 @@
 import io, { Socket } from 'socket.io-client'
 
 import { ISession } from '../types'
+import { logger } from '../utils'
 
 import {
   SESSION_ADD_EVENT,
@@ -45,19 +46,21 @@ export class EventExporter {
     this.socket.on('ready', () => {
       this.isConnecting = false
       this.isConnected = true
-
+      logger.info('EventExporter', 'Connected to server')
       this.flushQueue()
     })
 
     this.socket.on('disconnect', (err: any) => {
       this.isConnecting = false
       this.isConnected = false
+      logger.info('EventExporter', 'Disconnected from server')
     })
 
     this.socket.on('connect_error', (err: any) => {
       this.isConnecting = false
       this.isConnected = false
       this.checkReconnectionAttempts()
+      logger.error('EventExporter', 'Error connecting to server', err)
     })
 
     this.socket.on(SESSION_STOPPED_EVENT, (data: any) => {

package/src/recorder/gestureHandlerRecorder.ts

@@ -0,0 +1,157 @@
+import { Gesture } from 'react-native-gesture-handler'
+import { ReactNode } from 'react'
+import { SessionState } from '../types'
+import { GestureInstrumentation } from '../otel/instrumentations/gestureInstrumentation'
+
+export interface GestureHandlerRecorderProps {
+  children: ReactNode
+  sessionState: SessionState | null
+  onGestureRecord: (gestureType: string, data: any) => void
+}
+
+export class GestureHandlerRecorder {
+  private gestureInstrumentation: GestureInstrumentation
+  private onGestureRecord?: (gestureType: string, data: any) => void
+
+  constructor() {
+    this.gestureInstrumentation = new GestureInstrumentation()
+    this.gestureInstrumentation.enable()
+  }
+
+  setGestureCallback(callback: (gestureType: string, data: any) => void) {
+    this.onGestureRecord = callback
+  }
+
+  // Create tap gesture
+  createTapGesture() {
+    return Gesture.Tap()
+      .onStart((event) => {
+        this.recordGesture('tap', {
+          x: event.x,
+          y: event.y,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  // Create pan gesture (for swipes and drags)
+  createPanGesture() {
+    return Gesture.Pan()
+      .onStart((event) => {
+        this.recordGesture('pan_start', {
+          x: event.x,
+          y: event.y,
+          timestamp: Date.now(),
+        })
+      })
+      .onUpdate((event) => {
+        this.recordGesture('pan_update', {
+          x: event.x,
+          y: event.y,
+          translationX: event.translationX,
+          translationY: event.translationY,
+          velocityX: event.velocityX,
+          velocityY: event.velocityY,
+          timestamp: Date.now(),
+        })
+      })
+      .onEnd((event) => {
+        this.recordGesture('pan_end', {
+          x: event.x,
+          y: event.y,
+          translationX: event.translationX,
+          translationY: event.translationY,
+          velocityX: event.velocityX,
+          velocityY: event.velocityY,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  // Create pinch gesture
+  createPinchGesture() {
+    return Gesture.Pinch()
+      .onStart((event) => {
+        this.recordGesture('pinch_start', {
+          scale: event.scale,
+          focalX: event.focalX,
+          focalY: event.focalY,
+          timestamp: Date.now(),
+        })
+      })
+      .onUpdate((event) => {
+        this.recordGesture('pinch_update', {
+          scale: event.scale,
+          focalX: event.focalX,
+          focalY: event.focalY,
+          timestamp: Date.now(),
+        })
+      })
+      .onEnd((event) => {
+        this.recordGesture('pinch_end', {
+          scale: event.scale,
+          focalX: event.focalX,
+          focalY: event.focalY,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  // Create long press gesture
+  createLongPressGesture() {
+    return Gesture.LongPress()
+      .minDuration(500)
+      .onStart((event) => {
+        this.recordGesture('long_press', {
+          x: event.x,
+          y: event.y,
+          duration: 500,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  private recordGesture(gestureType: string, data: any) {
+    // Record with OpenTelemetry
+    switch (gestureType) {
+      case 'tap':
+        this.gestureInstrumentation.recordTap(data.x, data.y)
+        break
+      case 'pan_start':
+      case 'pan_update':
+      case 'pan_end':
+        this.gestureInstrumentation.recordPan(data.translationX || 0, data.translationY || 0)
+        break
+      case 'pinch_start':
+      case 'pinch_update':
+      case 'pinch_end':
+        this.gestureInstrumentation.recordPinch(data.scale, undefined)
+        break
+      case 'long_press':
+        this.gestureInstrumentation.recordLongPress(data.duration, undefined)
+        break
+    }
+
+    // Record with session recorder
+    if (this.onGestureRecord) {
+      this.onGestureRecord(gestureType, data)
+    }
+  }
+
+  // Create a gesture detector component
+  createGestureDetector(children: ReactNode, sessionState: SessionState | null): ReactNode {
+    if (sessionState !== SessionState.started) {
+      return children
+    }
+
+    const tapGesture = this.createTapGesture()
+    const panGesture = this.createPanGesture()
+    const pinchGesture = this.createPinchGesture()
+    const longPressGesture = this.createLongPressGesture()
+
+    // Note: This would need to be implemented as a proper React component
+    // For now, return children directly - the gesture detection would be handled
+    // at the app level by wrapping the entire app with GestureHandlerRootView
+    return children
+  }
+}

package/src/recorder/gestureRecorder.ts

@@ -1,6 +1,7 @@
-import { GestureEvent, RecorderConfig, EventType, IncrementalSource, IncrementalSnapshotEvent, MouseInteractionType, EventRecorder } from '../types'
+import { GestureEvent, RecorderConfig, EventType, IncrementalSource, MouseInteractionType, EventRecorder, eventWithTime } from '../types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import { Dimensions } from 'react-native'
+import { logger } from '../utils'
 
 export class GestureRecorder implements EventRecorder {
   private config?: RecorderConfig
@@ -10,6 +11,13 @@ export class GestureRecorder implements EventRecorder {
   private screenDimensions: { width: number; height: number } | null = null
   private lastGestureTime: number = 0
   private gestureThrottleMs: number = 50 // Throttle gestures to avoid spam
+  private lastTouchTime: number = 0
+  private touchThrottleMs: number = 100 // Throttle touch events to max 10 per second
+
+  // Cyclic call detection
+  private isRecordingGesture = false
+  private gestureCallStack: string[] = []
+  private maxGestureCallDepth = 5
   private eventRecorder?: EventRecorder
   private imageNodeId: number = 1 // ID of the image node for touch interactions
   private screenRecorder?: any // Reference to screen recorder for force capture
@@ -21,6 +29,7 @@ export class GestureRecorder implements EventRecorder {
   }
 
   start(): void {
+    logger.info('GestureRecorder', 'Gesture recording started')
     this.isRecording = true
     this.events = []
     this._setupGestureHandlers()
@@ -467,14 +476,41 @@ export class GestureRecorder implements EventRecorder {
     interactionType: MouseInteractionType,
     target?: string,
   ): void {
-    const incrementalSnapshotEvent: IncrementalSnapshotEvent = {
+    const incrementalSnapshotEvent: eventWithTime = {
       type: EventType.IncrementalSnapshot,
       data: {
         source: IncrementalSource.MouseInteraction,
         type: interactionType,
         id: this.imageNodeId, // Reference to the image node
-        x: Math.round(x),
-        y: Math.round(y),
+        x: x, // Preserve decimal precision like web rrweb
+        y: y, // Preserve decimal precision like web rrweb
+        pointerType: 2, // 2 = Touch for React Native (0=Mouse, 1=Pen, 2=Touch)
+      },
+      timestamp: Date.now(),
+    }
+
+    this.recordEvent(incrementalSnapshotEvent)
+  }
+
+  /**
+   * Create mouse move event with positions array (like web rrweb)
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   */
+  private _createMouseMoveEvent(x: number, y: number, target?: string): void {
+    const incrementalSnapshotEvent: eventWithTime = {
+      type: EventType.IncrementalSnapshot,
+      data: {
+        source: IncrementalSource.MouseMove, // Use MouseMove instead of MouseInteraction
+        positions: [
+          {
+            x: x, // Preserve decimal precision like web rrweb
+            y: y, // Preserve decimal precision like web rrweb
+            id: this.imageNodeId, // Reference to the image node
+            timeOffset: 0, // No time offset for single position
+          },
+        ],
       },
       timestamp: Date.now(),
     }
@@ -490,25 +526,38 @@ export class GestureRecorder implements EventRecorder {
    * @param pressure - Touch pressure (optional)
    */
   recordTouchStart(x: number, y: number, target?: string, pressure?: number): void {
-    // Record as both gesture event and rrweb event
-    this.recordTap(x, y, target, pressure)
-    this._createMouseInteractionEvent(x, y, MouseInteractionType.TouchStart, target)
+    // Throttle touch events to prevent spam
+    const now = Date.now()
+    if (now - this.lastTouchTime < this.touchThrottleMs) {
+      logger.debug('GestureRecorder', `Touch start throttled (${now - this.lastTouchTime}ms < ${this.touchThrottleMs}ms)`)
+      return
+    }
+    this.lastTouchTime = now
 
-    // Force screen capture after touch interaction
-    this.screenRecorder?.forceCapture()
+    logger.debug('GestureRecorder', 'Touch start recorded', { x, y, target, pressure })
+    // Record as MouseDown (type: 1) like web rrweb
+    this._createMouseInteractionEvent(x, y, MouseInteractionType.MouseDown, target)
   }
 
   /**
-   * Record touch move event as rrweb MouseInteraction
+   * Record touch move event as rrweb MouseMove with positions array
    * @param x - X coordinate
    * @param y - Y coordinate
    * @param target - Target element identifier
    * @param pressure - Touch pressure (optional)
    */
   recordTouchMove(x: number, y: number, target?: string, pressure?: number): void {
-    // Record as both gesture event and rrweb event
-    this.recordPan(x - (this.lastGestureTime || 0), y - (this.lastGestureTime || 0), target)
-    this._createMouseInteractionEvent(x, y, MouseInteractionType.TouchMove, target)
+    // Throttle touch move events more aggressively
+    const now = Date.now()
+    if (now - this.lastTouchTime < this.touchThrottleMs * 2) { // 200ms throttle for move events
+      logger.debug('GestureRecorder', `Touch move throttled (${now - this.lastTouchTime}ms < ${this.touchThrottleMs * 2}ms)`)
+      return
+    }
+    this.lastTouchTime = now
+
+    logger.debug('GestureRecorder', 'Touch move recorded', { x, y, target, pressure })
+    // Record as MouseMove with positions array (like web rrweb)
+    this._createMouseMoveEvent(x, y, target)
   }
 
   /**
@@ -519,12 +568,36 @@ export class GestureRecorder implements EventRecorder {
    * @param pressure - Touch pressure (optional)
    */
   recordTouchEnd(x: number, y: number, target?: string, pressure?: number): void {
-    // Record as both gesture event and rrweb event
-    this.recordTap(x, y, target, pressure)
-    this._createMouseInteractionEvent(x, y, MouseInteractionType.TouchEnd, target)
+    // Cyclic call detection
+    if (this.isRecordingGesture) {
+      logger.error('GestureRecorder', 'CYCLIC CALL DETECTED! Already recording gesture', this.gestureCallStack)
+      return
+    }
+
+    if (this.gestureCallStack.length >= this.maxGestureCallDepth) {
+      logger.error('GestureRecorder', 'MAX GESTURE CALL DEPTH REACHED!', this.gestureCallStack)
+      return
+    }
 
-    // Force screen capture after touch interaction
-    this.screenRecorder?.forceCapture()
+    this.isRecordingGesture = true
+    this.gestureCallStack.push('recordTouchEnd')
+
+    try {
+      logger.debug('GestureRecorder', 'Touch end recorded', { x, y, target, pressure })
+      // Always record touch end (no throttling for completion)
+      this.recordTap(x, y, target, pressure)
+      // Record as MouseUp (type: 0) like web rrweb
+      this._createMouseInteractionEvent(x, y, MouseInteractionType.MouseUp, target)
+      // Also record Click (type: 2) like web rrweb
+      this._createMouseInteractionEvent(x, y, MouseInteractionType.Click, target)
+
+      // Only force screen capture on touch end (not on every touch event)
+      logger.debug('GestureRecorder', 'Forcing screen capture after touch end')
+      this.screenRecorder?.forceCapture()
+    } finally {
+      this.isRecordingGesture = false
+      this.gestureCallStack.pop()
+    }
   }
 
   /**
@@ -534,7 +607,8 @@ export class GestureRecorder implements EventRecorder {
    * @param target - Target element identifier
    */
   recordTouchCancel(x: number, y: number, target?: string): void {
-    this._createMouseInteractionEvent(x, y, MouseInteractionType.TouchCancel, target)
+    // Record as MouseUp (type: 0) like web rrweb for touch cancel
+    this._createMouseInteractionEvent(x, y, MouseInteractionType.MouseUp, target)
   }
 
   /**

package/src/recorder/index.ts

@@ -1,7 +1,7 @@
-import { pack } from '@rrweb/packer'
 import { SessionType } from '@multiplayer-app/session-recorder-common'
-
+// import { pack } from '@rrweb/packer' // Removed to avoid blob creation issues in Hermes
 import { EventExporter } from './eventExporter'
+import { logger } from '../utils'
 import { ScreenRecorder } from './screenRecorder'
 import { GestureRecorder } from './gestureRecorder'
 import { NavigationTracker } from './navigationTracker'
@@ -9,7 +9,6 @@ import { RecorderConfig, EventRecorder, RRWebEvent } from '../types'
 export class RecorderReactNativeSDK implements EventRecorder {
   private isRecording = false
   private config?: RecorderConfig
-  private eventRecorder?: EventRecorder
   private screenRecorder: ScreenRecorder
   private gestureRecorder: GestureRecorder
   private navigationTracker: NavigationTracker
@@ -18,15 +17,15 @@ export class RecorderReactNativeSDK implements EventRecorder {
   private sessionId: string | null = null
   private sessionType: SessionType = SessionType.PLAIN
 
+
   constructor() {
+    this.screenRecorder = new ScreenRecorder()
     this.gestureRecorder = new GestureRecorder()
     this.navigationTracker = new NavigationTracker()
-    this.screenRecorder = new ScreenRecorder()
   }
 
-  init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
+  init(config: RecorderConfig): void {
     this.config = config
-    this.eventRecorder = eventRecorder
     this.gestureRecorder.init(config, this, this.screenRecorder)
     this.navigationTracker.init(config)
     this.screenRecorder.init(config, this)
@@ -45,6 +44,12 @@ export class RecorderReactNativeSDK implements EventRecorder {
     this.sessionType = sessionType
     this.isRecording = true
 
+    // Emit recording started meta event
+
+    if (this.config.recordScreen) {
+      this.screenRecorder.start()
+    }
+
     if (this.config.recordGestures) {
       this.gestureRecorder.start()
     }
@@ -53,9 +58,7 @@ export class RecorderReactNativeSDK implements EventRecorder {
       this.navigationTracker.start()
     }
 
-    if (this.config.recordScreen) {
-      this.screenRecorder.start()
-    }
+
   }
 
   stop(): void {
@@ -88,23 +91,18 @@ export class RecorderReactNativeSDK implements EventRecorder {
       return
     }
 
-    // Store the event locally
-    this.recordedEvents.push(event)
     if (this.exporter) {
-      const packedEvent = pack(event)
+      logger.debug('RecorderReactNativeSDK', 'Sending to exporter', event)
+      // Skip packing to avoid blob creation issues in Hermes
+      // const packedEvent = pack(event)
       this.exporter.send({
-        event: packedEvent,
+        event: event, // Send raw event instead of packed
         eventType: event.type,
         timestamp: event.timestamp,
         debugSessionId: this.sessionId,
         debugSessionType: this.sessionType,
       })
     }
-
-    // Forward to parent event recorder if available
-    if (this.eventRecorder) {
-      this.eventRecorder.recordEvent(event)
-    }
   }
 
   /**

package/src/recorder/navigationTracker.ts

@@ -1,5 +1,6 @@
 import { NavigationEvent, RecorderConfig } from '../types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
+import { logger } from '../utils'
 
 export class NavigationTracker {
   private config?: RecorderConfig
@@ -23,6 +24,7 @@ export class NavigationTracker {
   }
 
   start(): void {
+    logger.info('NavigationTracker', 'Navigation tracking started')
     this.isRecording = true
     this.events = []
     this.navigationStack = []