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

package/src/otel/instrumentations/index.ts

@@ -1,42 +1,44 @@
-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'
+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 = []
+  const instrumentations = [];
 
   // Fetch instrumentation
   try {
     instrumentations.push(
       new FetchInstrumentation({
         clearTimingResources: false,
-        ignoreUrls: [
-          ...OTEL_IGNORE_URLS,
-          ...(config.ignoreUrls || []),
-        ],
+        ignoreUrls: [...OTEL_IGNORE_URLS, ...(config.ignoreUrls || [])],
         propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
         applyCustomAttributesOnSpan: async (span, request, response) => {
-          if (!config) return
+          if (!config) return;
 
-          const { captureBody, captureHeaders } = config
+          const { captureBody, captureHeaders } = config;
 
           try {
             if (!captureBody && !captureHeaders) {
-              return
+              return;
             }
 
-            const requestBody = request.body
-            const requestHeaders = headersToObject(request.headers)
-            const responseHeaders = headersToObject(response instanceof Response ? response.headers : undefined)
+            const requestBody = request.body;
+            const requestHeaders = headersToObject(request.headers);
+            const responseHeaders = headersToObject(
+              response instanceof Response ? response.headers : undefined
+            );
 
-            let responseBody: string | null = null
+            let responseBody: string | null = null;
             if (response instanceof Response && response.body) {
-              responseBody = await extractResponseBody(response)
+              responseBody = await extractResponseBody(response);
             }
 
             const payload = {
@@ -44,17 +46,17 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
               responseBody,
               requestHeaders,
               responseHeaders,
-            }
-            processHttpPayload(payload, config, span)
+            };
+            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)
+    logger.warn('DEBUGGER_LIB', 'Fetch instrumentation not available', error);
   }
 
   // XMLHttpRequest instrumentation
@@ -62,46 +64,47 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
     instrumentations.push(
       new XMLHttpRequestInstrumentation({
         clearTimingResources: false,
-        ignoreUrls: [
-          ...OTEL_IGNORE_URLS,
-          ...(config.ignoreUrls || []),
-        ],
+        ignoreUrls: [...OTEL_IGNORE_URLS, ...(config.ignoreUrls || [])],
         propagateTraceHeaderCorsUrls: config.propagateTraceHeaderCorsUrls,
         applyCustomAttributesOnSpan: (span, xhr) => {
-          if (!config) return
+          if (!config) return;
 
-          const { captureBody, captureHeaders } = config
+          const { captureBody, captureHeaders } = config;
 
           try {
             if (!captureBody && !captureHeaders) {
-              return
+              return;
             }
 
             // @ts-ignore
-            const requestBody = xhr.networkRequest.requestBody
+            const requestBody = xhr.networkRequest.requestBody;
             // @ts-ignore
-            const responseBody = xhr.networkRequest.responseBody
+            const responseBody = xhr.networkRequest.responseBody;
             // @ts-ignore
-            const requestHeaders = xhr.networkRequest.requestHeaders || {}
+            const requestHeaders = xhr.networkRequest.requestHeaders || {};
             // @ts-ignore
-            const responseHeaders = xhr.networkRequest.responseHeaders || {}
+            const responseHeaders = xhr.networkRequest.responseHeaders || {};
 
             const payload = {
               requestBody,
               responseBody,
               requestHeaders,
               responseHeaders,
-            }
-            processHttpPayload(payload, config, span)
+            };
+            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)
+    logger.warn(
+      'DEBUGGER_LIB',
+      'XMLHttpRequest instrumentation not available',
+      error
+    );
   }
 
   // Custom React Native instrumentations
@@ -111,5 +114,5 @@ export function getInstrumentations(config: TracerReactNativeConfig) {
   //   console.warn('React Native instrumentation not available:', error)
   // }
 
-  return instrumentations
+  return instrumentations;
 }

package/src/patch/index.ts

@@ -1 +1 @@
-import './xhr'
+import './xhr';

package/src/patch/xhr.ts

@@ -1,149 +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'
+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
-}
+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
+  body: any | null | undefined;
+  url: string | URL | RequestInfo;
 }): string | null {
-
   if (isNullish(body)) {
-    return null
+    return null;
   }
 
   if (isString(body)) {
-    return body
+    return body;
   }
 
   if (isFormData(body)) {
-    return formDataToQuery(body)
+    return formDataToQuery(body);
   }
 
   if (isObject(body)) {
     try {
-      return JSON.stringify({ ...body })
+      return JSON.stringify({ ...body });
     } catch {
-      return '[XHR] Failed to stringify response object'
+      return '[XHR] Failed to stringify response object';
     }
   }
 
-  return `[XHR] Cannot read body of type ${Object.prototype.toString.call(body)}`
+  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
+    const originalOpen = XMLHttpRequest.prototype.open;
 
     xhr.open = function (
       method: string,
       url: string | URL,
       async = true,
       username?: string | null,
-      password?: string | null,
+      password?: string | null
     ) {
-      const xhr = this as XMLHttpRequest
+      const xhr = this as XMLHttpRequest;
       const networkRequest: {
-        requestHeaders?: any,
-        requestBody?: any,
-        responseHeaders?: any,
-        responseBody?: any,
-      } = {}
-
+        requestHeaders?: any;
+        requestBody?: any;
+        responseHeaders?: any;
+        responseBody?: any;
+      } = {};
 
       // @ts-ignore
-      const requestHeaders: Record<string, string> = {}
-      const originalSetRequestHeader = xhr.setRequestHeader.bind(xhr)
+      const requestHeaders: Record<string, string> = {};
+      const originalSetRequestHeader = xhr.setRequestHeader.bind(xhr);
       xhr.setRequestHeader = (header: string, value: string) => {
-        requestHeaders[header] = value
-        return originalSetRequestHeader(header, value)
-      }
+        requestHeaders[header] = value;
+        return originalSetRequestHeader(header, value);
+      };
       if (recordRequestHeaders) {
-        networkRequest.requestHeaders = requestHeaders
+        networkRequest.requestHeaders = requestHeaders;
       }
 
-      const originalSend = xhr.send.bind(xhr)
+      const originalSend = xhr.send.bind(xhr);
       xhr.send = (body) => {
         if (shouldRecordBody) {
-          const requestBody = _tryReadXHRBody({ body, url })
+          const requestBody = _tryReadXHRBody({ body, url });
 
           if (
-            requestBody?.length
-            && requestBody.length <= maxCapturingHttpPayloadSize
+            requestBody?.length &&
+            requestBody.length <= maxCapturingHttpPayloadSize
           ) {
-            networkRequest.requestBody = requestBody
+            networkRequest.requestBody = requestBody;
           }
         }
-        return originalSend(body)
-      }
+        return originalSend(body);
+      };
 
       xhr.addEventListener('readystatechange', () => {
         if (xhr.readyState !== xhr.DONE) {
-          return
+          return;
         }
 
         // @ts-ignore
-        const responseHeaders: Record<string, string> = {}
-        const rawHeaders = xhr.getAllResponseHeaders() || ''
-        const headers = rawHeaders.trim().split(/[\r\n]+/).filter(Boolean)
+        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(': ')
+          const parts = line.split(': ');
+          const header = parts.shift();
+          const value = parts.join(': ');
           if (header) {
-            responseHeaders[header] = value
+            responseHeaders[header] = value;
           }
-        })
+        });
         if (recordResponseHeaders) {
-          networkRequest.responseHeaders = responseHeaders
+          networkRequest.responseHeaders = responseHeaders;
         }
         if (shouldRecordBody) {
-          const responseBody = _tryReadXHRBody({ body: xhr.response, url })
+          const responseBody = _tryReadXHRBody({ body: xhr.response, url });
 
           if (
-            responseBody?.length
-            && responseBody.length <= maxCapturingHttpPayloadSize
+            responseBody?.length &&
+            responseBody.length <= maxCapturingHttpPayloadSize
           ) {
-            networkRequest.responseBody = responseBody
+            networkRequest.responseBody = responseBody;
           }
         }
