@multiplayer-app/session-recorder-react-native 1.0.1-beta.2 → 1.0.1-beta.4

package/src/utils/logger.ts

@@ -0,0 +1,216 @@
+/**
+ * Centralized logger utility for the session recorder
+ * Provides consistent logging across all components
+ */
+
+import { LogLevel } from "../types"
+
+export interface LoggerConfig {
+  level: LogLevel
+  enabled: boolean
+  enablePrefix: boolean
+  prefix: string
+}
+
+class Logger {
+  private config: LoggerConfig = {
+    level: LogLevel.INFO,
+    enabled: true,
+    enablePrefix: true,
+    prefix: '[SessionRecorder]',
+  }
+
+  private componentPrefixes: Map<string, string> = new Map([
+    ['ScreenRecorder', '📸'],
+    ['NativeGestureRecorder', '👆'],
+    ['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.enabled = 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.enabled
+  }
+
+  /**
+   * 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 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 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 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)

package/src/utils/platform.ts

@@ -0,0 +1,370 @@
+import { type IResourceAttributes } from '../types'
+import OptionalConstants from './constants.optional'
+import { Platform, Dimensions, PixelRatio } from 'react-native'
+import { version } from '../version'
+import { getAutoDetectedAppMetadata } from './app-metadata'
+
+// Global app metadata configuration for non-Expo apps
+let globalAppMetadata: { name?: string; version?: string; bundleId?: string } = {}
+
+// Cache for auto-detected metadata to avoid repeated file reads
+let autoDetectedMetadata: { name?: string; version?: string; bundleId?: string } | null = null
+
+export interface PlatformInfo {
+  isExpo: boolean
+  isReactNative: boolean
+  platform: 'ios' | 'android' | 'web' | 'unknown'
+  platformVersion?: string
+  expoVersion?: string
+  deviceType: string
+}
+
+export function detectPlatform(): PlatformInfo {
+  try {
+    // Check if we're in an Expo environment
+    const isExpo = !!OptionalConstants?.expoVersion
+
+    if (isExpo) {
+      const expoVersion = OptionalConstants?.expoVersion
+      const platform = OptionalConstants?.platform
+
+      return {
+        isExpo: true,
+        isReactNative: true,
+        platform: platform?.ios ? 'ios' : platform?.android ? 'android' : 'unknown',
+        expoVersion,
+        deviceType: 'expo',
+      }
+    }
+
+    // Fallback to React Native detection
+    return {
+      isExpo: false,
+      isReactNative: true,
+      platform: Platform.OS as 'ios' | 'android' | 'web' | 'unknown',
+      platformVersion: Platform.Version?.toString(),
+      deviceType: Platform.OS,
+    }
+  } catch (error) {
+    // Fallback for web or other environments
+    return {
+      isExpo: false,
+      isReactNative: false,
+      platform: 'unknown',
+      deviceType: 'unknown',
+    }
+  }
+}
+
+export function getPlatformAttributes(): Record<string, any> {
+  const platformInfo = detectPlatform()
+
+  const attributes: Record<string, any> = {
+    platform: platformInfo.isExpo ? 'expo' : 'react-native',
+    'device.type': platformInfo.deviceType,
+  }
+
+  if (platformInfo.platformVersion) {
+    attributes['platform.version'] = platformInfo.platformVersion
+  }
+
+  if (platformInfo.expoVersion) {
+    attributes['expo.version'] = platformInfo.expoVersion
+  }
+
+  return attributes
+}
+
+export function isExpoEnvironment(): boolean {
+  return detectPlatform().isExpo
+}
+
+export function isReactNativeEnvironment(): boolean {
+  return detectPlatform().isReactNative
+}
+
+/**
+ * Configure app metadata for non-Expo React Native apps
+ * Call this function in your app initialization to provide app information
+ *
+ * @example
+ * ```typescript
+ * import { configureAppMetadata } from '@multiplayer-app/session-recorder-react-native'
+ *
+ * // In your App.tsx or index.js
+ * configureAppMetadata({
+ *   name: 'My Awesome App',
+ *   version: '1.2.3',
+ *   bundleId: 'com.mycompany.myapp',
+ *   buildNumber: '123',
+ *   displayName: 'My App',
+ * })
+ * ```
+ */
+export function configureAppMetadata(metadata: {
+  name?: string
+  version?: string
+  bundleId?: string
+  buildNumber?: string
+  displayName?: string
+}): void {
+  globalAppMetadata = { ...globalAppMetadata, ...metadata }
+}
+
+/**
+ * Get configured app metadata
+ */
+export function getConfiguredAppMetadata(): { name?: string, version?: string, bundleId?: string, buildNumber?: string, displayName?: string, } {
+  return { ...globalAppMetadata }
+}
+
+/**
+ * Automatically detect app metadata from common configuration files
+ * This runs without developer intervention
+ */
+function autoDetectAppMetadata(): { name?: string; version?: string; bundleId?: string } {
+  if (autoDetectedMetadata) {
+    return autoDetectedMetadata
+  }
+
+  try {
+    // Get auto-detected metadata from build-time generated file
+    const autoMetadata = getAutoDetectedAppMetadata()
+
+    // Filter out undefined values
+    const metadata: { name?: string; version?: string; bundleId?: string } = {}
+    if (autoMetadata.name) metadata.name = autoMetadata.name
+    if (autoMetadata.version) metadata.version = autoMetadata.version
+    if (autoMetadata.bundleId) metadata.bundleId = autoMetadata.bundleId
+
+    autoDetectedMetadata = metadata
+    return metadata
+  } catch (error) {
+    // Silently fail - this is optional auto-detection
+    autoDetectedMetadata = {}
+    return {}
+  }
+}
+
+/**
+ * Enhanced app metadata detection with automatic fallbacks
+ */
+export function getAppMetadata(): { name?: string; version?: string; bundleId?: string } {
+  // Priority order:
+  // 1. Expo config (if available)
+  // 2. Manually configured metadata
+  // 3. Auto-detected metadata
+  // 4. Fallbacks
+
+  const expoMetadata = getExpoMetadata()
+  const configuredMetadata = getConfiguredAppMetadata()
+  const autoMetadata = autoDetectAppMetadata()
+
+  return {
+    name: expoMetadata.name || configuredMetadata.name || autoMetadata.name,
+    version: expoMetadata.version || configuredMetadata.version || autoMetadata.version,
+    bundleId: expoMetadata.bundleId || configuredMetadata.bundleId || autoMetadata.bundleId,
+  }
+}
+
+/**
+ * Get metadata from Expo config
+ */
+function getExpoMetadata(): { name?: string; version?: string; bundleId?: string } {
+  const expoConfig = OptionalConstants?.expoConfig
+  if (!expoConfig) return {}
+
+  return {
+    name: expoConfig.name,
+    version: expoConfig.version,
+    bundleId: expoConfig.ios?.bundleIdentifier || expoConfig.android?.package,
+  }
+}
+
+export const getNavigatorInfo = (): IResourceAttributes => {
+  const platformInfo = detectPlatform()
+  const screenData = Dimensions.get('window')
+  const screenDataScreen = Dimensions.get('screen')
+  const pixelRatio = PixelRatio.get()
+
+  // Get device type based on screen dimensions
+  const getDeviceType = (): string => {
+    const { width, height } = screenData
+    const minDimension = Math.min(width, height)
+    const maxDimension = Math.max(width, height)
+
+    // Rough device type detection based on screen size
+    if (maxDimension >= 1024) {
+      return 'Tablet'
+    } else if (minDimension >= 600) {
+      return 'Large Phone'
+    } else {
+      return 'Phone'
+    }
+  }
+
+  // Get orientation
+  const getOrientation = (): string => {
+    const { width, height } = screenData
+    return width > height ? 'Landscape' : 'Portrait'
+  }
+
+  // Get OS version details
+  const getOSInfo = (): string => {
+    if (platformInfo.isExpo) {
+      const platform = OptionalConstants?.platform
+      if (platform?.ios) {
+        return `iOS ${Platform.Version}`
+      } else if (platform?.android) {
+        return `Android ${Platform.Version}`
+      }
+    }
+
+    if (Platform.OS === 'ios') {
+      return `iOS ${Platform.Version}`
+    } else if (Platform.OS === 'android') {
+      return `Android ${Platform.Version}`
+    }
+
+    return `${Platform.OS} ${Platform.Version || 'Unknown'}`
+  }
+
+  // Get device info string
+  const getDeviceInfo = (): string => {
+    const deviceType = getDeviceType()
+    const osInfo = getOSInfo()
+    return `${deviceType} - ${osInfo}`
+  }
+
+  // Get browser/runtime info
+  const getBrowserInfo = (): string => {
+    if (platformInfo.isExpo) {
+      return `Expo ${platformInfo.expoVersion || 'Unknown'} - React Native`
+    }
+    return 'React Native'
+  }
+
+  // Get screen size string
+  const getScreenSize = (): string => {
+    return `${Math.round(screenData.width)}x${Math.round(screenData.height)}`
+  }
+  const metadata = getAppMetadata()
+  // Get app info with fallbacks for non-Expo apps
+  const getAppInfo = (): string => {
+    const appName = getAppName()
+    const appVersion = getAppVersion()
+    return `${appName} v${appVersion}`
+  }
+
+  // Get app name with automatic detection
+  const getAppName = (): string => {
+
+    if (metadata.name) return metadata.name
+
+    // Try configured display name as fallback
+    const configuredMetadata = getConfiguredAppMetadata()
+    if (configuredMetadata.displayName) return configuredMetadata.displayName
+
+    // Final fallback
+    return 'React Native App'
+  }
+
+  // Get app version with automatic detection
+  const getAppVersion = (): string => {
+    if (metadata.version) return metadata.version
+
+    // Final fallback
+    return 'Unknown'
+  }
+
+  // Get bundle ID with automatic detection
+  const getBundleId = (): string => {
+    if (metadata.bundleId) return metadata.bundleId
+
+    // Fallback
+    return 'com.reactnative.app'
+  }
+
+  // Get build number with multiple fallback strategies
+  const getBuildNumber = (): string => {
+    // Try Expo config first
+    const expoBuildNumber =
+      OptionalConstants?.expoConfig?.ios?.buildNumber ||
+      OptionalConstants?.expoConfig?.android?.versionCode
+    if (expoBuildNumber) return expoBuildNumber.toString()
+
+    // Try configured metadata for non-Expo apps
+    const configuredMetadata = getConfiguredAppMetadata()
+    if (configuredMetadata.buildNumber) return configuredMetadata.buildNumber
+
+    // Fallback
+    return '1'
+  }
+
+
+  // Get hardware info
+  const getHardwareInfo = (): string => {
+    const pixelRatioInfo = `Pixel Ratio: ${pixelRatio}`
+    const screenDensity = PixelRatio.getFontScale()
+    return `${pixelRatioInfo}, Font Scale: ${screenDensity}`
+  }
+
+  return {
+    // Core platform info
+    platform: platformInfo.isExpo ? 'expo' : 'react-native',
+    userAgent: getBrowserInfo(),
+    timestamp: new Date().toISOString(),
+
+    // Device and OS information
+    deviceInfo: getDeviceInfo(),
+    osInfo: getOSInfo(),
+    browserInfo: getBrowserInfo(),
+
+    // Screen information
+    screenSize: getScreenSize(),
+    pixelRatio: pixelRatio,
+    orientation: getOrientation(),
+    screenWidth: Math.round(screenData.width),
+    screenHeight: Math.round(screenData.height),
+    screenScale: pixelRatio,
+
+    // Device capabilities
+    hardwareConcurrency: 1, // React Native doesn't expose CPU cores directly
+    cookiesEnabled: 'N/A', // Not applicable in React Native
+
+    // App information
+    packageVersion: version,
+    appInfo: getAppInfo(),
+    appName: getAppName(),
+    appVersion: getAppVersion(),
+    bundleId: getBundleId(),
+    buildNumber: getBuildNumber(),
+
+    // Platform specific
+    platformType: platformInfo.platform,
+    platformVersion: platformInfo.platformVersion,
+    expoVersion: platformInfo.expoVersion,
+    deviceType: getDeviceType(),
+
+    // Performance and hardware
+    hardwareInfo: getHardwareInfo(),
+
+    // Screen details
+    screenDensity: PixelRatio.getFontScale(),
+    screenScaleFactor: pixelRatio,
+    windowWidth: Math.round(screenData.width),
+    windowHeight: Math.round(screenData.height),
+    fullScreenWidth: Math.round(screenDataScreen.width),
+    fullScreenHeight: Math.round(screenDataScreen.height),
+
+    // Environment info
+    isExpo: platformInfo.isExpo,
+    isReactNative: platformInfo.isReactNative,
+    environment: platformInfo.isExpo ? 'expo' : 'react-native',
+
+    // System type identifier (previously in system tags)
+    systemType: 'mobile',
+    // Additional platform attributes
+    // ...getPlatformAttributes(),
+  }
+}

package/src/utils/request-utils.ts

@@ -0,0 +1,61 @@
+/**
+ * Request utility functions for React Native
+ */
+
+/**
+ * Convert FormData to query string (React Native compatible)
+ * @param formData - FormData object
+ * @returns Query string
+ */
+export const formDataToQuery = (formData: any): string => {
+  if (!formData) return ''
+
+  // In React Native, FormData is handled differently
+  // This is a simplified implementation
+  const params = new URLSearchParams()
+
+  if (typeof formData.entries === 'function') {
+    for (const [key, value] of formData.entries()) {
+      params.append(key, value as string)
+    }
+  } else if (typeof formData === 'object') {
+    for (const [key, value] of Object.entries(formData)) {
+      params.append(key, String(value))
+    }
+  }
+
+  return params.toString()
+}
+
+/**
+ * Convert object to query string
+ * @param obj - Object to convert
+ * @returns Query string
+ */
+export const objectToQuery = (obj: Record<string, any>): string => {
+  const params = new URLSearchParams()
+
+  for (const [key, value] of Object.entries(obj)) {
+    if (value !== null && value !== undefined) {
+      params.append(key, String(value))
+    }
+  }
+
+  return params.toString()
+}
+
+/**
+ * Parse query string to object
+ * @param queryString - Query string to parse
+ * @returns Object with parsed parameters
+ */
+export const queryToObject = (queryString: string): Record<string, string> => {
+  const params = new URLSearchParams(queryString)
+  const obj: Record<string, string> = {}
+
+  for (const [key, value] of params.entries()) {
+    obj[key] = value
+  }
+
+  return obj
+}