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

package/src/utils/platform.ts

@@ -1,6 +1,14 @@
 import { IResourceAttributes } from '../types'
 import Constants from 'expo-constants'
-import { Platform } from 'react-native'
+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
@@ -52,7 +60,7 @@ export function getPlatformAttributes(): Record<string, any> {
   const platformInfo = detectPlatform()
 
   const attributes: Record<string, any> = {
-    'platform': platformInfo.isExpo ? 'expo' : 'react-native',
+    platform: platformInfo.isExpo ? 'expo' : 'react-native',
     'device.type': platformInfo.deviceType,
   }
 
@@ -75,13 +83,302 @@ 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
+ */
+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 = Constants.default?.expoConfig || Constants.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 = Constants.default?.platform || Constants.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)}`
+  }
+
+  // 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 => {
+    const metadata = getAppMetadata()
+    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 => {
+    const metadata = getAppMetadata()
+    if (metadata.version) return metadata.version
+
+    // Final fallback
+    return 'Unknown'
+  }
+
+  // Get bundle ID with automatic detection
+  const getBundleId = (): string => {
+    const metadata = getAppMetadata()
+    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 =
+      Constants.default?.expoConfig?.ios?.buildNumber ||
+      Constants.expoConfig?.ios?.buildNumber ||
+      Constants.default?.expoConfig?.android?.versionCode ||
+      Constants.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 network info (basic)
+  const getNetworkInfo = (): string => {
+    // This is a basic implementation - in a real app you might want to use @react-native-community/netinfo
+    return 'Unknown'
+  }
+
+  // Get hardware info
+  const getHardwareInfo = (): string => {
+    const pixelRatioInfo = `Pixel Ratio: ${pixelRatio}`
+    const screenDensity = PixelRatio.getFontScale()
+    return `${pixelRatioInfo}, Font Scale: ${screenDensity}`
+  }
+
   return {
-    platform: 'react-native',
-    userAgent: 'React Native',
-    language: 'en',
+    // Core platform info
+    platform: platformInfo.isExpo ? 'expo' : 'react-native',
+    userAgent: getBrowserInfo(),
+    language: 'en', // Could be enhanced with react-native-localize if available
     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(),
+
+    // Additional device info
+    deviceModel: Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
+    deviceManufacturer: Platform.OS === 'ios' ? 'Apple' : 'Android Manufacturer',
+    deviceBrand: Platform.OS === 'ios' ? 'Apple' : 'Android Brand',
+
+    // Performance and hardware
+    hardwareInfo: getHardwareInfo(),
+    networkInfo: getNetworkInfo(),
+
+    // 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',
+
+    // Additional platform attributes
     ...getPlatformAttributes(),
   }
-}
+}

package/src/utils/rrweb-events.ts

@@ -39,10 +39,9 @@ export function createFullSnapshotEvent(
   nodeIdCounter: { current: number },
 ): eventWithTime {
   // Create a virtual DOM node representing the screen as an image
-  const imageNodeId = nodeIdCounter.current++
   const imageNode: serializedNodeWithId = {
     type: NodeType.Element,
-    id: imageNodeId,
+    id: 0,
     tagName: 'img',
     attributes: {
       src: `data:image/${captureFormat};base64,${base64Image}`,
@@ -137,7 +136,6 @@ export function createFullSnapshotEvent(
  */
 export function createIncrementalSnapshotWithImageUpdate(
   base64Image: string,
-  imageNodeId: number,
   captureFormat: string = 'jpg',
 ): eventWithTime {
   const mutationData: mutationData = {
@@ -145,7 +143,7 @@ export function createIncrementalSnapshotWithImageUpdate(
     texts: [],
     attributes: [
       {
-        id: imageNodeId,
+        id: 0,
         attributes: {
           src: `data:image/${captureFormat};base64,${base64Image}`,
         },

package/src/version.ts

@@ -1 +1 @@
-export const version = "0.0.1-alpha.9"
+export const version = "0.0.1"

package/src/otel/instrumentations/gestureInstrumentation.ts

@@ -1,141 +0,0 @@
-import { InstrumentationBase } from '@opentelemetry/instrumentation'
-import { trace, SpanStatusCode } from '@opentelemetry/api'
-
-export class GestureInstrumentation extends InstrumentationBase {
-  private _isEnabled = false
-
-  constructor() {
-    super('react-native-gesture', '1.0.0', {})
-  }
-
-  init(): void {
-    // Initialize the instrumentation
-  }
-
-  enable(): void {
-    this._isEnabled = true
-  }
-
-  disable(): void {
-    this._isEnabled = false
-  }
-
-  isEnabled(): boolean {
-    return this._isEnabled
-  }
-
-  // Manual gesture tracking methods
-  recordTap(x: number, y: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.tap', {
-      attributes: {
-        'gesture.type': 'tap',
-        'gesture.coordinates.x': x,
-        'gesture.coordinates.y': y,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordSwipe(direction: string, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.swipe', {
-      attributes: {
-        'gesture.type': 'swipe',
-        'gesture.direction': direction,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordPinch(scale: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.pinch', {
-      attributes: {
-        'gesture.type': 'pinch',
-        'gesture.scale': scale,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordPan(deltaX: number, deltaY: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.pan', {
-      attributes: {
-        'gesture.type': 'pan',
-        'gesture.delta_x': deltaX,
-        'gesture.delta_y': deltaY,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordLongPress(duration: number, target?: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan('Gesture.longPress', {
-      attributes: {
-        'gesture.type': 'longPress',
-        'gesture.duration': duration,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    if (target) {
-      span.setAttribute('gesture.target', target)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  // Error tracking for gesture failures
-  recordGestureError(error: Error, gestureType: string) {
-    if (!this._isEnabled) return
-
-    const span = trace.getTracer('gesture').startSpan(`Gesture.${gestureType}.error`, {
-      attributes: {
-        'gesture.type': gestureType,
-        'gesture.error': true,
-        'gesture.timestamp': Date.now(),
-      },
-    })
-
-    span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
-    span.recordException(error)
-    span.end()
-  }
-}

package/src/otel/instrumentations/reactNativeInstrumentation.ts

@@ -1,77 +0,0 @@
-import { InstrumentationBase } from '@opentelemetry/instrumentation'
-import { logger } from '../../utils'
-import { trace, SpanStatusCode } from '@opentelemetry/api'
-import AsyncStorage from '@react-native-async-storage/async-storage'
-
-export class ReactNativeInstrumentation extends InstrumentationBase {
-  constructor() {
-    super('react-native', '1.0.0', {})
-  }
-
-  init(): void {
-    // Initialize the instrumentation
-  }
-
-  enable(): void {
-    // Try to wrap AsyncStorage if it's available
-    try {
-      if (AsyncStorage) {
-        this._wrap(AsyncStorage, 'setItem', this._wrapAsyncStorage)
-      }
-    } catch (error) {
-      logger.warn('DEBUGGER_LIB', '@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
-    }
-  }
-
-  disable(): void {
-    // Try to unwrap AsyncStorage if it was wrapped
-    try {
-      if (AsyncStorage) {
-        this._unwrap(AsyncStorage, 'setItem')
-      }
-    } catch (error) {
-      // AsyncStorage was not available, nothing to unwrap
-    }
-  }
-
-  private _wrapAsyncStorage(originalMethod: any) {
-    return async function (this: any, key: string, value: string) {
-      const startTime = Date.now()
-      try {
-        const result = await originalMethod.call(this, key, value)
-
-        const span = trace.getTracer('react-native').startSpan('AsyncStorage.setItem', {
-          attributes: {
-            'storage.operation': 'setItem',
-            'storage.key': key,
-            'storage.value_length': value.length,
-            'storage.duration': Date.now() - startTime,
-          },
-        })
-
-        span.setStatus({ code: SpanStatusCode.OK })
-        span.end()
-
-        return result
-      } catch (error) {
-        const span = trace.getTracer('react-native').startSpan('AsyncStorage.setItem', {
-          attributes: {
-            'storage.operation': 'setItem',
-            'storage.key': key,
-            'storage.error': true,
-            'storage.duration': Date.now() - startTime,
-          },
-        })
-
-        const errorMessage = error instanceof Error ? error.message : String(error)
-        span.setStatus({ code: SpanStatusCode.ERROR, message: errorMessage })
-        if (error instanceof Error) {
-          span.recordException(error)
-        }
-        span.end()
-
-        throw error
-      }
-    }
-  }
-}

package/src/otel/instrumentations/reactNavigationInstrumentation.ts

@@ -1,119 +0,0 @@
-import { InstrumentationBase } from '@opentelemetry/instrumentation'
-import { trace, SpanStatusCode } from '@opentelemetry/api'
-
-export class ReactNavigationInstrumentation extends InstrumentationBase {
-  private navigationRef: any = null
-
-  constructor() {
-    super('react-navigation', '1.0.0', {})
-  }
-
-  init(): void {
-    // Initialize the instrumentation
-  }
-
-  enable(): void {
-    // Enable the instrumentation
-    super.enable()
-  }
-
-  setNavigationRef(ref: any) {
-    this.navigationRef = ref
-    this._setupNavigationListener()
-  }
-
-  private _setupNavigationListener() {
-    if (!this.navigationRef) return
-
-    // Listen to navigation state changes
-    this.navigationRef.addListener('state', (e: any) => {
-      this._recordNavigationEvent('state_change', e.data)
-    })
-
-    // Listen to focus events
-    this.navigationRef.addListener('focus', (e: any) => {
-      this._recordNavigationEvent('focus', e.data)
-    })
-
-    // Listen to blur events
-    this.navigationRef.addListener('blur', (e: any) => {
-      this._recordNavigationEvent('blur', e.data)
-    })
-  }
-
-  private _recordNavigationEvent(eventType: string, data: any) {
-    const span = trace.getTracer('navigation').startSpan(`Navigation.${eventType}`, {
-      attributes: {
-        'navigation.system': 'ReactNavigation',
-        'navigation.operation': eventType,
-        'navigation.type': eventType,
-        'navigation.timestamp': Date.now(),
-      },
-    })
-
-    if (data) {
-      if (data.routeName) {
-        span.setAttribute('navigation.route_name', data.routeName)
-      }
-      if (data.params) {
-        span.setAttribute('navigation.params', JSON.stringify(data.params))
-      }
-      if (data.key) {
-        span.setAttribute('navigation.key', data.key)
-      }
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  // Manual navigation tracking methods
-  recordNavigate(routeName: string, params?: Record<string, any>) {
-    const span = trace.getTracer('navigation').startSpan('Navigation.navigate', {
-      attributes: {
-        'navigation.system': 'ReactNavigation',
-        'navigation.operation': 'navigate',
-        'navigation.route_name': routeName,
-        'navigation.timestamp': Date.now(),
-      },
-    })
-
-    if (params) {
-      span.setAttribute('navigation.params', JSON.stringify(params))
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordGoBack() {
-    const span = trace.getTracer('navigation').startSpan('Navigation.goBack', {
-      attributes: {
-        'navigation.system': 'ReactNavigation',
-        'navigation.operation': 'goBack',
-        'navigation.timestamp': Date.now(),
-      },
-    })
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-
-  recordReset(routes: any[]) {
-    const span = trace.getTracer('navigation').startSpan('Navigation.reset', {
-      attributes: {
-        'navigation.system': 'ReactNavigation',
-        'navigation.operation': 'reset',
-        'navigation.routes_count': routes.length,
-        'navigation.timestamp': Date.now(),
-      },
-    })
-
-    if (routes.length > 0) {
-      span.setAttribute('navigation.initial_route', routes[0].name)
-    }
-
-    span.setStatus({ code: SpanStatusCode.OK })
-    span.end()
-  }
-}