@multiplayer-app/session-recorder-react-native 0.0.1-alpha.1 → 0.0.1-alpha.10

package/src/recorder/gestureRecorder.ts

@@ -1,7 +1,10 @@
-import { GestureEvent, RecorderConfig } from '../types'
+import { GestureEvent, RecorderConfig, EventRecorder } from '../types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
+import { Dimensions } from 'react-native'
+import { logger } from '../utils'
+import { MouseInteractions, eventWithTime, EventType, IncrementalSource } from '@rrweb/types'
 
-export class GestureRecorder {
+export class GestureRecorder implements EventRecorder {
   private config?: RecorderConfig
   private isRecording = false
   private events: GestureEvent[] = []
@@ -9,79 +12,51 @@ export class GestureRecorder {
   private screenDimensions: { width: number; height: number } | null = null
   private lastGestureTime: number = 0
   private gestureThrottleMs: number = 50 // Throttle gestures to avoid spam
-  init(config: RecorderConfig): void {
+  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
+
+  init(config: RecorderConfig, eventRecorder?: EventRecorder, screenRecorder?: any): void {
     this.config = config
+    this.eventRecorder = eventRecorder
+    this.screenRecorder = screenRecorder
     this._getScreenDimensions()
   }
 
   start(): void {
+    logger.info('GestureRecorder', 'Gesture recording started')
     this.isRecording = true
     this.events = []
-    this._setupGestureHandlers()
-    console.log('Gesture recording started')
+    // Gesture recording started
   }
 
   stop(): void {
     this.isRecording = false
     this._removeGestureHandlers()
-    console.log('Gesture recording stopped')
+    // Gesture recording stopped
   }
 
-  pause(): void {
-    this.isRecording = false
-  }
-
-  resume(): void {
-    this.isRecording = true
-  }
-
-  // Input component registration temporarily disabled
 
   private _getScreenDimensions(): void {
     try {
-      const { Dimensions } = require('react-native')
       this.screenDimensions = Dimensions.get('window')
     } catch (error) {
-      console.warn('Failed to get screen dimensions:', error)
+      // Failed to get screen dimensions - silently continue
       this.screenDimensions = { width: 375, height: 667 } // Default fallback
     }
   }
 
-  private _setupInputTracking(): void {
-    // Set up React Native input component tracking
-    try {
-      // This would integrate with React Native's component tracking
-      // For now, we'll provide methods for manual registration
-      console.log('Input tracking setup complete')
-    } catch (error) {
-      console.warn('Failed to setup input tracking:', error)
-    }
-  }
-
-  private _setupGestureHandlers(): void {
-    // This would integrate with react-native-gesture-handler
-    // For now, we'll create a comprehensive implementation that can be easily integrated
-    console.log('Setting up gesture handlers')
-
-    // Set up global gesture listener
-    this._setupGlobalGestureListener()
-  }
-
-  private _setupGlobalGestureListener(): void {
-    try {
-      // Listen for touch events at the app level
-      const { TouchableWithoutFeedback } = require('react-native')
-
-      // This is a simplified implementation - in production you'd use react-native-gesture-handler
-      console.log('Global gesture listener setup complete')
-    } catch (error) {
-      console.warn('Failed to setup global gesture listener:', error)
-    }
-  }
 
   private _removeGestureHandlers(): void {
     this.gestureHandlers.clear()
-    console.log('Gesture handlers removed')
+    // Gesture handlers removed
   }
 
   private _recordEvent(event: GestureEvent): void {
@@ -103,12 +78,12 @@ export class GestureRecorder {
 
   private _sendEvent(event: GestureEvent): void {
     // Send event to backend or store locally
-    console.log('Gesture event recorded:', event)
+    // Gesture event recorded
   }
 
   private _recordOpenTelemetrySpan(event: GestureEvent): void {
     try {
-      const span = trace.getTracer('gesture').startSpan(`Gesture.${event.type}`, {
+      const span = trace.getTracer('@opentelemetry/instrumentation-user-interaction').startSpan(`Gesture.${event.type}`, {
         attributes: {
           'gesture.type': event.type,
           'gesture.timestamp': event.timestamp,
@@ -142,7 +117,7 @@ export class GestureRecorder {
       span.setStatus({ code: SpanStatusCode.OK })
       span.end()
     } catch (error) {
-      console.warn('Failed to record OpenTelemetry span for gesture:', error)
+      // Failed to record OpenTelemetry span for gesture - silently continue
     }
   }
 
@@ -325,79 +300,6 @@ export class GestureRecorder {
     this._recordEvent(event)
   }
 
-  // Gesture sequence tracking
-  recordGestureSequence(gestures: string[], duration: number, target?: string): void {
-    const event: GestureEvent = {
-      type: 'gestureSequence',
-      timestamp: Date.now(),
-      target,
-      metadata: {
-        gestures: gestures.join(','),
-        duration,
-        gestureCount: gestures.length,
-        screenWidth: this.screenDimensions?.width,
-        screenHeight: this.screenDimensions?.height,
-      },
-    }
-
-    this._recordEvent(event)
-  }
-
-  // Error tracking for gesture failures
-  recordGestureError(error: Error, gestureType: string, target?: string): void {
-    const event: GestureEvent = {
-      type: 'gestureError',
-      timestamp: Date.now(),
-      target,
-      metadata: {
-        errorType: error.name,
-        errorMessage: error.message,
-        gestureType,
-        screenWidth: this.screenDimensions?.width,
-        screenHeight: this.screenDimensions?.height,
-      },
-    }
-
-    this._recordEvent(event)
-
-    // Also record as OpenTelemetry error span
-    try {
-      const span = trace.getTracer('gesture').startSpan(`Gesture.${gestureType}.error`, {
-        attributes: {
-          'gesture.type': gestureType,
-          'gesture.error': true,
-          'gesture.error.type': error.name,
-          'gesture.error.message': error.message,
-          'gesture.timestamp': Date.now(),
-        },
-      })
-
-      span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
-      span.recordException(error)
-      span.end()
-    } catch (spanError) {
-      console.warn('Failed to record error span:', spanError)
-    }
-  }
-
-  // Performance monitoring
-  recordGesturePerformance(gestureType: string, duration: number, target?: string): void {
-    const event: GestureEvent = {
-      type: 'gesturePerformance',
-      timestamp: Date.now(),
-      target,
-      metadata: {
-        gestureType,
-        duration,
-        performance: 'monitoring',
-        screenWidth: this.screenDimensions?.width,
-        screenHeight: this.screenDimensions?.height,
-      },
-    }
-
-    this._recordEvent(event)
-  }
-
   // Get recorded events
   getEvents(): GestureEvent[] {
     return [...this.events]
@@ -426,4 +328,171 @@ export class GestureRecorder {
   isRecordingEnabled(): boolean {
     return this.isRecording
   }
+
+  /**
+   * Record an rrweb event
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: any): void {
+    if (this.eventRecorder) {
+      this.eventRecorder.recordEvent(event)
+    }
+  }
+
+  /**
+   * Create and emit a rrweb MouseInteraction event for touch interactions
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param interactionType - Type of interaction (TouchStart, TouchMove, TouchEnd, etc.)
+   * @param target - Target element identifier
+   */
+  private _createMouseInteractionEvent(
+    x: number,
+    y: number,
+    interactionType: MouseInteractions,
+    target?: string,
+  ): void {
+    const incrementalSnapshotEvent: eventWithTime = {
+      type: EventType.IncrementalSnapshot,
+      data: {
+        source: IncrementalSource.MouseInteraction,
+        type: interactionType,
+        id: this.imageNodeId, // Reference to the image node
+        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.TouchMove, // 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(),
+    }
+
+    this.recordEvent(incrementalSnapshotEvent)
+  }
+
+  /**
+   * Record touch start event as rrweb MouseInteraction
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure (optional)
+   */
+  recordTouchStart(x: number, y: number, target?: string, pressure?: number): void {
+    // 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
+
+    logger.debug('GestureRecorder', 'Touch start recorded', { x, y, target, pressure })
+    // Record as MouseDown (type: 1) like web rrweb
+    this._createMouseInteractionEvent(x, y, MouseInteractions.TouchStart, target)
+  }
+
+  /**
+   * 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 {
+    // 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)
+  }
+
+  /**
+   * Record touch end event as rrweb MouseInteraction
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure (optional)
+   */
+  recordTouchEnd(x: number, y: number, target?: string, pressure?: number): void {
+    // 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
+    }
+
+    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, MouseInteractions.TouchEnd, target)
+      // Also record Click (type: 2) like web rrweb
+      // this._createMouseInteractionEvent(x, y, MouseInteractions.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()
+    }
+  }
+
+  /**
+   * Record touch cancel event as rrweb MouseInteraction
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   */
+  recordTouchCancel(x: number, y: number, target?: string): void {
+    // Record as MouseUp (type: 0) like web rrweb for touch cancel
+    this._createMouseInteractionEvent(x, y, MouseInteractions.TouchCancel, target)
+  }
+
+  /**
+   * Set the image node ID for touch interactions
+   * This should be called when a new screen snapshot is created
+   * @param nodeId - The ID of the image node in the current snapshot
+   */
+  setImageNodeId(nodeId: number): void {
+    this.imageNodeId = nodeId
+  }
 }

package/src/recorder/index.ts

@@ -1,27 +1,39 @@
+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'
-import { ScreenRecorder } from './screenRecorder'
-import { SessionType } from '@multiplayer-app/session-recorder-common'
-import { RecorderConfig } from '../types'
-
-export class RecorderReactNativeSDK {
+import { RecorderConfig, EventRecorder } from '../types'
+import { eventWithTime } from '@rrweb/types'
+export class RecorderReactNativeSDK implements EventRecorder {
+  private isRecording = false
   private config?: RecorderConfig
+  private screenRecorder: ScreenRecorder
   private gestureRecorder: GestureRecorder
   private navigationTracker: NavigationTracker
-  private screenRecorder: ScreenRecorder
-  private isRecording = false
+  private recordedEvents: eventWithTime[] = []
+  private exporter: EventExporter | undefined
+  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): void {
     this.config = config
-    this.gestureRecorder.init(config)
+    this.gestureRecorder.init(config, this, this.screenRecorder)
     this.navigationTracker.init(config)
-    this.screenRecorder.init(config)
+    this.screenRecorder.init(config, this)
+    this.exporter = new EventExporter({
+      socketUrl: config.apiBaseUrl || '',
+      apiKey: config.apiKey,
+    })
   }
 
   start(sessionId: string | null, sessionType: SessionType): void {
@@ -29,8 +41,16 @@ export class RecorderReactNativeSDK {
       throw new Error('Configuration not initialized. Call init() before start().')
     }
 
+    this.sessionId = sessionId
+    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()
     }
@@ -39,9 +59,7 @@ export class RecorderReactNativeSDK {
       this.navigationTracker.start()
     }
 
-    if (this.config.recordScreen) {
-      this.screenRecorder.start()
-    }
+
   }
 
   stop(): void {
@@ -49,23 +67,113 @@ export class RecorderReactNativeSDK {
     this.gestureRecorder.stop()
     this.navigationTracker.stop()
     this.screenRecorder.stop()
+    this.exporter?.close()
   }
 
-  pause(): void {
-    this.gestureRecorder.pause()
-    this.navigationTracker.pause()
-    this.screenRecorder.pause()
+
+  setNavigationRef(ref: any): void {
+    this.navigationTracker.setNavigationRef(ref)
   }
 
-  resume(): void {
-    if (this.isRecording) {
-      this.gestureRecorder.resume()
-      this.navigationTracker.resume()
-      this.screenRecorder.resume()
+  /**
+   * Set the viewshot ref for screen capture
+   * @param ref - React Native View ref for screen capture
+   */
+  setViewShotRef(ref: any): void {
+    this.screenRecorder.setViewShotRef(ref)
+  }
+
+  /**
+   * Record an rrweb event
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: eventWithTime): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    if (this.exporter) {
+      logger.debug('RecorderReactNativeSDK', 'Sending to exporter', event)
+      // Skip packing to avoid blob creation issues in Hermes
+      // const packedEvent = pack(event)
+      this.exporter.send({
+        event: event, // Send raw event instead of packed
+        eventType: event.type,
+        timestamp: event.timestamp,
+        debugSessionId: this.sessionId,
+        debugSessionType: this.sessionType,
+      })
     }
   }
 
-  setNavigationRef(ref: any): void {
-    this.navigationTracker.setNavigationRef(ref)
+  /**
+   * Record touch start event
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   */
+  recordTouchStart(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    this.gestureRecorder.recordTouchStart(x, y, target, pressure)
+  }
+
+  /**
+   * Record touch move event
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   */
+  recordTouchMove(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    this.gestureRecorder.recordTouchMove(x, y, target, pressure)
+  }
+
+  /**
+   * Record touch end event
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   */
+  recordTouchEnd(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    this.gestureRecorder.recordTouchEnd(x, y, target, pressure)
+  }
+
+  /**
+   * Get all recorded events
+   * @returns Array of recorded rrweb events
+   */
+  getRecordedEvents(): eventWithTime[] {
+    return [...this.recordedEvents]
+  }
+
+  /**
+   * Clear all recorded events
+   */
+  clearRecordedEvents(): void {
+    this.recordedEvents = []
+  }
+
+  /**
+   * Get recording statistics
+   * @returns Recording statistics
+   */
+  getRecordingStats(): { totalEvents: number; isRecording: boolean } {
+    return {
+      totalEvents: this.recordedEvents.length,
+      isRecording: this.isRecording,
+    }
   }
 }

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,18 +24,19 @@ export class NavigationTracker {
   }
 
   start(): void {
+    logger.info('NavigationTracker', 'Navigation tracking started')
     this.isRecording = true
     this.events = []
     this.navigationStack = []
     this.navigationStartTime = Date.now()
     this._setupNavigationListener()
-    console.log('Navigation tracking started')
+    // Navigation tracking started
   }
 
   stop(): void {
     this.isRecording = false
     this._removeNavigationListener()
-    console.log('Navigation tracking stopped')
+    // Navigation tracking stopped
   }
 
   pause(): void {
@@ -48,7 +50,7 @@ export class NavigationTracker {
 
   private _setupNavigationListener(): void {
     if (!this.navigationRef) {
-      console.warn('Navigation ref not set')
+      // Navigation ref not set - silently continue
       return
     }
 
@@ -79,9 +81,9 @@ export class NavigationTracker {
       this.navigationListeners.set('blur', blurListener)
       this.navigationListeners.set('beforeRemove', beforeRemoveListener)
 
-      console.log('Navigation listeners setup complete')
+      // Navigation listeners setup complete
     } catch (error) {
-      console.warn('Failed to setup navigation listeners:', error)
+      // Failed to setup navigation listeners - silently continue
     }
   }
 
@@ -94,9 +96,9 @@ export class NavigationTracker {
         }
       })
       this.navigationListeners.clear()
-      console.log('Navigation listeners removed')
+      // Navigation listeners removed
     } catch (error) {
-      console.warn('Failed to remove navigation listeners:', error)
+      // Failed to remove navigation listeners - silently continue
     }
   }
 
@@ -148,7 +150,7 @@ export class NavigationTracker {
   }
 
   private _sendEvent(event: NavigationEvent): void {
-    console.log('Navigation event recorded:', event)
+    // Navigation event recorded
   }
 
   private _recordOpenTelemetrySpan(event: NavigationEvent): void {
@@ -178,7 +180,7 @@ export class NavigationTracker {
       span.setStatus({ code: SpanStatusCode.OK })
       span.end()
     } catch (error) {
-      console.warn('Failed to record OpenTelemetry span for navigation:', error)
+      // Failed to record OpenTelemetry span for navigation - silently continue
     }
   }
 
@@ -399,7 +401,7 @@ export class NavigationTracker {
       span.recordException(error)
       span.end()
     } catch (spanError) {
-      console.warn('Failed to record error span:', spanError)
+      // Failed to record error span - silently continue
     }
   }