-      })
-
+      });
 
       // @ts-ignore
-      xhr.networkRequest = networkRequest
+      xhr.networkRequest = networkRequest;
 
-      originalOpen.call(xhr, method, url as string, async, username, password)
-    }
-  })(XMLHttpRequest.prototype)
+      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')
+  console.info('XHR patch: Skipping XMLHttpRequest patching on web platform');
 }

package/src/recorder/eventExporter.ts

@@ -1,7 +1,7 @@
-import io, { Socket } from 'socket.io-client'
+import io, { Socket } from 'socket.io-client';
 
-import { type ISession } from '../types'
-import { logger } from '../utils'
+import { type ISession } from '../types';
+import { logger } from '../utils';
 
 import {
   SESSION_ADD_EVENT,
@@ -9,30 +9,30 @@ import {
   SESSION_STOPPED_EVENT,
   SESSION_SUBSCRIBE_EVENT,
   SESSION_UNSUBSCRIBE_EVENT,
-} from '../config'
+} from '../config';
 
-const MAX_RECONNECTION_ATTEMPTS = 2
+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 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
+    if (this.isConnecting || this.isConnected) return;
+    this.attempts++;
+    this.isConnecting = true;
     this.socket = io(this.socketUrl, {
       path: '/v0/radar/ws',
       auth: {
@@ -40,7 +40,7 @@ export class EventExporter {
       },
       reconnectionAttempts: 2,
       transports: ['websocket'],
-    })
+    });
 
     // this.socket.on('connect', () => {
     //   this.isConnecting = false
