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

package/src/recorder/screenRecorder.ts

@@ -1,7 +1,15 @@
-import { ScreenEvent, RecorderConfig, EventType, FullSnapshotEvent, SerializedNodeWithId, EventRecorder } from '../types'
+import { ScreenEvent, RecorderConfig, EventRecorder } from '../types'
+import { eventWithTime } from '@rrweb/types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import { Dimensions } from 'react-native'
 import { captureRef } from 'react-native-view-shot'
+import {
+  createRecordingMetaEvent,
+  createFullSnapshotEvent,
+  createIncrementalSnapshotWithImageUpdate as createIncrementalSnapshotUtil,
+  generateScreenHash,
+  logger,
+} from '../utils'
 
 export class ScreenRecorder implements EventRecorder {
   private config?: RecorderConfig
@@ -21,6 +29,7 @@ export class ScreenRecorder implements EventRecorder {
   private lastScreenHash: string | null = null
   private enableChangeDetection: boolean = true
   private hashSampleSize: number = 100
+  private currentImageNodeId: number | null = null
 
   init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
     this.config = config
@@ -34,6 +43,12 @@ export class ScreenRecorder implements EventRecorder {
     this.captureCount = 0
     this.lastScreenCapture = null
     this.lastScreenHash = null
+    this.currentImageNodeId = null // Reset image node ID for new session
+    logger.info('ScreenRecorder', 'Screen recording started')
+    // Emit screen recording started meta event
+
+    this.recordEvent(createRecordingMetaEvent())
+
     this._startPeriodicCapture()
 
     // Capture initial screen immediately
@@ -72,7 +87,7 @@ export class ScreenRecorder implements EventRecorder {
       clearInterval(this.captureInterval)
     }
 
-    // Capture screen every 5 seconds
+    // Capture screen every 5 seconds (reduced frequency)
     this.captureInterval = setInterval(() => {
       this._captureScreen()
     }, 5000)
@@ -96,7 +111,18 @@ export class ScreenRecorder implements EventRecorder {
         const hasChanged = this.enableChangeDetection ? this._hasScreenChanged(base64Image) : true
 
         if (hasChanged) {
-          this._createAndEmitFullSnapshotEvent(base64Image)
+          // Use incremental snapshot if we have an existing image node, otherwise create full snapshot
+          if (this.currentImageNodeId && this.lastScreenCapture) {
+            const success = this.updateScreenWithIncrementalSnapshot(base64Image)
+            if (!success) {
+              // Fallback to full snapshot if incremental update fails
+              this._createAndEmitFullSnapshotEvent(base64Image)
+            }
+          } else {
+            // First capture or no existing image node - create full snapshot
+            this._createAndEmitFullSnapshotEvent(base64Image)
+          }
+
           this.lastScreenCapture = base64Image
           this.lastScreenHash = this._generateScreenHash(base64Image)
           this.captureCount++
@@ -110,7 +136,7 @@ export class ScreenRecorder implements EventRecorder {
   private async _captureScreenBase64(): Promise<string | null> {
     try {
       if (!this.viewShotRef) {
-        // console.warn('ViewShot ref not available for screen capture')
+        logger.warn('ScreenRecorder', 'ViewShot ref not available for screen capture')
         return null
       }
 
@@ -123,7 +149,7 @@ export class ScreenRecorder implements EventRecorder {
 
       return result
     } catch (error) {
-      // console.error('Failed to capture screen:', error)
+      logger.error('ScreenRecorder', 'Failed to capture screen', error)
       return null
     }
   }
@@ -131,45 +157,87 @@ export class ScreenRecorder implements EventRecorder {
   private _createAndEmitFullSnapshotEvent(base64Image: string): void {
     if (!this.screenDimensions) return
 
-    const { width, height } = this.screenDimensions
+    // Use the new createFullSnapshot method
+    const fullSnapshotEvent = this.createFullSnapshot(base64Image)
+    this.recordEvent(fullSnapshotEvent)
+  }
 
-    // Create a virtual DOM node representing the screen as an image
-    const imageNode: SerializedNodeWithId = {
-      type: 1, // Element node
-      id: this.nodeIdCounter++,
-      tagName: 'img',
-      attributes: {
-        src: `data:image/${this.captureFormat};base64,${base64Image}`,
-        width: width.toString(),
-        height: height.toString(),
-        style: `width: ${width}px; height: ${height}px;`,
-      },
+  /**
+   * Create a full snapshot event with the given base64 image
+   * @param base64Image - Base64 encoded image data
+   * @returns Full snapshot event
+   */
+  createFullSnapshot(base64Image: string): eventWithTime {
+    if (!this.screenDimensions) {
+      throw new Error('Screen dimensions not available')
     }
 
-    // Create the root container
-    const rootNode: SerializedNodeWithId = {
-      type: 1, // Element node
-      id: this.nodeIdCounter++,
-      tagName: 'div',
-      attributes: {
-        style: `width: ${width}px; height: ${height}px; position: relative;`,
-      },
-      childNodes: [imageNode],
-    }
+    const { width, height } = this.screenDimensions
+    this.nodeIdCounter = 1
+
+    // Use utility function to create full snapshot event
+    const fullSnapshotEvent = createFullSnapshotEvent(
+      base64Image,
+      width,
+      height,
+      this.captureFormat,
+      { current: this.nodeIdCounter },
+    )
 
-    const fullSnapshotEvent: FullSnapshotEvent = {
-      type: EventType.FullSnapshot,
-      data: {
-        node: rootNode,
-        initialOffset: {
-          left: 0,
-          top: 0,
-        },
-      },
-      timestamp: Date.now(),
+    // 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
+
+    return fullSnapshotEvent
+  }
+
+  /**
+   * Create an incremental snapshot event with mutation data to update image src
+   * @param base64Image - New base64 encoded image data
+   * @param imageNodeId - ID of the image node to update
+   * @returns Incremental snapshot event with mutation data
+   */
+  createIncrementalSnapshotWithImageUpdate(base64Image: string, imageNodeId: number): 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
+   * @param base64Image - New base64 encoded image data
+   * @returns true if update was successful, false otherwise
+   */
+  updateScreenWithIncrementalSnapshot(base64Image: string): boolean {
+    if (!this.currentImageNodeId) {
+      logger.warn('ScreenRecorder', 'No image node ID available for incremental update')
+      return false
     }
 
-    this.recordEvent(fullSnapshotEvent)
+    const incrementalEvent = this.createIncrementalSnapshotWithImageUpdate(base64Image, this.currentImageNodeId)
+    this.recordEvent(incrementalEvent)
+    return true
+  }
+
+  /**
+   * Force a full snapshot (useful when screen dimensions change or for debugging)
+   * @param base64Image - Base64 encoded image data
+   */
+  forceFullSnapshot(base64Image: string): void {
+    this._createAndEmitFullSnapshotEvent(base64Image)
+    this.lastScreenCapture = base64Image
+    this.lastScreenHash = this._generateScreenHash(base64Image)
+    this.captureCount++
   }
 
   /**
@@ -198,38 +266,9 @@ export class ScreenRecorder implements EventRecorder {
    * @returns Hash string for comparison
    */
   private _generateScreenHash(base64Image: string): string {
-    // Use a simple hash that samples the beginning, middle, and end of the base64 string
-    // This is much faster than comparing the entire string
-    const sampleSize = this.hashSampleSize
-    const start = base64Image.substring(0, sampleSize)
-    const middle = base64Image.substring(
-      Math.floor(base64Image.length / 2) - sampleSize / 2,
-      Math.floor(base64Image.length / 2) + sampleSize / 2,
-    )
-    const end = base64Image.substring(base64Image.length - sampleSize)
-
-    // Combine samples and create a simple hash
-    const combined = start + middle + end
-    return this._simpleHash(combined)
+    return generateScreenHash(base64Image, this.hashSampleSize)
   }
 
-  /**
-   * Simple hash function for string comparison
-   * @param str - String to hash
-   * @returns Hash value as string
-   */
-  private _simpleHash(str: string): string {
-    let hash = 0
-    for (let i = 0; i < str.length; i++) {
-      const char = str.charCodeAt(i)
-      hash = ((hash << 5) - hash) + char
-      hash = hash & hash // Convert to 32-bit integer
-    }
-    return Math.abs(hash).toString(36)
-  }
-
-
-
   private _sendEvent(event: ScreenEvent): void {
     // Screen event recorded
     // Send event to backend or store locally
@@ -277,14 +316,14 @@ export class ScreenRecorder implements EventRecorder {
     }
   }
 
-
-  async captureSpecificElement(elementRef: any, options?: {
-    format?: 'png' | 'jpg' | 'webp'
-    quality?: number
-  }): Promise<string | null> {
+  async captureSpecificElement(
+    elementRef: any,
+    options?: {
+      format?: 'png' | 'jpg' | 'webp'
+      quality?: number
+    },
+  ): Promise<string | null> {
     try {
-
-
       return await captureRef(elementRef)
     } catch (error) {
       // Failed to capture specific element - silently continue
@@ -347,7 +386,9 @@ export class ScreenRecorder implements EventRecorder {
       },
     }
 
-    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
     this.events.push(event)
     this._sendEvent(event)
     this._recordOpenTelemetrySpan(event)
@@ -368,7 +409,9 @@ export class ScreenRecorder implements EventRecorder {
       },
     }
 
-    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
     this.events.push(event)
     this._sendEvent(event)
     this._recordScreenCaptureError(error)
@@ -395,15 +438,13 @@ export class ScreenRecorder implements EventRecorder {
     }
 
     if (this.events.length > 0) {
-      const captureTimes = this.events
-        .map(event => event.metadata?.captureTime || 0)
-        .filter(time => time > 0)
+      const captureTimes = this.events.map((event) => event.metadata?.captureTime || 0).filter((time) => time > 0)
 
       if (captureTimes.length > 0) {
         stats.averageCaptureTime = captureTimes.reduce((a, b) => a + b, 0) / captureTimes.length
       }
 
-      const successfulCaptures = this.events.filter(event => event.dataUrl).length
+      const successfulCaptures = this.events.filter((event) => event.dataUrl).length
       stats.successRate = (successfulCaptures / this.events.length) * 100
     }
 
@@ -446,7 +487,9 @@ export class ScreenRecorder implements EventRecorder {
    * This bypasses the change detection and always captures
    */
   forceCapture(): void {
-    if (!this.isRecording) return
+    if (!this.isRecording) {
+      return
+    }
 
     this._captureScreen()
   }

package/src/session-recorder.ts

@@ -1,8 +1,10 @@
 
 import { SessionType } from '@multiplayer-app/session-recorder-common'
+import { Observable } from 'lib0/observable'
 
 import { TracerReactNativeSDK } from './otel'
 import { RecorderReactNativeSDK } from './recorder'
+import { logger } from './utils'
 
 import {
   ISession,
@@ -22,8 +24,11 @@ import { ApiService, StartSessionRequest, StopSessionRequest } from './services/
 
 // Utility functions for React Native
 
+type SessionRecorderEvents =
+  | 'state-change'
 
-class SessionRecorder implements ISessionRecorder, EventRecorder {
+
+class SessionRecorder extends Observable<SessionRecorderEvents> implements ISessionRecorder, EventRecorder {
   private _isInitialized = false
   private _configs: SessionRecorderConfigs | null = null
   private _apiService = new ApiService()
@@ -63,6 +68,7 @@ class SessionRecorder implements ISessionRecorder, EventRecorder {
   }
   set sessionState(state: SessionState | null) {
     this._sessionState = state
+    this.emit('state-change', [state || SessionState.stopped])
     if (state) {
       this._storageService.saveSessionState(state)
     }
@@ -110,6 +116,7 @@ class SessionRecorder implements ISessionRecorder, EventRecorder {
    * Initialize debugger with default or custom configurations
    */
   constructor() {
+    super()
     // Initialize with stored session data if available
     StorageService.initialize()
   }
@@ -130,7 +137,7 @@ class SessionRecorder implements ISessionRecorder, EventRecorder {
         this.sessionType = SessionType.PLAIN
       }
     } catch (error) {
-      console.error('Failed to load stored session data:', error)
+      logger.error('SessionRecorder', 'Failed to load stored session data', error)
       this.session = null
       this.sessionId = null
       this.sessionState = null
@@ -156,10 +163,10 @@ class SessionRecorder implements ISessionRecorder, EventRecorder {
       this._tracer.init(this._configs)
 
     } catch (error) {
-      console.error('Failed to initialize API service:', error)
+      logger.error('SessionRecorder', 'Failed to initialize API service', error)
     }
     if (this._configs.apiKey) {
-      this._recorder.init(this._configs, this)
+      this._recorder.init(this._configs)
     }
 
     if (this.sessionId && (this.sessionState === SessionState.started || this.sessionState === SessionState.paused)) {
@@ -415,7 +422,7 @@ class SessionRecorder implements ISessionRecorder, EventRecorder {
   private _setupSessionAndStart(session: ISession, configureExporters: boolean = true): void {
     if (configureExporters && session.tempApiKey) {
       this._configs!.apiKey = session.tempApiKey
-      this._recorder.init(this._configs!, this)
+      this._recorder.init(this._configs!)
       this._tracer.init(this._configs!)
       this._apiService.updateConfigs({ apiKey: this._configs!.apiKey })
     }

package/src/types/index.ts

@@ -1,3 +1,46 @@
 export * from './session-recorder'
 export * from './session'
-export * from './rrweb'
+
+// 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'
+
+// React Native specific types
+export interface TouchInteractionData {
+  type: MouseInteractions
+  id: number
+  x: number
+  y: number
+  pressure?: number
+  target?: string
+}
+
+export interface ReactNativeScreenData {
+  width: number
+  height: number
+  base64Image: string
+  timestamp: number
+  screenName?: string
+}
+
+export interface ReactNativeTouchData {
+  pageX: number
+  pageY: number
+  target?: string
+  pressure?: number
+  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
+}

package/src/utils/index.ts

@@ -4,3 +4,5 @@ export * from './session'
 export * from './time'
 export * from './type-utils'
 export * from './request-utils'
+export * from './rrweb-events'
+export * from './logger'

package/src/utils/logger.ts

@@ -0,0 +1,225 @@
+/**
+ * Centralized logger utility for the session recorder
+ * Provides consistent logging across all components
+ */
+
+export enum LogLevel {
+  DEBUG = 0,
+  INFO = 1,
+  WARN = 2,
+  ERROR = 3
+}
+
+export interface LoggerConfig {
+  level: LogLevel
+  enableConsole: boolean
+  enablePrefix: boolean
+  prefix: string
+}
+
+class Logger {
+  private config: LoggerConfig = {
+    level: LogLevel.INFO,
+    enableConsole: true,
+    enablePrefix: true,
+    prefix: '[SessionRecorder]',
+  }
+
+  private componentPrefixes: Map<string, string> = new Map([
+    ['ScreenRecorder', '📸'],
+    ['GestureRecorder', '👆'],
+    ['GestureCaptureWrapper', '📸'],
+    ['SessionRecorderContext', '🎯'],
+    ['EventExporter', '📤'],
+    ['NavigationTracker', '📸'],
+    ['RecorderReactNativeSDK', '📤'],
+    ['DEBUGGER_LIB', '🔍'],
+  ])
+
+  /**
+   * Configure the logger
+   * @param config - Logger configuration
+   */
+  configure(config: Partial<LoggerConfig>): void {
+    this.config = { ...this.config, ...config }
+  }
+
+  /**
+   * Set the log level
+   * @param level - Log level to set
+   */
+  setLevel(level: LogLevel): void {
+    this.config.level = level
+  }
+
+  /**
+   * Enable or disable console output
+   * @param enabled - Whether to enable console output
+   */
+  setConsoleEnabled(enabled: boolean): void {
+    this.config.enableConsole = enabled
+  }
+
+  /**
+   * Add or update a component prefix
+   * @param component - Component name
+   * @param emoji - Emoji prefix for the component
+   */
+  setComponentPrefix(component: string, emoji: string): void {
+    this.componentPrefixes.set(component, emoji)
+  }
+
+  /**
+   * Get the formatted prefix for a component
+   * @param component - Component name
+   * @returns Formatted prefix string
+   */
+  private getPrefix(component: string): string {
+    if (!this.config.enablePrefix) return ''
+
+    const emoji = this.componentPrefixes.get(component) || '📝'
+    return `${this.config.prefix} ${emoji} [${component}]`
+  }
+
+  /**
+   * Check if a log level should be output
+   * @param level - Log level to check
+   * @returns True if should output
+   */
+  private shouldLog(level: LogLevel): boolean {
+    return level >= this.config.level && this.config.enableConsole
+  }
+
+  /**
+   * Format the log message
+   * @param component - Component name
+   * @param level - Log level
+   * @param message - Log message
+   * @param data - Additional data to log
+   * @returns Formatted log message
+   */
+  private formatMessage(component: string, level: LogLevel, message: string, data?: any): string {
+    const prefix = this.getPrefix(component)
+    const timestamp = new Date().toISOString()
+    const levelName = LogLevel[level]
+
+    let formattedMessage = `${prefix} ${levelName} ${message}`
+
+    if (data !== undefined) {
+      formattedMessage += ` ${JSON.stringify(data)}`
+    }
+
+    return formattedMessage
+  }
+
+  /**
+   * Log a debug message
+   * @param component - Component name
+   * @param message - Log message
+   * @param data - Additional data to log
+   */
+  debug(component: string, message: string, data?: any): void {
+    if (!this.shouldLog(LogLevel.DEBUG)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.DEBUG, message, data)
+    // eslint-disable-next-line no-console
+    console.log(formattedMessage)
+  }
+
+  /**
+   * Log an info message
+   * @param component - Component name
+   * @param message - Log message
+   * @param data - Additional data to log
+   */
+  info(component: string, message: string, data?: any): void {
+    if (!this.shouldLog(LogLevel.INFO)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.INFO, message, data)
+    // eslint-disable-next-line no-console
+    console.log(formattedMessage)
+  }
+
+  /**
+   * Log a warning message
+   * @param component - Component name
+   * @param message - Log message
+   * @param data - Additional data to log
+   */
+  warn(component: string, message: string, data?: any): void {
+    if (!this.shouldLog(LogLevel.WARN)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.WARN, message, data)
+    // eslint-disable-next-line no-console
+    console.warn(formattedMessage)
+  }
+
+  /**
+   * Log an error message
+   * @param component - Component name
+   * @param message - Log message
+   * @param data - Additional data to log
+   */
+  error(component: string, message: string, data?: any): void {
+    if (!this.shouldLog(LogLevel.ERROR)) return
+
+    const formattedMessage = this.formatMessage(component, LogLevel.ERROR, message, data)
+    // eslint-disable-next-line no-console
+    console.error(formattedMessage)
+  }
+
+  /**
+   * Log a success message (info level with success emoji)
+   * @param component - Component name
+   * @param message - Log message
+   * @param data - Additional data to log
+   */
+  success(component: string, message: string, data?: any): void {
+    if (!this.shouldLog(LogLevel.INFO)) return
+
+    const prefix = this.getPrefix(component)
+    const timestamp = new Date().toISOString()
+    const formattedMessage = `${prefix} ✅ ${message}`
+
+    let fullMessage = formattedMessage
+    if (data !== undefined) {
+      fullMessage += ` ${JSON.stringify(data)}`
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(fullMessage)
+  }
+
+  /**
+   * Log a failure message (error level with failure emoji)
+   * @param component - Component name
+   * @param message - Log message
+   * @param data - Additional data to log
+   */
+  failure(component: string, message: string, data?: any): void {
+    if (!this.shouldLog(LogLevel.ERROR)) return
+
+    const prefix = this.getPrefix(component)
+    const timestamp = new Date().toISOString()
+    const formattedMessage = `${prefix} ❌ ${message}`
+
+    let fullMessage = formattedMessage
+    if (data !== undefined) {
+      fullMessage += ` ${JSON.stringify(data)}`
+    }
+
+    // eslint-disable-next-line no-console
+    console.error(fullMessage)
+  }
+}
+
+// Export a singleton instance
+export const logger = new Logger()
+
+// Export convenience functions for common use cases
+export const logDebug = (component: string, message: string, data?: any) => logger.debug(component, message, data)
+export const logInfo = (component: string, message: string, data?: any) => logger.info(component, message, data)
+export const logWarn = (component: string, message: string, data?: any) => logger.warn(component, message, data)
+export const logError = (component: string, message: string, data?: any) => logger.error(component, message, data)
+export const logSuccess = (component: string, message: string, data?: any) => logger.success(component, message, data)
+export const logFailure = (component: string, message: string, data?: any) => logger.failure(component, message, data)