@multiplayer-app/session-recorder-react-native 1.0.1-beta.3 → 1.0.1-beta.4

package/src/otel/index.ts

@@ -0,0 +1,135 @@
+import { resourceFromAttributes } from '@opentelemetry/resources'
+import { W3CTraceContextPropagator } from '@opentelemetry/core'
+import { BatchSpanProcessor } from '@opentelemetry/sdk-trace-base'
+import * as SemanticAttributes from '@opentelemetry/semantic-conventions'
+import { registerInstrumentations } from '@opentelemetry/instrumentation'
+import {
+  SessionType,
+  ATTR_MULTIPLAYER_SESSION_ID,
+  SessionRecorderIdGenerator,
+  SessionRecorderTraceIdRatioBasedSampler,
+  SessionRecorderBrowserTraceExporter,
+} from '@multiplayer-app/session-recorder-common'
+import { type TracerReactNativeConfig } from '../types'
+import { getInstrumentations } from './instrumentations'
+import { getExporterEndpoint } from './helpers'
+
+import { getPlatformAttributes } from '../utils/platform'
+import { WebTracerProvider } from '@opentelemetry/sdk-trace-web'
+
+
+
+
+export class TracerReactNativeSDK {
+  private tracerProvider?: WebTracerProvider
+  private config?: TracerReactNativeConfig
+
+  private sessionId = ''
+  private idGenerator?: SessionRecorderIdGenerator
+  private exporter?: any
+
+
+  constructor() { }
+
+  private _setSessionId(
+    sessionId: string,
+    sessionType: SessionType = SessionType.PLAIN,
+  ) {
+    this.sessionId = sessionId
+    this.idGenerator?.setSessionId(sessionId, sessionType)
+  }
+
+  init(options: TracerReactNativeConfig): void {
+    this.config = options
+
+    const { application, version, environment } = this.config
+
+    this.idGenerator = new SessionRecorderIdGenerator()
+
+    this.exporter = new SessionRecorderBrowserTraceExporter({
+      apiKey: options.apiKey,
+      url: getExporterEndpoint(options.exporterEndpoint),
+    })
+
+    this.tracerProvider = new WebTracerProvider({
+      resource: resourceFromAttributes({
+        [SemanticAttributes.SEMRESATTRS_SERVICE_NAME]: application,
+        [SemanticAttributes.SEMRESATTRS_SERVICE_VERSION]: version,
+        [SemanticAttributes.SEMRESATTRS_DEPLOYMENT_ENVIRONMENT]: environment,
+        ...getPlatformAttributes(),
+      }),
+      idGenerator: this.idGenerator,
+      sampler: new SessionRecorderTraceIdRatioBasedSampler(this.config.sampleTraceRatio || 0.15),
+      spanProcessors: [
+        this._getSpanSessionIdProcessor(),
+        new BatchSpanProcessor(this.exporter),
+      ],
+    })
+
+    this.tracerProvider.register({
+      propagator: new W3CTraceContextPropagator(),
+    })
+
+    // Register instrumentations
+    registerInstrumentations({
+      tracerProvider: this.tracerProvider,
+      instrumentations: getInstrumentations(this.config),
+    })
+
+  }
+
+  private _getSpanSessionIdProcessor() {
+    return {
+      onStart: (span: any) => {
+        if (this.sessionId) {
+          span.setAttribute(ATTR_MULTIPLAYER_SESSION_ID, this.sessionId)
+        }
+        // Add React Native specific attributes
+        span.setAttribute('platform', 'react-native')
+        span.setAttribute('timestamp', Date.now())
+      },
+      onEnd: () => { },
+      shutdown: () => Promise.resolve(),
+      forceFlush: () => Promise.resolve(),
+    }
+  }
+
+  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)
+  }
+
+  // Shutdown (React Native specific)
+  shutdown(): Promise<void> {
+    return Promise.resolve()
+  }
+}

package/src/otel/instrumentations/index.ts

@@ -0,0 +1,115 @@
+import { FetchInstrumentation } from '@opentelemetry/instrumentation-fetch'
+import { XMLHttpRequestInstrumentation } from '@opentelemetry/instrumentation-xml-http-request'
+
+import { logger } from '../../utils'
+import { OTEL_IGNORE_URLS } from '../../config'
+import { type TracerReactNativeConfig } from '../../types'
+import { extractResponseBody, headersToObject, processHttpPayload } from '../helpers'
+
+export function getInstrumentations(config: TracerReactNativeConfig) {
+
+  const instrumentations = []
+
+  // Fetch instrumentation
+  try {
+    instrumentations.push(
+      new FetchInstrumentation({
+        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) {
+    logger.warn('DEBUGGER_LIB', 'Fetch instrumentation not available', error)
+  }
+
+  // XMLHttpRequest instrumentation
+  try {
+    instrumentations.push(
+      new XMLHttpRequestInstrumentation({
+        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) {
+    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)
+  // }
+
+  return instrumentations
+}

package/src/patch/index.ts

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

package/src/patch/xhr.ts

@@ -0,0 +1,149 @@
+import { Platform } from 'react-native'
+import {
+
+  isFormData,
+  isNullish,
+  isObject,
+  isString,
+} from '../utils/type-utils'
+import { formDataToQuery } from '../utils/request-utils'
+import { DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE } from '../config'
+
+// Check if we're on web platform
+const isWeb = Platform.OS === 'web'
+
+let recordRequestHeaders = true
+let recordResponseHeaders = true
+let 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
+  shouldRecordBody = shouldRecordBody
+}
+
+function _tryReadXHRBody({
+  body,
+}: {
+  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)}`
+}
+
+// Only patch XMLHttpRequest if not on web platform or if XMLHttpRequest is available
+if (!isWeb && typeof XMLHttpRequest !== 'undefined') {
+  (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
+            && requestBody.length <= 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]+/).filter(Boolean)
+
+        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
+            && responseBody.length <= maxCapturingHttpPayloadSize
+          ) {
+            networkRequest.responseBody = responseBody
+          }
+        }
+      })
+
+
+      // @ts-ignore
+      xhr.networkRequest = networkRequest
+
+      originalOpen.call(xhr, method, url as string, async, username, password)
+    }
+  })(XMLHttpRequest.prototype)
+} else if (isWeb) {
+  console.info('XHR patch: Skipping XMLHttpRequest patching on web platform')
+}

package/src/recorder/eventExporter.ts

@@ -0,0 +1,155 @@
+import io, { Socket } from 'socket.io-client'
+
+import { type 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
+
+  private socketUrl: string
+  private apiKey: string
+
+  constructor(options: { socketUrl: string, apiKey: string }) {
+    this.socketUrl = options.socketUrl
+    this.apiKey = options.apiKey
+  }
+
+  private init(): void {
+    if (this.isConnecting || this.isConnected) return
+    this.attempts++
+    this.isConnecting = true
+    this.socket = io(this.socketUrl, {
+      path: '/v0/radar/ws',
+      auth: {
+        'x-api-key': this.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, (_: any) => {
+
+      this.unsubscribeFromSession()
+    })
+
+    this.socket.on(SESSION_AUTO_CREATED, (_: any) => {
+
+    })
+  }
+
+  setApiKey(apiKey: string): void {
+    this.apiKey = apiKey
+  }
+
+  setSocketUrl(socketUrl: string): void {
+    this.socketUrl = socketUrl
+  }
+
+  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)
+    }
+  }
+}