@multiplayer-app/session-recorder-react-native 0.0.1-beta.3 → 0.0.1-beta.5

package/src/services/screenMaskingService.ts

@@ -0,0 +1,114 @@
+import SessionRecorderNative, { MaskingOptions } from '../native/SessionRecorderNative'
+import { logger } from '../utils'
+
+export interface ScreenMaskingConfig {
+  /** Whether screen masking is enabled */
+  enabled: boolean
+  /** Whether to mask all input fields automatically */
+  inputMasking: boolean
+  /** Default masking options */
+  defaultOptions?: MaskingOptions
+}
+
+export class ScreenMaskingService {
+  private config: ScreenMaskingConfig
+  private isAvailable: boolean = false
+
+  constructor(config: ScreenMaskingConfig = { enabled: true, inputMasking: true }) {
+    this.config = config
+    this.checkAvailability()
+  }
+
+  /**
+   * Check if the native masking module is available
+   */
+  private checkAvailability(): void {
+    try {
+      // Try to access the native module to check if it's available
+      if (SessionRecorderNative && typeof SessionRecorderNative.captureAndMask === 'function') {
+        this.isAvailable = true
+        logger.info('ScreenMaskingService', 'Screen masking native module is available')
+      } else {
+        this.isAvailable = false
+        logger.warn('ScreenMaskingService', 'Screen masking native module is not available - auto-linking may still be in progress')
+
+        // Retry after a delay for auto-linking
+        setTimeout(() => {
+          this.checkAvailability()
+        }, 2000)
+      }
+    } catch (error) {
+      this.isAvailable = false
+      logger.error('ScreenMaskingService', 'Error checking screen masking availability:', error)
+    }
+  }
+
+  /**
+   * Capture screen with masking applied
+   */
+  async captureMaskedScreen(options?: MaskingOptions): Promise<string | null> {
+    if (!this.isAvailable || !this.config.enabled) {
+      logger.warn('ScreenMaskingService', 'Screen masking is not available or disabled')
+      return null
+    }
+
+    try {
+      const maskingOptions: MaskingOptions = {
+        ...this.config.defaultOptions,
+        ...options,
+        inputMasking: this.config.inputMasking,
+      }
+
+      const maskedImageBase64 = await SessionRecorderNative.captureAndMaskWithOptions(maskingOptions)
+      logger.info('ScreenMaskingService', 'Successfully captured masked screen')
+      return maskedImageBase64
+    } catch (error) {
+      logger.error('ScreenMaskingService', 'Failed to capture masked screen:', error)
+      return null
+    }
+  }
+
+  /**
+   * Capture screen with basic masking (no custom options)
+   */
+  async captureMaskedScreenBasic(): Promise<string | null> {
+    if (!this.isAvailable || !this.config.enabled) {
+      logger.warn('ScreenMaskingService', 'Screen masking is not available or disabled')
+      return null
+    }
+
+    try {
+      const maskedImageBase64 = await SessionRecorderNative.captureAndMask()
+      logger.info('ScreenMaskingService', 'Successfully captured masked screen (basic)')
+      return maskedImageBase64
+    } catch (error) {
+      logger.error('ScreenMaskingService', 'Failed to capture masked screen (basic):', error)
+      return null
+    }
+  }
+
+  /**
+   * Update the masking configuration
+   */
+  updateConfig(config: Partial<ScreenMaskingConfig>): void {
+    this.config = { ...this.config, ...config }
+    logger.info('ScreenMaskingService', 'Screen masking configuration updated')
+  }
+
+  /**
+   * Check if screen masking is available
+   */
+  isScreenMaskingAvailable(): boolean {
+    return this.isAvailable && this.config.enabled
+  }
+
+  /**
+   * Get the current configuration
+   */
+  getConfig(): ScreenMaskingConfig {
+    return { ...this.config }
+  }
+}
+
+// Create a singleton instance
+export const screenMaskingService = new ScreenMaskingService()

package/src/services/storage.service.ts

@@ -1,12 +1,14 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { SessionType } from '@multiplayer-app/session-recorder-common'
 import { ISession, SessionState } from '../types'
