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

package/example-usage.tsx

@@ -0,0 +1,174 @@
+/**
+ * Example usage of the React Native Session Recorder with rrweb integration
+ * This file demonstrates how to use the updated session recorder system
+ */
+
+import React from 'react'
+import { View, Text, Button, StyleSheet, Alert } from 'react-native'
+import { SessionRecorderProvider, useSessionRecorder } from './src/context/SessionRecorderContext'
+import { EventType } from './src/types'
+
+// Example app component
+function App() {
+  return (
+    <SessionRecorderProvider
+      options={{
+        apiKey: 'your-api-key-here',
+        version: '1.0.0',
+        application: 'ExampleApp',
+        environment: 'development',
+        recordScreen: true,
+        recordGestures: true,
+        recordNavigation: true
+      }}
+    >
+      <MainContent />
+    </SessionRecorderProvider>
+  )
+}
+
+// Main content component that will be wrapped by TouchEventCapture
+function MainContent() {
+  const { client } = useSessionRecorder()
+
+  const handleStartSession = () => {
+    try {
+      client.start()
+      Alert.alert('Session Started', 'Recording has begun!')
+    } catch (error) {
+      Alert.alert('Error', `Failed to start session: ${error}`)
+    }
+  }
+
+  const handleStopSession = () => {
+    try {
+      client.stop()
+      Alert.alert('Session Stopped', 'Recording has ended!')
+    } catch (error) {
+      Alert.alert('Error', `Failed to stop session: ${error}`)
+    }
+  }
+
+  const handleRecordCustomEvent = () => {
+    // Example of recording a custom rrweb event
+    const customEvent = {
+      type: EventType.Custom,
+      data: {
+        customType: 'button_click',
+        buttonId: 'example_button',
+        timestamp: Date.now()
+      },
+      timestamp: Date.now()
+    }
+
+    client.recordEvent(customEvent)
+    Alert.alert('Custom Event', 'Custom event recorded!')
+  }
+
+  const handleGetRecordingStats = () => {
+    // This would need to be implemented in the SessionRecorder
+    // const stats = client.getRecordingStats()
+    // Alert.alert('Recording Stats', `Events recorded: ${stats.totalEvents}`)
+    Alert.alert('Recording Stats', 'Feature coming soon!')
+  }
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Session Recorder Example</Text>
+      <Text style={styles.subtitle}>This app demonstrates rrweb-compatible session recording for React Native</Text>
+
+      <View style={styles.buttonContainer}>
+        <Button title='Start Recording' onPress={handleStartSession} color='#4CAF50' />
+      </View>
+
+      <View style={styles.buttonContainer}>
+        <Button title='Stop Recording' onPress={handleStopSession} color='#F44336' />
+      </View>
+
+      <View style={styles.buttonContainer}>
+        <Button title='Record Custom Event' onPress={handleRecordCustomEvent} color='#2196F3' />
+      </View>
+
+      <View style={styles.buttonContainer}>
+        <Button title='Get Recording Stats' onPress={handleGetRecordingStats} color='#FF9800' />
+      </View>
+
+      <Text style={styles.instructions}>
+        Recording is now AUTOMATIC! When you start a session, the system will automatically:
+        {'\n'}• Capture screen snapshots periodically
+        {'\n'}• Record all touch interactions (start, move, end)
+        {'\n'}• Generate rrweb-compatible events
+        {'\n'}• No manual setup required!
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#f5f5f5',
+    justifyContent: 'center'
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    marginBottom: 10,
+    color: '#333'
+  },
+  subtitle: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 30,
+    color: '#666'
+  },
+  buttonContainer: {
+    marginVertical: 10
+  },
+  instructions: {
+    fontSize: 14,
+    textAlign: 'center',
+    marginTop: 30,
+    color: '#888',
+    fontStyle: 'italic'
+  }
+})
+
+export default App
+
+/**
+ * AUTOMATIC RECORDING INTEGRATION:
+ *
+ * 1. Screen Capture (AUTOMATIC with react-native-view-shot):
+ *    - Install: npm install react-native-view-shot
+ *    - iOS: Add to Podfile and run pod install
+ *    - Android: No additional setup needed
+ *    - Screen capture happens automatically when session starts
+ *    - Captures the same View element that handles touch events
+ *
+ * 2. Touch Events (AUTOMATIC):
+ *    - TouchEventCapture automatically wraps your app content
+ *    - Touch events are automatically converted to rrweb MouseInteraction events
+ *    - Coordinates are automatically mapped from React Native to rrweb format
+ *    - No manual setup required!
+ *
+ * 3. Event Recording (AUTOMATIC):
+ *    - All events are automatically stored in the RecorderReactNativeSDK
+ *    - Events can be exported using getRecordedEvents()
+ *    - Events are compatible with standard rrweb players
+ *    - Recording starts/stops automatically with session
+ *
+ * 4. ViewShot Integration (AUTOMATIC):
+ *    - The TouchEventCapture View is automatically used for screen capture
+ *    - No need to manually set up viewshot refs
+ *    - Screen captures include all touch interactions
+ *    - Perfect synchronization between touch events and screen captures
+ *
+ * 5. Customization (Optional):
+ *    - Modify capture intervals in ScreenRecorder
+ *    - Adjust touch event throttling in GestureRecorder
+ *    - Add custom event types as needed
+ *    - All core functionality works automatically out of the box
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplayer-app/session-recorder-react-native",
-  "version": "0.0.1-alpha.6",
+  "version": "0.0.1-alpha.8",
   "description": "Multiplayer Fullstack Session Recorder for React Native",
   "author": {
     "name": "Multiplayer Software, Inc.",
@@ -47,7 +47,7 @@
     "lint:fix": "eslint src/**/*.ts --fix",
     "prepublishOnly": "npm run lint && npm run build",
     "prebuild": "node -p \"'export const version = ' + JSON.stringify(require('./package.json').version)\" > src/version.ts",
