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

package/src/otel/instrumentations/index.ts

@@ -1,73 +1,115 @@
-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'
+import { logger } from '../../utils'
+
 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
+            logger.error('DEBUGGER_LIB', 'Failed to capture fetch payload', error)
           }
-        }
+        },
       })
     )
   } catch (error) {
-    console.warn('Fetch instrumentation not available:', error)
+    logger.warn('DEBUGGER_LIB', 'Fetch instrumentation not available', error)
   }
 
   // XMLHttpRequest instrumentation
   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
+            logger.error('DEBUGGER_LIB', 'Failed to capture xml-http payload', error)
           }
         },
       })
     )
   } catch (error) {
-    console.warn('XMLHttpRequest instrumentation not available:', error)
+    logger.warn('DEBUGGER_LIB', 'XMLHttpRequest instrumentation not available', error)
   }
 
   // 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/reactNativeInstrumentation.ts

@@ -1,4 +1,5 @@
 import { InstrumentationBase } from '@opentelemetry/instrumentation'
+import { logger } from '../../utils'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 
@@ -18,7 +19,7 @@ export class ReactNativeInstrumentation extends InstrumentationBase {
         this._wrap(AsyncStorage, 'setItem', this._wrapAsyncStorage)
       }
     } catch (error) {
-      console.warn('@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
+      logger.warn('DEBUGGER_LIB', '@react-native-async-storage/async-storage is not available. AsyncStorage instrumentation will be disabled.')
     }
   }
 

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()

package/src/recorder/eventExporter.ts

@@ -0,0 +1,141 @@
+import io, { Socket } from 'socket.io-client'
+
+import { ISession } from '../types'
+import { logger } from '../utils'
+
+import {
+  SESSION_ADD_EVENT,
+  SESSION_AUTO_CREATED,
+  SESSION_STOPPED_EVENT,
+  SESSION_SUBSCRIBE_EVENT,
+  SESSION_UNSUBSCRIBE_EVENT,
+} from '../config'
+
+const MAX_RECONNECTION_ATTEMPTS = 2
+
+export class EventExporter {
+  private socket: Socket | null = null
+  private queue: any[] = []
+  private isConnecting: boolean = false
+  private isConnected: boolean = false
+  private attempts: number = 0
+  private sessionId: string | null = null
+
+  constructor(private options: { socketUrl: string, apiKey: string }) { }
+
+  private init(): void {
+    if (this.isConnecting || this.isConnected) return
+    this.attempts++
+    this.isConnecting = true
+    this.socket = io(this.options.socketUrl, {
+      path: '/v0/radar/ws',
+      auth: {
+        'x-api-key': this.options.apiKey,
+      },
+      reconnectionAttempts: 2,
+      transports: ['websocket'],
+    })
+
+    // this.socket.on('connect', () => {
+    //   this.isConnecting = false
+    //   this.isConnected = true
+    //   this.usePostMessage = false
+    //   this.flushQueue()
+    // })
+
+    this.socket.on('ready', () => {
+      this.isConnecting = false
+      this.isConnected = true
+      logger.info('EventExporter', 'Connected to server')
+      this.flushQueue()
+    })
+
+    this.socket.on('disconnect', (err: any) => {
+      this.isConnecting = false
+      this.isConnected = false
+      logger.info('EventExporter', 'Disconnected from server')
+    })
+
+    this.socket.on('connect_error', (err: any) => {
+      this.isConnecting = false
+      this.isConnected = false
+      this.checkReconnectionAttempts()
+      logger.error('EventExporter', 'Error connecting to server', err)
+    })
+
+    this.socket.on(SESSION_STOPPED_EVENT, (data: any) => {
+
+      this.unsubscribeFromSession()
+    })
+
+    this.socket.on(SESSION_AUTO_CREATED, (data: any) => {
+
+    })
+  }
+
+  private checkReconnectionAttempts(): void {
+    if (this.attempts >= MAX_RECONNECTION_ATTEMPTS) {
+
+      this.flushQueue()
+    }
+  }
+
+
+  private flushQueue(): void {
+    while (this.queue.length > 0 && (this.socket?.connected)) {
+      const event = this.queue.shift()
+      if (!event) continue
+
+      if (this.socket?.connected) {
+        this.socket.emit(event.name, event.data)
+      }
+    }
+  }
+
+  private unsubscribeFromSession() {
+    const payload = {
+      debugSessionId: this.sessionId,
+    }
+    if (this.socket?.connected) {
+      this.socket.emit(SESSION_UNSUBSCRIBE_EVENT, payload)
+    }
+  }
+
+  public send(event: any): void {
+    if (this.socket?.connected) {
+      this.socket.emit(SESSION_ADD_EVENT, event)
+    } else {
+      this.queue.push({ data: event, name: SESSION_ADD_EVENT })
+      this.init()
+    }
+  }
+
+  public subscribeToSession(session: ISession): void {
+    this.sessionId = session.shortId || session._id
+    const payload = {
+      projectId: session.project,
+      workspaceId: session.workspace,
+      debugSessionId: this.sessionId,
+      sessionType: session.creationType,
+    }
+    if (this.socket?.connected) {
+      this.socket.emit(SESSION_SUBSCRIBE_EVENT, payload)
+    } else {
+      this.queue.push({ data: payload, name: SESSION_SUBSCRIBE_EVENT })
+      this.init()
+    }
+  }
+
+  public close(): void {
+    if (this.socket?.connected) {
+      setTimeout(() => {
+        this.unsubscribeFromSession()
+        this.attempts = 0
+        this.isConnected = false
+        this.isConnecting = false
+        this.socket?.disconnect()
+        this.socket = null
+      }, 500)
+    }
+  }
+}

