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

package/src/otel/helpers.ts

@@ -1,21 +1,275 @@
+import { Span } from '@opentelemetry/api'
+import {
+  MULTIPLAYER_TRACE_DEBUG_PREFIX,
+  MULTIPLAYER_TRACE_CONTINUOUS_DEBUG_PREFIX,
+  ATTR_MULTIPLAYER_HTTP_REQUEST_BODY,
+  ATTR_MULTIPLAYER_HTTP_REQUEST_HEADERS,
+  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'
 
-export function getExporterEndpoint(endpoint?: string): string {
-  return endpoint || 'http://localhost:4318/v1/traces'
+const { schemify } = SessionRecorderSdk
+
+export interface HttpPayloadData {
+  requestBody?: any
+  responseBody?: any
+  requestHeaders?: Record<string, string>
+  responseHeaders?: Record<string, string>
+}
+
+export interface ProcessedHttpPayload {
+  requestBody?: string
+  responseBody?: string
+  requestHeaders?: string
+  responseHeaders?: string
+}
+
+/**
+ * Checks if the trace should be processed based on trace ID prefixes
+ */
+export function shouldProcessTrace(traceId: string): boolean {
+  return (
+    traceId.startsWith(MULTIPLAYER_TRACE_DEBUG_PREFIX) ||
+    traceId.startsWith(MULTIPLAYER_TRACE_CONTINUOUS_DEBUG_PREFIX)
+  )
+}
+
+/**
+ * Processes request and response body based on trace type and configuration
+ */
+export function processBody(
+  payload: HttpPayloadData,
+  config: TracerReactNativeConfig,
+  span: Span,
+): { requestBody?: string; responseBody?: string } {
+  const { captureBody, masking } = config
+  const traceId = span.spanContext().traceId
+
+  if (!captureBody) {
+    return {}
+  }
+
+  let { requestBody, responseBody } = payload
+
+  if (requestBody !== undefined && requestBody !== null) {
+    requestBody = JSON.parse(JSON.stringify(requestBody))
+  }
+  if (responseBody !== undefined && responseBody !== null) {
+    responseBody = JSON.parse(JSON.stringify(responseBody))
+  }
+
+  // Apply masking for debug traces
+  if (
+    traceId.startsWith(MULTIPLAYER_TRACE_DEBUG_PREFIX) ||
+    traceId.startsWith(MULTIPLAYER_TRACE_CONTINUOUS_DEBUG_PREFIX)
+  ) {
+    if (masking.isContentMaskingEnabled) {
+      requestBody = requestBody && masking.maskBody?.(requestBody, span)
+      responseBody = responseBody && masking.maskBody?.(responseBody, span)
+    }
+  }
+
+  // Convert to string if needed
+  if (typeof requestBody !== 'string') {
+    requestBody = JSON.stringify(requestBody)
+  }
+
+  if (typeof responseBody !== 'string') {
+    responseBody = JSON.stringify(responseBody)
+  }
+
+  return {
+    requestBody: requestBody?.length ? requestBody : undefined,
+    responseBody: responseBody?.length ? responseBody : undefined,
+  }
+}
+
+/**
+ * Processes request and response headers based on configuration
+ */
+export function processHeaders(
+  payload: HttpPayloadData,
+  config: TracerReactNativeConfig,
+  span: Span,
+): { requestHeaders?: string; responseHeaders?: string } {
+  const { captureHeaders, masking } = config
+
+  if (!captureHeaders) {
+    return {}
+  }
+
+  let { requestHeaders = {}, responseHeaders = {} } = payload
+
+  // Handle header filtering
+  if (
+    !masking.headersToInclude?.length &&
+    !masking.headersToExclude?.length
+  ) {
+    // Add null checks to prevent JSON.parse error when headers is undefined
+    if (requestHeaders !== undefined && requestHeaders !== null) {
+      requestHeaders = JSON.parse(JSON.stringify(requestHeaders))
+    }
+    if (responseHeaders !== undefined && responseHeaders !== null) {
+      responseHeaders = JSON.parse(JSON.stringify(responseHeaders))
+    }
+  } else {
+    if (masking.headersToInclude) {
+      const _requestHeaders: Record<string, string> = {}
+      const _responseHeaders: Record<string, string> = {}
+
+      for (const headerName of masking.headersToInclude) {
+        if (requestHeaders[headerName]) {
+          _requestHeaders[headerName] = requestHeaders[headerName]
+        }
+        if (responseHeaders[headerName]) {
+          _responseHeaders[headerName] = responseHeaders[headerName]
+        }
+      }
+
+      requestHeaders = _requestHeaders
+      responseHeaders = _responseHeaders
+    }
+
+    if (masking.headersToExclude?.length) {
+      for (const headerName of masking.headersToExclude) {
+        delete requestHeaders[headerName]
+        delete responseHeaders[headerName]
+      }
+    }
+  }
+
+  // Apply masking
+  const maskedRequestHeaders = masking.maskHeaders?.(requestHeaders, span) || requestHeaders
+  const maskedResponseHeaders = masking.maskHeaders?.(responseHeaders, span) || responseHeaders
+
+  // Convert to string
+  const requestHeadersStr = typeof maskedRequestHeaders === 'string'
+    ? maskedRequestHeaders
+    : JSON.stringify(maskedRequestHeaders)
+
+  const responseHeadersStr = typeof maskedResponseHeaders === 'string'
+    ? maskedResponseHeaders
+    : JSON.stringify(maskedResponseHeaders)
+
+  return {
+    requestHeaders: requestHeadersStr?.length ? requestHeadersStr : undefined,
+    responseHeaders: responseHeadersStr?.length ? responseHeadersStr : undefined,
+  }
 }
 
-export function processHttpPayload(payload: string, maxSize: number = 1000000): string {
-  if (payload.length <= maxSize) {
-    return payload
+/**
+ * Processes HTTP payload (body and headers) and sets span attributes
+ */
+export function processHttpPayload(
+  payload: HttpPayloadData,
+  config: TracerReactNativeConfig,
+  span: Span,
+): void {
+  const traceId = span.spanContext().traceId
+
+  if (!shouldProcessTrace(traceId)) {
+    return
+  }
+
+  const { requestBody, responseBody } = processBody(payload, config, span)
+  const { requestHeaders, responseHeaders } = processHeaders(payload, config, span)
+
+  // Set span attributes
+  if (requestBody) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_REQUEST_BODY, requestBody)
+  }
+
+  if (responseBody) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_RESPONSE_BODY, responseBody)
+  }
+
+  if (requestHeaders) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_REQUEST_HEADERS, requestHeaders)
   }
 
