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

package/src/components/GestureCaptureWrapper/GestureCaptureWrapper.tsx

@@ -0,0 +1,86 @@
+import React, { ReactNode, useCallback, useMemo } from 'react'
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+
+export interface GestureCaptureWrapperProps {
+  children: ReactNode
+  onGestureRecord: (gestureType: string, data: any) => void
+}
+
+export const GestureCaptureWrapper: React.FC<GestureCaptureWrapperProps> = ({ children, onGestureRecord }) => {
+  const recordGesture = useCallback(
+    (gestureType: string, data: any) => {
+      // Record with session recorder
+      onGestureRecord(gestureType, data)
+    },
+    [onGestureRecord]
+  )
+
+  // Create tap gesture
+  const tapGesture = useMemo(() => {
+    return Gesture.Tap()
+      .runOnJS(true)
+      .onStart((event) => {
+        recordGesture('tap', {
+          x: event.x,
+          y: event.y,
+          timestamp: Date.now()
+        })
+      })
+  }, [recordGesture])
+
+  // Create pan gesture (for swipes and drags)
+  const panGesture = useMemo(() => {
+    return Gesture.Pan()
+      .runOnJS(true)
+      .onStart((event) => {
+        recordGesture('pan_start', {
+          x: event.x,
+          y: event.y,
+          timestamp: Date.now()
+        })
+      })
+      .onUpdate((event) => {
+        recordGesture('pan_update', {
+          x: event.x,
+          y: event.y,
+          translationX: event.translationX,
+          translationY: event.translationY,
+          velocityX: event.velocityX,
+          velocityY: event.velocityY,
+          timestamp: Date.now()
+        })
+      })
+      .onEnd((event) => {
+        recordGesture('pan_end', {
+          x: event.x,
+          y: event.y,
+          translationX: event.translationX,
+          translationY: event.translationY,
+          velocityX: event.velocityX,
+          velocityY: event.velocityY,
+          timestamp: Date.now()
+        })
+      })
+  }, [recordGesture])
+
+  // Create long press gesture
+  const longPressGesture = useMemo(() => {
+    return Gesture.LongPress()
+      .runOnJS(true)
+      .minDuration(500)
+      .onStart((event) => {
+        recordGesture('long_press', {
+          x: event.x,
+          y: event.y,
+          duration: 500,
+          timestamp: Date.now()
+        })
+      })
+  }, [recordGesture])
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <GestureDetector gesture={Gesture.Simultaneous(tapGesture, panGesture, longPressGesture)}>{children}</GestureDetector>
+    </GestureHandlerRootView>
+  )
+}

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/config/constants.ts

@@ -0,0 +1,60 @@
+
+export const OTEL_MP_SAMPLE_TRACE_RATIO = 0.15
+
+export const SESSION_ID_PROP_NAME = 'multiplayer-session-id'
+
+export const SESSION_SHORT_ID_PROP_NAME = 'multiplayer-session-short-id'
+
+export const SESSION_CONTINUOUS_DEBUGGING_PROP_NAME = 'multiplayer-session-continuous-debugging'
+
+export const SESSION_STATE_PROP_NAME = 'multiplayer-session-state'
+
+export const SESSION_TYPE_PROP_NAME = 'multiplayer-session-type'
+
+export const SESSION_PROP_NAME = 'multiplayer-session-data'
+
+export const SESSION_STARTED_EVENT = 'debug-session:started'
+
+export const SESSION_STOPPED_EVENT = 'debug-session:stopped'
+
+export const SESSION_SUBSCRIBE_EVENT = 'debug-session:subscribe'
+
+export const SESSION_UNSUBSCRIBE_EVENT = 'debug-session:unsubscribe'
+
+export const SESSION_AUTO_CREATED = 'debug-session:auto-created'
+
+export const SESSION_ADD_EVENT = 'debug-session:rrweb:add-event'
+
+export const DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE = 100000
+
+export const SESSION_RESPONSE = 'multiplayer-debug-session-response'
+
+export const CONTINUOUS_DEBUGGING_TIMEOUT = 60000 // 1 minutes
+
+export const DEBUG_SESSION_MAX_DURATION_SECONDS = 10 * 60 + 30 // TODO: move to shared config otel core
+
+// // Package version - injected by webpack during build
+// declare const PACKAGE_VERSION: string
+// export const PACKAGE_VERSION_EXPORT = PACKAGE_VERSION || '1.0.0'
+
+
+// Regex patterns for OpenTelemetry ignore URLs
+export const OTEL_IGNORE_URLS = [
+  // Traces endpoint
+  /.*\/v1\/traces/,
+  // Debug sessions endpoints
+  /.*\/v0\/radar\/debug-sessions\/start$/,
+  /.*\/v0\/radar\/debug-sessions\/[^/]+\/stop$/,
+  /.*\/v0\/radar\/debug-sessions\/[^/]+\/cancel$/,
+
+  // Continuous debug sessions endpoints
+  /.*\/v0\/radar\/continuous-debug-sessions\/start$/,
+  /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/save$/,
+  /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/cancel$/,
+
+  // Remote debug session endpoint
+  /.*\/v0\/radar\/remote-debug-session\/check$/,
+
+  // Or use a more general pattern to catch all radar API endpoints
+  // /.*\/v0\/radar\/.*/
+]