-    "build": "tsc && babel ./dist --out-dir dist --extensions '.js'"
+    "build": "tsc && babel ./dist --out-dir dist --extensions '.js' && ./copy-react-native-dist.sh"
   },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
@@ -78,11 +78,14 @@
     "@opentelemetry/semantic-conventions": "1.36.0",
     "@react-native-async-storage/async-storage": "^1.21.0",
     "@react-native-community/netinfo": "^11.1.0",
+    "@rrweb/packer": "^2.0.0-alpha.15",
+    "@rrweb/types": "^2.0.0-alpha.18",
     "lib0": "0.2.82",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-mmkv": "^2.11.0",
     "react-native-reanimated": "^3.6.0",
     "react-native-view-shot": "^4.0.3",
+    "rrweb": "^2.0.0-alpha.15",
     "socket.io-client": "4.7.5"
   },
   "peerDependencies": {

package/src/components/GestureCaptureWrapper.tsx

@@ -0,0 +1,110 @@
+import React, { ReactNode, useCallback, useEffect, useMemo, useRef } 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
+  onGestureRecord: (gestureType: string, data: any) => void
+}
+
+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)
+    },
+    [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/config/constants.ts

@@ -33,9 +33,9 @@ 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'
+// // 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

package/src/context/SessionRecorderContext.tsx

@@ -1,64 +1,136 @@
-import React, { createContext, useContext, ReactNode, PropsWithChildren, useMemo } from 'react'
-import { View } from 'react-native'
-import { SessionRecorderOptions } from '../types'
+import React, { createContext, useContext, ReactNode, PropsWithChildren, useState, useEffect, useRef, useCallback } 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'
 
 interface SessionRecorderContextType {
-  client: typeof SessionRecorder
+  instance: typeof SessionRecorder
 }
 
 const SessionRecorderContext = createContext<SessionRecorderContextType | null>(null)
 
 export interface SessionRecorderProviderProps extends PropsWithChildren {
   options: SessionRecorderOptions
-  client?: typeof SessionRecorder
 }
 
-export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, client, options }) => {
-  const sessionRecorder = useMemo(() => {
-    if (client) return client
+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)
-    return SessionRecorder
+  }, [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={{ client: sessionRecorder }}>
-      <TouchEventCapture>{children}</TouchEventCapture>
+    <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>
     </SessionRecorderContext.Provider>
   )
 }
 
