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

package/scripts/generate-app-metadata.js

@@ -0,0 +1,173 @@
+#!/usr/bin/env node
+
+/**
+ * Build script to automatically extract app metadata from configuration files
+ * This runs without developer intervention and generates app-metadata.ts
+ */
+
+const fs = require('fs')
+const path = require('path')
+
+function findProjectRoot() {
+  let currentDir = process.cwd()
+
+  // Look for package.json going up the directory tree
+  while (currentDir !== path.dirname(currentDir)) {
+    if (fs.existsSync(path.join(currentDir, 'package.json'))) {
+      return currentDir
+    }
+    currentDir = path.dirname(currentDir)
+  }
+
+  return process.cwd()
+}
+
+function extractAppMetadata(projectRoot) {
+  const metadata = {
+    name: undefined,
+    version: undefined,
+    bundleId: undefined,
+    buildNumber: undefined,
+    displayName: undefined,
+  }
+
+  try {
+    // Method 1: Try app.json
+    const appJsonPath = path.join(projectRoot, 'app.json')
+    if (fs.existsSync(appJsonPath)) {
+      const appConfig = JSON.parse(fs.readFileSync(appJsonPath, 'utf8'))
+
+      metadata.name = appConfig.name || appConfig.displayName
+      metadata.version = appConfig.version
+      metadata.displayName = appConfig.displayName
+
+      // Extract bundle ID from platform-specific configs
+      if (appConfig.ios?.bundleIdentifier) {
+        metadata.bundleId = appConfig.ios.bundleIdentifier
+      } else if (appConfig.android?.package) {
+        metadata.bundleId = appConfig.android.package
+      }
+
+      if (appConfig.ios?.buildNumber) {
+        metadata.buildNumber = appConfig.ios.buildNumber.toString()
+      } else if (appConfig.android?.versionCode) {
+        metadata.buildNumber = appConfig.android.versionCode.toString()
+      }
+
+      console.log('✅ Extracted metadata from app.json')
+      return metadata
+    }
+
+    // Method 2: Try app.config.js
+    const appConfigJsPath = path.join(projectRoot, 'app.config.js')
+    if (fs.existsSync(appConfigJsPath)) {
+      try {
+        // Clear require cache to get fresh config
+        delete require.cache[require.resolve(appConfigJsPath)]
+        const appConfig = require(appConfigJsPath)
+
+        metadata.name = appConfig.name || appConfig.displayName
+        metadata.version = appConfig.version
+        metadata.displayName = appConfig.displayName
+
+        // Extract bundle ID from platform-specific configs
+        if (appConfig.ios?.bundleIdentifier) {
+          metadata.bundleId = appConfig.ios.bundleIdentifier
+        } else if (appConfig.android?.package) {
+          metadata.bundleId = appConfig.android.package
+        }
+
+        if (appConfig.ios?.buildNumber) {
+          metadata.buildNumber = appConfig.ios.buildNumber.toString()
+        } else if (appConfig.android?.versionCode) {
+          metadata.buildNumber = appConfig.android.versionCode.toString()
+        }
+
+        console.log('✅ Extracted metadata from app.config.js')
+        return metadata
+      } catch (error) {
+        console.warn('⚠️ Could not parse app.config.js:', error.message)
+      }
+    }
+
+    // Method 3: Fallback to package.json
+    const packageJsonPath = path.join(projectRoot, 'package.json')
+    if (fs.existsSync(packageJsonPath)) {
+      const packageConfig = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'))
+
+      metadata.name = packageConfig.name
+      metadata.version = packageConfig.version
+
+      console.log('✅ Extracted metadata from package.json')
+      return metadata
+    }
+
+  } catch (error) {
+    console.warn('⚠️ Error extracting app metadata:', error.message)
+  }
+
+  return metadata
+}
+
+function generateAppMetadataFile(metadata, outputPath) {
+  const content = `/**
+ * Auto-generated app metadata
+ * This file is generated at build time to provide app metadata without developer intervention
+ */
+
+// This file is automatically generated by the build process
+// It extracts metadata from app.json, app.config.js, or package.json
+
+export interface AppMetadata {
+  name?: string
+  version?: string
+  bundleId?: string
+  buildNumber?: string
+  displayName?: string
+}
+
+// Auto-detected values from project configuration files
+export const APP_METADATA: AppMetadata = {
+  name: ${metadata.name ? `"${metadata.name}"` : 'undefined'},
+  version: ${metadata.version ? `"${metadata.version}"` : 'undefined'},
+  bundleId: ${metadata.bundleId ? `"${metadata.bundleId}"` : 'undefined'},
+  buildNumber: ${metadata.buildNumber ? `"${metadata.buildNumber}"` : 'undefined'},
+  displayName: ${metadata.displayName ? `"${metadata.displayName}"` : 'undefined'},
+}
+
+/**
+ * Get auto-detected app metadata
+ */
+export function getAutoDetectedAppMetadata(): AppMetadata {
+  return { ...APP_METADATA }
+}
+`
+
+  fs.writeFileSync(outputPath, content, 'utf8')
+  console.log(`✅ Generated app-metadata.ts`)
+}
+
+function main() {
+  const projectRoot = findProjectRoot()
+  console.log(`🔍 Looking for app metadata in: ${projectRoot}`)
+
+  const metadata = extractAppMetadata(projectRoot)
+
+  // Show what was detected
+  console.log('📋 Detected metadata:')
+  Object.entries(metadata).forEach(([key, value]) => {
+    if (value) {
+      console.log(`  ${key}: ${value}`)
+    }
+  })
+
+  // Generate the TypeScript file
+  const outputPath = path.join(__dirname, '../src/utils/app-metadata.ts')
+  generateAppMetadataFile(metadata, outputPath)
+}
+
+if (require.main === module) {
+  main()
+}
+
+module.exports = { extractAppMetadata, generateAppMetadataFile }