package/src/config/defaults.ts

@@ -0,0 +1,82 @@
+import {
+  SessionRecorderSdk,
+  MULTIPLAYER_BASE_API_URL,
+  MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
+} from '@multiplayer-app/session-recorder-common'
+import {
+  MaskingConfig,
+  SessionRecorderConfigs,
+  WidgetButtonPlacement,
+  WidgetTextOverridesConfig,
+} from '../types'
+import {
+  OTEL_MP_SAMPLE_TRACE_RATIO,
+  DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
+} from './constants'
+const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
+
+export const DEFAULT_MASKING_CONFIG: MaskingConfig = {
+  isContentMaskingEnabled: true,
+  maskBody: mask(sensitiveFields),
+  maskHeaders: mask(sensitiveHeaders),
+  maskBodyFieldsList: sensitiveFields,
+  maskHeadersList: sensitiveHeaders,
+  headersToInclude: [],
+  headersToExclude: [],
+}
+
+export const DEFAULT_WIDGET_TEXT_CONFIG: WidgetTextOverridesConfig = {
+  initialTitleWithContinuous: 'Encountered an issue?',
+  initialTitleWithoutContinuous: 'Encountered an issue?',
+  initialDescriptionWithContinuous: 'Record your session so we can see the problem and fix it faster.',
+  initialDescriptionWithoutContinuous: 'Record your session so we can see the problem and fix it faster.',
+  continuousRecordingLabel: 'Continuous recording',
+  startRecordingButtonText: 'Start recording',
+  finalTitle: 'Done recording?',
+  finalDescription: 'You can also add a quick note with extra context, expectations, or questions. Thank you!',
+  commentPlaceholder: 'Add a message...',
+  saveButtonText: 'Submit recording',
+  cancelButtonText: 'Cancel recording',
+  continuousOverlayTitle: 'Save time, skip the reproductions',
+  continuousOverlayDescription: 'We keep a rolling record of your recent activity. If something doesn’t work as expected, just save the recording and continue working. No need to worry about exceptions and errors - we automatically save recordings for those!',
+  saveLastSnapshotButtonText: 'Save recording',
+  submitDialogTitle: 'Save recording',
+  submitDialogSubtitle: 'This full-stack session recording will be saved directly to your selected Multiplayer project. All data is automatically correlated end-to-end.',
+  submitDialogCommentLabel: 'You can also add context, comments, or notes.',
+  submitDialogCommentPlaceholder: 'Add a message...',
+  submitDialogSubmitText: 'Save',
+  submitDialogCancelText: 'Cancel',
+}
+
+export const BASE_CONFIG: Required<SessionRecorderConfigs> = {
+  apiKey: '',
+
+  version: '',
+  application: '',
+  environment: '',
+
+  showWidget: true,
+  showContinuousRecording: true,
+  widgetButtonPlacement: WidgetButtonPlacement.bottomRight,
+
+  usePostMessageFallback: false,
+  apiBaseUrl: MULTIPLAYER_BASE_API_URL,
+  exporterEndpoint: MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
+
+  schemifyDocSpanPayload: true,
+
+  ignoreUrls: [],
+  propagateTraceHeaderCorsUrls: [],
+
+  sampleTraceRatio: OTEL_MP_SAMPLE_TRACE_RATIO,
+  maxCapturingHttpPayloadSize: DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
+
+  captureBody: true,
+  captureHeaders: true,
+  masking: DEFAULT_MASKING_CONFIG,
+  widgetTextOverrides: DEFAULT_WIDGET_TEXT_CONFIG,
+
+  recordScreen: true,
+  recordGestures: true,
+  recordNavigation: true,
+}

