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

package/src/otel/instrumentations/reactNativeInstrumentation.ts

@@ -0,0 +1,164 @@
+import { InstrumentationBase } from '@opentelemetry/instrumentation'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+export class ReactNativeInstrumentation extends InstrumentationBase {
+  constructor() {
+    super('react-native', '1.0.0', {})
+  }
+
+  init(): void {
+    // Initialize the instrumentation
+  }
+
+  enable(): void {
+    // Try to wrap AsyncStorage if it's available
+    try {
+      const asyncStorage = require('@react-native-async-storage/async-storage')
+      if (asyncStorage) {
+        this._wrap(asyncStorage, 'AsyncStorage', this._wrapAsyncStorage)
+      }
+    } catch (error) {
+      console.warn('@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
+    }
+  }
+
+  disable(): void {
+    // Try to unwrap AsyncStorage if it was wrapped
+    try {
+      const asyncStorage = require('@react-native-async-storage/async-storage')
+      if (asyncStorage) {
+        this._unwrap(asyncStorage, 'AsyncStorage')
+      }
+    } catch (error) {
+      // AsyncStorage was not available, nothing to unwrap
+    }
+  }
+
+  private _wrapAsyncStorage(originalModule: any) {
+    const self = this
+
+    // Wrap setItem
+    const originalSetItem = originalModule.setItem
+    originalModule.setItem = async function (key: string, value: string) {
+      const startTime = Date.now()
+      try {
+        const result = await originalSetItem.call(this, key, value)
+
+        const span = trace.getTracer('react-native').startSpan('AsyncStorage.setItem', {
+          attributes: {
+            'storage.operation': 'setItem',
+            'storage.key': key,
+            'storage.value_length': value.length,
+            'storage.duration': Date.now() - startTime,
+          },
+        })
+
+        span.setStatus({ code: SpanStatusCode.OK })
+        span.end()
+
+        return result
+      } catch (error) {
+        const span = trace.getTracer('react-native').startSpan('AsyncStorage.setItem', {
+          attributes: {
+            'storage.operation': 'setItem',
+            'storage.key': key,
+            'storage.error': true,
+            'storage.duration': Date.now() - startTime,
+          },
+        })
+
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        span.setStatus({ code: SpanStatusCode.ERROR, message: errorMessage })
+        if (error instanceof Error) {
+          span.recordException(error)
+        }
+        span.end()
+
+        throw error
+      }
+    }
+
+    // Wrap getItem
+    const originalGetItem = originalModule.getItem
+    originalModule.getItem = async function (key: string) {
+      const startTime = Date.now()
+      try {
+        const result = await originalGetItem.call(this, key)
+
+        const span = trace.getTracer('react-native').startSpan('AsyncStorage.getItem', {
+          attributes: {
+            'storage.operation': 'getItem',
+            'storage.key': key,
+            'storage.value_length': result ? result.length : 0,
+            'storage.duration': Date.now() - startTime,
+          },
+        })
+
+        span.setStatus({ code: SpanStatusCode.OK })
+        span.end()
+
+        return result
+      } catch (error) {
+        const span = trace.getTracer('react-native').startSpan('AsyncStorage.getItem', {
+          attributes: {
+            'storage.operation': 'getItem',
+            'storage.key': key,
+            'storage.error': true,
+            'storage.duration': Date.now() - startTime,
+          },
+        })
+
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        span.setStatus({ code: SpanStatusCode.ERROR, message: errorMessage })
+        if (error instanceof Error) {
+          span.recordException(error)
+        }
+        span.end()
+
+        throw error
+      }
+    }
+
+    // Wrap removeItem
+    const originalRemoveItem = originalModule.removeItem
+    originalModule.removeItem = async function (key: string) {
+      const startTime = Date.now()
+      try {
+        const result = await originalRemoveItem.call(this, key)
+
+        const span = trace.getTracer('react-native').startSpan('AsyncStorage.removeItem', {
+          attributes: {
+            'storage.operation': 'removeItem',
+            'storage.key': key,
+            'storage.duration': Date.now() - startTime,
+          },
+        })
+
+        span.setStatus({ code: SpanStatusCode.OK })
+        span.end()
+
+        return result
+      } catch (error) {
+        const span = trace.getTracer('react-native').startSpan('AsyncStorage.removeItem', {
+          attributes: {
+            'storage.operation': 'removeItem',
+            'storage.key': key,
+            'storage.error': true,
+            'storage.duration': Date.now() - startTime,
+          },
+        })
+
+        const errorMessage = error instanceof Error ? error.message : String(error)
+        span.setStatus({ code: SpanStatusCode.ERROR, message: errorMessage })
+        if (error instanceof Error) {
+          span.recordException(error)
+        }
+        span.end()
+
+        throw error
+      }
+    }
+
+    return originalModule
+  }
+}

package/src/otel/instrumentations/reactNavigationInstrumentation.ts

@@ -0,0 +1,114 @@
+import { InstrumentationBase } from '@opentelemetry/instrumentation'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+export class ReactNavigationInstrumentation extends InstrumentationBase {
+  private navigationRef: any = null
+
+  constructor() {
+    super('react-navigation', '1.0.0', {})
+  }
+
+  init(): void {
+    // Initialize the instrumentation
+  }
+
+  setNavigationRef(ref: any) {
+    this.navigationRef = ref
+    this._setupNavigationListener()
+  }
+
+  private _setupNavigationListener() {
+    if (!this.navigationRef) return
+
+    // Listen to navigation state changes
+    this.navigationRef.addListener('state', (e: any) => {
+      this._recordNavigationEvent('state_change', e.data)
+    })
+
+    // Listen to focus events
+    this.navigationRef.addListener('focus', (e: any) => {
+      this._recordNavigationEvent('focus', e.data)
+    })
+
+    // Listen to blur events
+    this.navigationRef.addListener('blur', (e: any) => {
+      this._recordNavigationEvent('blur', e.data)
+    })
+  }
+
+  private _recordNavigationEvent(eventType: string, data: any) {
+    const span = trace.getTracer('navigation').startSpan(`Navigation.${eventType}`, {
+      attributes: {
+        'navigation.system': 'ReactNavigation',
+        'navigation.operation': eventType,
+        'navigation.type': eventType,
+        'navigation.timestamp': Date.now(),
+      },
+    })
+
+    if (data) {
+      if (data.routeName) {
+        span.setAttribute('navigation.route_name', data.routeName)
+      }
+      if (data.params) {
+        span.setAttribute('navigation.params', JSON.stringify(data.params))
+      }
+      if (data.key) {
+        span.setAttribute('navigation.key', data.key)
+      }
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  // Manual navigation tracking methods
+  recordNavigate(routeName: string, params?: Record<string, any>) {
+    const span = trace.getTracer('navigation').startSpan('Navigation.navigate', {
+      attributes: {
+        'navigation.system': 'ReactNavigation',
+        'navigation.operation': 'navigate',
+        'navigation.route_name': routeName,
+        'navigation.timestamp': Date.now(),
+      },
+    })
+
+    if (params) {
+      span.setAttribute('navigation.params', JSON.stringify(params))
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  recordGoBack() {
+    const span = trace.getTracer('navigation').startSpan('Navigation.goBack', {
+      attributes: {
+        'navigation.system': 'ReactNavigation',
+        'navigation.operation': 'goBack',
+        'navigation.timestamp': Date.now(),
+      },
+    })
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+
+  recordReset(routes: any[]) {
+    const span = trace.getTracer('navigation').startSpan('Navigation.reset', {
+      attributes: {
+        'navigation.system': 'ReactNavigation',
+        'navigation.operation': 'reset',
+        'navigation.routes_count': routes.length,
+        'navigation.timestamp': Date.now(),
+      },
+    })
+
+    if (routes.length > 0) {
+      span.setAttribute('navigation.initial_route', routes[0].name)
+    }
+
+    span.setStatus({ code: SpanStatusCode.OK })
+    span.end()
+  }
+}

package/src/recorder/gestureRecorder.ts

@@ -0,0 +1,429 @@
+import { GestureEvent, RecorderConfig } from '../types'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+
+export class GestureRecorder {
+  private config?: RecorderConfig
+  private isRecording = false
+  private events: GestureEvent[] = []
+  private gestureHandlers: Map<string, any> = new Map()
+  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 {
+    this.config = config
+    this._getScreenDimensions()
+  }
+
+  start(): void {
+    this.isRecording = true
+    this.events = []
+    this._setupGestureHandlers()
+    console.log('Gesture recording started')
+  }
+
+  stop(): void {
+    this.isRecording = false
+    this._removeGestureHandlers()
+    console.log('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)
+      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')
+  }
+
+  private _recordEvent(event: GestureEvent): void {
+    if (!this.isRecording) return
+
+    // Throttle gestures to avoid spam
+    const now = Date.now()
+    if (now - this.lastGestureTime < this.gestureThrottleMs) {
+      return
+    }
+    this.lastGestureTime = now
+
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
+  }
+
+
+
+  private _sendEvent(event: GestureEvent): void {
+    // Send event to backend or store locally
+    console.log('Gesture event recorded:', event)
+  }
+
+  private _recordOpenTelemetrySpan(event: GestureEvent): void {
+    try {
+      const span = trace.getTracer('gesture').startSpan(`Gesture.${event.type}`, {
+        attributes: {
+          'gesture.type': event.type,
+          'gesture.timestamp': event.timestamp,
+          'gesture.platform': 'react-native',
+        },
+      })
+
+      if (event.coordinates) {
+        span.setAttribute('gesture.coordinates.x', event.coordinates.x)
+        span.setAttribute('gesture.coordinates.y', event.coordinates.y)
+
+        // Calculate relative position
+        if (this.screenDimensions) {
+          const relativeX = event.coordinates.x / this.screenDimensions.width
+          const relativeY = event.coordinates.y / this.screenDimensions.height
+          span.setAttribute('gesture.coordinates.relative_x', relativeX)
+          span.setAttribute('gesture.coordinates.relative_y', relativeY)
+        }
+      }
+
+      if (event.target) {
+        span.setAttribute('gesture.target', event.target)
+      }
+
+      if (event.metadata) {
+        Object.entries(event.metadata).forEach(([key, value]) => {
+          span.setAttribute(`gesture.metadata.${key}`, String(value))
+        })
+      }
+
+      span.setStatus({ code: SpanStatusCode.OK })
+      span.end()
+    } catch (error) {
+      console.warn('Failed to record OpenTelemetry span for gesture:', error)
+    }
+  }
+
+  // Public methods for manual event recording
+  recordTap(x: number, y: number, target?: string, pressure?: number): void {
+    const event: GestureEvent = {
+      type: 'tap',
+      timestamp: Date.now(),
+      coordinates: { x, y },
+      target,
+      metadata: {
+        pressure: pressure || 1.0,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordSwipe(direction: string, target?: string, velocity?: number, distance?: number): void {
+    const event: GestureEvent = {
+      type: 'swipe',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        direction,
+        velocity: velocity || 0,
+        distance: distance || 0,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordPinch(scale: number, target?: string, velocity?: number): void {
+    const event: GestureEvent = {
+      type: 'pinch',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        scale,
+        velocity: velocity || 0,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordPan(deltaX: number, deltaY: number, target?: string, velocity?: number): void {
+    const event: GestureEvent = {
+      type: 'pan',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        deltaX,
+        deltaY,
+        velocity: velocity || 0,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordLongPress(duration: number, target?: string, pressure?: number): void {
+    const event: GestureEvent = {
+      type: 'longPress',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        duration,
+        pressure: pressure || 1.0,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordDoubleTap(x: number, y: number, target?: string): void {
+    const event: GestureEvent = {
+      type: 'doubleTap',
+      timestamp: Date.now(),
+      coordinates: { x, y },
+      target,
+      metadata: {
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordRotate(rotation: number, target?: string, velocity?: number): void {
+    const event: GestureEvent = {
+      type: 'rotate',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        rotation,
+        velocity: velocity || 0,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordFling(direction: string, velocity: number, target?: string): void {
+    const event: GestureEvent = {
+      type: 'fling',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        direction,
+        velocity,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  // Advanced gesture tracking methods
+  recordMultiTouch(touchCount: number, target?: string): void {
+    const event: GestureEvent = {
+      type: 'multiTouch',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        touchCount,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordScroll(direction: string, distance: number, velocity: number, target?: string): void {
+    const event: GestureEvent = {
+      type: 'scroll',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        direction,
+        distance,
+        velocity,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    this._recordEvent(event)
+  }
+
+  recordZoom(scale: number, target?: string, velocity?: number): void {
+    const event: GestureEvent = {
+      type: 'zoom',
+      timestamp: Date.now(),
+      target,
+      metadata: {
+        scale,
+        velocity: velocity || 0,
+        screenWidth: this.screenDimensions?.width,
+        screenHeight: this.screenDimensions?.height,
+      },
+    }
+
+    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]
+  }
+
+  // Clear events
+  clearEvents(): void {
+    this.events = []
+  }
+
+  // Get event statistics
+  getEventStats(): Record<string, number> {
+    const stats: Record<string, number> = {}
+    this.events.forEach(event => {
+      stats[event.type] = (stats[event.type] || 0) + 1
+    })
+    return stats
+  }
+
+  // Set gesture throttle
+  setGestureThrottle(throttleMs: number): void {
+    this.gestureThrottleMs = throttleMs
+  }
+
+  // Get recording status
+  isRecordingEnabled(): boolean {
+    return this.isRecording
+  }
+}