@buoy-gg/network 1.7.2

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

@@ -0,0 +1,265 @@
+"use strict";
+
+/**
+ * Network event store for managing captured network requests
+ * Works with the Reactotron-style network listener
+ */
+
+import { extractOperationName } from "./extractOperationName";
+class NetworkEventStore {
+  events = [];
+  pendingRequests = new Map();
+  listeners = new Set();
+  maxEvents = 500; // Configurable max events to prevent memory issues
+  recentRequests = new Map(); // Track recent requests to detect duplicates
+
+  /**
+   * Process a network listener event
+   */
+  processNetworkEvent(event) {
+    const {
+      request
+    } = event;
+    if (event.type === "request") {
+      // Check for duplicate request based on URL, method, and timing
+      const requestKey = `${request.method}:${request.url}`;
+      const now = Date.now();
+      const lastRequestTime = this.recentRequests.get(requestKey);
+
+      // If same request within 50ms, likely a duplicate from XHR/fetch dual interception
+      if (lastRequestTime && now - lastRequestTime < 50) {
+        return; // Skip duplicate
+      }
+      this.recentRequests.set(requestKey, now);
+
+      // Clean up old entries to prevent memory leak
+      if (this.recentRequests.size > 100) {
+        const cutoff = now - 5000; // Remove entries older than 5 seconds
+        for (const [key, time] of this.recentRequests.entries()) {
+          if (time < cutoff) {
+            this.recentRequests.delete(key);
+          }
+        }
+      }
+
+      // Create new network event for request
+      // Build full URL with query params if present
+      const queryString = request.params ? `?${new URLSearchParams(request.params).toString()}` : "";
+      const fullUrl = `${request.url}${queryString}`;
+
+      // Extract GraphQL operation name and variables for searchability
+      let operationName;
+      let graphqlVariables;
+      if (request.client === 'graphql') {
+        const extracted = extractOperationName(request.data);
+        operationName = extracted || undefined;
+
+        // Extract variables from GraphQL request
+        if (request.data && typeof request.data === 'object' && 'variables' in request.data && request.data.variables && typeof request.data.variables === 'object') {
+          graphqlVariables = request.data.variables;
+        }
+      }
+      const networkEvent = {
+        id: request.id,
+        method: request.method,
+        url: fullUrl,
+        // Store FULL URL with query params
+        host: this.extractHost(request.url),
+        path: this.extractPath(request.url),
+        query: queryString,
+        timestamp: event.timestamp.getTime(),
+        requestHeaders: request.headers || {},
+        requestData: request.data,
+        requestSize: this.getDataSize(request.data),
+        responseHeaders: {},
+        requestClient: request.client,
+        operationName,
+        // GraphQL operation name for search/filter
+        graphqlVariables // GraphQL variables for display and search
+      };
+
+      // Store as pending
+      this.pendingRequests.set(request.id, networkEvent);
+
+      // Add to events list
+      this.events = [networkEvent, ...this.events].slice(0, this.maxEvents);
+      this.notifyListeners();
+    } else if (event.type === "response" || event.type === "error") {
+      // Find and update the pending request
+      const index = this.events.findIndex(e => e.id === request.id);
+      if (index !== -1) {
+        const updatedEvent = {
+          ...this.events[index],
+          duration: event.duration
+        };
+        if (event.response) {
+          updatedEvent.status = event.response.status;
+          updatedEvent.statusText = event.response.statusText;
+          updatedEvent.responseHeaders = event.response.headers || {};
+          updatedEvent.responseData = event.response.body;
+          updatedEvent.responseSize = event.response.size || 0;
+          updatedEvent.responseType = event.response.headers?.["content-type"];
+        }
+        if (event.error) {
+          updatedEvent.error = event.error.message;
+          updatedEvent.status = updatedEvent.status || 0;
+        }
+        this.events[index] = updatedEvent;
+        this.pendingRequests.delete(request.id);
+        this.notifyListeners();
+      }
+    }
+  }
+
+  /**
+   * Extract host from URL
+   */
+  extractHost(url) {
+    try {
+      const urlObj = new URL(url);
+      // @ts-ignore - this does exist on native
+      return urlObj.hostname;
+    } catch {
+      return "";
+    }
+  }
+
+  /**
+   * Extract path from URL
+   */
+  extractPath(url) {
+    try {
+      const urlObj = new URL(url);
+      // @ts-ignore - this does exist on native
+      return urlObj.pathname;
+    } catch {
+      return url;
+    }
+  }
+
+  /**
+   * Get size of data
+   */
+  getDataSize(data) {
+    if (!data) return 0;
+    if (typeof data === "string") return data.length;
+    try {
+      return JSON.stringify(data).length;
+    } catch {
+      return 0;
+    }
+  }
+
+  /**
+   * Get all events
+   */
+  getEvents() {
+    return [...this.events];
+  }
+
+  /**
+   * Get event by ID
+   */
+  getEventById(id) {
+    return this.events.find(e => e.id === id);
+  }
+
+  /**
+   * Clear all events
+   */
+  clearEvents() {
+    this.events = [];
+    this.pendingRequests.clear();
+    this.recentRequests.clear();
+    this.notifyListeners();
+  }
+
+  /**
+   * Subscribe to event changes
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Notify all listeners of changes
+   */
+  notifyListeners() {
+    const events = this.getEvents();
+    this.listeners.forEach(listener => listener(events));
+  }
+
+  /**
+   * Set maximum number of events to store
+   */
+  setMaxEvents(max) {
+    this.maxEvents = max;
+    if (this.events.length > max) {
+      this.events = this.events.slice(0, max);
+      this.notifyListeners();
+    }
+  }
+
+  /**
+   * Get statistics about network events
+   */
+  getStats() {
+    const total = this.events.length;
+    const successful = this.events.filter(e => e.status && e.status >= 200 && e.status < 300).length;
+    const failed = this.events.filter(e => e.error || e.status && e.status >= 400).length;
+    const pending = this.events.filter(e => !e.status && !e.error).length;
+    const durations = this.events.filter(e => e.duration).map(e => e.duration);
+    const avgDuration = durations.length > 0 ? durations.reduce((a, b) => a + b, 0) / durations.length : 0;
+    const totalSent = this.events.reduce((sum, e) => sum + (e.requestSize || 0), 0);
+    const totalReceived = this.events.reduce((sum, e) => sum + (e.responseSize || 0), 0);
+    return {
+      totalRequests: total,
+      successfulRequests: successful,
+      failedRequests: failed,
+      pendingRequests: pending,
+      totalDataSent: totalSent,
+      totalDataReceived: totalReceived,
+      averageDuration: Math.round(avgDuration)
+    };
+  }
+
+  /**
+   * Filter events by criteria
+   */
+  filterEvents(filter) {
+    let filtered = [...this.events];
+    if (filter.method) {
+      filtered = filtered.filter(e => e.method === filter.method);
+    }
+    if (filter.status) {
+      switch (filter.status) {
+        case "success":
+          filtered = filtered.filter(e => e.status && e.status >= 200 && e.status < 300);
+          break;
+        case "error":
+          filtered = filtered.filter(e => e.error || e.status && e.status >= 400);
+          break;
+        case "pending":
+          filtered = filtered.filter(e => !e.status && !e.error);
+          break;
+      }
+    }
+    if (filter.searchText) {
+      const search = filter.searchText.toLowerCase();
+      filtered = filtered.filter(e => e.url.toLowerCase().includes(search) || e.method.toLowerCase().includes(search) || e.error && e.error.toLowerCase().includes(search));
+    }
+    if (filter.host) {
+      filtered = filtered.filter(e => e.host === filter.host);
+    }
+    return filtered;
+  }
+}
+
+/**
+ * Singleton store that aggregates captured network traffic. Components and hooks consume this
+ * store to render histories, derive stats, and subscribe to real-time updates.
+ */
+export const networkEventStore = new NetworkEventStore();