package/src/config/index.ts

@@ -0,0 +1,6 @@
+// Export all config-related functions and constants
+export * from './constants'
+export * from './defaults'
+export * from './validators'
+export * from './masking'
+export * from './session-recorder'

package/src/config/masking.ts

@@ -1,63 +1,12 @@
+import { MaskingConfig } from '../types'
+import { DEFAULT_MASKING_CONFIG } from './defaults'
+import { isValidArray, isValidBoolean, isValidFunction } from './validators'
 import { SessionRecorderSdk } from '@multiplayer-app/session-recorder-common'
 
 const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
 
-/**
- * HTTP Masking Configuration Interface
- * Focused only on HTTP request/response masking for OpenTelemetry traces
- */
-export interface HttpMaskingConfig {
-  /** If true, enables masking for debug span payload in traces */
-  isContentMaskingEnabled?: boolean
-  /** Custom function for masking body in traces */
-  maskBody?: (payload: any, span: any) => any
-  /** 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 */
-  maskHeadersList?: string[]
-  /** List of headers to include in traces (if specified, only these headers will be captured) */
-  headersToInclude?: string[]
-  /** List of headers to exclude from traces */
-  headersToExclude?: string[]
-}
-
-/**
- * Default HTTP masking configuration
- */
-export const DEFAULT_HTTP_MASKING_CONFIG: HttpMaskingConfig = {
-  isContentMaskingEnabled: true,
-  maskBody: mask(sensitiveFields),
-  maskHeaders: mask(sensitiveHeaders),
-  maskBodyFieldsList: sensitiveFields,
-  maskHeadersList: sensitiveHeaders,
-  headersToInclude: [],
-  headersToExclude: [],
-}
-
-/**
- * Validation helper functions
- */
-const isValidArray = (value: any[] | undefined, defaultValue: any[]): any[] => {
-  return Array.isArray(value) ? value : defaultValue
-}
-
-const isValidBoolean = (value: boolean | undefined, defaultValue: boolean): boolean => {
-  return typeof value === 'boolean' ? value : defaultValue
-}
-
-const isValidFunction = (value: any, defaultValue: any): any => {
-  return typeof value === 'function' ? value : defaultValue
-}
-
-/**
- * Get HTTP masking configuration
- * @param masking Optional masking configuration
- * @returns Processed HTTP masking configuration
- */
-export const getHttpMaskingConfig = (masking?: HttpMaskingConfig): HttpMaskingConfig => {
-  const baseMasking = DEFAULT_HTTP_MASKING_CONFIG
+export const getMaskingConfig = (masking?: MaskingConfig): MaskingConfig => {
+  const baseMasking = DEFAULT_MASKING_CONFIG
 
   if (typeof masking !== 'object') {
     return baseMasking
@@ -67,12 +16,12 @@ export const getHttpMaskingConfig = (masking?: HttpMaskingConfig): HttpMaskingCo
   const maskBodyFieldsList = isValidArray(masking.maskBodyFieldsList, sensitiveFields)
 
   return {
-    isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
-    maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
-    maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
-    maskBodyFieldsList,
     maskHeadersList,
+    maskBodyFieldsList,
     headersToInclude: isValidArray(masking.headersToInclude, baseMasking.headersToInclude ?? []),
     headersToExclude: isValidArray(masking.headersToExclude, baseMasking.headersToExclude ?? []),
+    isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
+    maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
+    maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
   }
-}
+}

package/src/config/session-recorder.ts

@@ -0,0 +1,55 @@
+import { SessionRecorderConfigs, SessionRecorderOptions, WidgetButtonPlacement } from '../types'
+import { BASE_CONFIG } from './defaults'
+import { getMaskingConfig } from './masking'
+import {
+  isValidString,
+  isValidNumber,
+  isValidBoolean,
+  isValidArray,
+  isValidEnum,
+} from './validators'
+
+const getWidgetTextOverridesConfig = (config: any, defaultConfig: any) => {
+  if (!config || typeof config !== 'object') {
+    return defaultConfig
+  }
+  return Object.keys(defaultConfig).reduce((acc, key) => {
+    acc[key] = isValidString(config[key], defaultConfig[key])
+    return acc
+  }, {} as Record<string, any>)
+}
+
+export const getSessionRecorderConfig = (c: SessionRecorderOptions): SessionRecorderConfigs => {
+  if (!c) {
+    return BASE_CONFIG
+  }
+
+  return {
+    apiKey: isValidString(c.apiKey, BASE_CONFIG.apiKey),
+    version: isValidString(c.version, BASE_CONFIG.version),
+    application: isValidString(c.application, BASE_CONFIG.application),
+    environment: isValidString(c.environment, BASE_CONFIG.environment),
+
+    exporterEndpoint: isValidString(c.exporterEndpoint, BASE_CONFIG.exporterEndpoint),
+    apiBaseUrl: isValidString(c.apiBaseUrl, BASE_CONFIG.apiBaseUrl),
+    usePostMessageFallback: isValidBoolean(c.usePostMessageFallback, BASE_CONFIG.usePostMessageFallback),
+
+    showWidget: isValidBoolean(c.showWidget, BASE_CONFIG.showWidget),
+    showContinuousRecording: isValidBoolean(c.showContinuousRecording, BASE_CONFIG.showContinuousRecording),
+    widgetButtonPlacement: isValidEnum<WidgetButtonPlacement>(c.widgetButtonPlacement, BASE_CONFIG.widgetButtonPlacement, Object.values(WidgetButtonPlacement) as WidgetButtonPlacement[]),
+    ignoreUrls: isValidArray(c.ignoreUrls, BASE_CONFIG.ignoreUrls),
+    sampleTraceRatio: isValidNumber(c.sampleTraceRatio, BASE_CONFIG.sampleTraceRatio),
+    propagateTraceHeaderCorsUrls: c.propagateTraceHeaderCorsUrls || BASE_CONFIG.propagateTraceHeaderCorsUrls,
+    schemifyDocSpanPayload: isValidBoolean(c.schemifyDocSpanPayload, BASE_CONFIG.schemifyDocSpanPayload),
+    maxCapturingHttpPayloadSize: isValidNumber(c.maxCapturingHttpPayloadSize, BASE_CONFIG.maxCapturingHttpPayloadSize),
+
+    masking: getMaskingConfig(c.masking),
+    captureBody: isValidBoolean(c.captureBody, BASE_CONFIG.captureBody),
+    captureHeaders: isValidBoolean(c.captureHeaders, BASE_CONFIG.captureHeaders),
+    widgetTextOverrides: getWidgetTextOverridesConfig(c.widgetTextOverrides, BASE_CONFIG.widgetTextOverrides),
+
+    recordScreen: isValidBoolean(c.recordScreen, BASE_CONFIG.recordScreen),
+    recordGestures: isValidBoolean(c.recordGestures, BASE_CONFIG.recordGestures),
+    recordNavigation: isValidBoolean(c.recordNavigation, BASE_CONFIG.recordNavigation),
+  }
+}

package/src/config/validators.ts

@@ -0,0 +1,31 @@
+/**
+ * Validation helper functions for configuration objects
+ */
+
+export const isValidStringOrRegExp = (value: string | RegExp | undefined, defaultValue: string | RegExp) => {
+  return typeof value === 'string' || value instanceof RegExp ? value : defaultValue
+}
+
+export const isValidString = <T extends string>(value: string | undefined | T, defaultValue: string) => {
+  return typeof value === 'string' ? value.trim() : defaultValue
+}
+
+export const isValidNumber = (value: number | undefined, defaultValue: number) => {
+  return typeof value === 'number' ? value : defaultValue
+}
+
+export const isValidBoolean = (value: boolean | undefined, defaultValue: boolean) => {
+  return typeof value === 'boolean' ? value : defaultValue
+}
+
+export const isValidArray = (value: any[] | undefined, defaultValue: any[]) => {
+  return Array.isArray(value) ? value : defaultValue
+}
+
+export const isValidEnum = <T>(value: any | T, defaultValue: T, enumValues: T[]): T => {
+  return enumValues.includes(value as T) ? value as T : defaultValue
+}
+
+export const isValidFunction = (value: any, defaultValue: any) => {
+  return typeof value === 'function' ? value : defaultValue
+}

package/src/context/SessionRecorderContext.tsx

@@ -0,0 +1,75 @@
+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 sessionRecorder from '../session-recorder'
+import { ScreenRecorderView } from '../components/ScreenRecorderView'
+
+interface SessionRecorderContextType {
+  instance: typeof SessionRecorder
+}
+
+const SessionRecorderContext = createContext<SessionRecorderContextType | null>(null)
+
+export interface SessionRecorderProviderProps extends PropsWithChildren {
+  options: SessionRecorderOptions
+}
+
+export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, options }) => {
+  const [sessionState, setSessionState] = useState<SessionState | null>(null)
+  const optionsRef = useRef<string>()
+
+  useEffect(() => {
+    const newOptions = JSON.stringify(options)
+    if (optionsRef.current === JSON.stringify(options)) return
+    optionsRef.current = newOptions
+    SessionRecorder.init(options)
+  }, [options])
+
+  useEffect(() => {
+    setSessionState(SessionRecorder.sessionState)
+    SessionRecorder.on('state-change', (state: SessionState) => {
+      setSessionState(state)
+    })
+  }, [])
+
+  const onToggleSession = () => {
+    if (SessionRecorder.sessionState === SessionState.started) {
+      SessionRecorder.stop()
+    } else {
+      SessionRecorder.start()
+    }
+  }
+
+  return (
+    <SessionRecorderContext.Provider value={{ instance: sessionRecorder }}>
+      <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>
+  )
+}
+
+export const useSessionRecorder = (): SessionRecorderContextType => {
+  const context = useContext(SessionRecorderContext)
+  if (!context) {
+    throw new Error('useSessionRecorder must be used within a SessionRecorderProvider')
+  }
+  return context
+}

