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

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.7",
   "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,6 +78,7 @@
     "@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",
     "lib0": "0.2.82",
     "react-native-gesture-handler": "^2.14.0",
     "react-native-mmkv": "^2.11.0",

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,6 +1,6 @@
-import React, { createContext, useContext, ReactNode, PropsWithChildren, useMemo } from 'react'
-import { View } from 'react-native'
-import { SessionRecorderOptions } from '../types'
+import React, { createContext, useContext, ReactNode, PropsWithChildren, useMemo, useState, useEffect, useRef } from 'react'
+import { Pressable, Text, View } from 'react-native'
+import { SessionRecorderOptions, SessionState } from '../types'
 import SessionRecorder from '../session-recorder'
 
 interface SessionRecorderContextType {
@@ -15,15 +15,52 @@ export interface SessionRecorderProviderProps extends PropsWithChildren {
 }
 
 export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = ({ children, client, options }) => {
+  const [sessionState, setSessionState] = useState<SessionState | null>(null)
+
   const sessionRecorder = useMemo(() => {
     if (client) return client
     SessionRecorder.init(options)
     return SessionRecorder
   }, [])
 
+  useEffect(() => {
+    if (!sessionRecorder) return
+    setSessionState(sessionRecorder.sessionState)
+  }, [sessionRecorder])
+
+  const onToggleSession = () => {
+    if (sessionState === SessionState.started) {
+      setSessionState(SessionState.stopped)
+      sessionRecorder.stop()
+    } else {
+      setSessionState(SessionState.started)
+      sessionRecorder.start()
+    }
+  }
+
   return (
     <SessionRecorderContext.Provider value={{ client: sessionRecorder }}>
-      <TouchEventCapture>{children}</TouchEventCapture>
+      <TouchEventCapture>
+        {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>
+      </TouchEventCapture>
     </SessionRecorderContext.Provider>
   )
 }
@@ -31,32 +68,72 @@ export const SessionRecorderProvider: React.FC<SessionRecorderProviderProps> = (
 // Touch event capture component
 const TouchEventCapture: React.FC<{ children: ReactNode }> = ({ children }) => {
   const context = useContext(SessionRecorderContext)
+  const viewShotRef = useRef<View>(null)
+
+  // Set the viewshot ref in the session recorder when component mounts
+  useEffect(() => {
+    if (context?.client && viewShotRef.current) {
+      context.client.setViewShotRef?.(viewShotRef.current)
+    }
+  }, [context?.client])
+
+  // Callback ref to set the viewshot ref immediately when available
+  const setViewShotRef = (ref: View | null) => {
+    if (ref && context?.client) {
+      context.client.setViewShotRef?.(ref)
+    }
+  }
 
   const handleTouchStart = (event: any) => {
-    // if (!context?.isRecording) return
+    if (!context?.client || context.client.sessionState !== SessionState.started) return // SessionState.started
+
+    try {
+      const { pageX, pageY, target } = event.nativeEvent
+      const pressure = event.nativeEvent.force || 1.0
 
-    const { pageX, pageY, target } = event.nativeEvent
-    // context.client.recordTap(pageX, pageY, target?.toString())
+      // Record touch start event automatically
+      context.client.recordTouchStart?.(pageX, pageY, target?.toString(), pressure)
+    } catch (error) {
+      console.warn('Failed to record touch start event:', error)
+    }
   }
 
   const handleTouchMove = (event: any) => {
-    // if (!context?.isRecording) return
+    if (!context?.client || context.client.sessionState !== SessionState.started) return // SessionState.started
 
-    const { pageX, pageY, target } = event.nativeEvent
-    // Record pan gesture
-    // context.gestureRecorder.recordPan(pageX, pageY, target?.toString())
+    try {
+      const { pageX, pageY, target } = event.nativeEvent
+      const pressure = event.nativeEvent.force || 1.0
+
+      // Record touch move event automatically
+      context.client.recordTouchMove?.(pageX, pageY, target?.toString(), pressure)
+    } catch (error) {
+      console.warn('Failed to record touch move event:', error)
+    }
   }
 
   const handleTouchEnd = (event: any) => {
-    // if (!context?.isRecording) return
+    if (!context?.client || context.client.sessionState !== SessionState.started) return // SessionState.started
+
+    try {
+      const { pageX, pageY, target } = event.nativeEvent
+      const pressure = event.nativeEvent.force || 1.0
 
-    const { pageX, pageY, target } = event.nativeEvent
-    // Record tap end
-    // context.gestureRecorder.recordTap(pageX, pageY, target?.toString())
+      // Record touch end event automatically
+      context.client.recordTouchEnd?.(pageX, pageY, target?.toString(), pressure)
+    } catch (error) {
+      console.warn('Failed to record touch end event:', error)
+    }
   }
 
   return (
-    <View style={{ flex: 1 }} onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
+    <View
+      ref={setViewShotRef}
+      style={{ flex: 1 }}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
       {children}
     </View>
   )

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

@@ -65,7 +65,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 +104,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 +115,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 +132,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 +141,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 +195,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 +227,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
+    console.warn('[DEBUGGER_LIB] Failed to extract response body:', error)
     return null
   }
 }
@@ -254,4 +271,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
   }

package/src/otel/instrumentations/index.ts

@@ -1,34 +1,55 @@
-import { TracerReactNativeConfig } from '../../types'
-import { ReactNativeInstrumentation } from './reactNativeInstrumentation'
-import { getMaskingConfig } from '../../config/masking'
 import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'
 import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'
 
+import { OTEL_IGNORE_URLS } from '../../config'
+import { TracerReactNativeConfig } from '../../types'
+import { extractResponseBody, headersToObject, processHttpPayload } from '../helpers'
+
 export function getInstrumentations(config: TracerReactNativeConfig) {
-  const masking = getMaskingConfig(config.masking)
+
   const instrumentations = []
 
   // Fetch instrumentation
   try {
     instrumentations.push(
       new FetchInstrumentation({
-        ignoreUrls: config.ignoreUrls || [],
-        propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls || [],
-        applyCustomAttributesOnSpan: (span: any, request: any) => {
-          if (config.captureHeaders) {
-            const headers = request.headers
-            if (headers && masking.maskHeaders) {
-              const maskedHeaders = masking.maskHeaders(headers, span)
-              Object.keys(maskedHeaders).forEach(key => {
-                span.setAttribute(`http.request.header.${key}`, maskedHeaders[key])
-              })
-            } else if (headers) {
-              Object.keys(headers).forEach(key => {
-                span.setAttribute(`http.request.header.${key}`, headers[key])
-              })
+        clearTimingResources: false,
+        ignoreUrls: [
+          ...OTEL_IGNORE_URLS,
+          ...(config.ignoreUrls || []),
+        ],
+        propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
+        applyCustomAttributesOnSpan: async (span, request, response) => {
+          if (!config) return
+
+          const { captureBody, captureHeaders } = config
+
+          try {
+            if (!captureBody && !captureHeaders) {
+              return
+            }
+
+            const requestBody = request.body
+            const requestHeaders = headersToObject(request.headers)
+            const responseHeaders = headersToObject(response instanceof Response ? response.headers : undefined)
+
+            let responseBody: string | null = null
+            if (response instanceof Response && response.body) {
+              responseBody = await extractResponseBody(response)
+            }
+
+            const payload = {
+              requestBody,
+              responseBody,
+              requestHeaders,
+              responseHeaders,
             }
+            processHttpPayload(payload, config, span)
+          } catch (error) {
+            // eslint-disable-next-line
+            console.error('[DEBUGGER_LIB] Failed to capture fetch payload', error)
           }
-        }
+        },
       })
     )
   } catch (error) {
@@ -39,21 +60,41 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
   try {
     instrumentations.push(
       new XMLHttpRequestInstrumentation({
-        ignoreUrls: config.ignoreUrls || [],
-        propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls || [],
-        applyCustomAttributesOnSpan: (span: any, xhr: any) => {
-          if (config.captureHeaders) {
-            const headers = xhr.getAllResponseHeaders()
-            if (headers && masking.maskHeaders) {
-              const maskedHeaders = masking.maskHeaders(headers, span)
-              Object.keys(maskedHeaders).forEach(key => {
-                span.setAttribute(`http.response.header.${key}`, maskedHeaders[key])
-              })
-            } else if (headers) {
-              Object.keys(headers).forEach(key => {
-                span.setAttribute(`http.response.header.${key}`, headers[key])
-              })
+        clearTimingResources: false,
+        ignoreUrls: [
+          ...OTEL_IGNORE_URLS,
+          ...(config.ignoreUrls || []),
+        ],
+        propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
+        applyCustomAttributesOnSpan: (span, xhr) => {
+          if (!config) return
+
+          const { captureBody, captureHeaders } = config
+
+          try {
+            if (!captureBody && !captureHeaders) {
+              return
+            }
+
+            // @ts-ignore
+            const requestBody = xhr.networkRequest.requestBody
+            // @ts-ignore
+            const responseBody = xhr.networkRequest.responseBody
+            // @ts-ignore
+            const requestHeaders = xhr.networkRequest.requestHeaders || {}
+            // @ts-ignore
+            const responseHeaders = xhr.networkRequest.responseHeaders || {}
+
+            const payload = {
+              requestBody,
+              responseBody,
+              requestHeaders,
+              responseHeaders,
             }
+            processHttpPayload(payload, config, span)
+          } catch (error) {
+            // eslint-disable-next-line
+            console.error('[DEBUGGER_LIB] Failed to capture xml-http payload', error)
           }
         },
       })
@@ -63,11 +104,11 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
   }
 
   // Custom React Native instrumentations
-  try {
-    instrumentations.push(new ReactNativeInstrumentation())
-  } catch (error) {
-    console.warn('React Native instrumentation not available:', error)
-  }
+  // try {
+  //   instrumentations.push(new ReactNativeInstrumentation())
+  // } catch (error) {
+  //   console.warn('React Native instrumentation not available:', error)
+  // }
 
   return instrumentations
 }

package/src/otel/instrumentations/reactNavigationInstrumentation.ts

@@ -12,6 +12,11 @@ export class ReactNavigationInstrumentation extends InstrumentationBase {
     // Initialize the instrumentation
   }
 
+  enable(): void {
+    // Enable the instrumentation
+    super.enable()
+  }
+
   setNavigationRef(ref: any) {
     this.navigationRef = ref
     this._setupNavigationListener()