package/src/recorder/gestureHandlerRecorder.ts

@@ -0,0 +1,157 @@
+import { Gesture } from 'react-native-gesture-handler'
+import { ReactNode } from 'react'
+import { SessionState } from '../types'
+import { GestureInstrumentation } from '../otel/instrumentations/gestureInstrumentation'
+
+export interface GestureHandlerRecorderProps {
+  children: ReactNode
+  sessionState: SessionState | null
+  onGestureRecord: (gestureType: string, data: any) => void
+}
+
+export class GestureHandlerRecorder {
+  private gestureInstrumentation: GestureInstrumentation
+  private onGestureRecord?: (gestureType: string, data: any) => void
+
+  constructor() {
+    this.gestureInstrumentation = new GestureInstrumentation()
+    this.gestureInstrumentation.enable()
+  }
+
+  setGestureCallback(callback: (gestureType: string, data: any) => void) {
+    this.onGestureRecord = callback
+  }
+
+  // Create tap gesture
+  createTapGesture() {
+    return Gesture.Tap()
+      .onStart((event) => {
+        this.recordGesture('tap', {
+          x: event.x,
+          y: event.y,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  // Create pan gesture (for swipes and drags)
+  createPanGesture() {
+    return Gesture.Pan()
+      .onStart((event) => {
+        this.recordGesture('pan_start', {
+          x: event.x,
+          y: event.y,
+          timestamp: Date.now(),
+        })
+      })
+      .onUpdate((event) => {
+        this.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) => {
+        this.recordGesture('pan_end', {
+          x: event.x,
+          y: event.y,
+          translationX: event.translationX,
+          translationY: event.translationY,
+          velocityX: event.velocityX,
+          velocityY: event.velocityY,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  // Create pinch gesture
+  createPinchGesture() {
+    return Gesture.Pinch()
+      .onStart((event) => {
+        this.recordGesture('pinch_start', {
+          scale: event.scale,
+          focalX: event.focalX,
+          focalY: event.focalY,
+          timestamp: Date.now(),
+        })
+      })
+      .onUpdate((event) => {
+        this.recordGesture('pinch_update', {
+          scale: event.scale,
+          focalX: event.focalX,
+          focalY: event.focalY,
+          timestamp: Date.now(),
+        })
+      })
+      .onEnd((event) => {
+        this.recordGesture('pinch_end', {
+          scale: event.scale,
+          focalX: event.focalX,
+          focalY: event.focalY,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  // Create long press gesture
+  createLongPressGesture() {
+    return Gesture.LongPress()
+      .minDuration(500)
+      .onStart((event) => {
+        this.recordGesture('long_press', {
+          x: event.x,
+          y: event.y,
+          duration: 500,
+          timestamp: Date.now(),
+        })
+      })
+  }
+
+  private recordGesture(gestureType: string, data: any) {
+    // Record with OpenTelemetry
+    switch (gestureType) {
+      case 'tap':
+        this.gestureInstrumentation.recordTap(data.x, data.y)
+        break
+      case 'pan_start':
+      case 'pan_update':
+      case 'pan_end':
+        this.gestureInstrumentation.recordPan(data.translationX || 0, data.translationY || 0)
+        break
+      case 'pinch_start':
+      case 'pinch_update':
+      case 'pinch_end':
+        this.gestureInstrumentation.recordPinch(data.scale, undefined)
+        break
+      case 'long_press':
+        this.gestureInstrumentation.recordLongPress(data.duration, undefined)
+        break
+    }
+
+    // Record with session recorder
+    if (this.onGestureRecord) {
+      this.onGestureRecord(gestureType, data)
+    }
+  }
+
+  // Create a gesture detector component
+  createGestureDetector(children: ReactNode, sessionState: SessionState | null): ReactNode {
+    if (sessionState !== SessionState.started) {
+      return children
+    }
+
+    const tapGesture = this.createTapGesture()
+    const panGesture = this.createPanGesture()
+    const pinchGesture = this.createPinchGesture()
+    const longPressGesture = this.createLongPressGesture()
+
+    // Note: This would need to be implemented as a proper React component
+    // For now, return children directly - the gesture detection would be handled
+    // at the app level by wrapping the entire app with GestureHandlerRootView
+    return children
+  }
+}