-// Touch event capture component
-const TouchEventCapture: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const context = useContext(SessionRecorderContext)
+// 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
 
-  const handleTouchStart = (event: any) => {
-    // if (!context?.isRecording) return
+        case 'pan_start':
+          logger.debug('SessionRecorderContext', 'Recording pan_start as touch start')
+          SessionRecorder.recordTouchStart?.(data.x, data.y, undefined, 1.0)
+          break
 
-    const { pageX, pageY, target } = event.nativeEvent
-    // context.client.recordTap(pageX, pageY, target?.toString())
-  }
-
-  const handleTouchMove = (event: any) => {
-    // if (!context?.isRecording) return
+        case 'pan_update':
+          logger.debug('SessionRecorderContext', 'Recording pan_update as touch move')
+          SessionRecorder.recordTouchMove?.(data.x, data.y, undefined, 1.0)
+          break
 
-    const { pageX, pageY, target } = event.nativeEvent
-    // Record pan gesture
-    // context.gestureRecorder.recordPan(pageX, pageY, target?.toString())
-  }
+        case 'pan_end':
+          logger.debug('SessionRecorderContext', 'Recording pan_end as touch end')
+          SessionRecorder.recordTouchEnd?.(data.x, data.y, undefined, 1.0)
+          break
 
-  const handleTouchEnd = (event: any) => {
-    // if (!context?.isRecording) return
+        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)
+    }
+  }, [])
 
-    const { pageX, pageY, target } = event.nativeEvent
-    // Record tap end
-    // context.gestureRecorder.recordTap(pageX, pageY, target?.toString())
+  // Callback ref to set the viewshot ref immediately when available
+  const setViewShotRef = (ref: View | null) => {
+    if (ref) {
+      SessionRecorder.setViewShotRef?.(ref)
+    }
   }
 
   return (
-    <View style={{ flex: 1 }} onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
-      {children}
-    </View>
+    <GestureCaptureWrapper onGestureRecord={handleGestureRecord}>
+      <View ref={setViewShotRef} style={{ flex: 1 }}>
+        {children}
+      </View>
+    </GestureCaptureWrapper>
   )
 }
 

package/src/index.ts

@@ -3,6 +3,7 @@ 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

package/src/otel/helpers.ts

@@ -7,6 +7,7 @@ import {
   ATTR_MULTIPLAYER_HTTP_RESPONSE_BODY,
   ATTR_MULTIPLAYER_HTTP_RESPONSE_HEADERS,
 } from '@multiplayer-app/session-recorder-common'
+import { logger } from '../utils'
 import { SessionRecorderSdk } from '@multiplayer-app/session-recorder-common'
 import { TracerReactNativeConfig } from '../types'
 
