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

package/src/recorder/gestureRecorder.ts

@@ -1,7 +1,8 @@
-import { GestureEvent, RecorderConfig, EventType, IncrementalSource, MouseInteractionType, EventRecorder, eventWithTime } from '../types'
+import { GestureEvent, RecorderConfig, EventRecorder } from '../types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import { Dimensions } from 'react-native'
 import { logger } from '../utils'
+import { MouseInteractions, eventWithTime, EventType, IncrementalSource } from '@rrweb/types'
 
 export class GestureRecorder implements EventRecorder {
   private config?: RecorderConfig
@@ -21,6 +22,7 @@ export class GestureRecorder implements EventRecorder {
   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
@@ -32,8 +34,6 @@ export class GestureRecorder implements EventRecorder {
     logger.info('GestureRecorder', 'Gesture recording started')
     this.isRecording = true
     this.events = []
-    this._setupGestureHandlers()
-    this._setupAutomaticTouchCapture()
     // Gesture recording started
   }
 
@@ -43,15 +43,6 @@ export class GestureRecorder implements EventRecorder {
     // Gesture recording stopped
   }
 
-  pause(): void {
-    this.isRecording = false
-  }
-
-  resume(): void {
-    this.isRecording = true
-  }
-
-  // Input component registration temporarily disabled
 
   private _getScreenDimensions(): void {
     try {
@@ -62,48 +53,6 @@ export class GestureRecorder implements EventRecorder {
     }
   }
 
-  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
-      // Input tracking setup complete
-    } catch (error) {
-      // Failed to setup input tracking - silently continue
-    }
-  }
-
-  private _setupGestureHandlers(): void {
-    // This would integrate with react-native-gesture-handler
-    // For now, we'll create a comprehensive implementation that can be easily integrated
-    // Setting up gesture handlers
-
-    // Set up global gesture listener
-    this._setupGlobalGestureListener()
-  }
-
-  private _setupGlobalGestureListener(): void {
-    try {
-      // Listen for touch events at the app level
-      // This is a simplified implementation - in production you'd use react-native-gesture-handler
-      // Global gesture listener setup complete
-    } catch (error) {
-      // Failed to setup global gesture listener - silently continue
-    }
-  }
-
-  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()
@@ -134,7 +83,7 @@ export class GestureRecorder implements EventRecorder {
 
   private _recordOpenTelemetrySpan(event: GestureEvent): void {
     try {
-      const span = trace.getTracer('gesture').startSpan(`Gesture.${event.type}`, {
+      const span = trace.getTracer('@opentelemetry/instrumentation-user-interaction').startSpan(`Gesture.${event.type}`, {
         attributes: {
           'gesture.type': event.type,
           'gesture.timestamp': event.timestamp,
@@ -351,79 +300,6 @@ export class GestureRecorder implements EventRecorder {
     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) {
-      // Failed to record error span - silently continue
-    }
-  }
-
-  // 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]
@@ -473,7 +349,7 @@ export class GestureRecorder implements EventRecorder {
   private _createMouseInteractionEvent(
     x: number,
     y: number,
-    interactionType: MouseInteractionType,
+    interactionType: MouseInteractions,
     target?: string,
   ): void {
     const incrementalSnapshotEvent: eventWithTime = {
@@ -502,7 +378,7 @@ export class GestureRecorder implements EventRecorder {
     const incrementalSnapshotEvent: eventWithTime = {
       type: EventType.IncrementalSnapshot,
       data: {
-        source: IncrementalSource.MouseMove, // Use MouseMove instead of MouseInteraction
+        source: IncrementalSource.TouchMove, // Use MouseMove instead of MouseInteraction
         positions: [
           {
             x: x, // Preserve decimal precision like web rrweb
@@ -536,7 +412,7 @@ export class GestureRecorder implements EventRecorder {
 
     logger.debug('GestureRecorder', 'Touch start recorded', { x, y, target, pressure })
     // Record as MouseDown (type: 1) like web rrweb
-    this._createMouseInteractionEvent(x, y, MouseInteractionType.MouseDown, target)
+    this._createMouseInteractionEvent(x, y, MouseInteractions.TouchStart, target)
   }
 
   /**
@@ -587,9 +463,9 @@ export class GestureRecorder implements EventRecorder {
       // Always record touch end (no throttling for completion)
       this.recordTap(x, y, target, pressure)
       // Record as MouseUp (type: 0) like web rrweb
-      this._createMouseInteractionEvent(x, y, MouseInteractionType.MouseUp, target)
+      this._createMouseInteractionEvent(x, y, MouseInteractions.TouchEnd, target)
       // Also record Click (type: 2) like web rrweb
-      this._createMouseInteractionEvent(x, y, MouseInteractionType.Click, target)
+      // this._createMouseInteractionEvent(x, y, MouseInteractions.Click, target)
 
       // Only force screen capture on touch end (not on every touch event)
       logger.debug('GestureRecorder', 'Forcing screen capture after touch end')
@@ -608,7 +484,7 @@ export class GestureRecorder implements EventRecorder {
    */
   recordTouchCancel(x: number, y: number, target?: string): void {
     // Record as MouseUp (type: 0) like web rrweb for touch cancel
-    this._createMouseInteractionEvent(x, y, MouseInteractionType.MouseUp, target)
+    this._createMouseInteractionEvent(x, y, MouseInteractions.TouchCancel, target)
   }
 
   /**

package/src/recorder/index.ts

@@ -5,14 +5,15 @@ import { logger } from '../utils'
 import { ScreenRecorder } from './screenRecorder'
 import { GestureRecorder } from './gestureRecorder'
 import { NavigationTracker } from './navigationTracker'
-import { RecorderConfig, EventRecorder, RRWebEvent } from '../types'
+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: RRWebEvent[] = []
+  private recordedEvents: eventWithTime[] = []
   private exporter: EventExporter | undefined
   private sessionId: string | null = null
   private sessionType: SessionType = SessionType.PLAIN
@@ -86,7 +87,7 @@ export class RecorderReactNativeSDK implements EventRecorder {
    * Record an rrweb event
    * @param event - The rrweb event to record
    */
-  recordEvent(event: RRWebEvent): void {
+  recordEvent(event: eventWithTime): void {
     if (!this.isRecording) {
       return
     }
@@ -154,7 +155,7 @@ export class RecorderReactNativeSDK implements EventRecorder {
    * Get all recorded events
    * @returns Array of recorded rrweb events
    */
-  getRecordedEvents(): RRWebEvent[] {
+  getRecordedEvents(): eventWithTime[] {
     return [...this.recordedEvents]
   }
 

package/src/recorder/screenRecorder.ts

@@ -112,7 +112,7 @@ export class ScreenRecorder implements EventRecorder {
 
         if (hasChanged) {
           // Use incremental snapshot if we have an existing image node, otherwise create full snapshot
-          if (this.currentImageNodeId && this.lastScreenCapture) {
+          if (this.currentImageNodeId !== null && this.lastScreenCapture) {
             const success = this.updateScreenWithIncrementalSnapshot(base64Image)
             if (!success) {
               // Fallback to full snapshot if incremental update fails
@@ -149,7 +149,7 @@ export class ScreenRecorder implements EventRecorder {
 
       return result
     } catch (error) {
-      logger.error('ScreenRecorder', 'Failed to capture screen', error)
+      logger.error('ScreenRecorder', 'Failed to capture screen. Make sure react-native-view-shot is properly installed and linked:', error)
       return null
     }
   }
@@ -186,7 +186,7 @@ export class ScreenRecorder implements EventRecorder {
 
     // Store the image node ID for future incremental updates
     // The image node ID is the first node created (after the document)
-    this.currentImageNodeId = 2 // First element node is the image
+    this.currentImageNodeId = 0 // First element node is the image
 
     return fullSnapshotEvent
   }
@@ -197,21 +197,13 @@ export class ScreenRecorder implements EventRecorder {
    * @param imageNodeId - ID of the image node to update
    * @returns Incremental snapshot event with mutation data
    */
-  createIncrementalSnapshotWithImageUpdate(base64Image: string, imageNodeId: number): eventWithTime {
+  createIncrementalSnapshotWithImageUpdate(base64Image: string): eventWithTime {
     return createIncrementalSnapshotUtil(
       base64Image,
-      imageNodeId,
       this.captureFormat,
     )
   }
 
-  /**
-   * Get the current image node ID
-   * @returns The current image node ID or null if not set
-   */
-  getCurrentImageNodeId(): number | null {
-    return this.currentImageNodeId
-  }
 
   /**
    * Update the screen with a new image using incremental snapshot
@@ -219,12 +211,12 @@ export class ScreenRecorder implements EventRecorder {
    * @returns true if update was successful, false otherwise
    */
   updateScreenWithIncrementalSnapshot(base64Image: string): boolean {
-    if (!this.currentImageNodeId) {
+    if (this.currentImageNodeId === null) {
       logger.warn('ScreenRecorder', 'No image node ID available for incremental update')
       return false
     }
 
-    const incrementalEvent = this.createIncrementalSnapshotWithImageUpdate(base64Image, this.currentImageNodeId)
+    const incrementalEvent = this.createIncrementalSnapshotWithImageUpdate(base64Image)
     this.recordEvent(incrementalEvent)
     return true
   }

package/src/session-recorder.ts

@@ -12,7 +12,6 @@ import {
   ISessionRecorder,
   SessionRecorderConfigs,
   SessionRecorderOptions,
-  RRWebEvent,
   EventRecorder
 } from './types'
 import { getFormattedDate, isSessionActive, getNavigatorInfo } from './utils'
@@ -21,6 +20,7 @@ import { DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE, getSessionRecorderConfig } fro
 
 import { StorageService } from './services/storage.service'
 import { ApiService, StartSessionRequest, StopSessionRequest } from './services/api.service'
+import { eventWithTime } from '@rrweb/types'
 
 // Utility functions for React Native
 
@@ -161,7 +161,6 @@ class SessionRecorder extends Observable<SessionRecorderEvents> implements ISess
     try {
       this._apiService.init(this._configs)
       this._tracer.init(this._configs)
-
     } catch (error) {
       logger.error('SessionRecorder', 'Failed to initialize API service', error)
     }
@@ -527,7 +526,7 @@ class SessionRecorder extends Observable<SessionRecorderEvents> implements ISess
    * Note: Screen capture and touch events are recorded automatically when session is started
    * @param event - The rrweb event to record
    */
-  recordEvent(event: RRWebEvent): void {
+  recordEvent(event: eventWithTime): void {
     if (!this._isInitialized || this.sessionState !== SessionState.started) {
       return
     }

package/src/types/index.ts

@@ -1,23 +1,9 @@
 export * from './session-recorder'
 export * from './session'
 
-// Re-export rrweb types for convenience
-export { EventType, IncrementalSource, MouseInteractions as MouseInteractionType } from 'rrweb'
-export type { eventWithTime, serializedNodeWithId, mouseInteractionData, metaEvent } from '@rrweb/types'
-
 // Import types for use in this file
-import type { MouseInteractions } from 'rrweb'
-import type { eventWithTime, mouseInteractionData, metaEvent } from '@rrweb/types'
+import type { eventWithTime } from '@rrweb/types'
 
-// React Native specific types
-export interface TouchInteractionData {
-  type: MouseInteractions
-  id: number
-  x: number
-  y: number
-  pressure?: number
-  target?: string
-}
 
 export interface ReactNativeScreenData {
   width: number
@@ -35,12 +21,8 @@ export interface ReactNativeTouchData {
   timestamp: number
 }
 
-// Type aliases for convenience
-export type RRWebEvent = eventWithTime
-export type MouseInteractionData = mouseInteractionData
-export type MetaEvent = metaEvent
 
 // Event recording interface
 export interface EventRecorder {
-  recordEvent(event: RRWebEvent): void
+  recordEvent(event: eventWithTime): void
 }

package/src/utils/app-metadata.ts

@@ -0,0 +1,31 @@
+/**
+ * Auto-generated app metadata
+ * This file is generated at build time to provide app metadata without developer intervention
+ */
+
+// This file is automatically generated by the build process
+// It extracts metadata from app.json, app.config.js, or package.json
+
+export interface AppMetadata {
+  name?: string
+  version?: string
+  bundleId?: string
+  buildNumber?: string
+  displayName?: string
+}
+
+// Auto-detected values from project configuration files
+export const APP_METADATA: AppMetadata = {
+  name: "@multiplayer-app/session-recorder-react-native",
+  version: "0.0.1",
+  bundleId: undefined,
+  buildNumber: undefined,
+  displayName: undefined,
+}
+
+/**
+ * Get auto-detected app metadata
+ */
+export function getAutoDetectedAppMetadata(): AppMetadata {
+  return { ...APP_METADATA }
+}