package/src/expo.ts

@@ -1,41 +1,11 @@
-import { SessionRecorder } from './sessionRecorder'
-import { isExpoEnvironment } from './utils/platform'
-
-// Create a specialized instance for Expo
-const SessionRecorderExpoInstance = new SessionRecorder()
-
-// Add Expo-specific initialization
-const originalInit = SessionRecorderExpoInstance.init.bind(SessionRecorderExpoInstance)
-
-SessionRecorderExpoInstance.init = async function(options: any) {
-  // Add Expo-specific configuration
-  const expoOptions = {
-    ...options,
-    // Add Expo-specific defaults
-    platform: 'expo',
-  }
-  
-  // Log Expo environment detection
-  if (isExpoEnvironment()) {
-    console.log('Multiplayer Session Recorder: Running in Expo environment')
-  }
-  
-  return originalInit(expoOptions)
-}
-
-// Export the Expo instance as default
-export default SessionRecorderExpoInstance
-
-// Export types and classes
-export * from './types'
-export { SessionRecorder } from './sessionRecorder'
-export { TracerReactNativeSDK } from './otel'
-export { RecorderReactNativeSDK } from './recorder'
-export { ApiService } from './services/api.service'
-export { StorageService } from './services/storage.service'
-
-// Export common types
+import './patch'
+import SessionRecorder from './session-recorder'
 export * from '@multiplayer-app/session-recorder-common'
