@multiplayer-app/session-recorder-react-native 0.0.1 → 1.0.0

package/src/recorder/screenRecorder.ts

@@ -1,498 +0,0 @@
-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
-  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.3
-  private captureFormat: 'png' | 'jpg' = 'jpg'
-  private screenDimensions: { width: number; height: number } | null = null
-  private currentScreen: string | null = null
-  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
-  private currentImageNodeId: number | null = null
-
-  init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
-    this.config = config
-    this.eventRecorder = eventRecorder
-    this._getScreenDimensions()
-  }
-
-  start(): void {
-    this.isRecording = true
-    this.events = []
-    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
-    this._captureScreen()
-
-    // Screen recording started
-  }
-
-  stop(): void {
-    this.isRecording = false
-    this._stopPeriodicCapture()
-    // Screen recording stopped
-  }
-
-  pause(): void {
-    this.isRecording = false
-    this._stopPeriodicCapture()
-  }
-
-  resume(): void {
-    this.isRecording = true
-    // this._startPeriodicCapture()
-  }
-
-  private _getScreenDimensions(): void {
-    try {
-      this.screenDimensions = Dimensions.get('window')
-    } catch (error) {
-      // Failed to get screen dimensions - silently continue
-      this.screenDimensions = { width: 375, height: 667 } // Default fallback
-    }
-  }
-
-  private _startPeriodicCapture(): void {
-    if (this.captureInterval) {
-      clearInterval(this.captureInterval)
-    }
-
-    // Capture screen every 5 seconds (reduced frequency)
-    this.captureInterval = setInterval(() => {
-      this._captureScreen()
-    }, 5000)
-  }
-
-  private _stopPeriodicCapture(): void {
-    if (this.captureInterval) {
-      clearInterval(this.captureInterval)
-      this.captureInterval = undefined
-    }
-  }
-
-  private async _captureScreen(): Promise<void> {
-    if (!this.isRecording || this.captureCount >= this.maxCaptures) return
-
-    try {
-      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
-
-        if (hasChanged) {
-          // Use incremental snapshot if we have an existing image node, otherwise create full snapshot
-          if (this.currentImageNodeId !== null && 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++
-        }
-      }
-    } catch (error) {
-      this._recordScreenCaptureError(error as Error)
-    }
-  }
-
-  private async _captureScreenBase64(): Promise<string | null> {
-    try {
-      if (!this.viewShotRef) {
-        logger.warn('ScreenRecorder', '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',
-      })
-
-      return result
-    } catch (error) {
-      logger.error('ScreenRecorder', 'Failed to capture screen. Make sure react-native-view-shot is properly installed and linked:', error)
-      return null
-    }
-  }
-
-  private _createAndEmitFullSnapshotEvent(base64Image: string): void {
-    if (!this.screenDimensions) return
-
-    // Use the new createFullSnapshot method
-    const fullSnapshotEvent = this.createFullSnapshot(base64Image)
-    this.recordEvent(fullSnapshotEvent)
-  }
-
-  /**
-   * 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')
-    }
-
-    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 },
-    )
-
-    // Store the image node ID for future incremental updates
-    // The image node ID is the first node created (after the document)
-    this.currentImageNodeId = 0 // 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): eventWithTime {
-    return createIncrementalSnapshotUtil(
-      base64Image,
-      this.captureFormat,
-    )
-  }
-
-
-  /**
-   * 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 === null) {
-      logger.warn('ScreenRecorder', 'No image node ID available for incremental update')
-      return false
-    }
-
-    const incrementalEvent = this.createIncrementalSnapshotWithImageUpdate(base64Image)
-    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++
-  }
-
-  /**
-   * 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
-    }
-
-    // Generate hash for current capture
-    const currentHash = this._generateScreenHash(currentBase64)
-
-    // Compare with previous hash
-    return currentHash !== this.lastScreenHash
-  }
-
-  /**
-   * 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 {
-    return generateScreenHash(base64Image, this.hashSampleSize)
-  }
-
-  private _sendEvent(event: ScreenEvent): void {
-    // Screen event recorded
-    // Send event to backend or store locally
-  }
-
-  private _recordOpenTelemetrySpan(event: ScreenEvent): void {
-    try {
-      const span = trace.getTracer('screen').startSpan(`Screen.${event.type}`, {
-        attributes: {
-          'screen.type': event.type,
-          'screen.timestamp': event.timestamp,
-          'screen.platform': 'react-native',
-        },
-      })
-
-      if (event.metadata) {
-        Object.entries(event.metadata).forEach(([key, value]) => {
-          span.setAttribute(`screen.metadata.${key}`, String(value))
-        })
-      }
-
-      span.setStatus({ code: SpanStatusCode.OK })
-      span.end()
-    } catch (error) {
-      // Failed to record OpenTelemetry span for screen - silently continue
-    }
-  }
-
-  private _recordScreenCaptureError(error: Error): void {
-    try {
-      const span = trace.getTracer('screen').startSpan('Screen.capture.error', {
-        attributes: {
-          'screen.error': true,
-          'screen.error.type': error.name,
-          'screen.error.message': error.message,
-          'screen.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
-    }
-  }
-
-  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
-      return null
-    }
-  }
-
-  // Configuration methods
-  setCaptureInterval(intervalMs: number): void {
-    if (this.captureInterval) {
-      clearInterval(this.captureInterval)
-    }
-
-    if (this.isRecording) {
-      this.captureInterval = setInterval(() => {
-        this._captureScreen()
-      }, intervalMs)
-    }
-  }
-
-  setCaptureQuality(quality: number): void {
-    this.captureQuality = Math.max(0.1, Math.min(1.0, quality))
-  }
-
-  setCaptureFormat(format: 'png' | 'jpg'): void {
-    this.captureFormat = format
-  }
-
-  setMaxCaptures(max: number): void {
-    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 = {
-      screenName,
-      type: 'screenCapture',
-      timestamp: Date.now(),
-      metadata: {
-        screenName,
-        loadTime,
-        performance: 'monitoring',
-        captureCount: this.captureCount,
-      },
-    }
-
-    this.events.push(event)
-    this._sendEvent(event)
-    this._recordOpenTelemetrySpan(event)
-    this.events.push(event)
-    this._sendEvent(event)
-    this._recordOpenTelemetrySpan(event)
-  }
-
-  // Error tracking
-  recordScreenError(error: Error, screenName?: string): void {
-    const event: ScreenEvent = {
-      screenName: screenName || 'unknown',
-      type: 'screenCapture',
-      timestamp: Date.now(),
-      metadata: {
-        error: true,
-        errorType: error.name,
-        errorMessage: error.message,
-        screenName,
-        captureCount: this.captureCount,
-      },
-    }
-
-    this.events.push(event)
-    this._sendEvent(event)
-    this._recordOpenTelemetrySpan(event)
-    this.events.push(event)
-    this._sendEvent(event)
-    this._recordScreenCaptureError(error)
-  }
-
-  // Get recorded events
-  getEvents(): ScreenEvent[] {
-    return [...this.events]
-  }
-
-  // Clear events
-  clearEvents(): void {
-    this.events = []
-    this.captureCount = 0
-  }
-
-  // Get screen capture statistics
-  getScreenStats(): Record<string, any> {
-    const stats = {
-      totalCaptures: this.captureCount,
-      totalEvents: this.events.length,
-      averageCaptureTime: 0,
-      successRate: 0,
-    }
-
-    if (this.events.length > 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
-      stats.successRate = (successfulCaptures / this.events.length) * 100
-    }
-
-    return stats
-  }
-
-  // Get recording status
-  isRecordingEnabled(): boolean {
-    return this.isRecording
-  }
-
-  // Get current configuration
-  getConfiguration(): Record<string, any> {
-    return {
-      captureInterval: this.captureInterval ? 5000 : 0, // Default 5 seconds
-      captureQuality: this.captureQuality,
-      captureFormat: this.captureFormat,
-      maxCaptures: this.maxCaptures,
-      screenDimensions: this.screenDimensions,
-    }
-  }
-
-  // Shutdown
-  shutdown(): void {
-    this.stop()
-    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,203 +0,0 @@
-import { SessionRecorderOptions, IResourceAttributes, ISessionAttributes } from '../types'
-
-export interface StartSessionRequest {
-  name?: string
-  stoppedAt?: string | number
-  sessionAttributes?: ISessionAttributes
-  resourceAttributes?: IResourceAttributes
-  debugSessionData?: Record<string, any>
-}
-
-export interface StopSessionRequest {
-  sessionAttributes?: ISessionAttributes
-  stoppedAt: string | number
-}
-
-export class ApiService {
-  private config?: SessionRecorderOptions
-  private baseUrl: string = 'https://api.multiplayer.app'
-
-  constructor() {
-    this.config = {
-      apiKey: '',
-      apiBaseUrl: '',
-      exporterEndpoint: '',
-      version: '',
-      application: '',
-      environment: '',
-    } as SessionRecorderOptions
-  }
-
-  init(config: SessionRecorderOptions): void {
-
-    this.config = {
-      ...this.config,
-      ...config,
-    }
-    if (config.apiBaseUrl) {
-      this.baseUrl = config.apiBaseUrl
-    }
-  }
-
-  /**
-   * Update the API service configuration
-   * @param config - Partial configuration to update
-   */
-  public updateConfigs(config: Partial<SessionRecorderOptions>) {
-    if (this.config) {
-      this.config = { ...this.config, ...config }
-    }
-  }
-
-  /**
-   * Make a request to the session debugger API
-   * @param path - API endpoint path (relative to the base URL)
-   * @param method - HTTP method (GET, POST, PATCH, etc.)
-   * @param body - request payload
-   * @param signal - AbortSignal to set request's signal
-   */
-  private async makeRequest(
-    path: string,
-    method: string,
-    body?: any,
-    signal?: AbortSignal,
-  ): Promise<any> {
-    const url = `${this.baseUrl}/v0/radar${path}`
-    const params = {
-      method,
-      body: body ? JSON.stringify(body) : null,
-      headers: {
-        'Content-Type': 'application/json',
-        ...(this.config?.apiKey && { 'X-Api-Key': this.config.apiKey }),
-      },
-    }
-
-    try {
-      const response = await fetch(url, {
-        ...params,
-        signal,
-      })
-
-      if (!response.ok) {
-        throw new Error('Network response was not ok: ' + response.statusText)
-      }
-
-      if (response.status === 204) {
-        return null
-      }
-
-      return await response.json()
-    } catch (error: any) {
-      if (error?.name === 'AbortError') {
-        throw new Error('Request aborted')
-      }
-      throw new Error('Error making request: ' + error.message)
-    }
-  }
-
-  /**
-   * Start a new debug session
-   * @param request - Session start request data
-   * @param signal - Optional AbortSignal for request cancellation
-   */
-  async startSession(
-    request: StartSessionRequest,
-    signal?: AbortSignal,
-  ): Promise<any> {
-    return this.makeRequest(
-      '/debug-sessions/start',
-      'POST',
-      request,
-      signal,
-    )
-  }
-
-  /**
-   * Stop an active debug session
-   * @param sessionId - ID of the session to stop
-   * @param request - Session stop request data
-   */
-  async stopSession(
-    sessionId: string,
-    request: StopSessionRequest,
-  ): Promise<any> {
-    return this.makeRequest(
-      `/debug-sessions/${sessionId}/stop`,
-      'PATCH',
-      request,
-    )
-  }
-
-  /**
-   * Cancel an active debug session
-   * @param sessionId - ID of the session to cancel
-   */
-  async cancelSession(sessionId: string): Promise<any> {
-    return this.makeRequest(
-      `/debug-sessions/${sessionId}/cancel`,
-      'DELETE',
-    )
-  }
-
-  /**
-   * Start a new continuous debug session
-   * @param request - Session start request data
-   * @param signal - Optional AbortSignal for request cancellation
-   */
-  async startContinuousDebugSession(
-    request: StartSessionRequest,
-    signal?: AbortSignal,
-  ): Promise<any> {
-    return this.makeRequest(
-      '/continuous-debug-sessions/start',
-      'POST',
-      request,
-      signal,
-    )
-  }
-
-  /**
-   * Save a continuous debug session
-   * @param sessionId - ID of the session to save
-   * @param request - Session save request data
-   * @param signal - Optional AbortSignal for request cancellation
-   */
-  async saveContinuousDebugSession(
-    sessionId: string,
-    request: StartSessionRequest,
-    signal?: AbortSignal,
-  ): Promise<any> {
-    return this.makeRequest(
-      `/continuous-debug-sessions/${sessionId}/save`,
-      'POST',
-      request,
-      signal,
-    )
-  }
-
-  /**
-   * Stop an active continuous debug session
-   * @param sessionId - ID of the session to stop
-   */
-  async stopContinuousDebugSession(sessionId: string): Promise<any> {
-    return this.makeRequest(
-      `/continuous-debug-sessions/${sessionId}/cancel`,
-      'DELETE',
-    )
-  }
-
-  /**
-   * Check debug session should be started remotely
-   */
-  async checkRemoteSession(
-    requestBody: StartSessionRequest,
-    signal?: AbortSignal,
-  ): Promise<{ state: 'START' | 'STOP' }> {
-    return this.makeRequest(
-      '/remote-debug-session/check',
-      'POST',
-      requestBody,
-      signal,
-    )
-  }
-}