@multiplayer-app/session-recorder-react-native 1.0.1-beta.2 → 1.0.1-beta.4

package/src/recorder/index.ts

@@ -0,0 +1,190 @@
+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 { type RecorderConfig, type EventRecorder } from '../types'
+import { type 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 recordedEvents: eventWithTime[] = []
+  private exporter: EventExporter
+  private sessionId: string | null = null
+  private sessionType: SessionType = SessionType.PLAIN
+
+
+  constructor() {
+    this.screenRecorder = new ScreenRecorder()
+    this.gestureRecorder = new GestureRecorder()
+    this.navigationTracker = new NavigationTracker()
+    this.exporter = new EventExporter({
+      socketUrl: '',
+      apiKey: '',
+    })
+  }
+
+  init(config: RecorderConfig): void {
+    this.config = config
+    this.screenRecorder.init(config, this)
+    this.navigationTracker.init(config, this.screenRecorder)
+    this.gestureRecorder.init(config, this, this.screenRecorder)
+
+    this.exporter.setApiKey(config.apiKey)
+    this.exporter.setSocketUrl(config.apiBaseUrl)
+  }
+
+  setApiKey(apiKey: string): void {
+    this.exporter.setApiKey(apiKey)
+  }
+
+  setSocketUrl(socketUrl: string): void {
+    this.exporter.setSocketUrl(socketUrl)
+  }
+
+  start(sessionId: string | null, sessionType: SessionType): void {
+    if (!this.config) {
+      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()
+    }
+
+    if (this.config.recordNavigation) {
+      this.navigationTracker.start()
+    }
+
+
+  }
+
+  stop(): void {
+    this.isRecording = false
+    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: 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,
+      })
+    }
+  }
+
+  /**
+   * 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

@@ -0,0 +1,245 @@
+import { type NavigationEvent, type RecorderConfig } from '../types'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+import { logger } from '../utils'
+
+export class NavigationTracker {
+  private config?: RecorderConfig
+  private isRecording = false
+  private navigationRef: any = null
+  private navigationListeners: Map<string, any> = new Map()
+  private currentRoute: string | null = null
+  private navigationStack: string[] = []
+  private navigationStartTime: number = 0
+  private screenRecorder?: any // Reference to screen recorder for force capture
+
+  init(config: RecorderConfig, screenRecorder?: any): void {
+    this.config = config
+    this.screenRecorder = screenRecorder
+    logger.info('NavigationTracker', 'Navigation tracker initialized',
+      { config: this.config, screenRecorder: this.screenRecorder })
+  }
+
+  setNavigationRef(ref: any): void {
+    this.navigationRef = ref
+    if (this.isRecording) {
+      this._setupNavigationListener()
+    }
+  }
+
+  start(): void {
+    logger.info('NavigationTracker', 'Navigation tracking started')
+    this.isRecording = true
+    this.navigationStack = []
+    this.navigationStartTime = Date.now()
+    this._setupNavigationListener()
+    // Navigation tracking started
+  }
+
+  stop(): void {
+    this.isRecording = false
+    this._removeNavigationListener()
+    // Navigation tracking stopped
+  }
+
+  pause(): void {
+    this.isRecording = false
+  }
+
+  resume(): void {
+    this.isRecording = true
+    this._setupNavigationListener()
+  }
+
+  private _setupNavigationListener(): void {
+    if (!this.navigationRef) {
+      // Navigation ref not set - silently continue
+      return
+    }
+
+    try {
+      // Listen to navigation state changes
+      const stateListener = this.navigationRef.addListener('state', (e: any) => {
+        this._recordNavigationEvent('state_change', e.data)
+      })
+
+      // Listen to focus events
+      const focusListener = this.navigationRef.addListener('focus', (e: any) => {
+        this._recordNavigationEvent('focus', e.data)
+      })
+
+      // Listen to blur events
+      const blurListener = this.navigationRef.addListener('blur', (e: any) => {
+        this._recordNavigationEvent('blur', e.data)
+      })
+
+      // Listen to beforeRemove events
+      const beforeRemoveListener = this.navigationRef.addListener('beforeRemove', (e: any) => {
+        this._recordNavigationEvent('beforeRemove', e.data)
+      })
+
+      // Store listeners for cleanup
+      this.navigationListeners.set('state', stateListener)
+      this.navigationListeners.set('focus', focusListener)
+      this.navigationListeners.set('blur', blurListener)
+      this.navigationListeners.set('beforeRemove', beforeRemoveListener)
+
+      // Navigation listeners setup complete
+    } catch (error) {
+      // Failed to setup navigation listeners - silently continue
+    }
+  }
+
+  private _removeNavigationListener(): void {
+    try {
+      // Remove all listeners
+      this.navigationListeners.forEach((listener, _) => {
+        if (listener && typeof listener.remove === 'function') {
+          listener.remove()
+        }
+      })
+      this.navigationListeners.clear()
+      // Navigation listeners removed
+    } catch (error) {
+      // Failed to remove navigation listeners - silently continue
+    }
+  }
+
+  private _getFriendlyRouteTitle(): string | null {
+    try {
+      const current = this.navigationRef?.getCurrentRoute?.()
+      if (!current) return null
+      // Prefer a title set via navigation.setOptions({ title }) if present in params
+      const titleFromParams = (current.params && (current.params as any).title) as string | undefined
+      if (titleFromParams && typeof titleFromParams === 'string') {
+        return titleFromParams
+      }
+
+      // Fallback to a prettified route name (handles Expo Router style names like 'user-posts/[id]')
+      if (current.name && typeof current.name === 'string') {
+        const raw = current.name as string
+        // Remove group segments like "(tabs)/" at the beginning
+        const withoutGroups = raw.replace(/^\([^)]*\)\//, '')
+        // Take last path segment (e.g., 'user-posts/[id]' -> '[id]' is removed later, 'post/[id]' -> 'post')
+        const lastSegment = withoutGroups.split('/').filter(Boolean).slice(-2).join(' ')
+        // Remove dynamic segments like '[id]'
+        const withoutParams = lastSegment.replace(/\[[^\]]+\]/g, '').trim()
+        // Replace dashes/underscores with spaces and collapse spaces
+        const spaced = withoutParams.replace(/[-_]+/g, ' ').replace(/\s+/g, ' ').trim()
+        // Title case
+        const titleCase = spaced.split(' ').map(w => w ? (w.charAt(0).toUpperCase() + w.slice(1)) : w).join(' ')
+        return titleCase || raw
+      }
+
+      return null
+    } catch {
+      return null
+    }
+  }
+
+  private _recordNavigationEvent(eventType: string, data: any): void {
+    if (!this.isRecording) return
+
+    const event: NavigationEvent = {
+      type: 'navigate',
+      timestamp: Date.now(),
+      metadata: {
+        eventType,
+        navigationDuration: Date.now() - this.navigationStartTime,
+        stackDepth: this.navigationStack.length,
+      },
+    }
+
+    const currentRoute = this.navigationRef?.getCurrentRoute?.() || {}
+    const friendlyTitle = this._getFriendlyRouteTitle()
+    const routeName = data?.routeName || currentRoute?.name
+    const params = data?.params || currentRoute?.params
+    const key = data?.key || currentRoute?.key
+
+    if (routeName) {
+      event.routeName = routeName
+      this._updateNavigationStack(routeName, eventType)
+    }
+    if (params) {
+      event.params = params
+    }
+    if (key) {
+      event.metadata!.routeKey = key
+    }
+    if (friendlyTitle) {
+      event.metadata!.friendlyRouteName = friendlyTitle
+    }
+    this._recordOpenTelemetrySpan(event)
+
+    // Force screen capture on navigation events
+    // this.screenRecorder?.forceCapture(event.timestamp)
+  }
+
+
+  private _updateNavigationStack(routeName: string, eventType: string): void {
+    if (eventType === 'focus' || eventType === 'state_change') {
+      if (this.currentRoute !== routeName) {
+        this.currentRoute = routeName
+        this.navigationStack.push(routeName)
+      }
+    } else if (eventType === 'blur' || eventType === 'beforeRemove') {
+      const index = this.navigationStack.indexOf(routeName)
+      if (index > -1) {
+        this.navigationStack.splice(index, 1)
+      }
+    }
+  }
+
+  private _recordOpenTelemetrySpan(event: NavigationEvent): void {
+    try {
+      const span = trace.getTracer('navigation').startSpan(`Navigation.${event.type}`, {
+        attributes: {
+          'navigation.system': 'ReactNavigation',
+          'navigation.operation': event.type,
+          'navigation.type': event.type,
+          'navigation.timestamp': event.timestamp,
+          'navigation.platform': 'react-native',
+        },
+      })
+
+      if (event.routeName) {
+        span.setAttribute('navigation.route_name', event.routeName)
+      }
+      if (event.params) {
+        span.setAttribute('navigation.params', JSON.stringify(event.params))
+      }
+      if (event.metadata) {
+        Object.entries(event.metadata).forEach(([key, value]) => {
+          span.setAttribute(`navigation.metadata.${key}`, String(value))
+        })
+      }
+
+      span.setStatus({ code: SpanStatusCode.OK })
+      span.end()
+    } catch (error) {
+      // Failed to record OpenTelemetry span for navigation - silently continue
+    }
+  }
+
+  // Get current navigation state
+  getCurrentRoute(): string | null {
+    return this.currentRoute
+  }
+
+  getNavigationStack(): string[] {
+    return [...this.navigationStack]
+  }
+
+  getNavigationDepth(): number {
+    return this.navigationStack.length
+  }
+
+  // Get recording status
+  isRecordingEnabled(): boolean {
+    return this.isRecording
+  }
+
+  // Get navigation duration
+  getNavigationDuration(): number {
+    return Date.now() - this.navigationStartTime
+  }
+}