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

package/src/config/constants.ts

@@ -0,0 +1,60 @@
+
+export const OTEL_MP_SAMPLE_TRACE_RATIO = 0.15
+
+export const SESSION_ID_PROP_NAME = 'multiplayer-session-id'
+
+export const SESSION_SHORT_ID_PROP_NAME = 'multiplayer-session-short-id'
+
+export const SESSION_CONTINUOUS_DEBUGGING_PROP_NAME = 'multiplayer-session-continuous-debugging'
+
+export const SESSION_STATE_PROP_NAME = 'multiplayer-session-state'
+
+export const SESSION_TYPE_PROP_NAME = 'multiplayer-session-type'
+
+export const SESSION_PROP_NAME = 'multiplayer-session-data'
+
+export const SESSION_STARTED_EVENT = 'debug-session:started'
+
+export const SESSION_STOPPED_EVENT = 'debug-session:stopped'
+
+export const SESSION_SUBSCRIBE_EVENT = 'debug-session:subscribe'
+
+export const SESSION_UNSUBSCRIBE_EVENT = 'debug-session:unsubscribe'
+
+export const SESSION_AUTO_CREATED = 'debug-session:auto-created'
+
+export const SESSION_ADD_EVENT = 'debug-session:rrweb:add-event'
+
+export const DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE = 100000
+
+export const SESSION_RESPONSE = 'multiplayer-debug-session-response'
+
+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'
+
+
+// Regex patterns for OpenTelemetry ignore URLs
+export const OTEL_IGNORE_URLS = [
+  // Traces endpoint
+  /.*\/v1\/traces/,
+  // Debug sessions endpoints
+  /.*\/v0\/radar\/debug-sessions\/start$/,
+  /.*\/v0\/radar\/debug-sessions\/[^/]+\/stop$/,
+  /.*\/v0\/radar\/debug-sessions\/[^/]+\/cancel$/,
+
+  // Continuous debug sessions endpoints
+  /.*\/v0\/radar\/continuous-debug-sessions\/start$/,
+  /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/save$/,
+  /.*\/v0\/radar\/continuous-debug-sessions\/[^/]+\/cancel$/,
+
+  // Remote debug session endpoint
+  /.*\/v0\/radar\/remote-debug-session\/check$/,
+
+  // Or use a more general pattern to catch all radar API endpoints
+  // /.*\/v0\/radar\/.*/
+]

package/src/config/defaults.ts

@@ -0,0 +1,82 @@
+import {
+  SessionRecorderSdk,
+  MULTIPLAYER_BASE_API_URL,
+  MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
+} from '@multiplayer-app/session-recorder-common'
+import {
+  MaskingConfig,
+  SessionRecorderConfigs,
+  WidgetButtonPlacement,
+  WidgetTextOverridesConfig,
+} from '../types'
+import {
+  OTEL_MP_SAMPLE_TRACE_RATIO,
+  DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
+} from './constants'
+const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
+
+export const DEFAULT_MASKING_CONFIG: MaskingConfig = {
+  isContentMaskingEnabled: true,
+  maskBody: mask(sensitiveFields),
+  maskHeaders: mask(sensitiveHeaders),
+  maskBodyFieldsList: sensitiveFields,
+  maskHeadersList: sensitiveHeaders,
+  headersToInclude: [],
+  headersToExclude: [],
+}
+
+export const DEFAULT_WIDGET_TEXT_CONFIG: WidgetTextOverridesConfig = {
+  initialTitleWithContinuous: 'Encountered an issue?',
+  initialTitleWithoutContinuous: 'Encountered an issue?',
+  initialDescriptionWithContinuous: 'Record your session so we can see the problem and fix it faster.',
+  initialDescriptionWithoutContinuous: 'Record your session so we can see the problem and fix it faster.',
+  continuousRecordingLabel: 'Continuous recording',
+  startRecordingButtonText: 'Start recording',
+  finalTitle: 'Done recording?',
+  finalDescription: 'You can also add a quick note with extra context, expectations, or questions. Thank you!',
+  commentPlaceholder: 'Add a message...',
+  saveButtonText: 'Submit recording',
+  cancelButtonText: 'Cancel recording',
+  continuousOverlayTitle: 'Save time, skip the reproductions',
+  continuousOverlayDescription: 'We keep a rolling record of your recent activity. If something doesn’t work as expected, just save the recording and continue working. No need to worry about exceptions and errors - we automatically save recordings for those!',
+  saveLastSnapshotButtonText: 'Save recording',
+  submitDialogTitle: 'Save recording',
+  submitDialogSubtitle: 'This full-stack session recording will be saved directly to your selected Multiplayer project. All data is automatically correlated end-to-end.',
+  submitDialogCommentLabel: 'You can also add context, comments, or notes.',
+  submitDialogCommentPlaceholder: 'Add a message...',
+  submitDialogSubmitText: 'Save',
+  submitDialogCancelText: 'Cancel',
+}
+
+export const BASE_CONFIG: Required<SessionRecorderConfigs> = {
+  apiKey: '',
+
+  version: '',
+  application: '',
+  environment: '',
+
+  showWidget: true,
+  showContinuousRecording: true,
+  widgetButtonPlacement: WidgetButtonPlacement.bottomRight,
+
+  usePostMessageFallback: false,
+  apiBaseUrl: MULTIPLAYER_BASE_API_URL,
+  exporterEndpoint: MULTIPLAYER_OTEL_DEFAULT_TRACES_EXPORTER_HTTP_URL,
+
+  schemifyDocSpanPayload: true,
+
+  ignoreUrls: [],
+  propagateTraceHeaderCorsUrls: [],
+
+  sampleTraceRatio: OTEL_MP_SAMPLE_TRACE_RATIO,
+  maxCapturingHttpPayloadSize: DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE,
+
+  captureBody: true,
+  captureHeaders: true,
+  masking: DEFAULT_MASKING_CONFIG,
+  widgetTextOverrides: DEFAULT_WIDGET_TEXT_CONFIG,
+
+  recordScreen: true,
+  recordGestures: true,
+  recordNavigation: true,
+}

