@multiplayer-app/session-recorder-react-native 0.0.1-beta.1 → 0.0.1-beta.11

package/src/recorder/index.ts

@@ -1,179 +0,0 @@
-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 { 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 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()
-  }
-
-  init(config: RecorderConfig): void {
-    this.config = config
-    this.gestureRecorder.init(config, this, this.screenRecorder)
-    this.navigationTracker.init(config)
-    this.screenRecorder.init(config, this)
-    this.exporter = new EventExporter({
-      socketUrl: config.apiBaseUrl || '',
-      apiKey: config.apiKey,
-    })
-  }
-
-  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

@@ -1,449 +0,0 @@
-import { NavigationEvent, 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 events: NavigationEvent[] = []
-  private navigationListeners: Map<string, any> = new Map()
-  private currentRoute: string | null = null
-  private navigationStack: string[] = []
-  private navigationStartTime: number = 0
-
-  init(config: RecorderConfig): void {
-    this.config = config
-  }
-
-  setNavigationRef(ref: any): void {
-    this.navigationRef = ref
-    if (this.isRecording) {
-      this._setupNavigationListener()
-    }
-  }
-
-  start(): void {
-    logger.info('NavigationTracker', 'Navigation tracking started')
-    this.isRecording = true
-    this.events = []
-    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, key) => {
-        if (listener && typeof listener.remove === 'function') {
-          listener.remove()
-        }
-      })
-      this.navigationListeners.clear()
-      // Navigation listeners removed
-    } catch (error) {
-      // Failed to remove navigation listeners - silently continue
-    }
-  }
-
-  private _recordNavigationEvent(eventType: string, data: any): void {
-    if (!this.isRecording) return
-
-    const event: NavigationEvent = {
-      type: 'navigate', // Default type
-      timestamp: Date.now(),
-      metadata: {
-        eventType,
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-      },
-    }
-
-    if (data) {
-      if (data.routeName) {
-        event.routeName = data.routeName
-        this._updateNavigationStack(data.routeName, eventType)
-      }
-      if (data.params) {
-        event.params = data.params
-      }
-      if (data.key) {
-        event.metadata!.routeKey = data.key
-      }
-    }
-
-    this.events.push(event)
-    this._sendEvent(event)
-    this._recordOpenTelemetrySpan(event)
-  }
-
-
-
-  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 _sendEvent(event: NavigationEvent): void {
-    // Navigation event recorded
-  }
-
-  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
-    }
-  }
-
-  // Public methods for manual event recording
-  recordNavigate(routeName: string, params?: Record<string, any>): void {
-    const event: NavigationEvent = {
-      type: 'navigate',
-      timestamp: Date.now(),
-      routeName,
-      params,
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        manual: true,
-      },
-    }
-
-    this._updateNavigationStack(routeName, 'focus')
-    this._recordEvent(event)
-  }
-
-  recordGoBack(): void {
-    const event: NavigationEvent = {
-      type: 'goBack',
-      timestamp: Date.now(),
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        manual: true,
-      },
-    }
-
-    this._recordEvent(event)
-  }
-
-  recordReset(routes: any[]): void {
-    const event: NavigationEvent = {
-      type: 'reset',
-      timestamp: Date.now(),
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        routesCount: routes.length,
-        manual: true,
-      },
-    }
-
-    // Update navigation stack
-    this.navigationStack = routes.map(route => route.name || route.routeName)
-    if (routes.length > 0) {
-      this.currentRoute = routes[0].name || routes[0].routeName
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  private _recordEvent(event: NavigationEvent): void {
-    if (!this.isRecording) return
-
-    this.events.push(event)
-    this._sendEvent(event)
-    this._recordOpenTelemetrySpan(event)
-  }
-
-  // Advanced navigation tracking methods
-  recordDeepLink(url: string, params?: Record<string, any>): void {
-    const event: NavigationEvent = {
-      type: 'navigate',
-      timestamp: Date.now(),
-      routeName: 'deepLink',
-      params: { url, ...params },
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        deepLink: true,
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  recordTabChange(tabName: string, tabIndex: number): void {
-    const event: NavigationEvent = {
-      type: 'navigate',
-      timestamp: Date.now(),
-      routeName: tabName,
-      params: { tabIndex },
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        tabChange: true,
-        tabIndex,
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  recordModalOpen(modalName: string, params?: Record<string, any>): void {
-    const event: NavigationEvent = {
-      type: 'navigate',
-      timestamp: Date.now(),
-      routeName: modalName,
-      params,
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        modal: true,
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  recordModalClose(modalName: string): void {
-    const event: NavigationEvent = {
-      type: 'goBack',
-      timestamp: Date.now(),
-      routeName: modalName,
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        modal: true,
-        modalClose: true,
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  recordStackPush(routeName: string, params?: Record<string, any>): void {
-    const event: NavigationEvent = {
-      type: 'navigate',
-      timestamp: Date.now(),
-      routeName,
-      params,
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        stackOperation: 'push',
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  recordStackPop(routeName?: string): void {
-    const event: NavigationEvent = {
-      type: 'goBack',
-      timestamp: Date.now(),
-      routeName,
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        stackOperation: 'pop',
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  // Performance monitoring
-  recordNavigationPerformance(routeName: string, loadTime: number): void {
-    const event: NavigationEvent = {
-      type: 'navigate',
-      timestamp: Date.now(),
-      routeName,
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        performance: 'monitoring',
-        loadTime,
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-  }
-
-  // Error tracking
-  recordNavigationError(error: Error, routeName?: string): void {
-    const event: NavigationEvent = {
-      type: 'navigate',
-      timestamp: Date.now(),
-      routeName,
-      metadata: {
-        navigationDuration: Date.now() - this.navigationStartTime,
-        stackDepth: this.navigationStack.length,
-        error: true,
-        errorType: error.name,
-        errorMessage: error.message,
-      },
-    }
-
-    this._recordEvent(event)
-    this._recordEvent(event)
-
-    // Also record as OpenTelemetry error span
-    try {
-      const span = trace.getTracer('navigation').startSpan('Navigation.error', {
-        attributes: {
-          'navigation.system': 'ReactNavigation',
-          'navigation.error': true,
-          'navigation.error.type': error.name,
-          'navigation.error.message': error.message,
-          'navigation.route_name': routeName || 'unknown',
-          'navigation.timestamp': Date.now(),
-        },
-      })
-
-      span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
-      span.recordException(error)
-      span.end()
-    } catch (spanError) {
-      // Failed to record error span - silently continue
-    }
-  }
-
-  // Get current navigation state
-  getCurrentRoute(): string | null {
-    return this.currentRoute
-  }
-
-  getNavigationStack(): string[] {
-    return [...this.navigationStack]
-  }
-
-  getNavigationDepth(): number {
-    return this.navigationStack.length
-  }
-
-  // Get recorded events
-  getEvents(): NavigationEvent[] {
-    return [...this.events]
-  }
-
-  // Clear events
-  clearEvents(): void {
-    this.events = []
-  }
-
-  // Get navigation statistics
-  getNavigationStats(): Record<string, number> {
-    const stats: Record<string, number> = {}
-    this.events.forEach(event => {
-      stats[event.type] = (stats[event.type] || 0) + 1
-    })
-    return stats
-  }
-
-  // Get recording status
-  isRecordingEnabled(): boolean {
-    return this.isRecording
-  }
-
-  // Get navigation duration
-  getNavigationDuration(): number {
-    return Date.now() - this.navigationStartTime
-  }
-}