+export * from './context/SessionRecorderContext'
+
+export { SessionRecorder }
+// Export the instance as default
+export default SessionRecorder
 
 // Export Expo-specific utilities
 export { isExpoEnvironment, getPlatformAttributes } from './utils/platform'

package/src/index.ts

@@ -1,20 +1,17 @@
-import { SessionRecorder } from './sessionRecorder'
+import './patch'
+import SessionRecorder from './session-recorder'
+export * from '@multiplayer-app/session-recorder-common'
+export * from './context/SessionRecorderContext'
 
-const SessionRecorderInstance = new SessionRecorder()
+// Export platform utilities including app metadata configuration
+export {
+  detectPlatform,
+  isExpoEnvironment,
+  configureAppMetadata,
+  getPlatformAttributes,
+  getConfiguredAppMetadata,
+} from './utils/platform'
 
+export { SessionRecorder }
 // Export the instance as default
-export default SessionRecorderInstance
-
-// Export types and classes
-export * from './types'
-export { SessionRecorder } from './sessionRecorder'
-export { TracerReactNativeSDK } from './otel'
-export { RecorderReactNativeSDK } from './recorder'
-export { ApiService } from './services/api.service'
-export { StorageService } from './services/storage.service'
-
-// Export common types
-export * from '@multiplayer-app/session-recorder-common'
-
-// Export platform utilities
-export { isExpoEnvironment, getPlatformAttributes, detectPlatform } from './utils/platform'
+export default SessionRecorder