package/src/components/{GestureCaptureWrapper.tsx → GestureCaptureWrapper/GestureCaptureWrapper.tsx}

@@ -1,7 +1,5 @@
-import React, { ReactNode, useCallback, useEffect, useMemo, useRef } from 'react'
+import React, { ReactNode, useCallback, useMemo } from 'react'
 import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
-import { GestureInstrumentation } from '../otel/instrumentations/gestureInstrumentation'
-import { logger } from '../utils'
 
 export interface GestureCaptureWrapperProps {
   children: ReactNode
@@ -9,30 +7,8 @@ export interface GestureCaptureWrapperProps {
 }
 
 export const GestureCaptureWrapper: React.FC<GestureCaptureWrapperProps> = ({ children, onGestureRecord }) => {
-  const gestureInstrumentation = useRef(new GestureInstrumentation())
-
-  useEffect(() => {
-    gestureInstrumentation.current.enable()
-  }, [])
-
   const recordGesture = useCallback(
     (gestureType: string, data: any) => {
-      // Record with OpenTelemetry
-      logger.debug('GestureCaptureWrapper', 'Recording gesture', { gestureType, data })
-      switch (gestureType) {
-        case 'tap':
-          gestureInstrumentation.current.recordTap(data.x, data.y)
-          break
-        case 'pan_start':
-        case 'pan_update':
-        case 'pan_end':
-          gestureInstrumentation.current.recordPan(data.translationX || 0, data.translationY || 0)
-          break
-        case 'long_press':
-          gestureInstrumentation.current.recordLongPress(data.duration, undefined)
-          break
-      }
-
       // Record with session recorder
       onGestureRecord(gestureType, data)
     },

package/src/components/GestureCaptureWrapper/index.ts

@@ -0,0 +1 @@
+export * from "./GestureCaptureWrapper";

package/src/components/ScreenRecorderView/ScreenRecorderView.tsx

@@ -0,0 +1,72 @@
+import SessionRecorder from '@multiplayer-app/session-recorder-react-native'
+import React, { PropsWithChildren, useCallback } from 'react'
+import { View } from 'react-native'
+import { SessionState } from '../../types'
+import { logger } from '../../utils'
+import { GestureCaptureWrapper } from '../GestureCaptureWrapper'
+
+interface ScreenRecorderViewProps extends PropsWithChildren {}
+
+export const ScreenRecorderView = ({ children }: ScreenRecorderViewProps) => {
+  // Set up gesture recording callback
+  const handleGestureRecord = useCallback((gestureType: string, data: any) => {
+    if (SessionRecorder.sessionState !== SessionState.started) {
+      logger.debug('SessionRecorderContext', 'Gesture recording skipped', {
+        client: !!SessionRecorder.sessionState,
+        sessionState: SessionRecorder.sessionState
+      })
+      return
+    }
+    logger.debug('SessionRecorderContext', 'Gesture recorded', { gestureType, data })
+    try {
+      // Record gesture as appropriate touch events
+      switch (gestureType) {
+        case 'tap':
+          // For tap, record both touch start and end
+          logger.debug('SessionRecorderContext', 'Recording tap as touch start + end')
+          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
+          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
+          break
+
+        case 'pan_start':
+          logger.debug('SessionRecorderContext', 'Recording pan_start as touch start')
+          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
+          break
+
+        case 'pan_update':
+          logger.debug('SessionRecorderContext', 'Recording pan_update as touch move')
+          SessionRecorder.recordTouchMove?.(data.x, data.y, undefined, 1.0)
+          break
+
+        case 'pan_end':
+          logger.debug('SessionRecorderContext', 'Recording pan_end as touch end')
+          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
+          break
+
+        case 'long_press':
+          logger.debug('SessionRecorderContext', 'Recording long_press as touch start + end')
+          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
+          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
+          break
+        default:
+      }
+    } catch (error) {
+      logger.error('SessionRecorderContext', 'Failed to record gesture event', error)
+    }
+  }, [])
+
+  // Callback ref to set the viewshot ref immediately when available
+  const setViewShotRef = (ref: View | null) => {
+    if (ref) {
+      SessionRecorder.setViewShotRef?.(ref)
+    }
+  }
+
+  return (
+    <GestureCaptureWrapper onGestureRecord={handleGestureRecord}>
+      <View ref={setViewShotRef} style={{ flex: 1 }}>
+        {children}
+      </View>
+    </GestureCaptureWrapper>
+  )
+}

package/src/components/ScreenRecorderView/index.ts

@@ -0,0 +1 @@
+export * from "./ScreenRecorderView";

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './GestureCaptureWrapper'

package/src/context/SessionRecorderContext.tsx

@@ -1,10 +1,9 @@
-import React, { createContext, useContext, ReactNode, PropsWithChildren, useState, useEffect, useRef, useCallback } from 'react'
+import React, { createContext, useContext, PropsWithChildren, useState, useEffect, useRef } from 'react'
 import { Pressable, Text, View } from 'react-native'
 import { SessionRecorderOptions, SessionState } from '../types'
 import SessionRecorder from '../session-recorder'
-import { GestureCaptureWrapper } from '../components/GestureCaptureWrapper'
 import sessionRecorder from '../session-recorder'
-import { logger } from '../utils'
+import { ScreenRecorderView } from '../components/ScreenRecorderView'
 
 interface SessionRecorderContextType {
   instance: typeof SessionRecorder
@@ -44,96 +43,29 @@ export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = (
 
   return (
     <SessionRecorderContext.Provider value={{ instance: sessionRecorder }}>
-      <GestureEventCapture>
-        {children}
-        <Pressable onPress={onToggleSession}>
-          <View
-            style={{
-              position: 'absolute',
-              right: 0,
-              bottom: 100,
-              width: 48,
-              height: 48,
-              paddingTop: 16,
-              paddingLeft: 10,
-              backgroundColor: 'red',
-              borderTopLeftRadius: 24,
-              borderBottomLeftRadius: 24
-            }}
-          >
-            <Text style={{ color: 'white' }}>{sessionState === SessionState.started ? 'Stop' : 'Start'}</Text>
-          </View>
-        </Pressable>
-      </GestureEventCapture>
+      <ScreenRecorderView>{children}</ScreenRecorderView>
+      <Pressable onPress={onToggleSession}>
+        <View
+          style={{
+            position: 'absolute',
+            right: 0,
+            bottom: 100,
+            width: 48,
+            height: 48,
+            paddingTop: 16,
+            paddingLeft: 10,
+            backgroundColor: 'red',
+            borderTopLeftRadius: 24,
+            borderBottomLeftRadius: 24
+          }}
+        >
+          <Text style={{ color: 'white' }}>{sessionState === SessionState.started ? 'Stop' : 'Start'}</Text>
+        </View>
+      </Pressable>
     </SessionRecorderContext.Provider>
   )
 }
 
-// Gesture-based event capture component
-const GestureEventCapture: React.FC<{ children: ReactNode }> = ({ children }) => {
-  // Set up gesture recording callback
-  const handleGestureRecord = useCallback((gestureType: string, data: any) => {
-    if (SessionRecorder.sessionState !== SessionState.started) {
-      logger.debug('SessionRecorderContext', 'Gesture recording skipped', {
-        client: !!SessionRecorder.sessionState,
-        sessionState: SessionRecorder.sessionState
-      })
-      return
-    }
-    logger.debug('SessionRecorderContext', 'Gesture recorded', { gestureType, data })
-    try {
-      // Record gesture as appropriate touch events
-      switch (gestureType) {
-        case 'tap':
-          // For tap, record both touch start and end
-          logger.debug('SessionRecorderContext', 'Recording tap as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_start':
-          logger.debug('SessionRecorderContext', 'Recording pan_start as touch start')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_update':
-          logger.debug('SessionRecorderContext', 'Recording pan_update as touch move')
-          SessionRecorder.recordTouchMove?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'pan_end':
-          logger.debug('SessionRecorderContext', 'Recording pan_end as touch end')
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-
-        case 'long_press':
-          logger.debug('SessionRecorderContext', 'Recording long_press as touch start + end')
-          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
-          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
-          break
-        default:
-      }
-    } catch (error) {
-      logger.error('SessionRecorderContext', 'Failed to record gesture event', error)
-    }
-  }, [])
-
-  // Callback ref to set the viewshot ref immediately when available
-  const setViewShotRef = (ref: View | null) => {
-    if (ref) {
-      SessionRecorder.setViewShotRef?.(ref)
-    }
-  }
-
-  return (
-    <GestureCaptureWrapper onGestureRecord={handleGestureRecord}>
-      <View ref={setViewShotRef} style={{ flex: 1 }}>
-        {children}
-      </View>
-    </GestureCaptureWrapper>
-  )
-}
-
 export const useSessionRecorder = (): SessionRecorderContextType => {
   const context = useContext(SessionRecorderContext)
   if (!context) {

package/src/index.ts

@@ -3,6 +3,14 @@ import SessionRecorder from './session-recorder'
 export * from '@multiplayer-app/session-recorder-common'
 export * from './context/SessionRecorderContext'
 
+// Export platform utilities including app metadata configuration
+export {
+  detectPlatform,
+  isExpoEnvironment,
+  configureAppMetadata,
+  getPlatformAttributes,
+  getConfiguredAppMetadata,
+} from './utils/platform'
 
 export { SessionRecorder }
 // Export the instance as default

package/src/otel/index.ts

@@ -13,8 +13,7 @@ import {
 import { TracerReactNativeConfig } from '../types'
 import { getInstrumentations } from './instrumentations'
 import { getExporterEndpoint } from './helpers'
-import { ReactNavigationInstrumentation } from './instrumentations/reactNavigationInstrumentation'
-import { GestureInstrumentation } from './instrumentations/gestureInstrumentation'
+
 import { getPlatformAttributes } from '../utils/platform'
 import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
 
@@ -28,8 +27,6 @@ export class TracerReactNativeSDK {
   private sessionId = ''
   private idGenerator?: SessionRecorderIdGenerator
   private exporter?: any
-  private navigationInstrumentation?: ReactNavigationInstrumentation
-  private gestureInstrumentation?: GestureInstrumentation
   private isInitialized = false
 
   constructor() { }
@@ -80,14 +77,6 @@ export class TracerReactNativeSDK {
       instrumentations: getInstrumentations(this.config),
     })
 
-    // // Initialize React Native specific instrumentations
-    // this.navigationInstrumentation = new ReactNavigationInstrumentation()
-    // this.gestureInstrumentation = new GestureInstrumentation()
-
-    // // Enable the custom instrumentations
-    // this.navigationInstrumentation.enable()
-    // this.gestureInstrumentation.enable()
-
     this.isInitialized = true
   }
 

package/src/otel/instrumentations/index.ts

@@ -1,10 +1,10 @@
 import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'
 import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'
 
+import { logger } from '../../utils'
 import { OTEL_IGNORE_URLS } from '../../config'
 import { TracerReactNativeConfig } from '../../types'
 import { extractResponseBody, headersToObject, processHttpPayload } from '../helpers'
-import { logger } from '../../utils'
 
 export function getInstrumentations(config: TracerReactNativeConfig) {
 
@@ -113,8 +113,3 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
 
   return instrumentations
 }
-
-// Export custom instrumentations for manual use
-export { ReactNativeInstrumentation } from './reactNativeInstrumentation'
-export { ReactNavigationInstrumentation } from './reactNavigationInstrumentation'
-export { GestureInstrumentation } from './gestureInstrumentation'