package/src/config/index.ts

@@ -0,0 +1,6 @@
+// Export all config-related functions and constants
+export * from './constants'
+export * from './defaults'
+export * from './validators'
+export * from './masking'
+export * from './session-recorder'

package/src/config/masking.ts

@@ -1,63 +1,12 @@
+import { MaskingConfig } from '../types'
+import { DEFAULT_MASKING_CONFIG } from './defaults'
+import { isValidArray, isValidBoolean, isValidFunction } from './validators'
 import { SessionRecorderSdk } from '@multiplayer-app/session-recorder-common'
 
 const { mask, sensitiveFields, sensitiveHeaders } = SessionRecorderSdk
 
-/**
- * HTTP Masking Configuration Interface
- * Focused only on HTTP request/response masking for OpenTelemetry traces
- */
-export interface HttpMaskingConfig {
-  /** If true, enables masking for debug span payload in traces */
-  isContentMaskingEnabled?: boolean
-  /** Custom function for masking body in traces */
-  maskBody?: (payload: any, span: any) => any
-  /** Custom function for masking headers in traces */
-  maskHeaders?: (headers: any, span: any) => any
-  /** List of body fields to mask in traces */
-  maskBodyFieldsList?: string[]
-  /** List of headers to mask in traces */
-  maskHeadersList?: string[]
-  /** List of headers to include in traces (if specified, only these headers will be captured) */
-  headersToInclude?: string[]
-  /** List of headers to exclude from traces */
-  headersToExclude?: string[]
-}
-
-/**
- * Default HTTP masking configuration
- */
-export const DEFAULT_HTTP_MASKING_CONFIG: HttpMaskingConfig = {
-  isContentMaskingEnabled: true,
-  maskBody: mask(sensitiveFields),
-  maskHeaders: mask(sensitiveHeaders),
-  maskBodyFieldsList: sensitiveFields,
-  maskHeadersList: sensitiveHeaders,
-  headersToInclude: [],
-  headersToExclude: [],
-}
-
-/**
- * Validation helper functions
- */
-const isValidArray = (value: any[] | undefined, defaultValue: any[]): any[] => {
-  return Array.isArray(value) ? value : defaultValue
-}
-
-const isValidBoolean = (value: boolean | undefined, defaultValue: boolean): boolean => {
-  return typeof value === 'boolean' ? value : defaultValue
-}
-
-const isValidFunction = (value: any, defaultValue: any): any => {
-  return typeof value === 'function' ? value : defaultValue
-}
-
-/**
- * Get HTTP masking configuration
- * @param masking Optional masking configuration
- * @returns Processed HTTP masking configuration
- */
-export const getHttpMaskingConfig = (masking?: HttpMaskingConfig): HttpMaskingConfig => {
-  const baseMasking = DEFAULT_HTTP_MASKING_CONFIG
+export const getMaskingConfig = (masking?: MaskingConfig): MaskingConfig => {
+  const baseMasking = DEFAULT_MASKING_CONFIG
 
   if (typeof masking !== 'object') {
     return baseMasking
@@ -67,12 +16,12 @@ export const getHttpMaskingConfig = (masking?: HttpMaskingConfig): HttpMaskingCo
   const maskBodyFieldsList = isValidArray(masking.maskBodyFieldsList, sensitiveFields)
 
   return {
-    isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
-    maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
-    maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
-    maskBodyFieldsList,
     maskHeadersList,
+    maskBodyFieldsList,
     headersToInclude: isValidArray(masking.headersToInclude, baseMasking.headersToInclude ?? []),
     headersToExclude: isValidArray(masking.headersToExclude, baseMasking.headersToExclude ?? []),
+    isContentMaskingEnabled: isValidBoolean(masking.isContentMaskingEnabled, baseMasking.isContentMaskingEnabled ?? true),
+    maskBody: isValidFunction(masking.maskBody, mask(maskBodyFieldsList)),
+    maskHeaders: isValidFunction(masking.maskHeaders, mask(maskHeadersList)),
   }
-}
+}

package/src/config/session-recorder.ts

@@ -0,0 +1,55 @@
+import { SessionRecorderConfigs, SessionRecorderOptions, WidgetButtonPlacement } from '../types'
+import { BASE_CONFIG } from './defaults'
+import { getMaskingConfig } from './masking'
+import {
+  isValidString,
+  isValidNumber,
+  isValidBoolean,
+  isValidArray,
+  isValidEnum,
+} from './validators'
+
+const getWidgetTextOverridesConfig = (config: any, defaultConfig: any) => {
+  if (!config || typeof config !== 'object') {
+    return defaultConfig
+  }
+  return Object.keys(defaultConfig).reduce((acc, key) => {
+    acc[key] = isValidString(config[key], defaultConfig[key])
+    return acc
+  }, {} as Record<string, any>)
+}
+
+export const getSessionRecorderConfig = (c: SessionRecorderOptions): SessionRecorderConfigs => {
+  if (!c) {
+    return BASE_CONFIG
+  }
+
+  return {
+    apiKey: isValidString(c.apiKey, BASE_CONFIG.apiKey),
+    version: isValidString(c.version, BASE_CONFIG.version),
+    application: isValidString(c.application, BASE_CONFIG.application),
+    environment: isValidString(c.environment, BASE_CONFIG.environment),
+
+    exporterEndpoint: isValidString(c.exporterEndpoint, BASE_CONFIG.exporterEndpoint),
+    apiBaseUrl: isValidString(c.apiBaseUrl, BASE_CONFIG.apiBaseUrl),
+    usePostMessageFallback: isValidBoolean(c.usePostMessageFallback, BASE_CONFIG.usePostMessageFallback),
+
+    showWidget: isValidBoolean(c.showWidget, BASE_CONFIG.showWidget),
+    showContinuousRecording: isValidBoolean(c.showContinuousRecording, BASE_CONFIG.showContinuousRecording),
+    widgetButtonPlacement: isValidEnum<WidgetButtonPlacement>(c.widgetButtonPlacement, BASE_CONFIG.widgetButtonPlacement, Object.values(WidgetButtonPlacement) as WidgetButtonPlacement[]),
+    ignoreUrls: isValidArray(c.ignoreUrls, BASE_CONFIG.ignoreUrls),
+    sampleTraceRatio: isValidNumber(c.sampleTraceRatio, BASE_CONFIG.sampleTraceRatio),
+    propagateTraceHeaderCorsUrls: c.propagateTraceHeaderCorsUrls || BASE_CONFIG.propagateTraceHeaderCorsUrls,
+    schemifyDocSpanPayload: isValidBoolean(c.schemifyDocSpanPayload, BASE_CONFIG.schemifyDocSpanPayload),
+    maxCapturingHttpPayloadSize: isValidNumber(c.maxCapturingHttpPayloadSize, BASE_CONFIG.maxCapturingHttpPayloadSize),
+
+    masking: getMaskingConfig(c.masking),
+    captureBody: isValidBoolean(c.captureBody, BASE_CONFIG.captureBody),
+    captureHeaders: isValidBoolean(c.captureHeaders, BASE_CONFIG.captureHeaders),
+    widgetTextOverrides: getWidgetTextOverridesConfig(c.widgetTextOverrides, BASE_CONFIG.widgetTextOverrides),
+
+    recordScreen: isValidBoolean(c.recordScreen, BASE_CONFIG.recordScreen),
+    recordGestures: isValidBoolean(c.recordGestures, BASE_CONFIG.recordGestures),
+    recordNavigation: isValidBoolean(c.recordNavigation, BASE_CONFIG.recordNavigation),
+  }
+}

package/src/config/validators.ts

@@ -0,0 +1,31 @@
+/**
+ * Validation helper functions for configuration objects
+ */
+
+export const isValidStringOrRegExp = (value: string | RegExp | undefined, defaultValue: string | RegExp) => {
+  return typeof value === 'string' || value instanceof RegExp ? value : defaultValue
+}
+
+export const isValidString = <T extends string>(value: string | undefined | T, defaultValue: string) => {
+  return typeof value === 'string' ? value.trim() : defaultValue
+}
+
+export const isValidNumber = (value: number | undefined, defaultValue: number) => {
+  return typeof value === 'number' ? value : defaultValue
+}
+
+export const isValidBoolean = (value: boolean | undefined, defaultValue: boolean) => {
+  return typeof value === 'boolean' ? value : defaultValue
+}
+
+export const isValidArray = (value: any[] | undefined, defaultValue: any[]) => {
+  return Array.isArray(value) ? value : defaultValue
+}
+
+export const isValidEnum = <T>(value: any | T, defaultValue: T, enumValues: T[]): T => {
+  return enumValues.includes(value as T) ? value as T : defaultValue
+}
+
+export const isValidFunction = (value: any, defaultValue: any) => {
+  return typeof value === 'function' ? value : defaultValue
+}

package/src/expo.ts

@@ -1,34 +1,14 @@
-import { SessionRecorder } from './sessionRecorder'
-import { isExpoEnvironment } from './utils/platform'
+import { SessionRecorder } from './session-recorder'
 
 // Create a specialized instance for Expo
 const SessionRecorderExpoInstance = new SessionRecorder()
 
-// Add Expo-specific initialization
-const originalInit = SessionRecorderExpoInstance.init.bind(SessionRecorderExpoInstance)
-
-SessionRecorderExpoInstance.init = async function(options: any) {
-  // Add Expo-specific configuration
-  const expoOptions = {
-    ...options,
-    // Add Expo-specific defaults
-    platform: 'expo',
-  }
-  
-  // Log Expo environment detection
-  if (isExpoEnvironment()) {
-    console.log('Multiplayer Session Recorder: Running in Expo environment')
-  }
-  
-  return originalInit(expoOptions)
-}
-
 // Export the Expo instance as default
 export default SessionRecorderExpoInstance
 
 // Export types and classes
 export * from './types'
-export { SessionRecorder } from './sessionRecorder'
+export { SessionRecorder } from './session-recorder'
 export { TracerReactNativeSDK } from './otel'
 export { RecorderReactNativeSDK } from './recorder'
 export { ApiService } from './services/api.service'

package/src/index.ts

@@ -1,20 +1,8 @@
-import { SessionRecorder } from './sessionRecorder'
+import './patch'
+import { SessionRecorder } from './session-recorder'
+export * from '@multiplayer-app/session-recorder-common'
 
 const SessionRecorderInstance = new SessionRecorder()
 
 // Export the instance as default
 export default SessionRecorderInstance
-
-// Export types and classes
-export * from './types'
-export { SessionRecorder } from './sessionRecorder'
-export { TracerReactNativeSDK } from './otel'
-export { RecorderReactNativeSDK } from './recorder'
-export { ApiService } from './services/api.service'
-export { StorageService } from './services/storage.service'
-
-// Export common types
-export * from '@multiplayer-app/session-recorder-common'
-
-// Export platform utilities
-export { isExpoEnvironment, getPlatformAttributes, detectPlatform } from './utils/platform'

package/src/otel/helpers.ts

@@ -1,21 +1,257 @@
+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 { 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
   }
 
-  // Truncate payload if it's too large
-  return payload.substring(0, maxSize) + '... [truncated]'
+  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)
+  }
+
+  if (responseHeaders) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_RESPONSE_HEADERS, responseHeaders)
+  }
 }
 
-export function headersToObject(headers: Headers): Record<string, string> {
+/**
+ * Converts Headers object to plain object (React Native compatible)
+ */
+export function headersToObject(headers: Record<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 (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 (React Native compatible)
+ */
+export async function extractResponseBody(response: any): Promise<string | null> {
+  if (!response || !response.body) {
+    return null
+  }
+
+  try {
+    if (typeof response.body === 'string') {
+      return response.body
+    } else if (typeof response.body === 'object') {
+      return JSON.stringify(response.body)
+    } else {
+      return String(response.body)
+    }
+  } catch (error) {
+    // Failed to extract response body - silently continue
+    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`
+}