@multiplayer-app/session-recorder-react-native 1.0.1-beta.1 → 1.0.1-beta.11

package/src/otel/helpers.ts

@@ -0,0 +1,290 @@
+import { type 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 { type TracerReactNativeConfig } from '../types';
+
+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,
+  };
+}
+
+/**
+ * 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);
+  }
+
+  if (responseHeaders) {
+    span.setAttribute(ATTR_MULTIPLAYER_HTTP_RESPONSE_HEADERS, responseHeaders);
+  }
+}
+
+/**
+ * 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> = {};
+
+  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
+
+    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

@@ -0,0 +1,132 @@
+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,118 @@
+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/xhr.ts

@@ -0,0 +1,148 @@
+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');
+}