@@ -50,58 +50,53 @@ export class EventExporter {
     // })
 
     this.socket.on('ready', () => {
-      this.isConnecting = false
-      this.isConnected = true
-      logger.info('EventExporter', 'Connected to server')
-      this.flushQueue()
-    })
+      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.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.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.unsubscribeFromSession()
-    })
-
-    this.socket.on(SESSION_AUTO_CREATED, (_: any) => {
-
-    })
+    this.socket.on(SESSION_AUTO_CREATED, (_: any) => {});
   }
 
   setApiKey(apiKey: string): void {
-    this.apiKey = apiKey
+    this.apiKey = apiKey;
   }
 
   setSocketUrl(socketUrl: string): void {
-    this.socketUrl = socketUrl
+    this.socketUrl = socketUrl;
   }
 
   private checkReconnectionAttempts(): void {
     if (this.attempts >= MAX_RECONNECTION_ATTEMPTS) {
-
-      this.flushQueue()
+      this.flushQueue();
     }
   }
 
-
   private flushQueue(): void {
-    while (this.queue.length > 0 && (this.socket?.connected)) {
-      const event = this.queue.shift()
-      if (!event) continue
+    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)
+        this.socket.emit(event.name, event.data);
       }
     }
   }
@@ -109,47 +104,47 @@ export class EventExporter {
   private unsubscribeFromSession() {
     const payload = {
       debugSessionId: this.sessionId,
-    }
+    };
     if (this.socket?.connected) {
-      this.socket.emit(SESSION_UNSUBSCRIBE_EVENT, payload)
+      this.socket.emit(SESSION_UNSUBSCRIBE_EVENT, payload);
     }
   }
 
   public send(event: any): void {
     if (this.socket?.connected) {
-      this.socket.emit(SESSION_ADD_EVENT, event)
+      this.socket.emit(SESSION_ADD_EVENT, event);
     } else {
-      this.queue.push({ data: event, name: SESSION_ADD_EVENT })
-      this.init()
+      this.queue.push({ data: event, name: SESSION_ADD_EVENT });
+      this.init();
     }
   }
 
   public subscribeToSession(session: ISession): void {
-    this.sessionId = session.shortId || session._id
+    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)
+      this.socket.emit(SESSION_SUBSCRIBE_EVENT, payload);
     } else {
-      this.queue.push({ data: payload, name: SESSION_SUBSCRIBE_EVENT })
-      this.init()
+      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)
+        this.unsubscribeFromSession();
+        this.attempts = 0;
+        this.isConnected = false;
+        this.isConnecting = false;
+        this.socket?.disconnect();
+        this.socket = null;
+      }, 500);
     }
   }
 }