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

package/src/otel/index.ts

@@ -1,138 +0,0 @@
-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 { 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
-  private isInitialized = false
-
-  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),
-      usePostMessageFallback: options.usePostMessageFallback,
-    })
-
-    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),
-    })
-
-    this.isInitialized = true
-  }
-
-  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> {
-    this.isInitialized = false
-    return Promise.resolve()
-  }
-}

package/src/otel/instrumentations/index.ts

@@ -1,115 +0,0 @@
-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 { 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

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

package/src/patch/xhr.ts

@@ -1,141 +0,0 @@
-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
-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,
-  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
-          && 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)

package/src/recorder/eventExporter.ts

@@ -1,141 +0,0 @@
-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)
-    }
-  }
-}