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

package/src/otel/instrumentations/reactNativeInstrumentation.ts

@@ -1,77 +0,0 @@
-import { InstrumentationBase } from '@opentelemetry/instrumentation'
-import { logger } from '../../utils'
-import { trace, SpanStatusCode } from '@opentelemetry/api'
-import AsyncStorage from '@react-native-async-storage/async-storage'
-
-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 {
-      if (AsyncStorage) {
-        this._wrap(AsyncStorage, 'setItem', this._wrapAsyncStorage)
-      }
-    } catch (error) {
-      logger.warn('DEBUGGER_LIB', '@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 {
-      if (AsyncStorage) {
-        this._unwrap(AsyncStorage, 'setItem')
-      }
-    } catch (error) {
-      // AsyncStorage was not available, nothing to unwrap
-    }
-  }
-
-  private _wrapAsyncStorage(originalMethod: any) {
-    return async function (this: any, key: string, value: string) {
-      const startTime = Date.now()
-      try {
-        const result = await originalMethod.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
-      }
-    }
-  }
-}

package/src/otel/instrumentations/reactNavigationInstrumentation.ts

@@ -1,119 +0,0 @@
-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
-  }
-
-  enable(): void {
-    // Enable the instrumentation
-    super.enable()
-  }
-
-  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/gestureHandlerRecorder.ts

@@ -1,157 +0,0 @@
-import { Gesture } from 'react-native-gesture-handler'
-import { ReactNode } from 'react'
-import { SessionState } from '../types'
-import { GestureInstrumentation } from '../otel/instrumentations/gestureInstrumentation'
-
-export interface GestureHandlerRecorderProps {
-  children: ReactNode
-  sessionState: SessionState | null
-  onGestureRecord: (gestureType: string, data: any) => void
-}
-
-export class GestureHandlerRecorder {
-  private gestureInstrumentation: GestureInstrumentation
-  private onGestureRecord?: (gestureType: string, data: any) => void
-
-  constructor() {
-    this.gestureInstrumentation = new GestureInstrumentation()
-    this.gestureInstrumentation.enable()
-  }
-
-  setGestureCallback(callback: (gestureType: string, data: any) => void) {
-    this.onGestureRecord = callback
-  }
-
-  // Create tap gesture
-  createTapGesture() {
-    return Gesture.Tap()
-      .onStart((event) => {
-        this.recordGesture('tap', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now(),
-        })
-      })
-  }
-
-  // Create pan gesture (for swipes and drags)
-  createPanGesture() {
-    return Gesture.Pan()
-      .onStart((event) => {
-        this.recordGesture('pan_start', {
-          x: event.x,
-          y: event.y,
-          timestamp: Date.now(),
-        })
-      })
-      .onUpdate((event) => {
-        this.recordGesture('pan_update', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now(),
-        })
-      })
-      .onEnd((event) => {
-        this.recordGesture('pan_end', {
-          x: event.x,
-          y: event.y,
-          translationX: event.translationX,
-          translationY: event.translationY,
-          velocityX: event.velocityX,
-          velocityY: event.velocityY,
-          timestamp: Date.now(),
-        })
-      })
-  }
-
-  // Create pinch gesture
-  createPinchGesture() {
-    return Gesture.Pinch()
-      .onStart((event) => {
-        this.recordGesture('pinch_start', {
-          scale: event.scale,
-          focalX: event.focalX,
-          focalY: event.focalY,
-          timestamp: Date.now(),
-        })
-      })
-      .onUpdate((event) => {
-        this.recordGesture('pinch_update', {
-          scale: event.scale,
-          focalX: event.focalX,
-          focalY: event.focalY,
-          timestamp: Date.now(),
-        })
-      })
-      .onEnd((event) => {
-        this.recordGesture('pinch_end', {
-          scale: event.scale,
-          focalX: event.focalX,
-          focalY: event.focalY,
-          timestamp: Date.now(),
-        })
-      })
-  }
-
-  // Create long press gesture
-  createLongPressGesture() {
-    return Gesture.LongPress()
-      .minDuration(500)
-      .onStart((event) => {
-        this.recordGesture('long_press', {
-          x: event.x,
-          y: event.y,
-          duration: 500,
-          timestamp: Date.now(),
-        })
-      })
-  }
-
-  private recordGesture(gestureType: string, data: any) {
-    // Record with OpenTelemetry
-    switch (gestureType) {
-      case 'tap':
-        this.gestureInstrumentation.recordTap(data.x, data.y)
-        break
-      case 'pan_start':
-      case 'pan_update':
-      case 'pan_end':
-        this.gestureInstrumentation.recordPan(data.translationX || 0, data.translationY || 0)
-        break
-      case 'pinch_start':
-      case 'pinch_update':
-      case 'pinch_end':
-        this.gestureInstrumentation.recordPinch(data.scale, undefined)
-        break
-      case 'long_press':
-        this.gestureInstrumentation.recordLongPress(data.duration, undefined)
-        break
-    }
-
-    // Record with session recorder
-    if (this.onGestureRecord) {
-      this.onGestureRecord(gestureType, data)
-    }
-  }
-
-  // Create a gesture detector component
-  createGestureDetector(children: ReactNode, sessionState: SessionState | null): ReactNode {
-    if (sessionState !== SessionState.started) {
-      return children
-    }
-
-    const tapGesture = this.createTapGesture()
-    const panGesture = this.createPanGesture()
-    const pinchGesture = this.createPinchGesture()
-    const longPressGesture = this.createLongPressGesture()
-
-    // Note: This would need to be implemented as a proper React component
-    // For now, return children directly - the gesture detection would be handled
-    // at the app level by wrapping the entire app with GestureHandlerRootView
-    return children
-  }
-}