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

package/src/recorder/screenRecorder.ts

@@ -1,22 +1,30 @@
-import { ScreenEvent, RecorderConfig } from '../types'
+import { ScreenEvent, RecorderConfig, EventType, FullSnapshotEvent, SerializedNodeWithId, EventRecorder } from '../types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
-import { Dimensions, AppRegistry } from 'react-native'
-import { captureRef, captureScreen } from 'react-native-view-shot'
+import { Dimensions } from 'react-native'
+import { captureRef } from 'react-native-view-shot'
 
-export class ScreenRecorder {
+export class ScreenRecorder implements EventRecorder {
   private config?: RecorderConfig
   private isRecording = false
   private events: ScreenEvent[] = []
   private captureInterval?: NodeJS.Timeout
   private captureCount: number = 0
   private maxCaptures: number = 100 // Limit captures to prevent memory issues
-  private captureQuality: number = 0.8
-  private captureFormat: 'png' | 'jpg' | 'webp' = 'png'
+  private captureQuality: number = 0.3
+  private captureFormat: 'png' | 'jpg' = 'jpg'
   private screenDimensions: { width: number; height: number } | null = null
   private currentScreen: string | null = null
-
-  init(config: RecorderConfig): void {
+  private eventRecorder?: EventRecorder
+  private nodeIdCounter: number = 1
+  private viewShotRef: any = null
+  private lastScreenCapture: string | null = null
+  private lastScreenHash: string | null = null
+  private enableChangeDetection: boolean = true
+  private hashSampleSize: number = 100
+
+  init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
     this.config = config
+    this.eventRecorder = eventRecorder
     this._getScreenDimensions()
   }
 
@@ -24,7 +32,13 @@ export class ScreenRecorder {
     this.isRecording = true
     this.events = []
     this.captureCount = 0
+    this.lastScreenCapture = null
+    this.lastScreenHash = null
     this._startPeriodicCapture()
+
+    // Capture initial screen immediately
+    this._captureScreen()
+
     // Screen recording started
   }
 
@@ -41,7 +55,7 @@ export class ScreenRecorder {
 
   resume(): void {
     this.isRecording = true
-    this._startPeriodicCapture()
+    // this._startPeriodicCapture()
   }
 
   private _getScreenDimensions(): void {
@@ -75,121 +89,146 @@ export class ScreenRecorder {
     if (!this.isRecording || this.captureCount >= this.maxCaptures) return
 
     try {
-      const startTime = Date.now()
-      const screenData = await this._performScreenCapture()
-      const captureTime = Date.now() - startTime
-
-      if (screenData) {
-        const screenEvent: ScreenEvent = {
-          screenName: this.currentScreen || 'unknown',
-          type: 'screenCapture',
-          timestamp: Date.now(),
-          dataUrl: screenData,
-          metadata: {
-            captureTime,
-            captureCount: this.captureCount + 1,
-            quality: this.captureQuality,
-            format: this.captureFormat,
-            screenWidth: this.screenDimensions?.width,
-            screenHeight: this.screenDimensions?.height,
-          },
-        }
+      const base64Image = await this._captureScreenBase64()
+
+      if (base64Image) {
+        // Check if screen has changed by comparing with previous capture
+        const hasChanged = this.enableChangeDetection ? this._hasScreenChanged(base64Image) : true
 
-        this.events.push(screenEvent)
-        this.captureCount++
-        this._sendEvent(screenEvent)
-        this._recordOpenTelemetrySpan(screenEvent)
+        if (hasChanged) {
+          this._createAndEmitFullSnapshotEvent(base64Image)
+          this.lastScreenCapture = base64Image
+          this.lastScreenHash = this._generateScreenHash(base64Image)
+          this.captureCount++
+        }
       }
     } catch (error) {
-      // Failed to capture screen - silently continue
-      this._recordScreenCaptureError(error instanceof Error ? error : new Error(String(error)))
+      this._recordScreenCaptureError(error as Error)
     }
   }
 
+  private async _captureScreenBase64(): Promise<string | null> {
+    try {
+      if (!this.viewShotRef) {
+        // console.warn('ViewShot ref not available for screen capture')
+        return null
+      }
 
+      // Capture the screen using react-native-view-shot
+      const result = await captureRef(this.viewShotRef, {
+        format: this.captureFormat,
+        quality: this.captureQuality,
+        result: 'base64',
+      })
 
-  private async _performScreenCapture(): Promise<string | null> {
-    try {
-      // Try react-native-view-shot screen capture first
-      return await this._captureWithViewShot()
+      return result
     } catch (error) {
-      // react-native-view-shot not available - silently continue
+      // console.error('Failed to capture screen:', error)
+      return null
     }
+  }
 
-    try {
-      // Try react-native-screenshot
-      const Screenshot = require('react-native-screenshot')
-      if (Screenshot && Screenshot.takeScreenshot) {
-        return await this._captureWithScreenshot()
-      }
-    } catch (error) {
-      // react-native-screenshot not available - silently continue
+  private _createAndEmitFullSnapshotEvent(base64Image: string): void {
+    if (!this.screenDimensions) return
+
+    const { width, height } = this.screenDimensions
+
+    // 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;`,
+      },
     }
 
-    // Fallback to placeholder
-    return this._createPlaceholderImage()
-  }
-
-  private async _captureWithViewShot(): Promise<string | null> {
-    try {
-      // Use captureScreen for full screen capture
+    // 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],
+    }
 
-      return await captureScreen()
-    } catch (error) {
-      // Failed to capture with ViewShot - silently continue
+    const fullSnapshotEvent: FullSnapshotEvent = {
+      type: EventType.FullSnapshot,
+      data: {
+        node: rootNode,
+        initialOffset: {
+          left: 0,
+          top: 0,
+        },
+      },
+      timestamp: Date.now(),
     }
-    return null
-  }
 
-  private async _captureWithScreenshot(): Promise<string | null> {
-    try {
-      const Screenshot = require('react-native-screenshot')
-      const options = {
-        format: this.captureFormat,
-        quality: this.captureQuality,
-      }
+    this.recordEvent(fullSnapshotEvent)
+  }
 
-      return await Screenshot.takeScreenshot(options)
-    } catch (error) {
-      // Failed to capture with Screenshot - silently continue
+  /**
+   * Check if the screen has changed by comparing with the previous capture
+   * @param currentBase64 - Current screen capture as base64
+   * @returns true if screen has changed, false otherwise
+   */
+  private _hasScreenChanged(currentBase64: string): boolean {
+    // If this is the first capture, consider it changed
+    if (!this.lastScreenCapture) {
+      return true
     }
-    return null
+
+    // Generate hash for current capture
+    const currentHash = this._generateScreenHash(currentBase64)
+
+    // Compare with previous hash
+    return currentHash !== this.lastScreenHash
   }
 
-  private _getRootViewRef(): any {
-    try {
-      // Try to get the root view reference
-      const appName = AppRegistry.getAppKeys()[0]
-      return appName ? { current: null } : null
-    } catch (error) {
-      // Failed to get root view ref - silently continue
-      return null
-    }
+  /**
+   * Generate a simple hash for screen comparison
+   * This is a lightweight hash that focuses on the beginning and end of the base64 string
+   * to detect changes without doing a full comparison
+   * @param base64Image - Base64 encoded image
+   * @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)
   }
 
-  private _createPlaceholderImage(): string {
-    // Create a simple placeholder image data URL
-    // Note: This won't work in React Native environment, but provides a fallback
-    const width = this.screenDimensions?.width || 375
-    const height = this.screenDimensions?.height || 667
+  /**
+   * 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)
+  }
 
-    // Return a simple data URL for placeholder
-    const svgContent = `
-      <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
-        <rect width="100%" height="100%" fill="#f0f0f0"/>
-        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666" font-family="Arial" font-size="16">
-          Screen Capture Placeholder
-        </text>
-        <text x="50%" y="60%" text-anchor="middle" dy=".3em" fill="#666" font-family="Arial" font-size="14">
-          Captured at ${new Date().toLocaleTimeString()}
-        </text>
-      </svg>
-    `
 
-    // Use a simple base64 encoding alternative for React Native
-    const base64Content = Buffer.from(svgContent, 'utf8').toString('base64')
-    return `data:image/svg+xml;base64,${base64Content}`
-  }
 
   private _sendEvent(event: ScreenEvent): void {
     // Screen event recorded
@@ -238,15 +277,6 @@ export class ScreenRecorder {
     }
   }
 
-  // Manual screen capture methods
-  async captureScreenNow(): Promise<string | null> {
-    if (!this.isRecording) {
-      // Screen recording not active - silently continue
-      return null
-    }
-
-    return await this._performScreenCapture()
-  }
 
   async captureSpecificElement(elementRef: any, options?: {
     format?: 'png' | 'jpg' | 'webp'
@@ -279,7 +309,7 @@ export class ScreenRecorder {
     this.captureQuality = Math.max(0.1, Math.min(1.0, quality))
   }
 
-  setCaptureFormat(format: 'png' | 'jpg' | 'webp'): void {
+  setCaptureFormat(format: 'png' | 'jpg'): void {
     this.captureFormat = format
   }
 
@@ -287,6 +317,22 @@ export class ScreenRecorder {
     this.maxCaptures = Math.max(1, max)
   }
 
+  /**
+   * Enable or disable change detection
+   * @param enabled - Whether to enable change detection
+   */
+  setChangeDetection(enabled: boolean): void {
+    this.enableChangeDetection = enabled
+  }
+
+  /**
+   * Set the hash sample size for change detection
+   * @param size - Number of characters to sample from each part of the image
+   */
+  setHashSampleSize(size: number): void {
+    this.hashSampleSize = Math.max(10, Math.min(1000, size))
+  }
+
   // Performance monitoring
   recordScreenPerformance(screenName: string, loadTime: number): void {
     const event: ScreenEvent = {
@@ -386,4 +432,32 @@ export class ScreenRecorder {
     this.clearEvents()
     // Screen recorder shutdown
   }
+
+  /**
+   * Set the viewshot ref for screen capture
+   * @param ref - React Native View ref for screen capture
+   */
+  setViewShotRef(ref: any): void {
+    this.viewShotRef = ref
+  }
+
+  /**
+   * Force capture screen (useful after touch interactions)
+   * This bypasses the change detection and always captures
+   */
+  forceCapture(): void {
+    if (!this.isRecording) return
+
+    this._captureScreen()
+  }
+
+  /**
+   * Record an rrweb event
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: any): void {
+    if (this.eventRecorder) {
+      this.eventRecorder.recordEvent(event)
+    }
+  }
 }

package/src/services/api.service.ts

@@ -1,13 +1,5 @@
 import { SessionRecorderOptions, IResourceAttributes, ISessionAttributes } from '../types'
 
-// Type definitions for fetch API
-type RequestInit = {
-  method?: string
-  headers?: Record<string, string>
-  body?: string
-  signal?: AbortSignal
-}
-
 export interface StartSessionRequest {
   name?: string
   stoppedAt?: string | number
@@ -37,6 +29,7 @@ export class ApiService {
   }
 
   init(config: SessionRecorderOptions): void {
+
     this.config = {
       ...this.config,
       ...config,

package/src/services/storage.service.ts

@@ -87,6 +87,7 @@ export class StorageService {
   saveSessionState(state: SessionState): void {
     try {
       StorageService.cache.sessionState = state
+
       AsyncStorage.setItem(StorageService.SESSION_STATE_KEY, state).catch(error => {
         // Failed to persist session state - silently continue
       })

package/src/session-recorder.ts

@@ -9,7 +9,9 @@ import {
   SessionState,
   ISessionRecorder,
   SessionRecorderConfigs,
-  SessionRecorderOptions
+  SessionRecorderOptions,
+  RRWebEvent,
+  EventRecorder
 } from './types'
 import { getFormattedDate, isSessionActive, getNavigatorInfo } from './utils'
 import { setMaxCapturingHttpPayloadSize, setShouldRecordHttpData } from './patch/xhr'
@@ -21,7 +23,7 @@ import { ApiService, StartSessionRequest, StopSessionRequest } from './services/
 // Utility functions for React Native
 
 
-class SessionRecorder implements ISessionRecorder {
+class SessionRecorder implements ISessionRecorder, EventRecorder {
   private _isInitialized = false
   private _configs: SessionRecorderConfigs | null = null
   private _apiService = new ApiService()
@@ -109,13 +111,13 @@ class SessionRecorder implements ISessionRecorder {
    */
   constructor() {
     // Initialize with stored session data if available
-    this._loadStoredSessionData()
+    StorageService.initialize()
   }
 
   private async _loadStoredSessionData(): Promise<void> {
     try {
+      await StorageService.initialize()
       const storedData = await this._storageService.getAllSessionData()
-
       if (isSessionActive(storedData.sessionObject, storedData.sessionType === SessionType.CONTINUOUS)) {
         this.session = storedData.sessionObject
         this.sessionId = storedData.sessionId
@@ -142,20 +144,22 @@ class SessionRecorder implements ISessionRecorder {
    */
   public async init(configs: SessionRecorderOptions): Promise<void> {
     this._configs = getSessionRecorderConfig({ ...this._configs, ...configs })
-
     this._isInitialized = true
     this._checkOperation('init')
-
-    await StorageService.initialize()
-
+    await this._loadStoredSessionData()
     setMaxCapturingHttpPayloadSize(this._configs.maxCapturingHttpPayloadSize || DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE)
     setShouldRecordHttpData(!this._configs.captureBody, this._configs.captureHeaders)
 
-    this._tracer.init(this._configs)
-    this._apiService.init(this._configs)
 
+    try {
+      this._apiService.init(this._configs)
+      this._tracer.init(this._configs)
+
+    } catch (error) {
+      console.error('Failed to initialize API service:', error)
+    }
     if (this._configs.apiKey) {
-      this._recorder.init(this._configs)
+      this._recorder.init(this._configs, this)
     }
 
     if (this.sessionId && (this.sessionState === SessionState.started || this.sessionState === SessionState.paused)) {
@@ -411,7 +415,7 @@ class SessionRecorder implements ISessionRecorder {
   private _setupSessionAndStart(session: ISession, configureExporters: boolean = true): void {
     if (configureExporters && session.tempApiKey) {
       this._configs!.apiKey = session.tempApiKey
-      this._recorder.init(this._configs!)
+      this._recorder.init(this._configs!, this)
       this._tracer.init(this._configs!)
       this._apiService.updateConfigs({ apiKey: this._configs!.apiKey })
     }
@@ -510,6 +514,81 @@ class SessionRecorder implements ISessionRecorder {
       this._session.updatedAt = new Date().toISOString()
     }
   }
+
+  /**
+   * Record a custom rrweb event
+   * Note: Screen capture and touch events are recorded automatically when session is started
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: RRWebEvent): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward the event to the recorder SDK
+    this._recorder.recordEvent(event)
+  }
+
+  /**
+   * Record touch start event (internal use - touch recording is automatic)
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   * @internal
+   */
+  recordTouchStart(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward to gesture recorder
+    this._recorder.recordTouchStart(x, y, target, pressure)
+  }
+
+  /**
+   * Record touch move event (internal use - touch recording is automatic)
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   * @internal
+   */
+  recordTouchMove(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward to gesture recorder
+    this._recorder.recordTouchMove(x, y, target, pressure)
+  }
+
+  /**
+   * Record touch end event (internal use - touch recording is automatic)
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   * @internal
+   */
+  recordTouchEnd(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward to gesture recorder
+    this._recorder.recordTouchEnd(x, y, target, pressure)
+  }
+
+  /**
+   * Set the viewshot ref for screen capture
+   * @param ref - React Native View ref for screen capture
+   */
+  setViewShotRef(ref: any): void {
+    if (this._recorder) {
+      this._recorder.setViewShotRef(ref)
+    }
+  }
 }
 
 export default new SessionRecorder()

package/src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './session-recorder'
-export * from './session'
+export * from './session'
+export * from './rrweb'

package/src/types/rrweb.ts

@@ -0,0 +1,122 @@
+/**
+ * RRWeb event types for React Native session recording
+ * Based on rrweb specification: https://github.com/rrweb-io/rrweb
+ */
+
+export enum EventType {
+  DomContentLoaded = 0,
+  Load = 1,
+  FullSnapshot = 2,
+  IncrementalSnapshot = 3,
+  Meta = 4,
+  Custom = 5,
+  Plugin = 6,
+}
+
+export enum IncrementalSource {
+  Mutation = 0,
+  MouseMove = 1,
+  MouseInteraction = 2,
+  Scroll = 3,
+  ViewportResize = 4,
+  Input = 5,
+  TouchMove = 6,
+  MediaInteraction = 7,
+  StyleSheetRule = 8,
+  CanvasMutation = 9,
+  Font = 10,
+  Selection = 11,
+  AdoptedStyleSheet = 12,
+}
+
+export enum MouseInteractionType {
+  MouseUp = 0,
+  MouseDown = 1,
+  Click = 2,
+  ContextMenu = 3,
+  DblClick = 4,
+  Focus = 5,
+  Blur = 6,
+  TouchStart = 7,
+  TouchMove = 8,
+  TouchEnd = 9,
+  TouchCancel = 10,
+}
+
+export interface MouseInteractionData {
+  type: MouseInteractionType
+  id: number
+  x: number
+  y: number
+}
+
+export interface TouchInteractionData {
+  type: MouseInteractionType
+  id: number
+  x: number
+  y: number
+  pressure?: number
+  target?: string
+}
+
+export interface FullSnapshotEvent {
+  type: EventType.FullSnapshot
+  data: {
+    node: SerializedNodeWithId
+    initialOffset: {
+      left: number
+      top: number
+    }
+  }
+  timestamp: number
+}
+
+export interface IncrementalSnapshotEvent {
+  type: EventType.IncrementalSnapshot
+  data: {
+    source: IncrementalSource
+    id?: number
+    x?: number
+    y?: number
+    type?: MouseInteractionType
+  } & Partial<MouseInteractionData> & Partial<TouchInteractionData>
+  timestamp: number
+}
+
+export interface SerializedNodeWithId {
+  type: number
+  id: number
+  tagName?: string
+  attributes?: Record<string, string>
+  childNodes?: SerializedNodeWithId[]
+  textContent?: string
+  style?: Record<string, string>
+}
+
+export interface RRWebEvent {
+  type: EventType
+  data: any
+  timestamp: number
+}
+
+// React Native specific types
+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
+}
+
+// Event recording interface
+export interface EventRecorder {
+  recordEvent(event: RRWebEvent): void
+}