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

package/src/recorder/eventExporter.ts

@@ -0,0 +1,138 @@
+import io, { Socket } from 'socket.io-client'
+
+import { ISession } from '../types'
+
+import {
+  SESSION_ADD_EVENT,
+  SESSION_AUTO_CREATED,
+  SESSION_STOPPED_EVENT,
+  SESSION_SUBSCRIBE_EVENT,
+  SESSION_UNSUBSCRIBE_EVENT,
+} from '../config'
+
+const MAX_RECONNECTION_ATTEMPTS = 2
+
+export class EventExporter {
+  private socket: Socket | null = null
+  private queue: any[] = []
+  private isConnecting: boolean = false
+  private isConnected: boolean = false
+  private attempts: number = 0
+  private sessionId: string | null = null
+
+  constructor(private options: { socketUrl: string, apiKey: string }) { }
+
+  private init(): void {
+    if (this.isConnecting || this.isConnected) return
+    this.attempts++
+    this.isConnecting = true
+    this.socket = io(this.options.socketUrl, {
+      path: '/v0/radar/ws',
+      auth: {
+        'x-api-key': this.options.apiKey,
+      },
+      reconnectionAttempts: 2,
+      transports: ['websocket'],
+    })
+
+    // this.socket.on('connect', () => {
+    //   this.isConnecting = false
+    //   this.isConnected = true
+    //   this.usePostMessage = false
+    //   this.flushQueue()
+    // })
+
+    this.socket.on('ready', () => {
+      this.isConnecting = false
+      this.isConnected = true
+
+      this.flushQueue()
+    })
+
+    this.socket.on('disconnect', (err: any) => {
+      this.isConnecting = false
+      this.isConnected = false
+    })
+
+    this.socket.on('connect_error', (err: any) => {
+      this.isConnecting = false
+      this.isConnected = false
+      this.checkReconnectionAttempts()
+    })
+
+    this.socket.on(SESSION_STOPPED_EVENT, (data: any) => {
+
+      this.unsubscribeFromSession()
+    })
+
+    this.socket.on(SESSION_AUTO_CREATED, (data: any) => {
+
+    })
+  }
+
+  private checkReconnectionAttempts(): void {
+    if (this.attempts >= MAX_RECONNECTION_ATTEMPTS) {
+
+      this.flushQueue()
+    }
+  }
+
+
+  private flushQueue(): void {
+    while (this.queue.length > 0 && (this.socket?.connected)) {
+      const event = this.queue.shift()
+      if (!event) continue
+
+      if (this.socket?.connected) {
+        this.socket.emit(event.name, event.data)
+      }
+    }
+  }
+
+  private unsubscribeFromSession() {
+    const payload = {
+      debugSessionId: this.sessionId,
+    }
+    if (this.socket?.connected) {
+      this.socket.emit(SESSION_UNSUBSCRIBE_EVENT, payload)
+    }
+  }
+
+  public send(event: any): void {
+    if (this.socket?.connected) {
+      this.socket.emit(SESSION_ADD_EVENT, event)
+    } else {
+      this.queue.push({ data: event, name: SESSION_ADD_EVENT })
+      this.init()
+    }
+  }
+
+  public subscribeToSession(session: ISession): void {
+    this.sessionId = session.shortId || session._id
+    const payload = {
+      projectId: session.project,
+      workspaceId: session.workspace,
+      debugSessionId: this.sessionId,
+      sessionType: session.creationType,
+    }
+    if (this.socket?.connected) {
+      this.socket.emit(SESSION_SUBSCRIBE_EVENT, payload)
+    } else {
+      this.queue.push({ data: payload, name: SESSION_SUBSCRIBE_EVENT })
+      this.init()
+    }
+  }
+
+  public close(): void {
+    if (this.socket?.connected) {
+      setTimeout(() => {
+        this.unsubscribeFromSession()
+        this.attempts = 0
+        this.isConnected = false
+        this.isConnecting = false
+        this.socket?.disconnect()
+        this.socket = null
+      }, 500)
+    }
+  }
+}

package/src/recorder/gestureRecorder.ts

@@ -1,8 +1,8 @@
-import { GestureEvent, RecorderConfig } from '../types'
+import { GestureEvent, RecorderConfig, EventType, IncrementalSource, IncrementalSnapshotEvent, MouseInteractionType, EventRecorder } from '../types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import { Dimensions } from 'react-native'
 
-export class GestureRecorder {
+export class GestureRecorder implements EventRecorder {
   private config?: RecorderConfig
   private isRecording = false
   private events: GestureEvent[] = []
@@ -10,8 +10,13 @@ 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 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()
   }
 
@@ -19,6 +24,7 @@ export class GestureRecorder {
     this.isRecording = true
     this.events = []
     this._setupGestureHandlers()
+    this._setupAutomaticTouchCapture()
     // Gesture recording started
   }
 
@@ -77,6 +83,19 @@ export class GestureRecorder {
     }
   }
 
