@buoy-gg/network 1.7.2

package/lib/module/network/utils/networkListener.js

@@ -0,0 +1,791 @@
+"use strict";
+
+/**
+ * Network listener using Reactotron-style event pattern
+ * Simple and reliable network interception for React Native
+ */
+
+// Extended XMLHttpRequest interface for monkey-patching
+
+// Event types for network operations
+
+/**
+ * Network traffic interceptor for React Native applications
+ *
+ * This class intercepts both fetch and XMLHttpRequest operations to provide
+ * comprehensive network monitoring capabilities. It uses method swizzling to
+ * wrap native networking APIs while preserving their original functionality.
+ *
+ * @example
+ * ```typescript
+ * // Start monitoring network traffic
+ * startNetworkListener();
+ *
+ * // Add a listener for network events
+ * const unsubscribe = addNetworkListener((event) => {
+ *   if (event.type === 'response') {
+ *     console.log(`${event.request.method} ${event.request.url}: ${event.response?.status}`);
+ *   }
+ * });
+ *
+ * // Stop monitoring and cleanup
+ * unsubscribe();
+ * stopNetworkListener();
+ * ```
+ *
+ * @performance Uses lazy singleton pattern to minimize memory footprint
+ * @performance Includes URL filtering to ignore development traffic
+ */
+class NetworkListener {
+  listeners = [];
+  isListening = false;
+  requestCounter = 1000;
+
+  // URLs to ignore (Metro bundler, symbolicate, etc.)
+  ignoredUrls = [/\/symbolicate$/, /\/logs$/, /\/debugger-proxy/, /\/reload$/, /\/launch-js-devtools/, /localhost:8081/, /100\.64\.\d+\.\d+:8081/,
+  // iOS simulator
+  /10\.0\.\d+\.\d+:8081/ // Android emulator
+  ];
+
+  // Store original methods
+
+  constructor() {
+    // Store original methods
+    this.originalFetch = globalThis.fetch.bind(globalThis);
+    this.originalXHROpen = XMLHttpRequest.prototype.open;
+    this.originalXHRSend = XMLHttpRequest.prototype.send;
+    this.originalXHRSetRequestHeader = XMLHttpRequest.prototype.setRequestHeader;
+  }
+
+  /**
+   * Check if URL should be ignored from network monitoring
+   *
+   * Filters out development-related URLs like Metro bundler, debugger proxy,
+   * and symbolication requests to reduce noise in the network logs.
+   *
+   * @param url - The URL to check
+   * @returns True if the URL should be ignored
+   */
+  shouldIgnoreUrl(url) {
+    return this.ignoredUrls.some(pattern => pattern.test(url));
+  }
+
+  // Emit event to all listeners
+  emit(event) {
+    this.listeners.forEach(listener => {
+      try {
+        listener(event);
+      } catch (error) {
+        // Error in event listener - continuing with others
+      }
+    });
+  }
+
+  /**
+   * Parse URL to extract query parameters and clean URL
+   *
+   * @param url - The URL to parse
+   * @returns Object containing cleaned URL and parsed query parameters
+   *
+   * @performance Uses manual parsing instead of URL constructor for better performance
+   */
+  parseUrl(url) {
+    let params = null;
+    const queryParamIdx = url.indexOf("?");
+    if (queryParamIdx > -1) {
+      params = {};
+      url.substring(queryParamIdx + 1).split("&").forEach(pair => {
+        const [key, value] = pair.split("=");
+        if (key && value !== undefined) {
+          params[key] = decodeURIComponent(value.replace(/\+/g, " "));
+        }
+      });
+    }
+    return {
+      url: queryParamIdx > -1 ? url.substring(0, queryParamIdx) : url,
+      params
+    };
+  }
+
+  /**
+   * Process response body with size limits to prevent memory issues
+   * @param response - The Response object to process
+   * @param maxSize - Maximum body size in bytes (default: 1MB)
+   * @returns Object containing body, size, and truncation status
+   */
+  async processResponseBody(response, maxSize = 1024 * 1024 // 1MB default
+  ) {
+    try {
+      // Check Content-Length header first
+      const contentLength = response.headers.get("content-length");
+      if (contentLength) {
+        const size = parseInt(contentLength, 10);
+        if (!isNaN(size) && size > maxSize) {
+          return {
+            body: `[Response too large: ${this.formatBytes(size)}]`,
+            size,
+            truncated: true
+          };
+        }
+      }
+
+      // Read the response text
+      const text = await response.text();
+      const size = text.length;
+
+      // Check if text exceeds max size
+      if (size > maxSize) {
+        const preview = text.substring(0, maxSize);
+        const omitted = size - maxSize;
+        return {
+          body: `${preview}\n\n... [truncated, ${this.formatBytes(omitted)} omitted]`,
+          size,
+          truncated: true
+        };
+      }
+
+      // Try to parse as JSON
+      try {
+        return {
+          body: JSON.parse(text),
+          size,
+          truncated: false
+        };
+      } catch {
+        // Return as text if not JSON
+        return {
+          body: text,
+          size,
+          truncated: false
+        };
+      }
+    } catch (error) {
+      return {
+        body: "~~~ unable to read body ~~~",
+        size: 0,
+        truncated: false
+      };
+    }
+  }
+
+  /**
+   * Format bytes into human-readable format
+   * @param bytes - Number of bytes
+   * @returns Formatted string (e.g., "1.5 MB")
+   */
+  formatBytes(bytes) {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Math.round(bytes / Math.pow(k, i) * 100) / 100} ${sizes[i]}`;
+  }
+
+  // Get response body size
+  getResponseSize(body) {
+    if (!body) return 0;
+    if (typeof body === "string") return body.length;
+    if (typeof body === "object") {
+      try {
+        return JSON.stringify(body).length;
+      } catch {
+        return 0;
+      }
+    }
+    return 0;
+  }
+
+  /**
+   * Handle XMLHttpRequest response processing
+   * This method processes the response and emits appropriate events
+   */
+  handleXHRResponse(xhr, requestId, cleanUrl, method, requestHeaders, requestData, params, startTime, isError = false, clientType = "axios") {
+    const duration = startTime ? Date.now() - startTime : 0;
+    if (isError || xhr.status === 0) {
+      // Network error or aborted request
+      this.emit({
+        type: "error",
+        timestamp: new Date(),
+        duration,
+        request: {
+          id: requestId || "unknown",
+          url: cleanUrl,
+          method,
+          headers: requestHeaders,
+          data: requestData,
+          params: params || undefined,
+          client: clientType
+        },
+        error: {
+          message: isError ? "Request failed" : "Network error or request aborted"
+        }
+      });
+      return;
+    }
+
+    // Parse response
+    let body;
+    let responseSize = 0;
+    try {
+      const response = xhr.response;
+
+      // Debug logging to help diagnose responseType issues
+
+      // Try different ways to get response based on responseType
+      if (xhr.responseType === "json" && response) {
+        // Response is already parsed as JSON
+        body = response;
+        responseSize = JSON.stringify(response).length;
+      } else if (xhr.responseType === "" || xhr.responseType === "text") {
+        // Only access responseText when responseType allows it
+        if (xhr.responseText) {
+          responseSize = xhr.responseText.length;
+          try {
+            body = JSON.parse(xhr.responseText);
+          } catch {
+            body = xhr.responseText;
+          }
+        }
+      } else if (xhr.responseType === "arraybuffer") {
+        // For arraybuffer, try to decode as text and parse as JSON
+        // This is common for Axios requests that return JSON
+        if (response) {
+          try {
+            const text = new TextDecoder("utf-8").decode(response);
+            responseSize = text.length;
+            try {
+              body = JSON.parse(text);
+            } catch {
+              // Not JSON, return as text
+              body = text;
+            }
+          } catch (decodeError) {
+            // Failed to decode, show placeholder
+            body = `[arraybuffer response - ${response.byteLength || 0} bytes]`;
+            responseSize = response.byteLength || 0;
+          }
+        } else {
+          body = `[arraybuffer response - no data]`;
+          responseSize = 0;
+        }
+      } else if (xhr.responseType === "blob") {
+        // For blob responses, we can't synchronously read the content
+        // Note: In React Native, most JSON responses shouldn't be blobs
+        // but if they are, we show metadata
+        if (response instanceof Blob) {
+          body = `[blob response - ${response.size} bytes, type: ${response.type || "unknown"}]`;
+          responseSize = response.size;
+        } else if (response) {
+          // Sometimes response might not be a Blob object but still have data
+          // Try to handle it as an object
+          try {
+            body = typeof response === "string" ? JSON.parse(response) : response;
+            responseSize = JSON.stringify(body).length;
+          } catch {
+            body = `[blob response - unable to parse]`;
+            responseSize = 0;
+          }
+        } else {
+          body = `[blob response - no data]`;
+          responseSize = 0;
+        }
+      } else if (response) {
+        // Fallback: try to handle the response regardless of responseType
+        // This catches cases where Axios sets an unexpected responseType
+        if (typeof response === "string") {
+          body = response;
+          responseSize = response.length;
+          // Try to parse as JSON if it's a string
+          try {
+            body = JSON.parse(response);
+          } catch {
+            // Not JSON, keep as string
+          }
+        } else if (typeof response === "object") {
+          // Already an object, use it directly
+          body = response;
+          responseSize = JSON.stringify(response).length;
+        } else {
+          body = String(response);
+          responseSize = String(response).length;
+        }
+      }
+    } catch (error) {
+      // Failed to parse response
+      body = "~~~ unable to read body ~~~";
+    }
+
+    // Parse response headers
+    const responseHeaders = {};
+    try {
+      const headerString = xhr.getAllResponseHeaders();
+      if (headerString) {
+        headerString.split("\r\n").forEach(line => {
+          if (line) {
+            const colonIndex = line.indexOf(": ");
+            if (colonIndex > 0) {
+              const key = line.substring(0, colonIndex).toLowerCase();
+              const value = line.substring(colonIndex + 2);
+              responseHeaders[key] = value;
+            }
+          }
+        });
+      }
+    } catch {
+      // Ignore header parsing errors
+    }
+
+    // Emit response or error based on status
+    if (xhr.status >= 200 && xhr.status < 400) {
+      this.emit({
+        type: "response",
+        timestamp: new Date(),
+        duration,
+        request: {
+          id: requestId || "unknown",
+          url: cleanUrl,
+          method,
+          headers: requestHeaders,
+          data: requestData,
+          params: params || undefined,
+          client: clientType
+        },
+        response: {
+          status: xhr.status,
+          statusText: xhr.statusText,
+          headers: responseHeaders,
+          body,
+          size: responseSize
+        }
+      });
+    } else {
+      this.emit({
+        type: "error",
+        timestamp: new Date(),
+        duration,
+        request: {
+          id: requestId || "unknown",
+          url: cleanUrl,
+          method,
+          headers: requestHeaders,
+          data: requestData,
+          params: params || undefined,
+          client: clientType
+        },
+        response: {
+          status: xhr.status,
+          statusText: xhr.statusText,
+          headers: responseHeaders,
+          body,
+          size: responseSize
+        },
+        error: {
+          message: `HTTP ${xhr.status}: ${xhr.statusText}`
+        }
+      });
+    }
+  }
+
+  /**
+   * Start intercepting network operations by swizzling fetch and XMLHttpRequest
+   *
+   * This method replaces the global fetch function and XMLHttpRequest methods
+   * with instrumented versions that emit events while preserving original functionality.
+   *
+   * @throws Will log warnings if already listening
+   *
+   * @performance Uses method swizzling for minimal runtime overhead
+   * @performance Includes request deduplication through ignored URL patterns
+   */
+  startListening() {
+    if (this.isListening) {
+      return;
+    }
+    const self = this;
+
+    // Swizzle fetch
+    globalThis.fetch = async (input, init) => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
+
+      // Skip ignored URLs
+      if (self.shouldIgnoreUrl(url)) {
+        return self.originalFetch(input, init);
+      }
+      const startTime = Date.now();
+      const requestId = `fetch_${++self.requestCounter}`;
+      const method = init?.method || "GET";
+      const {
+        url: cleanUrl,
+        params
+      } = self.parseUrl(url);
+
+      // Parse request headers
+      let requestHeaders = {};
+      if (init?.headers) {
+        if (init.headers instanceof Headers) {
+          init.headers.forEach((value, key) => {
+            requestHeaders[key] = value;
+          });
+        } else if (Array.isArray(init.headers)) {
+          init.headers.forEach(([key, value]) => {
+            requestHeaders[key] = value;
+          });
+        } else {
+          requestHeaders = init.headers;
+        }
+      }
+
+      // Parse request body
+      let requestData;
+      if (init?.body) {
+        if (typeof init.body === "string") {
+          try {
+            requestData = JSON.parse(init.body);
+          } catch {
+            requestData = init.body;
+          }
+        } else {
+          requestData = init.body;
+        }
+      }
+
+      // Determine client type from X-Request-Client header or default to fetch
+      const clientType = requestHeaders["X-Request-Client"] || requestHeaders["x-request-client"] || "fetch";
+
+      // Emit request event
+      self.emit({
+        type: "request",
+        timestamp: new Date(),
+        request: {
+          id: requestId || "unknown",
+          url: cleanUrl,
+          method,
+          headers: requestHeaders,
+          data: requestData,
+          params: params || undefined,
+          client: clientType
+        }
+      });
+      try {
+        const response = await self.originalFetch(input, init);
+        const duration = Date.now() - startTime;
+
+        // Clone response to read body with size limits
+        const responseClone = response.clone();
+        const {
+          body,
+          size: responseSize,
+          truncated
+        } = await self.processResponseBody(responseClone);
+
+        // Parse response headers
+        const responseHeaders = {};
+        response.headers.forEach((value, key) => {
+          responseHeaders[key.toLowerCase()] = value;
+        });
+
+        // Emit response event
+        self.emit({
+          type: "response",
+          timestamp: new Date(),
+          duration,
+          request: {
+            id: requestId || "unknown",
+            url: cleanUrl,
+            method,
+            headers: requestHeaders,
+            data: requestData,
+            params: params || undefined,
+            client: clientType
+          },
+          response: {
+            status: response.status,
+            statusText: response.statusText,
+            headers: responseHeaders,
+            body,
+            size: responseSize
+          }
+        });
+        return response;
+      } catch (error) {
+        const duration = Date.now() - startTime;
+
+        // Emit error event
+        self.emit({
+          type: "error",
+          timestamp: new Date(),
+          duration,
+          request: {
+            id: requestId || "unknown",
+            url: cleanUrl,
+            method,
+            headers: requestHeaders,
+            data: requestData,
+            params: params || undefined,
+            client: clientType
+          },
+          error: {
+            message: error instanceof Error ? error.message : "Network error",
+            stack: error instanceof Error ? error.stack : undefined
+          }
+        });
+        throw error;
+      }
+    };
+
+    // Swizzle XMLHttpRequest
+    XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
+      // Store request info on the xhr instance
+      const xhr = this;
+      xhr._requestId = `xhr_${++self.requestCounter}`;
+      xhr._method = method;
+      xhr._url = url;
+      xhr._startTime = Date.now();
+      xhr._requestHeaders = {};
+      return self.originalXHROpen.call(this, method, url, async, user, password);
+    };
+
+    // Track request headers
+    XMLHttpRequest.prototype.setRequestHeader = function (header, value) {
+      const xhr = this;
+      if (xhr._requestHeaders) {
+        xhr._requestHeaders[header] = value;
+      }
+      return self.originalXHRSetRequestHeader.call(this, header, value);
+    };
+    XMLHttpRequest.prototype.send = function (
+    // @ts-ignore - this does exist on native
+    data) {
+      const xhr = this;
+      const requestId = xhr._requestId;
+      const method = xhr._method || "GET";
+      const url = xhr._url || "";
+      const startTime = xhr._startTime;
+      const requestHeaders = xhr._requestHeaders || {};
+
+      // Skip ignored URLs
+      if (self.shouldIgnoreUrl(url)) {
+        return self.originalXHRSend.call(this, data);
+      }
+      const {
+        url: cleanUrl,
+        params
+      } = self.parseUrl(url);
+
+      // Parse request data
+      let requestData;
+      if (data) {
+        if (typeof data === "string") {
+          try {
+            requestData = JSON.parse(data);
+          } catch {
+            requestData = data;
+          }
+        } else {
+          requestData = data;
+        }
+      }
+
+      // Determine client type from X-Request-Client header
+      const clientType = requestHeaders["X-Request-Client"] || requestHeaders["x-request-client"] || "axios";
+
+      // Emit request event
+      self.emit({
+        type: "request",
+        timestamp: new Date(),
+        request: {
+          id: requestId || "unknown",
+          url: cleanUrl,
+          method,
+          headers: requestHeaders,
+          data: requestData,
+          params: params || undefined,
+          client: clientType
+        }
+      });
+
+      // Track if we've already processed this request to avoid duplicate events
+      let processed = false;
+      const processResponse = (isError = false) => {
+        if (processed) return;
+        processed = true;
+        self.handleXHRResponse(this, requestId || "unknown", cleanUrl, method, requestHeaders, requestData, params, startTime || 0, isError, clientType);
+        // Clean up event listeners after processing to prevent memory leaks
+        cleanup();
+      };
+
+      // Cleanup function to remove event listeners
+      const cleanup = () => {
+        this.removeEventListener("load", loadListener);
+        this.removeEventListener("error", errorListener);
+        this.removeEventListener("abort", abortListener);
+        this.removeEventListener("readystatechange", readyStateListener);
+      };
+
+      // Use addEventListener to listen to events WITHOUT replacing user handlers
+      // This is critical because React Native's XMLHttpRequest uses EventTarget
+      // with getters/setters that shouldn't be overridden
+
+      const loadListener = () => {
+        processResponse(false);
+      };
+      const errorListener = () => {
+        processResponse(true);
+      };
+      const abortListener = () => {
+        processResponse(true);
+      };
+      const readyStateListener = () => {
+        if (this.readyState === 4 && !processed) {
+          processResponse(false);
+        }
+      };
+
+      // Add event listeners that will fire alongside user handlers
+      this.addEventListener("load", loadListener);
+      this.addEventListener("error", errorListener);
+      this.addEventListener("abort", abortListener);
+      this.addEventListener("readystatechange", readyStateListener);
+      return self.originalXHRSend.call(this, data);
+    };
+    this.isListening = true;
+    if (__DEV__) {
+      // Network listener has started monitoring fetch and XMLHttpRequest operations
+    }
+  }
+
+  /**
+   * Stop listening and restore original networking methods
+   *
+   * This method restores the original fetch and XMLHttpRequest implementations,
+   * effectively disabling network monitoring.
+   */
+  stopListening() {
+    if (!this.isListening) {
+      return;
+    }
+
+    // Restore original methods
+    globalThis.fetch = this.originalFetch;
+    XMLHttpRequest.prototype.open = this.originalXHROpen;
+    XMLHttpRequest.prototype.send = this.originalXHRSend;
+    XMLHttpRequest.prototype.setRequestHeader = this.originalXHRSetRequestHeader;
+    this.isListening = false;
+    if (__DEV__) {
+      // Network listener has stopped monitoring and restored original methods
+    }
+  }
+
+  /**
+   * Add a listener for network events
+   *
+   * @param listener - Callback function to handle network events
+   * @returns Unsubscribe function to remove the listener
+   */
+  addListener(listener) {
+    this.listeners.push(listener);
+
+    // Return unsubscribe function
+    return () => {
+      const index = this.listeners.indexOf(listener);
+      if (index > -1) {
+        this.listeners.splice(index, 1);
+      }
+    };
+  }
+
+  // Remove all listeners
+  removeAllListeners() {
+    this.listeners = [];
+  }
+
+  // Check if currently listening
+  get isActive() {
+    return this.isListening;
+  }
+
+  // Get number of active listeners
+  get listenerCount() {
+    return this.listeners.length;
+  }
+}
+
+/**
+ * Lazy singleton instance holder for NetworkListener
+ *
+ * This pattern ensures only one NetworkListener instance exists throughout
+ * the application lifecycle while deferring instantiation until first use.
+ */
+let _networkListener = null;
+
+/**
+ * Get or create the singleton NetworkListener instance
+ *
+ * @returns The singleton NetworkListener instance
+ */
+const getNetworkListener = () => {
+  if (!_networkListener) {
+    _networkListener = new NetworkListener();
+  }
+  return _networkListener;
+};
+
+/**
+ * Access function for the singleton NetworkListener instance
+ *
+ * @returns Function that returns the NetworkListener instance
+ */
+export const networkListener = getNetworkListener;
+
+/**
+ * Start network traffic monitoring
+ *
+ * @example
+ * ```typescript
+ * startNetworkListener();
+ * console.log('Network monitoring started');
+ * ```
+ */
+export const startNetworkListener = () => getNetworkListener().startListening();
+
+/**
+ * Stop network traffic monitoring
+ */
+export const stopNetworkListener = () => getNetworkListener().stopListening();
+
+/**
+ * Add a listener for network events
+ *
+ * @param listener - Callback function to handle network events
+ * @returns Unsubscribe function to remove the listener
+ *
+ * @example
+ * ```typescript
+ * const unsubscribe = addNetworkListener((event) => {
+ *   console.log(`Network ${event.type}:`, event.request.url);
+ * });
+ *
+ * // Later...
+ * unsubscribe();
+ * ```
+ */
+export const addNetworkListener = listener => getNetworkListener().addListener(listener);
+
+/**
+ * Remove all registered network event listeners
+ */
+export const removeAllNetworkListeners = () => getNetworkListener().removeAllListeners();
+
+/**
+ * Check if network monitoring is currently active
+ *
+ * @returns True if currently intercepting network traffic
+ */
+export const isNetworkListening = () => getNetworkListener().isActive;
+
+/**
+ * Get the number of registered network event listeners
+ *
+ * @returns Number of active listeners
+ */
+export const getNetworkListenerCount = () => getNetworkListener().listenerCount;