@@ -65,7 +66,7 @@ export function processBody(
     traceId.startsWith(MULTIPLAYER_TRACE_DEBUG_PREFIX) ||
     traceId.startsWith(MULTIPLAYER_TRACE_CONTINUOUS_DEBUG_PREFIX)
   ) {
-    if (masking?.isContentMaskingEnabled) {
+    if (masking.isContentMaskingEnabled) {
       requestBody = requestBody && masking.maskBody?.(requestBody, span)
       responseBody = responseBody && masking.maskBody?.(responseBody, span)
     }
@@ -104,8 +105,8 @@ export function processHeaders(
 
   // Handle header filtering
   if (
-    !masking?.headersToInclude?.length &&
-    !masking?.headersToExclude?.length
+    !masking.headersToInclude?.length &&
+    !masking.headersToExclude?.length
   ) {
     // Add null checks to prevent JSON.parse error when headers is undefined
     if (requestHeaders !== undefined && requestHeaders !== null) {
@@ -115,7 +116,7 @@ export function processHeaders(
       responseHeaders = JSON.parse(JSON.stringify(responseHeaders))
     }
   } else {
-    if (masking?.headersToInclude) {
+    if (masking.headersToInclude) {
       const _requestHeaders: Record<string, string> = {}
       const _responseHeaders: Record<string, string> = {}
 
@@ -132,7 +133,7 @@ export function processHeaders(
       responseHeaders = _responseHeaders
     }
 
-    if (masking?.headersToExclude?.length) {
+    if (masking.headersToExclude?.length) {
       for (const headerName of masking.headersToExclude) {
         delete requestHeaders[headerName]
         delete responseHeaders[headerName]
@@ -141,8 +142,8 @@ export function processHeaders(
   }
 
   // Apply masking
-  const maskedRequestHeaders = masking?.maskHeaders?.(requestHeaders, span) || requestHeaders
-  const maskedResponseHeaders = masking?.maskHeaders?.(responseHeaders, span) || responseHeaders
+  const maskedRequestHeaders = masking.maskHeaders?.(requestHeaders, span) || requestHeaders
+  const maskedResponseHeaders = masking.maskHeaders?.(responseHeaders, span) || responseHeaders
 
   // Convert to string
   const requestHeadersStr = typeof maskedRequestHeaders === 'string'
@@ -195,16 +196,27 @@ export function processHttpPayload(
 }
 
 /**
- * Converts Headers object to plain object (React Native compatible)
+ * Converts Headers object to plain object
  */
-export function headersToObject(headers: Record<string, string> | undefined): Record<string, string> {
+export function headersToObject(headers: Headers | Record<string, string> | Record<string, string | string[]> | string[][] | undefined): Record<string, string> {
   const result: Record<string, string> = {}
 
   if (!headers) {
     return result
   }
 
-  if (typeof headers === 'object' && !Array.isArray(headers)) {
+  if (headers instanceof Headers) {
+    headers.forEach((value: string, key: string) => {
+      result[key] = value
+    })
+  } else if (Array.isArray(headers)) {
+    // Handle array of [key, value] pairs
+    for (const [key, value] of headers) {
+      if (typeof key === 'string' && typeof value === 'string') {
+        result[key] = value
+      }
+    }
+  } else if (typeof headers === 'object' && !Array.isArray(headers)) {
     for (const [key, value] of Object.entries(headers)) {
       if (typeof key === 'string' && typeof value === 'string') {
         result[key] = value
@@ -216,23 +228,29 @@ export function headersToObject(headers: Record<string, string> | undefined): Re
 }
 
 /**
- * Extracts response body as string (React Native compatible)
+ * Extracts response body as string from Response object
  */
-export async function extractResponseBody(response: any): Promise<string | null> {
-  if (!response || !response.body) {
+export async function extractResponseBody(response: Response): Promise<string | null> {
+  if (!response.body) {
     return null
   }
 
   try {
-    if (typeof response.body === 'string') {
-      return response.body
-    } else if (typeof response.body === 'object') {
-      return JSON.stringify(response.body)
+    if (response.body instanceof ReadableStream) {
+      // Check if response body is already consumed
+      if (response.bodyUsed) {
+        return null
+      }
+
+      const responseClone = response.clone()
+      return responseClone.text()
     } else {
-      return String(response.body)
+      return JSON.stringify(response.body)
     }
   } catch (error) {
-    // Failed to extract response body - silently continue
+    // If cloning fails (body already consumed), return null
+    // eslint-disable-next-line no-console
+    logger.warn('DEBUGGER_LIB', 'Failed to extract response body', error)
     return null
   }
 }
@@ -254,4 +272,4 @@ export const getExporterEndpoint = (exporterEndpoint: string): string => {
   const trimmedExporterEndpoint = new URL(exporterEndpoint).origin
 
   return `${trimmedExporterEndpoint}/v1/traces`
-}
+}

package/src/otel/index.ts

@@ -80,9 +80,13 @@ export class TracerReactNativeSDK {
       instrumentations: getInstrumentations(this.config),
     })
 
-    // Initialize React Native specific instrumentations
-    this.navigationInstrumentation = new ReactNavigationInstrumentation()
-    this.gestureInstrumentation = new GestureInstrumentation()
+    // // 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
   }