+  private _setupAutomaticTouchCapture(): void {
+    try {
+      // This method sets up automatic touch capture
+      // The actual touch capture is handled by the TouchEventCapture component
+      // in the SessionRecorderContext, which automatically calls our recording methods
+
+      // We can add any additional setup here if needed
+      // For now, the TouchEventCapture component handles everything automatically
+    } catch (error) {
+      // Failed to setup automatic touch capture - silently continue
+    }
+  }
+
   private _removeGestureHandlers(): void {
     this.gestureHandlers.clear()
     // Gesture handlers removed
@@ -424,4 +443,106 @@ 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: MouseInteractionType,
+    target?: string,
+  ): void {
+    const incrementalSnapshotEvent: IncrementalSnapshotEvent = {
+      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),
+      },
+      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 {
+    // Record as both gesture event and rrweb event
+    this.recordTap(x, y, target, pressure)
+    this._createMouseInteractionEvent(x, y, MouseInteractionType.TouchStart, target)
+
+    // Force screen capture after touch interaction
+    this.screenRecorder?.forceCapture()
+  }
+
+  /**
+   * Record touch move event as rrweb MouseInteraction
+   * @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)
+  }
+
+  /**
+   * 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 {
+    // Record as both gesture event and rrweb event
+    this.recordTap(x, y, target, pressure)
+    this._createMouseInteractionEvent(x, y, MouseInteractionType.TouchEnd, target)
+
+    // Force screen capture after touch interaction
+    this.screenRecorder?.forceCapture()
+  }
+
+  /**
+   * 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 {
+    this._createMouseInteractionEvent(x, y, MouseInteractionType.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,15 +1,22 @@
-import { GestureRecorder } from './gestureRecorder'
-import { NavigationTracker } from './navigationTracker'
-import { ScreenRecorder } from './screenRecorder'
+import { pack } from '@rrweb/packer'
 import { SessionType } from '@multiplayer-app/session-recorder-common'
-import { RecorderConfig } from '../types'
 
-export class RecorderReactNativeSDK {
+import { EventExporter } from './eventExporter'
+import { ScreenRecorder } from './screenRecorder'
+import { GestureRecorder } from './gestureRecorder'
+import { NavigationTracker } from './navigationTracker'
+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
-  private screenRecorder: ScreenRecorder
-  private isRecording = false
+  private recordedEvents: RRWebEvent[] = []
+  private exporter: EventExporter | undefined
+  private sessionId: string | null = null
+  private sessionType: SessionType = SessionType.PLAIN
 
   constructor() {
     this.gestureRecorder = new GestureRecorder()
@@ -17,11 +24,16 @@ export class RecorderReactNativeSDK {
     this.screenRecorder = new ScreenRecorder()
   }
 
-  init(config: RecorderConfig): void {
+  init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
     this.config = config
-    this.gestureRecorder.init(config)
+    this.eventRecorder = eventRecorder
+    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,6 +41,8 @@ export class RecorderReactNativeSDK {
       throw new Error('Configuration not initialized. Call init() before start().')
     }
 
+    this.sessionId = sessionId
+    this.sessionType = sessionType
     this.isRecording = true
 
     if (this.config.recordGestures) {
@@ -49,23 +63,118 @@ export class RecorderReactNativeSDK {
     this.gestureRecorder.stop()
     this.navigationTracker.stop()
     this.screenRecorder.stop()
+    this.exporter?.close()
+  }
+
+
+  setNavigationRef(ref: any): void {
+    this.navigationTracker.setNavigationRef(ref)
+  }
+
+  /**
+   * 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: RRWebEvent): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    // Store the event locally
+    this.recordedEvents.push(event)
+    if (this.exporter) {
+      const packedEvent = pack(event)
+      this.exporter.send({
+        event: packedEvent,
+        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)
+    }
   }
 
-  pause(): void {
-    this.gestureRecorder.pause()
-    this.navigationTracker.pause()
-    this.screenRecorder.pause()
+  /**
+   * 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)
   }
 
-  resume(): void {
-    if (this.isRecording) {
-      this.gestureRecorder.resume()
-      this.navigationTracker.resume()
-      this.screenRecorder.resume()
+  /**
+   * 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)
   }
 
-  setNavigationRef(ref: any): void {
-    this.navigationTracker.setNavigationRef(ref)
+  /**
+   * 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(): RRWebEvent[] {
+    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,
+    }
   }
 }