@buoy-gg/network 1.7.2

package/lib/module/network/hooks/useNetworkEvents.js

@@ -0,0 +1,316 @@
+"use strict";
+
+/**
+ * Hook for accessing network events and controls
+ * Uses Reactotron-style listener pattern
+ */
+
+import { useState, useEffect, useCallback, useMemo } from "react";
+import { networkEventStore } from "../utils/networkEventStore";
+import { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener } from "../utils/networkListener";
+import { searchGraphQLVariables } from "../utils/formatGraphQLVariables";
+
+/** Free tier limit for network requests */
+export const FREE_TIER_REQUEST_LIMIT = 25;
+
+/**
+ * Custom hook for accessing network events and controls
+ * 
+ * This hook provides a complete interface for network monitoring, including
+ * event filtering, statistics calculation, and interception control. It uses
+ * the Reactotron-style listener pattern for network event handling.
+ * 
+ * @returns Object containing filtered events, statistics, controls, and utilities
+ * 
+ * @example
+ * ```typescript
+ * function NetworkMonitor() {
+ *   const {
+ *     events,
+ *     stats,
+ *     filter,
+ *     setFilter,
+ *     clearEvents,
+ *     toggleInterception,
+ *     isEnabled
+ *   } = useNetworkEvents();
+ * 
+ *   return (
+ *     <div>
+ *       <p>Total requests: {stats.totalRequests}</p>
+ *       <p>Success rate: {stats.successfulRequests}/{stats.totalRequests}</p>
+ *       <button onClick={toggleInterception}>
+ *         {isEnabled ? 'Stop' : 'Start'} Monitoring
+ *       </button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ * 
+ * @performance Uses memoization for expensive filtering and statistics calculations
+ * @performance Optimizes string operations and array processing for large datasets
+ * @performance Includes Set-based lookups for O(1) filter matching
+ *
+ * @param options.isPro - Whether user has Pro access (unlimited events). Defaults to false (limited to FREE_TIER_REQUEST_LIMIT)
+ */
+export function useNetworkEvents(options = {}) {
+  const {
+    isPro = false
+  } = options;
+  const [events, setEvents] = useState([]);
+  const [filter, setFilter] = useState({});
+  const [isEnabled, setIsEnabled] = useState(false);
+
+  // Subscribe to event store changes
+  useEffect(() => {
+    // Subscribe to store changes
+    const unsubscribeStore = networkEventStore.subscribe(setEvents);
+
+    // Add listener to network events
+    const unsubscribeListener = addNetworkListener(event => {
+      // Only log in development and for non-ignored URLs
+      if (__DEV__ && !event.request.url.includes("symbolicate") && !event.request.url.includes(":8081")) {
+        // Network event processed: [event.type] [method] [url] - available for debugging if needed
+      }
+      networkEventStore.processNetworkEvent(event);
+    });
+
+    // Check if already listening
+    setIsEnabled(networkListener().isActive);
+
+    // Start listening if not already
+    if (!networkListener().isActive) {
+      startNetworkListener();
+      setIsEnabled(true);
+    }
+
+    // Load initial events
+    setEvents(networkEventStore.getEvents());
+    return () => {
+      unsubscribeStore();
+      unsubscribeListener();
+    };
+  }, []);
+
+  // Clear all events
+  const clearEvents = useCallback(() => {
+    networkEventStore.clearEvents();
+  }, []);
+
+  // Toggle interception
+  const toggleInterception = useCallback(() => {
+    if (isEnabled) {
+      stopNetworkListener();
+      setIsEnabled(false);
+    } else {
+      startNetworkListener();
+      setIsEnabled(true);
+    }
+  }, [isEnabled]);
+
+  // Memoize search text processing to avoid repeated toLowerCase calls
+  // Performance: Expensive string operations repeated for every event on every filter
+  const searchLower = useMemo(() => {
+    return filter.searchText ? filter.searchText.toLowerCase() : null;
+  }, [filter.searchText]);
+
+  // Memoize method filter Set for O(1) lookup instead of Array.includes
+  // Performance: Converting array.includes to Set.has for faster lookups with large method lists
+  const methodSet = useMemo(() => {
+    return filter.method && filter.method.length > 0 ? new Set(filter.method) : null;
+  }, [filter.method]);
+
+  // Memoize content type Set for O(1) lookup
+  // Performance: Converting array.some to Set.has for faster content type matching
+  const contentTypeSet = useMemo(() => {
+    return filter.contentType && filter.contentType.length > 0 ? new Set(filter.contentType) : null;
+  }, [filter.contentType]);
+
+  // Filter events with optimized string operations and Set lookups
+  // Performance: Complex multi-stage filtering with string operations and content type matching
+  const filteredEvents = useMemo(() => {
+    let filtered = [...events];
+    if (methodSet) {
+      filtered = filtered.filter(e => methodSet.has(e.method));
+    }
+    if (filter.status && filter.status !== "all") {
+      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 (searchLower) {
+      filtered = filtered.filter(e => e.url.toLowerCase().includes(searchLower) || e.method.toLowerCase().includes(searchLower) || e.path?.toLowerCase().includes(searchLower) || e.host?.toLowerCase().includes(searchLower) || e.error && e.error.toLowerCase().includes(searchLower) ||
+      // Search by GraphQL operation name (e.g., "GetUser", "CreatePost")
+      e.operationName && e.operationName.toLowerCase().includes(searchLower) ||
+      // Search by GraphQL variable values (e.g., "Sandshrew", "123", "true")
+      // This enables finding specific requests like "GetPokemon › Sandshrew" by typing "Sandshrew"
+      searchGraphQLVariables(e.graphqlVariables, searchLower));
+    }
+    if (filter.host) {
+      filtered = filtered.filter(e => e.host === filter.host);
+    }
+    if (contentTypeSet) {
+      filtered = filtered.filter(e => {
+        const headers = e.responseHeaders || e.requestHeaders;
+        const contentType = headers?.["content-type"] || headers?.["Content-Type"] || "";
+        for (const type of contentTypeSet) {
+          switch (type) {
+            case "JSON":
+              if (contentType.includes("json")) return true;
+              break;
+            case "XML":
+              if (contentType.includes("xml")) return true;
+              break;
+            case "HTML":
+              if (contentType.includes("html")) return true;
+              break;
+            case "TEXT":
+              if (contentType.includes("text")) return true;
+              break;
+            case "IMAGE":
+              if (contentType.includes("image")) return true;
+              break;
+            case "VIDEO":
+              if (contentType.includes("video")) return true;
+              break;
+            case "AUDIO":
+              if (contentType.includes("audio")) return true;
+              break;
+            case "FORM":
+              if (contentType.includes("form")) return true;
+              break;
+            case "OTHER":
+              if (!contentType || !contentType.includes("json") && !contentType.includes("xml") && !contentType.includes("html") && !contentType.includes("text") && !contentType.includes("image") && !contentType.includes("video") && !contentType.includes("audio") && !contentType.includes("form")) {
+                return true;
+              }
+              break;
+          }
+        }
+        return false;
+      });
+    }
+    return filtered;
+  }, [events, filter, searchLower, methodSet, contentTypeSet]);
+
+  // For free users, determine which events are "locked" (beyond the limit)
+  // Based on original event order, not filtered results - so locked events stay locked even when searching
+  const lockedEventIds = useMemo(() => {
+    if (isPro) {
+      return new Set();
+    }
+    // Events beyond the limit in the ORIGINAL events array are locked
+    const lockedIds = new Set();
+    events.slice(FREE_TIER_REQUEST_LIMIT).forEach(event => {
+      lockedIds.add(event.id);
+    });
+    return lockedIds;
+  }, [events, isPro]);
+
+  // Check if there are locked events in the current filtered results
+  const lockedEventsInFilter = useMemo(() => {
+    return filteredEvents.filter(event => lockedEventIds.has(event.id));
+  }, [filteredEvents, lockedEventIds]);
+  const hasLockedEvents = lockedEventsInFilter.length > 0;
+  const lockedEventCount = lockedEventsInFilter.length;
+
+  // Helper to check if a specific event is locked
+  const isEventLocked = useCallback(eventId => {
+    return lockedEventIds.has(eventId);
+  }, [lockedEventIds]);
+
+  // Memoize expensive statistics calculation by categorizing events in single pass
+  // Performance: Multiple array.filter operations replaced with single loop for better performance
+  const stats = useMemo(() => {
+    let successful = 0;
+    let failed = 0;
+    let pending = 0;
+    let totalSent = 0;
+    let totalReceived = 0;
+    let durationSum = 0;
+    let durationCount = 0;
+
+    // Single pass through events for all statistics
+    for (const event of events) {
+      // Categorize status
+      if (event.status && event.status >= 200 && event.status < 300) {
+        successful++;
+      } else if (event.error || event.status && event.status >= 400) {
+        failed++;
+      } else if (!event.status && !event.error) {
+        pending++;
+      }
+
+      // Accumulate data sizes
+      totalSent += event.requestSize || 0;
+      totalReceived += event.responseSize || 0;
+
+      // Accumulate durations
+      if (event.duration) {
+        durationSum += event.duration;
+        durationCount++;
+      }
+    }
+    const avgDuration = durationCount > 0 ? durationSum / durationCount : 0;
+    return {
+      totalRequests: events.length,
+      successfulRequests: successful,
+      failedRequests: failed,
+      pendingRequests: pending,
+      totalDataSent: totalSent,
+      totalDataReceived: totalReceived,
+      averageDuration: Math.round(avgDuration)
+    };
+  }, [events]);
+
+  // Memoize unique hosts extraction with single pass instead of map + filter + Set
+  // Performance: Avoiding array.map().filter() chain, using single loop with Set for deduplication
+  const hosts = useMemo(() => {
+    const hostSet = new Set();
+    for (const event of events) {
+      if (event.host) {
+        hostSet.add(event.host);
+      }
+    }
+    return Array.from(hostSet);
+  }, [events]);
+
+  // Memoize unique methods extraction with single pass
+  // Performance: Avoiding array.map() + Set constructor, using single loop for better performance
+  const methods = useMemo(() => {
+    const methodSet = new Set();
+    for (const event of events) {
+      methodSet.add(event.method);
+    }
+    return Array.from(methodSet);
+  }, [events]);
+  return {
+    /** Filtered events (all shown, but some may be locked for free users) */
+    events: filteredEvents,
+    /** All events before filtering (for stats) */
+    allEvents: events,
+    stats,
+    filter,
+    setFilter,
+    clearEvents,
+    isEnabled,
+    toggleInterception,
+    hosts,
+    methods,
+    /** Whether there are locked events due to free tier limit */
+    hasLockedEvents,
+    /** Number of events locked due to free tier limit */
+    lockedEventCount,
+    /** Check if a specific event is locked (by ID) */
+    isEventLocked,
+    /** Free tier request limit */
+    requestLimit: FREE_TIER_REQUEST_LIMIT
+  };
+}

package/lib/module/network/hooks/useTickEveryMinute.js

@@ -0,0 +1,29 @@
+"use strict";
+
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TickContext = /*#__PURE__*/createContext(Date.now());
+export function TickProvider({
+  children,
+  intervalMs = 60_000
+}) {
+  const [tick, setTick] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => {
+      setTick(Date.now());
+    }, intervalMs);
+    return () => {
+      clearInterval(id);
+    };
+  }, [intervalMs]);
+  return /*#__PURE__*/_jsx(TickContext.Provider, {
+    value: tick,
+    children: children
+  });
+}
+export function useTickEveryMinute() {
+  const tick = useContext(TickContext);
+
+  // Expose stable object so consumers can memoize on value changes
+  return useMemo(() => tick, [tick]);
+}

