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

package/src/otel/index.ts

@@ -8,95 +8,54 @@ import {
   ATTR_MULTIPLAYER_SESSION_ID,
   SessionRecorderIdGenerator,
   SessionRecorderTraceIdRatioBasedSampler,
+  SessionRecorderBrowserTraceExporter,
 } from '@multiplayer-app/session-recorder-common'
 import { TracerReactNativeConfig } from '../types'
 import { getInstrumentations } from './instrumentations'
-import { getExporterEndpoint } from './helpers'
+import { getExporterEndpoint, processHttpPayload, headersToObject } from './helpers'
 import { ReactNavigationInstrumentation } from './instrumentations/reactNavigationInstrumentation'
 import { GestureInstrumentation } from './instrumentations/gestureInstrumentation'
-import { getHttpMaskingConfig } from '../config/masking'
 import { getPlatformAttributes } from '../utils/platform'
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
 
 
-// Create a custom TracerProvider for React Native
-class ReactNativeTracerProvider {
-  private resource: any
-  private idGenerator: any
-  private sampler: any
-  private spanProcessors: any[]
-  private propagator: any
-
-  constructor(options: any) {
-    this.resource = options.resource
-    this.idGenerator = options.idGenerator
-    this.sampler = options.sampler
-    this.spanProcessors = options.spanProcessors
-    this.propagator = options.propagator
-  }
-
-  register(options: any) {
-    // Register the provider with OpenTelemetry
-    console.log('ReactNativeTracerProvider registered')
-  }
 
-  getTracer(name: string, version?: string, options?: any): any {
-    // Return a mock tracer for now
-    return {
-      startSpan: (name: string, options?: any) => ({
-        setAttribute: (key: string, value: any) => { },
-        setStatus: (status: any) => { },
-        end: () => { },
-        recordException: (error: Error) => { },
-      }),
-    }
-  }
-}
 
 export class TracerReactNativeSDK {
-  private tracerProvider?: ReactNativeTracerProvider
+  private tracerProvider?: WebTracerProvider
   private config?: TracerReactNativeConfig
-  private httpMaskingConfig: any
+
   private sessionId = ''
-  private idGenerator: SessionRecorderIdGenerator
+  private idGenerator?: SessionRecorderIdGenerator
   private exporter?: any
-  private navigationInstrumentation: ReactNavigationInstrumentation
-  private gestureInstrumentation: GestureInstrumentation
+  private navigationInstrumentation?: ReactNavigationInstrumentation
+  private gestureInstrumentation?: GestureInstrumentation
   private isInitialized = false
 
-  constructor() {
-    this.idGenerator = new SessionRecorderIdGenerator()
-    this.navigationInstrumentation = new ReactNavigationInstrumentation()
-    this.gestureInstrumentation = new GestureInstrumentation()
-  }
+  constructor() { }
 
   private _setSessionId(
     sessionId: string,
     sessionType: SessionType = SessionType.PLAIN,
   ) {
     this.sessionId = sessionId
-    this.idGenerator.setSessionId(sessionId, sessionType)
+    this.idGenerator?.setSessionId(sessionId, sessionType)
   }
 
   init(options: TracerReactNativeConfig): void {
-    if (this.isInitialized) {
-      console.warn('TracerReactNativeSDK already initialized')
-      return
-    }
-
     this.config = options
-    this.httpMaskingConfig = getHttpMaskingConfig(options.httpMasking)
+
     const { application, version, environment } = this.config
 
-    // Create OTLP exporter
-    const { OTLPTraceExporter } = require('@opentelemetry/exporter-trace-otlp-http')
-    this.exporter = new OTLPTraceExporter({
+    this.idGenerator = new SessionRecorderIdGenerator()
+
+    this.exporter = new SessionRecorderBrowserTraceExporter({
+      apiKey: options.apiKey,
       url: getExporterEndpoint(options.exporterEndpoint),
-      headers: {
-        'Authorization': `Bearer ${options.apiKey}`,
-      },
+      usePostMessageFallback: options.usePostMessageFallback,
     })
 
-    this.tracerProvider = new ReactNativeTracerProvider({
+    this.tracerProvider = new WebTracerProvider({
       resource: resourceFromAttributes({
         [SemanticAttributes.SEMRESATTRS_SERVICE_NAME]: application,
         [SemanticAttributes.SEMRESATTRS_SERVICE_VERSION]: version,
@@ -121,8 +80,11 @@ export class TracerReactNativeSDK {
       instrumentations: getInstrumentations(this.config),
     })
 
+    // Initialize React Native specific instrumentations
+    this.navigationInstrumentation = new ReactNavigationInstrumentation()
+    this.gestureInstrumentation = new GestureInstrumentation()
+
     this.isInitialized = true
-    console.log('TracerReactNativeSDK initialized successfully')
   }
 
   private _getSpanSessionIdProcessor() {
@@ -141,64 +103,94 @@ export class TracerReactNativeSDK {
     }
   }
 
+  start(sessionId: string, sessionType: SessionType): void {
+    if (!this.tracerProvider) {
+      throw new Error(
+        'Configuration not initialized. Call init() before start().',
+      )
+    }
+
+    this._setSessionId(sessionId, sessionType)
+  }
+
+  stop(): void {
+    if (!this.tracerProvider) {
+      throw new Error(
+        'Configuration not initialized. Call init() before start().',
+      )
+    }
+
+    this._setSessionId('')
+  }
+
+  setApiKey(apiKey: string): void {
+    if (!this.exporter) {
+      throw new Error(
+        'Configuration not initialized. Call init() before setApiKey().',
+      )
+    }
+
+    this.exporter.setApiKey?.(apiKey)
+  }
+
   setSessionId(sessionId: string, sessionType: SessionType): void {
     this._setSessionId(sessionId, sessionType)
   }
 
   // Navigation instrumentation methods
   setNavigationRef(ref: any): void {
-    this.navigationInstrumentation.setNavigationRef(ref)
+    this.navigationInstrumentation?.setNavigationRef(ref)
   }
 
   recordNavigate(routeName: string, params?: Record<string, any>): void {
-    this.navigationInstrumentation.recordNavigate(routeName, params)
+    this.navigationInstrumentation?.recordNavigate(routeName, params)
   }
 
   recordGoBack(): void {
-    this.navigationInstrumentation.recordGoBack()
+    this.navigationInstrumentation?.recordGoBack()
   }
 
   recordReset(routes: any[]): void {
-    this.navigationInstrumentation.recordReset(routes)
+    this.navigationInstrumentation?.recordReset(routes)
   }
 
   // Gesture instrumentation methods
   enableGestureTracking(): void {
-    this.gestureInstrumentation.enable()
+    this.gestureInstrumentation?.enable()
   }
 
   disableGestureTracking(): void {
-    this.gestureInstrumentation.disable()
+    this.gestureInstrumentation?.disable()
   }
 
   recordTap(x: number, y: number, target?: string): void {
-    this.gestureInstrumentation.recordTap(x, y, target)
+    this.gestureInstrumentation?.recordTap(x, y, target)
   }
 
   recordSwipe(direction: string, target?: string): void {
-    this.gestureInstrumentation.recordSwipe(direction, target)
+    this.gestureInstrumentation?.recordSwipe(direction, target)
   }
 
   recordPinch(scale: number, target?: string): void {
-    this.gestureInstrumentation.recordPinch(scale, target)
+    this.gestureInstrumentation?.recordPinch(scale, target)
   }
 
   recordPan(deltaX: number, deltaY: number, target?: string): void {
-    this.gestureInstrumentation.recordPan(deltaX, deltaY, target)
+    this.gestureInstrumentation?.recordPan(deltaX, deltaY, target)
   }
 
   recordLongPress(duration: number, target?: string): void {
-    this.gestureInstrumentation.recordLongPress(duration, target)
+    this.gestureInstrumentation?.recordLongPress(duration, target)
   }
 
   recordGestureError(error: Error, gestureType: string): void {
-    this.gestureInstrumentation.recordGestureError(error, gestureType)
+    this.gestureInstrumentation?.recordGestureError(error, gestureType)
   }
 
   // Performance monitoring methods
   startTrace(name: string, attributes?: Record<string, any>): any {
     if (!this.isInitialized) {
-      console.warn('TracerReactNativeSDK not initialized')
+      // Tracer not initialized - silently return
       return null
     }
 
@@ -242,8 +234,8 @@ export class TracerReactNativeSDK {
     span.end()
   }
 
-  // Network monitoring
-  recordNetworkRequest(url: string, method: string, statusCode: number, duration: number): void {
+  // Network monitoring with enhanced HTTP payload processing
+  recordNetworkRequest(url: string, method: string, statusCode: number, duration: number, payload?: any): void {
     if (!this.isInitialized) return
 
     const { trace } = require('@opentelemetry/api')
@@ -257,6 +249,48 @@ export class TracerReactNativeSDK {
       },
     })
 
+    // Process HTTP payload if provided
+    if (payload && this.config) {
+      processHttpPayload(payload, this.config, span)
+    }
+
+    span.setStatus({ code: statusCode >= 400 ? 2 : 1 })
+    span.end()
+  }
+
+  // Enhanced HTTP request recording with headers and body
+  recordHttpRequest(url: string, method: string, requestHeaders?: Record<string, string>, requestBody?: any): any {
+    if (!this.isInitialized) return null
+
+    const { trace } = require('@opentelemetry/api')
+    const span = trace.startSpan('http.request', {
+      attributes: {
+        'http.url': url,
+        'http.method': method,
+        'http.request_headers': headersToObject(requestHeaders),
+      },
+    })
+
+    // Process request payload
+    if (requestBody && this.config) {
+      processHttpPayload({ requestBody, requestHeaders }, this.config, span)
+    }
+
+    return span
+  }
+
+  // Enhanced HTTP response recording
+  recordHttpResponse(span: any, statusCode: number, responseHeaders?: Record<string, string>, responseBody?: any): void {
+    if (!span || !this.isInitialized) return
+
+    span.setAttribute('http.status_code', statusCode)
+    span.setAttribute('http.response_headers', headersToObject(responseHeaders))
+
+    // Process response payload
+    if (responseBody && this.config) {
+      processHttpPayload({ responseBody, responseHeaders }, this.config, span)
+    }
+
     span.setStatus({ code: statusCode >= 400 ? 2 : 1 })
     span.end()
   }
@@ -339,10 +373,9 @@ export class TracerReactNativeSDK {
     span.end()
   }
 
-  // Shutdown
+  // Shutdown (React Native specific)
   shutdown(): Promise<void> {
     this.isInitialized = false
-    console.log('TracerReactNativeSDK shutdown')
     return Promise.resolve()
   }
 }

package/src/otel/instrumentations/index.ts

@@ -1,9 +1,9 @@
 import { TracerReactNativeConfig } from '../../types'
 import { ReactNativeInstrumentation } from './reactNativeInstrumentation'
-import { getHttpMaskingConfig } from '../../config/masking'
+import { getMaskingConfig } from '../../config/masking'
 
 export function getInstrumentations(config: TracerReactNativeConfig) {
-  const httpMaskingConfig = getHttpMaskingConfig(config.httpMasking)
+  const masking = getMaskingConfig(config.masking)
   const instrumentations = []
 
   // Fetch instrumentation
@@ -16,8 +16,8 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
         applyCustomAttributesOnSpan: (span: any, request: any) => {
           if (config.captureHeaders) {
             const headers = request.headers
-            if (headers && httpMaskingConfig.maskHeaders) {
-              const maskedHeaders = httpMaskingConfig.maskHeaders(headers, span)
+            if (headers && masking.maskHeaders) {
+              const maskedHeaders = masking.maskHeaders(headers, span)
               Object.keys(maskedHeaders).forEach(key => {
                 span.setAttribute(`http.request.header.${key}`, maskedHeaders[key])
               })
@@ -29,8 +29,8 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
           }
         },
         applyCustomAttributesOnSpanResponse: (span: any, response: any) => {
-          if (config.captureBody && httpMaskingConfig.maskBody) {
-            const maskedBody = httpMaskingConfig.maskBody(response.body, span)
+          if (config.captureBody && masking.maskBody) {
+            const maskedBody = masking.maskBody(response.body, span)
             span.setAttribute('http.response.body', JSON.stringify(maskedBody))
           } else if (config.captureBody) {
             span.setAttribute('http.response.body', JSON.stringify(response.body))
@@ -52,8 +52,8 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
         applyCustomAttributesOnSpan: (span: any, xhr: any) => {
           if (config.captureHeaders) {
             const headers = xhr.getAllResponseHeaders()
-            if (headers && httpMaskingConfig.maskHeaders) {
-              const maskedHeaders = httpMaskingConfig.maskHeaders(headers, span)
+            if (headers && masking.maskHeaders) {
+              const maskedHeaders = masking.maskHeaders(headers, span)
               Object.keys(maskedHeaders).forEach(key => {
                 span.setAttribute(`http.response.header.${key}`, maskedHeaders[key])
               })

package/src/patch/index.ts

@@ -0,0 +1 @@
+import './xhr'

package/src/patch/xhr.ts

@@ -0,0 +1,142 @@
+import {
+
+  isFormData,
+  isNullish,
+  isObject,
+  isString,
+} from '../utils/type-utils'
+import { formDataToQuery } from '../utils/request-utils'
+import { DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE } from '../config'
+
+let recordRequestHeaders = true
+let recordResponseHeaders = true
+const shouldRecordBody = true
+let maxCapturingHttpPayloadSize = DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE
+
+export const setMaxCapturingHttpPayloadSize = (_maxCapturingHttpPayloadSize: number) => {
+  maxCapturingHttpPayloadSize = _maxCapturingHttpPayloadSize
+}
+
+export const setShouldRecordHttpData = (shouldRecordBody: boolean, shouldRecordHeaders: boolean) => {
+  recordRequestHeaders = shouldRecordHeaders
+  recordResponseHeaders = shouldRecordHeaders
+  // eslint-disable-next-line
+  shouldRecordBody = shouldRecordBody
+}
+
+function _tryReadXHRBody({
+  body,
+  url,
+}: {
+  body: any | null | undefined
+  url: string | URL | RequestInfo
+}): string | null {
+  if (isNullish(body)) {
+    return null
+  }
+
+  if (isString(body)) {
+    return body
+  }
+
+
+  if (isFormData(body)) {
+    return formDataToQuery(body)
+  }
+
+  if (isObject(body)) {
+    try {
+      return JSON.stringify(body)
+    } catch {
+      return '[XHR] Failed to stringify response object'
+    }
+  }
+
+  return `[XHR] Cannot read body of type ${Object.prototype.toString.call(body)}`
+}
+
+(function (xhr) {
+  const originalOpen = XMLHttpRequest.prototype.open
+
+  xhr.open = function (
+    method: string,
+    url: string | URL,
+    async = true,
+    username?: string | null,
+    password?: string | null,
+  ) {
+    const xhr = this as XMLHttpRequest
+    const networkRequest: {
+      requestHeaders?: any,
+      requestBody?: any,
+      responseHeaders?: any,
+      responseBody?: any,
+    } = {}
+
+
+    // @ts-ignore
+    const requestHeaders: Record<string, string> = {}
+    const originalSetRequestHeader = xhr.setRequestHeader.bind(xhr)
+    xhr.setRequestHeader = (header: string, value: string) => {
+      requestHeaders[header] = value
+      return originalSetRequestHeader(header, value)
+    }
+    if (recordRequestHeaders) {
+      networkRequest.requestHeaders = requestHeaders
+    }
+
+    const originalSend = xhr.send.bind(xhr)
+    xhr.send = (body) => {
+      if (shouldRecordBody) {
+        const requestBody = _tryReadXHRBody({ body, url })
+
+        if (
+          requestBody?.length
+          && new Blob([requestBody]).size <= maxCapturingHttpPayloadSize
+        ) {
+          networkRequest.requestBody = requestBody
+        }
+      }
+      return originalSend(body)
+    }
+
+    xhr.addEventListener('readystatechange', () => {
+      if (xhr.readyState !== xhr.DONE) {
+        return
+      }
+
+
+      // @ts-ignore
+      const responseHeaders: Record<string, string> = {}
+      const rawHeaders = xhr.getAllResponseHeaders()
+      const headers = rawHeaders.trim().split(/[\r\n]+/)
+      headers.forEach((line) => {
+        const parts = line.split(': ')
+        const header = parts.shift()
+        const value = parts.join(': ')
+        if (header) {
+          responseHeaders[header] = value
+        }
+      })
+      if (recordResponseHeaders) {
+        networkRequest.responseHeaders = responseHeaders
+      }
+      if (shouldRecordBody) {
+        const responseBody = _tryReadXHRBody({ body: xhr.response, url })
+
+        if (
+          responseBody?.length
+          && new Blob([responseBody]).size <= maxCapturingHttpPayloadSize
+        ) {
+          networkRequest.responseBody = responseBody
+        }
+      }
+    })
+
+
+    // @ts-ignore
+    xhr.networkRequest = networkRequest
+
+    originalOpen.call(xhr, method, url as string, async, username, password)
+  }
+})(XMLHttpRequest.prototype)

package/src/recorder/gestureRecorder.ts

@@ -18,13 +18,13 @@ export class GestureRecorder {
     this.isRecording = true
     this.events = []
     this._setupGestureHandlers()
-    console.log('Gesture recording started')
+    // Gesture recording started
   }
 
   stop(): void {
     this.isRecording = false
     this._removeGestureHandlers()
-    console.log('Gesture recording stopped')
+    // Gesture recording stopped
   }
 
   pause(): void {
@@ -42,7 +42,7 @@ export class GestureRecorder {
       const { Dimensions } = require('react-native')
       this.screenDimensions = Dimensions.get('window')
     } catch (error) {
-      console.warn('Failed to get screen dimensions:', error)
+      // Failed to get screen dimensions - silently continue
       this.screenDimensions = { width: 375, height: 667 } // Default fallback
     }
   }
@@ -52,16 +52,16 @@ export class GestureRecorder {
     try {
       // This would integrate with React Native's component tracking
       // For now, we'll provide methods for manual registration
-      console.log('Input tracking setup complete')
+      // Input tracking setup complete
     } catch (error) {
-      console.warn('Failed to setup input tracking:', error)
+      // Failed to setup input tracking - silently continue
     }
   }
 
   private _setupGestureHandlers(): void {
     // This would integrate with react-native-gesture-handler
     // For now, we'll create a comprehensive implementation that can be easily integrated
-    console.log('Setting up gesture handlers')
+    // Setting up gesture handlers
 
     // Set up global gesture listener
     this._setupGlobalGestureListener()
@@ -73,15 +73,15 @@ export class GestureRecorder {
       const { TouchableWithoutFeedback } = require('react-native')
 
       // This is a simplified implementation - in production you'd use react-native-gesture-handler
-      console.log('Global gesture listener setup complete')
+      // Global gesture listener setup complete
     } catch (error) {
-      console.warn('Failed to setup global gesture listener:', error)
+      // Failed to setup global gesture listener - silently continue
     }
   }
 
   private _removeGestureHandlers(): void {
     this.gestureHandlers.clear()
-    console.log('Gesture handlers removed')
+    // Gesture handlers removed
   }
 
   private _recordEvent(event: GestureEvent): void {
@@ -103,7 +103,7 @@ export class GestureRecorder {
 
   private _sendEvent(event: GestureEvent): void {
     // Send event to backend or store locally
-    console.log('Gesture event recorded:', event)
+    // Gesture event recorded
   }
 
   private _recordOpenTelemetrySpan(event: GestureEvent): void {
@@ -142,7 +142,7 @@ export class GestureRecorder {
       span.setStatus({ code: SpanStatusCode.OK })
       span.end()
     } catch (error) {
-      console.warn('Failed to record OpenTelemetry span for gesture:', error)
+      // Failed to record OpenTelemetry span for gesture - silently continue
     }
   }
 
@@ -376,7 +376,7 @@ export class GestureRecorder {
       span.recordException(error)
       span.end()
     } catch (spanError) {
-      console.warn('Failed to record error span:', spanError)
+      // Failed to record error span - silently continue
     }
   }
 

package/src/recorder/navigationTracker.ts

@@ -28,13 +28,13 @@ export class NavigationTracker {
     this.navigationStack = []
     this.navigationStartTime = Date.now()
     this._setupNavigationListener()
-    console.log('Navigation tracking started')
+    // Navigation tracking started
   }
 
   stop(): void {
     this.isRecording = false
     this._removeNavigationListener()
-    console.log('Navigation tracking stopped')
+    // Navigation tracking stopped
   }
 
   pause(): void {
@@ -48,7 +48,7 @@ export class NavigationTracker {
 
   private _setupNavigationListener(): void {
     if (!this.navigationRef) {
-      console.warn('Navigation ref not set')
+      // Navigation ref not set - silently continue
       return
     }
 
@@ -79,9 +79,9 @@ export class NavigationTracker {
       this.navigationListeners.set('blur', blurListener)
       this.navigationListeners.set('beforeRemove', beforeRemoveListener)
 
-      console.log('Navigation listeners setup complete')
+      // Navigation listeners setup complete
     } catch (error) {
-      console.warn('Failed to setup navigation listeners:', error)
+      // Failed to setup navigation listeners - silently continue
     }
   }
 
@@ -94,9 +94,9 @@ export class NavigationTracker {
         }
       })
       this.navigationListeners.clear()
-      console.log('Navigation listeners removed')
+      // Navigation listeners removed
     } catch (error) {
-      console.warn('Failed to remove navigation listeners:', error)
+      // Failed to remove navigation listeners - silently continue
     }
   }
 
@@ -148,7 +148,7 @@ export class NavigationTracker {
   }
 
   private _sendEvent(event: NavigationEvent): void {
-    console.log('Navigation event recorded:', event)
+    // Navigation event recorded
   }
 
   private _recordOpenTelemetrySpan(event: NavigationEvent): void {
@@ -178,7 +178,7 @@ export class NavigationTracker {
       span.setStatus({ code: SpanStatusCode.OK })
       span.end()
     } catch (error) {
-      console.warn('Failed to record OpenTelemetry span for navigation:', error)
+      // Failed to record OpenTelemetry span for navigation - silently continue
     }
   }
 
@@ -399,7 +399,7 @@ export class NavigationTracker {
       span.recordException(error)
       span.end()
     } catch (spanError) {
-      console.warn('Failed to record error span:', spanError)
+      // Failed to record error span - silently continue
     }
   }