-  // Truncate payload if it's too large
-  return payload.substring(0, maxSize) + '... [truncated]'
+  if (responseHeaders) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_RESPONSE_HEADERS, responseHeaders)
+  }
 }
 
-export function headersToObject(headers: Headers): Record<string, string> {
+/**
+ * Converts Headers object to plain object
+ */
+export function headersToObject(headers: Headers | Record<string, string> | Record<string, string | string[]> | string[][] | undefined): Record<string, string> {
   const result: Record<string, string> = {}
-  headers.forEach((value: string, key: string) => {
-    result[key] = value
-  })
+
+  if (!headers) {
+    return result
+  }
+
+  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
+      }
+    }
+  }
+
   return result
 }
+
+/**
+ * Extracts response body as string from Response object
+ */
+export async function extractResponseBody(response: Response): Promise<string | null> {
+  if (!response.body) {
+    return null
+  }
+
+  try {
+    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 JSON.stringify(response.body)
+    }
+  } catch (error) {
+    // 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
+  }
+}
+
+export const getExporterEndpoint = (exporterEndpoint: string): string => {
+  const hasPath = exporterEndpoint && (() => {
+    try {
+      const url = new URL(exporterEndpoint)
+      return url.pathname !== '/' && url.pathname !== ''
+    } catch {
+      return false
+    }
+  })()
+
+  if (hasPath) {
+    return exporterEndpoint
+  }
+
+  const trimmedExporterEndpoint = new URL(exporterEndpoint).origin
+
+  return `${trimmedExporterEndpoint}/v1/traces`
+}