package/lib/module/network/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+/**
+ * Network monitoring section for React Native dev tools
+ */
+
+// Components
+export { NetworkModal } from "./components/NetworkModal";
+export { NetworkEventDetailView } from "./components/NetworkEventDetailView";
+export { NetworkEventItemCompact } from "./components/NetworkEventItemCompact";
+
+// Hooks
+export { useNetworkEvents } from "./hooks/useNetworkEvents";
+
+// Utils
+export { networkListener, startNetworkListener, stopNetworkListener, addNetworkListener, removeAllNetworkListeners, isNetworkListening, getNetworkListenerCount } from "./utils/networkListener";
+export { networkEventStore } from "./utils/networkEventStore";
+export { formatBytes, formatDuration, formatHttpStatus } from "./utils/formatting";
+
+// Types

package/lib/module/network/types/index.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,76 @@
+"use strict";
+
+/**
+ * Extract GraphQL operation name from request data
+ *
+ * This utility extracts the operation name from GraphQL requests to enable
+ * searching and filtering by operation name rather than just URL paths.
+ *
+ * For GraphQL, all requests typically go to the same endpoint (e.g., /graphql),
+ * making URL-based search ineffective. This function extracts the actual
+ * operation name (e.g., "GetUser", "CreatePost") from the request payload.
+ *
+ * Extraction Methods (tried in order):
+ * 1. Direct operationName field in request data
+ * 2. Parse from query string using regex pattern
+ *
+ * @param requestData - The request data object (typically GraphQL query payload)
+ * @returns Operation name string or null if not found
+ *
+ * @example
+ * // Method 1: Explicit operationName field
+ * const data1 = {
+ *   operationName: "GetUser",
+ *   query: "query GetUser { user { id name } }"
+ * };
+ * extractOperationName(data1); // Returns "GetUser"
+ *
+ * @example
+ * // Method 2: Parse from query string
+ * const data2 = {
+ *   query: "mutation CreatePost { createPost(title: \"Hello\") { id } }"
+ * };
+ * extractOperationName(data2); // Returns "CreatePost"
+ *
+ * @example
+ * // No operation name (anonymous query)
+ * const data3 = {
+ *   query: "{ user { id name } }"
+ * };
+ * extractOperationName(data3); // Returns null
+ */
+export function extractOperationName(requestData) {
+  // Validate input is an object
+  if (!requestData || typeof requestData !== 'object') {
+    return null;
+  }
+
+  // Method 1: Check for explicit operationName field
+  // This is the standard GraphQL request format
+  if ('operationName' in requestData && requestData.operationName) {
+    const opName = requestData.operationName;
+    // Ensure it's a string and not empty
+    if (typeof opName === 'string' && opName.trim().length > 0) {
+      return opName.trim();
+    }
+  }
+
+  // Method 2: Parse from query string
+  // Handles cases where operationName field is missing or null
+  if ('query' in requestData && typeof requestData.query === 'string') {
+    const query = requestData.query;
+
+    // Match: query OperationName or mutation OperationName or subscription OperationName
+    // Pattern explanation:
+    // - (?:query|mutation|subscription) - Match operation type (non-capturing group)
+    // - \s+ - One or more whitespace characters
+    // - (\w+) - Capture operation name (letters, numbers, underscore)
+    const match = query.match(/(?:query|mutation|subscription)\s+(\w+)/);
+    if (match && match[1]) {
+      return match[1];
+    }
+  }
+
+  // No operation name found
+  return null;
+}

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

