react-native-prod-debugger 1.0.0

package/lib/module/plugins/network/NetworkInspectorPlugin.js

@@ -0,0 +1,703 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { View, Text, FlatList, TouchableOpacity, TextInput, StyleSheet, ScrollView } from 'react-native';
+import { NetworkInterceptor } from './NetworkInterceptor';
+import { formatDuration, formatBytes, formatTimestamp, getStatusColor, getMethodColor, truncate, toCurl, copyToClipboard, safeStringify, shareText } from '../../core/utils';
+
+// ─── Network Inspector Plugin Component ─────────────────────────────────────
+
+const NetworkInspectorPanel = ({
+  theme
+}) => {
+  const [requests, setRequests] = useState([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedRequest, setSelectedRequest] = useState(null);
+  const [activeDetailTab, setActiveDetailTab] = useState('headers');
+  const [methodFilter, setMethodFilter] = useState(null);
+  useEffect(() => {
+    const unsubscribe = NetworkInterceptor.subscribe(setRequests);
+    return unsubscribe;
+  }, []);
+  const filteredRequests = useMemo(() => {
+    let filtered = requests;
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase();
+      filtered = filtered.filter(r => r.url.toLowerCase().includes(q) || r.method.toLowerCase().includes(q) || r.gqlOperation?.toLowerCase().includes(q) || String(r.status).includes(q));
+    }
+    if (methodFilter) {
+      filtered = filtered.filter(r => r.method === methodFilter);
+    }
+    return filtered;
+  }, [requests, searchQuery, methodFilter]);
+  const stats = useMemo(() => {
+    const total = requests.length;
+    const errors = requests.filter(r => r.isError).length;
+    const pending = requests.filter(r => !r.endTime).length;
+    return {
+      total,
+      errors,
+      pending
+    };
+  }, [requests]);
+  const handleClear = useCallback(() => {
+    NetworkInterceptor.clear();
+    setSelectedRequest(null);
+  }, []);
+  const handleCopyCurl = useCallback(req => {
+    copyToClipboard(toCurl(req));
+  }, []);
+  const handleShareRequest = useCallback(req => {
+    const data = safeStringify({
+      url: req.url,
+      method: req.method,
+      status: req.status,
+      duration: req.duration,
+      requestHeaders: req.requestHeaders,
+      responseHeaders: req.responseHeaders,
+      requestBody: req.requestBody,
+      responseBody: req.responseBody
+    });
+    shareText(data, `${req.method} ${req.url}`);
+  }, []);
+  if (selectedRequest) {
+    return /*#__PURE__*/React.createElement(RequestDetail, {
+      request: selectedRequest,
+      theme: theme,
+      activeTab: activeDetailTab,
+      onTabChange: setActiveDetailTab,
+      onBack: () => setSelectedRequest(null),
+      onCopyCurl: handleCopyCurl,
+      onShare: handleShareRequest
+    });
+  }
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.statsBar, {
+      backgroundColor: theme.surface
+    }]
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.statsRow
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.statText, {
+      color: theme.text
+    }]
+  }, stats.total, " requests"), stats.errors > 0 && /*#__PURE__*/React.createElement(Text, {
+    style: [styles.statText, {
+      color: theme.error
+    }]
+  }, stats.errors, " errors"), stats.pending > 0 && /*#__PURE__*/React.createElement(Text, {
+    style: [styles.statText, {
+      color: theme.warning
+    }]
+  }, stats.pending, " pending")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: handleClear,
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.clearButton, {
+      color: theme.error
+    }]
+  }, "Clear"))), /*#__PURE__*/React.createElement(View, {
+    style: [styles.searchContainer, {
+      backgroundColor: theme.surface
+    }]
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    style: [styles.searchInput, {
+      color: theme.text,
+      backgroundColor: theme.surfaceAlt,
+      borderColor: theme.border
+    }],
+    placeholder: "Search URL, method, status...",
+    placeholderTextColor: theme.textMuted,
+    value: searchQuery,
+    onChangeText: setSearchQuery,
+    autoCapitalize: "none",
+    autoCorrect: false
+  })), /*#__PURE__*/React.createElement(ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    style: [styles.filterContainer, {
+      backgroundColor: theme.surface
+    }],
+    contentContainerStyle: styles.filterContent
+  }, ['ALL', 'GET', 'POST', 'PUT', 'PATCH', 'DELETE'].map(method => /*#__PURE__*/React.createElement(TouchableOpacity, {
+    key: method,
+    style: [styles.filterChip, {
+      backgroundColor: method === 'ALL' && !methodFilter || methodFilter === method ? theme.accent : theme.surfaceAlt,
+      borderColor: theme.border
+    }],
+    onPress: () => setMethodFilter(method === 'ALL' ? null : method),
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.filterChipText, {
+      color: method === 'ALL' && !methodFilter || methodFilter === method ? '#FFFFFF' : theme.textSecondary
+    }]
+  }, method)))), /*#__PURE__*/React.createElement(FlatList, {
+    data: filteredRequests,
+    keyExtractor: item => item.id,
+    renderItem: ({
+      item
+    }) => /*#__PURE__*/React.createElement(RequestRow, {
+      request: item,
+      theme: theme,
+      onPress: () => setSelectedRequest(item)
+    }),
+    ListEmptyComponent: /*#__PURE__*/React.createElement(View, {
+      style: styles.emptyContainer
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: [styles.emptyText, {
+        color: theme.textMuted
+      }]
+    }, searchQuery ? 'No matching requests' : 'No network requests captured yet')),
+    initialNumToRender: 20,
+    maxToRenderPerBatch: 10,
+    windowSize: 10
+  }));
+};
+
+// ─── Request Row ────────────────────────────────────────────────────────────
+
+const RequestRow = /*#__PURE__*/React.memo(({
+  request,
+  theme,
+  onPress
+}) => {
+  const urlPath = useMemo(() => {
+    try {
+      const parsed = new URL(request.url);
+      return parsed.pathname + parsed.search;
+    } catch {
+      return request.url;
+    }
+  }, [request.url]);
+  return /*#__PURE__*/React.createElement(TouchableOpacity, {
+    style: [styles.requestRow, {
+      backgroundColor: request.isError ? `${theme.error}10` : theme.surface,
+      borderBottomColor: theme.border
+    }],
+    onPress: onPress,
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.requestRowLeft
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.requestMethodContainer
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.requestMethod, {
+      color: getMethodColor(request.method)
+    }]
+  }, request.method), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.requestStatus, {
+      color: getStatusColor(request.status)
+    }]
+  }, request.status ?? '...')), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.requestUrl, {
+      color: theme.text
+    }],
+    numberOfLines: 1
+  }, request.gqlOperation ? `[${request.gqlType}] ${request.gqlOperation}` : truncate(urlPath, 60))), /*#__PURE__*/React.createElement(View, {
+    style: styles.requestRowRight
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.requestDuration, {
+      color: theme.textSecondary
+    }]
+  }, formatDuration(request.duration)), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.requestSize, {
+      color: theme.textMuted
+    }]
+  }, formatBytes(request.responseSize)), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.requestTime, {
+      color: theme.textMuted
+    }]
+  }, formatTimestamp(request.startTime))));
+});
+
+// ─── Request Detail ─────────────────────────────────────────────────────────
+
+const RequestDetail = ({
+  request,
+  theme,
+  activeTab,
+  onTabChange,
+  onBack,
+  onCopyCurl,
+  onShare
+}) => {
+  const tabs = ['headers', 'request', 'response', 'timing'];
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.container
+  }, /*#__PURE__*/React.createElement(View, {
+    style: [styles.detailHeader, {
+      backgroundColor: theme.surface,
+      borderBottomColor: theme.border
+    }]
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: onBack,
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.backButton, {
+      color: theme.accent
+    }]
+  }, "\u2190 Back")), /*#__PURE__*/React.createElement(View, {
+    style: styles.detailActions
+  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => onCopyCurl(request),
+    style: [styles.actionButton, {
+      backgroundColor: theme.surfaceAlt
+    }],
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.actionButtonText, {
+      color: theme.textSecondary
+    }]
+  }, "cURL")), /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => onShare(request),
+    style: [styles.actionButton, {
+      backgroundColor: theme.surfaceAlt
+    }],
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.actionButtonText, {
+      color: theme.textSecondary
+    }]
+  }, "Share")))), /*#__PURE__*/React.createElement(View, {
+    style: [styles.urlDisplay, {
+      backgroundColor: theme.codeBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.urlMethod, {
+      color: getMethodColor(request.method)
+    }]
+  }, request.method), /*#__PURE__*/React.createElement(Text, {
+    style: [styles.urlText, {
+      color: theme.codeText
+    }],
+    selectable: true
+  }, request.url)), /*#__PURE__*/React.createElement(View, {
+    style: [styles.detailTabBar, {
+      backgroundColor: theme.surface
+    }]
+  }, tabs.map(tab => /*#__PURE__*/React.createElement(TouchableOpacity, {
+    key: tab,
+    style: [styles.detailTab, {
+      borderBottomColor: activeTab === tab ? theme.accent : 'transparent'
+    }],
+    onPress: () => onTabChange(tab),
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.detailTabText, {
+      color: activeTab === tab ? theme.accent : theme.textSecondary
+    }]
+  }, tab.charAt(0).toUpperCase() + tab.slice(1))))), /*#__PURE__*/React.createElement(ScrollView, {
+    style: styles.detailContent
+  }, activeTab === 'headers' && /*#__PURE__*/React.createElement(HeadersView, {
+    request: request,
+    theme: theme
+  }), activeTab === 'request' && /*#__PURE__*/React.createElement(BodyView, {
+    body: request.requestBody,
+    theme: theme,
+    label: "Request Body"
+  }), activeTab === 'response' && /*#__PURE__*/React.createElement(BodyView, {
+    body: request.responseBody,
+    theme: theme,
+    label: "Response Body"
+  }), activeTab === 'timing' && /*#__PURE__*/React.createElement(TimingView, {
+    request: request,
+    theme: theme
+  })));
+};
+
+// ─── Sub-views ──────────────────────────────────────────────────────────────
+
+const HeadersView = ({
+  request,
+  theme
+}) => /*#__PURE__*/React.createElement(View, {
+  style: styles.sectionContainer
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.sectionTitle, {
+    color: theme.text
+  }]
+}, "Request Headers"), request.requestHeaders && Object.keys(request.requestHeaders).length > 0 ? Object.entries(request.requestHeaders).map(([key, value]) => /*#__PURE__*/React.createElement(View, {
+  key: key,
+  style: [styles.headerRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.headerKey, {
+    color: theme.accent
+  }]
+}, key), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.headerValue, {
+    color: theme.text
+  }],
+  selectable: true
+}, value))) : /*#__PURE__*/React.createElement(Text, {
+  style: [styles.emptyText, {
+    color: theme.textMuted
+  }]
+}, "No headers"), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.sectionTitle, {
+    color: theme.text,
+    marginTop: 16
+  }]
+}, "Response Headers"), request.responseHeaders && Object.keys(request.responseHeaders).length > 0 ? Object.entries(request.responseHeaders).map(([key, value]) => /*#__PURE__*/React.createElement(View, {
+  key: key,
+  style: [styles.headerRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.headerKey, {
+    color: theme.accent
+  }]
+}, key), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.headerValue, {
+    color: theme.text
+  }],
+  selectable: true
+}, value))) : /*#__PURE__*/React.createElement(Text, {
+  style: [styles.emptyText, {
+    color: theme.textMuted
+  }]
+}, request.endTime ? 'No headers' : 'Pending...'));
+const BodyView = ({
+  body,
+  theme,
+  label
+}) => {
+  const formatted = useMemo(() => {
+    if (!body) return null;
+    try {
+      const parsed = JSON.parse(body);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return body;
+    }
+  }, [body]);
+  return /*#__PURE__*/React.createElement(View, {
+    style: styles.sectionContainer
+  }, /*#__PURE__*/React.createElement(View, {
+    style: styles.sectionHeaderRow
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.sectionTitle, {
+      color: theme.text
+    }]
+  }, label), formatted && /*#__PURE__*/React.createElement(TouchableOpacity, {
+    onPress: () => copyToClipboard(formatted),
+    activeOpacity: 0.7
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.copyButton, {
+      color: theme.accent
+    }]
+  }, "Copy"))), formatted ? /*#__PURE__*/React.createElement(View, {
+    style: [styles.codeBlock, {
+      backgroundColor: theme.codeBackground
+    }]
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [styles.codeText, {
+      color: theme.codeText
+    }],
+    selectable: true
+  }, formatted)) : /*#__PURE__*/React.createElement(Text, {
+    style: [styles.emptyText, {
+      color: theme.textMuted
+    }]
+  }, "No body"));
+};
+const TimingView = ({
+  request,
+  theme
+}) => /*#__PURE__*/React.createElement(View, {
+  style: styles.sectionContainer
+}, /*#__PURE__*/React.createElement(View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Started"), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, formatTimestamp(request.startTime))), request.endTime && /*#__PURE__*/React.createElement(View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Completed"), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, formatTimestamp(request.endTime))), /*#__PURE__*/React.createElement(View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Duration"), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingValue, {
+    color: request.duration && request.duration > 3000 ? theme.warning : theme.success
+  }]
+}, formatDuration(request.duration))), /*#__PURE__*/React.createElement(View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Request Size"), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, formatBytes(request.requestSize))), /*#__PURE__*/React.createElement(View, {
+  style: [styles.timingRow, {
+    borderBottomColor: theme.border
+  }]
+}, /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingLabel, {
+    color: theme.textSecondary
+  }]
+}, "Response Size"), /*#__PURE__*/React.createElement(Text, {
+  style: [styles.timingValue, {
+    color: theme.text
+  }]
+}, formatBytes(request.responseSize))));
+
+// ─── Styles ─────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  statsBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  statsRow: {
+    flexDirection: 'row',
+    gap: 12
+  },
+  statText: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  clearButton: {
+    fontSize: 13,
+    fontWeight: '700'
+  },
+  searchContainer: {
+    paddingHorizontal: 12,
+    paddingBottom: 8
+  },
+  searchInput: {
+    height: 36,
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    fontSize: 13,
+    borderWidth: 1
+  },
+  filterContainer: {
+    maxHeight: 44
+  },
+  filterContent: {
+    paddingHorizontal: 12,
+    paddingBottom: 8,
+    gap: 6
+  },
+  filterChip: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    borderWidth: 1
+  },
+  filterChipText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  requestRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  requestRowLeft: {
+    flex: 1,
+    marginRight: 8
+  },
+  requestRowRight: {
+    alignItems: 'flex-end'
+  },
+  requestMethodContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 2
+  },
+  requestMethod: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0.5
+  },
+  requestStatus: {
+    fontSize: 11,
+    fontWeight: '700'
+  },
+  requestUrl: {
+    fontSize: 12
+  },
+  requestDuration: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  requestSize: {
+    fontSize: 10,
+    marginTop: 1
+  },
+  requestTime: {
+    fontSize: 10,
+    marginTop: 1
+  },
+  emptyContainer: {
+    alignItems: 'center',
+    paddingVertical: 40
+  },
+  emptyText: {
+    fontSize: 13
+  },
+  detailHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  backButton: {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  detailActions: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  actionButton: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8
+  },
+  actionButtonText: {
+    fontSize: 11,
+    fontWeight: '600'
+  },
+  urlDisplay: {
+    padding: 12,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8
+  },
+  urlMethod: {
+    fontSize: 12,
+    fontWeight: '800'
+  },
+  urlText: {
+    fontSize: 11,
+    flex: 1
+  },
+  detailTabBar: {
+    flexDirection: 'row'
+  },
+  detailTab: {
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: 10,
+    borderBottomWidth: 2
+  },
+  detailTabText: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  detailContent: {
+    flex: 1
+  },
+  sectionContainer: {
+    padding: 12
+  },
+  sectionTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    marginBottom: 8
+  },
+  sectionHeaderRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 8
+  },
+  copyButton: {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  headerRow: {
+    flexDirection: 'row',
+    paddingVertical: 6,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  headerKey: {
+    fontSize: 11,
+    fontWeight: '600',
+    width: 120,
+    marginRight: 8
+  },
+  headerValue: {
+    fontSize: 11,
+    flex: 1
+  },
+  codeBlock: {
+    padding: 12,
+    borderRadius: 8
+  },
+  codeText: {
+    fontSize: 11,
+    fontFamily: 'monospace',
+    lineHeight: 18
+  },
+  timingRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  timingLabel: {
+    fontSize: 13
+  },
+  timingValue: {
+    fontSize: 13,
+    fontWeight: '600'
+  }
+});
+
+// ─── Plugin Factory ─────────────────────────────────────────────────────────
+
+export function createNetworkInspectorPlugin() {
+  return {
+    id: 'network-inspector',
+    name: 'Network',
+    icon: '🌐',
+    component: NetworkInspectorPanel,
+    order: 10,
+    onInit: () => NetworkInterceptor.start(),
+    onDestroy: () => NetworkInterceptor.stop()
+  };
+}
+//# sourceMappingURL=NetworkInspectorPlugin.js.map