package/src/otel/index.ts

@@ -8,95 +8,51 @@ 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 { ReactNavigationInstrumentation } from './instrumentations/reactNavigationInstrumentation'
-import { GestureInstrumentation } from './instrumentations/gestureInstrumentation'
-import { getHttpMaskingConfig } from '../config/masking'
-import { getPlatformAttributes } from '../utils/platform'
-
 
-// Create a custom TracerProvider for React Native
-class ReactNativeTracerProvider {
-  private resource: any
-  private idGenerator: any
-  private sampler: any
-  private spanProcessors: any[]
-  private propagator: any
+import { getPlatformAttributes } from '../utils/platform'
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
 
-  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 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,
@@ -122,7 +78,6 @@ export class TracerReactNativeSDK {
     })
 
     this.isInitialized = true
-    console.log('TracerReactNativeSDK initialized successfully')
   }
 
   private _getSpanSessionIdProcessor() {
@@ -141,208 +96,43 @@ export class TracerReactNativeSDK {
     }
   }
 
-  setSessionId(sessionId: string, sessionType: SessionType): void {
-    this._setSessionId(sessionId, sessionType)
-  }
-
-  // Navigation instrumentation methods
-  setNavigationRef(ref: any): void {
-    this.navigationInstrumentation.setNavigationRef(ref)
-  }
-
-  recordNavigate(routeName: string, params?: Record<string, any>): void {
-    this.navigationInstrumentation.recordNavigate(routeName, params)
-  }
-
-  recordGoBack(): void {
-    this.navigationInstrumentation.recordGoBack()
-  }
-
-  recordReset(routes: any[]): void {
-    this.navigationInstrumentation.recordReset(routes)
-  }
-
-  // Gesture instrumentation methods
-  enableGestureTracking(): void {
-    this.gestureInstrumentation.enable()
-  }
-
-  disableGestureTracking(): void {
-    this.gestureInstrumentation.disable()
-  }
-
-  recordTap(x: number, y: number, target?: string): void {
-    this.gestureInstrumentation.recordTap(x, y, target)
-  }
-
-  recordSwipe(direction: string, target?: string): void {
-    this.gestureInstrumentation.recordSwipe(direction, target)
-  }
-
-  recordPinch(scale: number, target?: string): void {
-    this.gestureInstrumentation.recordPinch(scale, target)
-  }
-
-  recordPan(deltaX: number, deltaY: number, target?: string): void {
-    this.gestureInstrumentation.recordPan(deltaX, deltaY, target)
-  }
-
-  recordLongPress(duration: number, target?: string): void {
-    this.gestureInstrumentation.recordLongPress(duration, target)
-  }
-
-  recordGestureError(error: Error, gestureType: string): void {
-    this.gestureInstrumentation.recordGestureError(error, gestureType)
-  }
-
-  // Performance monitoring methods
-  startTrace(name: string, attributes?: Record<string, any>): any {
-    if (!this.isInitialized) {
-      console.warn('TracerReactNativeSDK not initialized')
-      return null
+  start(sessionId: string, sessionType: SessionType): void {
+    if (!this.tracerProvider) {
+      throw new Error(
+        'Configuration not initialized. Call init() before start().',
+      )
     }
 
-    const { trace } = require('@opentelemetry/api')
-    const span = trace.startSpan(name, {
-      attributes: {
-        'trace.type': 'performance',
-        'trace.name': name,
-        ...attributes,
-      },
-    })
-
-    return span
+    this._setSessionId(sessionId, sessionType)
   }
 
-  endTrace(span: any, status?: any): void {
-    if (span) {
-      if (status) {
-        span.setStatus(status)
-      }
-      span.end()
+  stop(): void {
+    if (!this.tracerProvider) {
+      throw new Error(
+        'Configuration not initialized. Call init() before start().',
+      )
     }
-  }
-
-  // Error tracking
-  captureException(error: Error, context?: Record<string, any>): void {
-    if (!this.isInitialized) return
-
-    const { trace, SpanStatusCode } = require('@opentelemetry/api')
-    const span = trace.startSpan('error.capture', {
-      attributes: {
-        'error.type': error.name,
-        'error.message': error.message,
-        'error.stack': error.stack,
-        ...context,
-      },
-    })
-
-    span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
-    span.recordException(error)
-    span.end()
-  }
-
-  // Network monitoring
-  recordNetworkRequest(url: string, method: string, statusCode: number, duration: number): void {
-    if (!this.isInitialized) return
-
-    const { trace } = require('@opentelemetry/api')
-    const span = trace.startSpan('network.request', {
-      attributes: {
-        'http.url': url,
-        'http.method': method,
-        'http.status_code': statusCode,
-        'http.duration': duration,
-        'network.type': 'fetch',
-      },
-    })
-
-    span.setStatus({ code: statusCode >= 400 ? 2 : 1 })
-    span.end()
-  }
-
-  // Screen performance
-  recordScreenLoad(screenName: string, loadTime: number): void {
-    if (!this.isInitialized) return
-
-    const { trace } = require('@opentelemetry/api')
-    const span = trace.startSpan('screen.load', {
-      attributes: {
-        'screen.name': screenName,
-        'screen.load_time': loadTime,
-        'screen.type': 'react_native',
-      },
-    })
 
-    span.end()
+    this._setSessionId('')
   }
 
-  // Memory monitoring
-  recordMemoryUsage(usedMemory: number, totalMemory: number): void {
-    if (!this.isInitialized) return
-
-    const { trace } = require('@opentelemetry/api')
-    const span = trace.startSpan('memory.usage', {
-      attributes: {
-        'memory.used': usedMemory,
-        'memory.total': totalMemory,
-        'memory.percentage': (usedMemory / totalMemory) * 100,
-      },
-    })
-
-    span.end()
-  }
-
-  // Battery monitoring
-  recordBatteryLevel(level: number, isCharging: boolean): void {
-    if (!this.isInitialized) return
-
-    const { trace } = require('@opentelemetry/api')
-    const span = trace.startSpan('battery.status', {
-      attributes: {
-        'battery.level': level,
-        'battery.charging': isCharging,
-      },
-    })
-
-    span.end()
-  }
-
-  // App lifecycle events
-  recordAppStateChange(state: string): void {
-    if (!this.isInitialized) return
-
-    const { trace } = require('@opentelemetry/api')
-    const span = trace.startSpan('app.state_change', {
-      attributes: {
-        'app.state': state,
-        'app.timestamp': Date.now(),
-      },
-    })
+  setApiKey(apiKey: string): void {
+    if (!this.exporter) {
+      throw new Error(
+        'Configuration not initialized. Call init() before setApiKey().',
+      )
+    }
 
-    span.end()
+    this.exporter.setApiKey?.(apiKey)
   }
 
-  // Custom event tracking
-  recordCustomEvent(eventName: string, attributes?: Record<string, any>): void {
-    if (!this.isInitialized) return
-
-    const { trace } = require('@opentelemetry/api')
-    const span = trace.startSpan(`custom.${eventName}`, {
-      attributes: {
-        'event.name': eventName,
-        'event.type': 'custom',
-        ...attributes,
-      },
-    })
-
-    span.end()
+  setSessionId(sessionId: string, sessionType: SessionType): void {
+    this._setSessionId(sessionId, sessionType)
   }
 
-  // Shutdown
+  // Shutdown (React Native specific)
   shutdown(): Promise<void> {
     this.isInitialized = false
-    console.log('TracerReactNativeSDK shutdown')
     return Promise.resolve()
   }
 }