@@ -0,0 +1,213 @@
+"use strict";
+
+/**
+ * Format GraphQL variables for display using arrow notation
+ *
+ * Mimics React Query key display format to provide visual consistency:
+ * - React Query: ["pokemon", "Sandshrew"] → "pokemon › Sandshrew"
+ * - GraphQL: GetPokemon(id: "Sandshrew") → "GetPokemon › Sandshrew"
+ *
+ * Extracts only the values from variables (not keys) and formats them
+ * for clean, compact display in the network request list.
+ */
+
+/**
+ * Format a single variable value for display
+ *
+ * @param value - The variable value to format
+ * @param maxLength - Maximum length for string values (default: 30)
+ * @returns Formatted string or null if value should be skipped
+ */
+function formatValue(value, maxLength = 30) {
+  // Null/undefined - skip
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  // Boolean
+  if (typeof value === 'boolean') {
+    return String(value);
+  }
+
+  // Number
+  if (typeof value === 'number') {
+    return String(value);
+  }
+
+  // String
+  if (typeof value === 'string') {
+    // Truncate long strings
+    if (value.length > maxLength) {
+      return value.substring(0, maxLength - 1) + '…';
+    }
+    return value;
+  }
+
+  // Array - take first value or show count
+  if (Array.isArray(value)) {
+    if (value.length === 0) return null;
+    if (value.length === 1) {
+      return formatValue(value[0], maxLength);
+    }
+    // Multiple items - show count
+    return `${value.length} items`;
+  }
+
+  // Object - extract first string/number value
+  if (typeof value === 'object') {
+    const entries = Object.entries(value);
+    if (entries.length === 0) return null;
+
+    // Find first meaningful value
+    for (const [_, v] of entries) {
+      const formatted = formatValue(v, maxLength);
+      if (formatted) {
+        return formatted;
+      }
+    }
+    return null;
+  }
+  return null;
+}
+
+/**
+ * Extract variable values from GraphQL variables object
+ *
+ * Returns an array of formatted values for display with arrow notation.
+ *
+ * @param variables - GraphQL variables object
+ * @param maxValues - Maximum number of values to show (default: 3)
+ * @returns Array of formatted variable values
+ *
+ * @example
+ * formatGraphQLVariables({ id: "pikachu" })
+ * // Returns: ["pikachu"]
+ *
+ * @example
+ * formatGraphQLVariables({ userId: 123, includeProfile: true })
+ * // Returns: ["123", "true"]
+ *
+ * @example
+ * formatGraphQLVariables({ filter: { status: "active" }, limit: 10 })
+ * // Returns: ["active", "10"]
+ */
+export function formatGraphQLVariables(variables, maxValues = 3) {
+  if (!variables || typeof variables !== 'object') {
+    return null;
+  }
+  const values = [];
+
+  // Extract values from variables object
+  for (const [_, value] of Object.entries(variables)) {
+    const formatted = formatValue(value);
+    if (formatted) {
+      values.push(formatted);
+    }
+
+    // Stop if we've reached max values
+    if (values.length >= maxValues) {
+      break;
+    }
+  }
+  return values.length > 0 ? values : null;
+}
+
+/**
+ * Combine operation name with variables using arrow notation
+ *
+ * Matches React Query display pattern: "pokemon › Sandshrew"
+ * This provides visual consistency across all dev tools.
+ *
+ * @param operationName - GraphQL operation name (e.g., "GetPokemon")
+ * @param variables - GraphQL variables object
+ * @returns Formatted string with arrow notation
+ *
+ * @example
+ * formatGraphQLDisplay("GetPokemon", { id: "Sandshrew" })
+ * // Returns: "GetPokemon › Sandshrew"
+ *
+ * @example
+ * formatGraphQLDisplay("GetUser", { userId: 123, includeProfile: true })
+ * // Returns: "GetUser › 123 › true"
+ *
+ * @example
+ * formatGraphQLDisplay("GetPosts", { status: "published", limit: 10, offset: 0 })
+ * // Returns: "GetPosts › published › 10 › 0" (first 3 values by default)
+ *
+ * @example
+ * formatGraphQLDisplay("GetCurrentUser", {})
+ * // Returns: "GetCurrentUser" (no variables)
+ */
+export function formatGraphQLDisplay(operationName, variables) {
+  const values = formatGraphQLVariables(variables);
+  if (!values || values.length === 0) {
+    // No variables - just operation name
+    return operationName;
+  }
+
+  // Combine: "GetPokemon › Sandshrew" (matches React Query pattern)
+  return [operationName, ...values].join(" › ");
+}
+
+/**
+ * Search GraphQL variables for a given text
+ *
+ * Recursively searches through all variable values to find matches.
+ * Used for filtering GraphQL requests by variable content.
+ *
+ * @param variables - GraphQL variables object
+ * @param searchText - Text to search for (already lowercased)
+ * @returns true if search text found in any variable value
+ *
+ * @example
+ * searchGraphQLVariables({ id: "pikachu" }, "pika")
+ * // Returns: true
+ *
+ * @example
+ * searchGraphQLVariables({ userId: 123, name: "John" }, "123")
+ * // Returns: true
+ */
+export function searchGraphQLVariables(variables, searchText) {
+  if (!variables || typeof variables !== 'object') {
+    return false;
+  }
+
+  // Search through all variable values
+  for (const value of Object.values(variables)) {
+    if (searchValue(value, searchText)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+/**
+ * Recursively search a value for matching text
+ */
+function searchValue(value, searchText) {
+  // String - direct match
+  if (typeof value === 'string') {
+    return value.toLowerCase().includes(searchText);
+  }
+
+  // Number - convert to string and match
+  if (typeof value === 'number') {
+    return String(value).includes(searchText);
+  }
+
+  // Boolean - convert to string and match
+  if (typeof value === 'boolean') {
+    return String(value).includes(searchText);
+  }
+
+  // Array - search each item
+  if (Array.isArray(value)) {
+    return value.some(item => searchValue(item, searchText));
+  }
+
+  // Object - search nested values
+  if (typeof value === 'object' && value !== null) {
+    return Object.values(value).some(v => searchValue(v, searchText));
+  }
+  return false;
+}

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

@@ -0,0 +1,9 @@
+"use strict";
+
+/**
+ * Formatting utilities for network events
+ * Re-exports shared utilities to maintain backward compatibility
+ */
+
+// Re-export shared formatting utilities
+export { formatBytes, formatDuration, formatHttpStatus, getMethodColor } from "@buoy-gg/shared-ui";