+import { logger } from '../utils'
 
 interface CacheData {
   sessionId: string | null
   sessionType: SessionType | null
   sessionState: SessionState | null
   sessionObject: ISession | null
+  floatingButtonPosition: { x: number; y: number } | null
 }
 
 export class StorageService {
@@ -14,29 +16,42 @@ export class StorageService {
   private static readonly SESSION_TYPE_KEY = 'session_type'
   private static readonly SESSION_STATE_KEY = 'session_state'
   private static readonly SESSION_OBJECT_KEY = 'session_object'
+  private static readonly FLOATING_BUTTON_POSITION_KEY = 'floating_button_position'
 
   private static cache: CacheData = {
     sessionId: null,
     sessionType: null,
     sessionState: null,
     sessionObject: null,
+    floatingButtonPosition: null,
   }
 
   private static cacheInitialized = false
+  private static instance: StorageService | null = null
+  private static positionSaveTimeout: NodeJS.Timeout | null = null
 
-  constructor() {
-    StorageService.initialize()
+  private constructor() {
+    // Private constructor for singleton
+  }
+
+  static getInstance(): StorageService {
+    if (!StorageService.instance) {
+      StorageService.instance = new StorageService()
+      StorageService.initialize()
+    }
+    return StorageService.instance
   }
 
   private static async initializeCache(): Promise<void> {
     if (StorageService.cacheInitialized) return
 
     try {
-      const [sessionId, sessionType, sessionState, sessionObject] = await Promise.all([
+      const [sessionId, sessionType, sessionState, sessionObject, floatingButtonPosition] = await Promise.all([
         AsyncStorage.getItem(StorageService.SESSION_ID_KEY),
         AsyncStorage.getItem(StorageService.SESSION_TYPE_KEY),
         AsyncStorage.getItem(StorageService.SESSION_STATE_KEY),
         AsyncStorage.getItem(StorageService.SESSION_OBJECT_KEY),
+        AsyncStorage.getItem(StorageService.FLOATING_BUTTON_POSITION_KEY),
       ])
 
       StorageService.cache = {
@@ -44,6 +59,7 @@ export class StorageService {
         sessionType: sessionType as SessionType | null,
         sessionState: sessionState as SessionState | null,
         sessionObject: sessionObject ? JSON.parse(sessionObject) : null,
+        floatingButtonPosition: floatingButtonPosition ? JSON.parse(floatingButtonPosition) : null,
       }
       StorageService.cacheInitialized = true
     } catch (error) {
@@ -121,6 +137,7 @@ export class StorageService {
     try {
       // Clear cache immediately
       StorageService.cache = {
+        ...StorageService.cache,
         sessionId: null,
         sessionType: null,
         sessionState: null,
@@ -142,7 +159,7 @@ export class StorageService {
     }
   }
 
-  getAllSessionData(): CacheData {
+  getAllSessionData(): Omit<CacheData, 'floatingButtonPosition'> {
     return {
       sessionId: StorageService.cache.sessionId,
       sessionType: StorageService.cache.sessionType,
@@ -151,6 +168,30 @@ export class StorageService {
     }
   }
 
+  saveFloatingButtonPosition(position: { x: number; y: number }): void {
+    try {
+      StorageService.cache.floatingButtonPosition = position
+
+      // Debounce AsyncStorage writes to avoid excessive I/O
+      if (StorageService.positionSaveTimeout) {
+        clearTimeout(StorageService.positionSaveTimeout)
+      }
+
+      StorageService.positionSaveTimeout = setTimeout(() => {
+        AsyncStorage.setItem(StorageService.FLOATING_BUTTON_POSITION_KEY, JSON.stringify(position)).catch(error => {
+          logger.error('StorageService', 'Failed to persist floating button position', error)
+        })
+      }, 100) // 100ms debounce
+    } catch (error) {
+      logger.error('StorageService', 'Failed to save floating button position', error)
+      throw error
+    }
+  }
+
+  getFloatingButtonPosition(): { x: number; y: number } | null {
+    return StorageService.cache.floatingButtonPosition
+  }
+
   // Initialize cache on first use - call this method when the service is first used
   static async initialize(): Promise<void> {
     await StorageService.initializeCache()

package/src/session-recorder.ts

@@ -16,7 +16,7 @@ import {
 } from './types'
 import { getFormattedDate, isSessionActive, getNavigatorInfo } from './utils'
 import { setMaxCapturingHttpPayloadSize, setShouldRecordHttpData } from './patch/xhr'
-import { DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE, getSessionRecorderConfig } from './config'
+import { BASE_CONFIG, DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE, getSessionRecorderConfig } from './config'
 
 import { StorageService } from './services/storage.service'
 import { ApiService, StartSessionRequest, StopSessionRequest } from './services/api.service'
@@ -30,11 +30,11 @@ type SessionRecorderEvents =
 
 class SessionRecorder extends Observable<SessionRecorderEvents> implements ISessionRecorder, EventRecorder {
   private _isInitialized = false
-  private _configs: SessionRecorderConfigs | null = null
+  private _configs: SessionRecorderConfigs
   private _apiService = new ApiService()
   private _tracer = new TracerReactNativeSDK()
   private _recorder = new RecorderReactNativeSDK()
-  private _storageService = new StorageService()
+  private _storageService = StorageService.getInstance()
   private _startRequestController: AbortController | null = null
 
   // Session ID and state are stored in AsyncStorage
@@ -112,11 +112,16 @@ class SessionRecorder extends Observable<SessionRecorderEvents> implements ISess
     return null
   }
 
+  public get config(): SessionRecorderConfigs {
+    return this._configs
+  }
+
   /**
    * Initialize debugger with default or custom configurations
    */
   constructor() {
     super()
+    this._configs = BASE_CONFIG
     // Initialize with stored session data if available
     StorageService.initialize()
   }
@@ -154,6 +159,7 @@ class SessionRecorder extends Observable<SessionRecorderEvents> implements ISess
     this._isInitialized = true
     this._checkOperation('init')
     await this._loadStoredSessionData()
+
     setMaxCapturingHttpPayloadSize(this._configs.maxCapturingHttpPayloadSize || DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE)
     setShouldRecordHttpData(!this._configs.captureBody, this._configs.captureHeaders)
 

package/src/types/session-recorder.ts

@@ -150,7 +150,6 @@ export interface MaskingConfig {
   /** Custom function for masking headers in traces */
   maskHeaders?: (headers: any, span: any) => any;
 
-
   /** List of body fields to mask in traces */
   maskBodyFieldsList?: string[]
   /** List of headers to mask in traces */
@@ -160,6 +159,11 @@ export interface MaskingConfig {
   headersToInclude?: string[]
   /** List of headers to exclude from traces */
   headersToExclude?: string[]
+
+  /** Whether to mask all input fields during screen recording
+   *  @default true
+  */
+  inputMasking?: boolean
 }
 
 /**
@@ -222,6 +226,8 @@ export interface RecorderConfig extends BaseConfig {
   recordNavigation?: boolean
   /** Whether to record screen */
   recordScreen?: boolean
+  /** Configuration for masking sensitive data in session recordings */
+  masking?: MaskingConfig
 }
 
 /**