react-native-vconsole 0.3.1 → 0.4.0

package/README.md

@@ -18,12 +18,27 @@ export default function App() {
   return (
     <>
       {/* your app content */}
-      <VConsole enable={true} exclude={['localhost:8081']} />
+      <VConsole
+        enable={true}
+        exclude={{
+          domains: ['localhost:8081'],
+          ip: true,
+        }}
+      />
     </>
   );
 }
 ```
 
+## VConsole Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `enable` | `boolean` | `true` | Whether to enable and render vConsole. |
+| `exclude` | `{ domains?: string[]; ip?: boolean }` | `{}` | Network capture exclusion rules. |
+| `exclude.domains` | `string[]` | `[]` | Hosts to exclude from Network tab capture, keeping previous host-based matching behavior (e.g. `localhost:8081`). |
+| `exclude.ip` | `boolean` | `false` | When `true`, requests whose hostname is an IP address (IPv4/IPv6) will be skipped in Network tab capture. |
+
 ## Features
 
 - Draggable floating button (`vConsole`) with screen-boundary constraints.

package/lib/module/VConsole.js

@@ -1,14 +1,14 @@
 "use strict";
 
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Clipboard, Dimensions, FlatList, NativeModules, PanResponder, Platform, Pressable, StatusBar, StyleSheet, Text, ToastAndroid, View, ScrollView } from 'react-native';
+import { Animated, Clipboard, Dimensions, FlatList, Keyboard, NativeModules, PanResponder, Platform, Pressable, TextInput, StatusBar, StyleSheet, Text, ToastAndroid, View, ScrollView } from 'react-native';
 import { clearLogEntries, getLogEntries, installConsoleProxy, subscribeLogEntries, uninstallConsoleProxy } from "./core/consoleProxy.js";
 import { clearNetworkEntries, getNetworkEntries, installXhrProxy, subscribeNetworkEntries, uninstallXhrProxy } from "./core/xhrProxy.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const BUTTON_WIDTH = 88;
 const BUTTON_HEIGHT = 36;
 const PANEL_HEIGHT_RATIO = 7 / 9;
-const EMPTY_FILTER = [];
+const EMPTY_EXCLUDE = {};
 const LOG_SUB_TABS = ['All', 'log', 'info', 'warn', 'error'];
 const ROOT_TABS = ['Log', 'Network', 'System', 'App'];
 const LOG_THEME = {
@@ -61,6 +61,17 @@ function formatMemorySize(bytes) {
   }
   return `${mb.toFixed(2)} MB`;
 }
+function formatLogTime(timestamp) {
+  const date = new Date(timestamp);
+  if (Number.isNaN(date.getTime())) {
+    return '--:--:--.---';
+  }
+  const hh = String(date.getHours()).padStart(2, '0');
+  const mm = String(date.getMinutes()).padStart(2, '0');
+  const ss = String(date.getSeconds()).padStart(2, '0');
+  const ms = String(date.getMilliseconds()).padStart(3, '0');
+  return `${hh}:${mm}:${ss}.${ms}`;
+}
 function prettyText(value) {
   if (value === undefined) {
     return '';
@@ -74,10 +85,74 @@ function prettyText(value) {
     return String(value);
   }
 }
+function isNetworkErrorEntry(item) {
+  return item.isError === true;
+}
 function buildNetworkCopyText(item) {
   const status = item.status ?? '-';
   const duration = typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-';
-  return [`${item.method} ${item.url}`, `status ${status} duration ${duration}`, `request headers\n${prettyText(item.requestHeaders)}`, `request body\n${prettyText(item.requestBody)}`, `response headers\n${prettyText(item.responseHeaders)}`, `response data\n${prettyText(item.responseData)}`].join('\n');
+  const isError = isNetworkErrorEntry(item);
+  const segments = [`${item.method} ${item.url}`, `status ${status} duration ${duration}`, `request headers\n${prettyText(item.requestHeaders)}`, `request body\n${prettyText(item.requestBody)}`];
+  if (isError) {
+    segments.push(`error reason\n${item.errorReason ?? 'Network request failed'}`);
+  } else {
+    segments.push(`response headers\n${prettyText(item.responseHeaders)}`);
+    segments.push(`response data\n${prettyText(item.responseData)}`);
+  }
+  return segments.join('\n');
+}
+const FORBIDDEN_RETRY_HEADERS = new Set(['host', 'content-length', 'accept-encoding', 'connection', 'origin', 'referer']);
+function normalizeRetryUrl(rawUrl) {
+  if (!rawUrl) {
+    return '';
+  }
+  if (/^\/\//.test(rawUrl)) {
+    return `https:${rawUrl}`;
+  }
+  return rawUrl;
+}
+function buildRetryHeaders(headers) {
+  const nextHeaders = {};
+  if (!headers) {
+    return nextHeaders;
+  }
+  Object.entries(headers).forEach(([key, value]) => {
+    if (!FORBIDDEN_RETRY_HEADERS.has(key.toLowerCase())) {
+      nextHeaders[key] = value;
+    }
+  });
+  return nextHeaders;
+}
+function buildRetryBody(payload, method) {
+  if (method === 'GET' || method === 'HEAD' || payload == null) {
+    return undefined;
+  }
+  if (typeof payload === 'string') {
+    return payload;
+  }
+  if (typeof payload === 'number' || typeof payload === 'boolean') {
+    return String(payload);
+  }
+  if (typeof FormData !== 'undefined' && payload instanceof FormData) {
+    return payload;
+  }
+  if (typeof URLSearchParams !== 'undefined' && payload instanceof URLSearchParams) {
+    return payload;
+  }
+  if (typeof Blob !== 'undefined' && payload instanceof Blob) {
+    return payload;
+  }
+  if (typeof ArrayBuffer !== 'undefined' && payload instanceof ArrayBuffer) {
+    return payload;
+  }
+  if (ArrayBuffer.isView(payload)) {
+    return payload;
+  }
+  try {
+    return JSON.stringify(payload);
+  } catch {
+    return String(payload);
+  }
 }
 function ObjectTree({
   value,
@@ -166,7 +241,7 @@ function useFlatListRefs() {
 }
 export function VConsole({
   enable = true,
-  exclude = EMPTY_FILTER
+  exclude = EMPTY_EXCLUDE
 }) {
   const nativeModule = NativeModules.Vconsole;
   const {
@@ -201,6 +276,11 @@ export function VConsole({
   const [logSubTab, setLogSubTab] = useState('All');
   const [logEntries, setLogEntries] = useState([]);
   const [networkEntries, setNetworkEntries] = useState([]);
+  const [logFilterInput, setLogFilterInput] = useState('');
+  const [networkFilterInput, setNetworkFilterInput] = useState('');
+  const [debouncedLogFilter, setDebouncedLogFilter] = useState('');
+  const [debouncedNetworkFilter, setDebouncedNetworkFilter] = useState('');
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
   const [expandedMap, setExpandedMap] = useState({});
   const [systemInfo, setSystemInfo] = useState(null);
   const [appInfo, setAppInfo] = useState(null);
@@ -208,7 +288,8 @@ export function VConsole({
   const panelTranslateY = useRef(new Animated.Value(panelHeight)).current;
   const logListRefs = useFlatListRefs();
   const networkListRef = useRef(null);
-  const normalizedExclude = useMemo(() => exclude.map(item => item.trim().toLowerCase()).filter(Boolean), [exclude]);
+  const normalizedExcludeDomains = useMemo(() => (exclude.domains ?? []).map(item => item.trim().toLowerCase()).filter(Boolean), [exclude.domains]);
+  const shouldExcludeIp = exclude.ip === true;
   useEffect(() => {
     if (!enable) {
       setPanelVisible(false);
@@ -216,7 +297,8 @@ export function VConsole({
     }
     installConsoleProxy();
     installXhrProxy({
-      excludeHosts: normalizedExclude
+      excludeHosts: normalizedExcludeDomains,
+      excludeIp: shouldExcludeIp
     });
     const unsubscribeLog = subscribeLogEntries(setLogEntries);
     const unsubscribeNetwork = subscribeNetworkEntries(setNetworkEntries);
@@ -228,7 +310,7 @@ export function VConsole({
       uninstallConsoleProxy();
       uninstallXhrProxy();
     };
-  }, [enable, normalizedExclude]);
+  }, [enable, normalizedExcludeDomains, shouldExcludeIp]);
   useEffect(() => {
     dragPosition.stopAnimation(value => {
       const nextX = clamp(value.x, minX, maxX);
@@ -251,6 +333,32 @@ export function VConsole({
       nativeModule?.getAppInfo?.().then(result => setAppInfo(result)).catch(() => undefined);
     }
   }, [activeTab, appInfo, nativeModule, panelVisible, systemInfo]);
+  useEffect(() => {
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSubscription = Keyboard.addListener(showEvent, event => {
+      setKeyboardHeight(event.endCoordinates?.height ?? 0);
+    });
+    const hideSubscription = Keyboard.addListener(hideEvent, () => {
+      setKeyboardHeight(0);
+    });
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, []);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedLogFilter(logFilterInput);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [logFilterInput]);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedNetworkFilter(networkFilterInput);
+    }, 1000);
+    return () => clearTimeout(timer);
+  }, [networkFilterInput]);
   const panResponder = useMemo(() => PanResponder.create({
     onMoveShouldSetPanResponder: () => true,
     onPanResponderGrant: () => {
@@ -300,13 +408,27 @@ export function VConsole({
       }
     });
   };
+  const normalizedLogFilter = debouncedLogFilter.trim().toLowerCase();
+  const normalizedNetworkFilter = debouncedNetworkFilter.trim().toLowerCase();
+  const filteredLogEntries = useMemo(() => {
+    if (!normalizedLogFilter) {
+      return logEntries;
+    }
+    return logEntries.filter(item => item.text.toLowerCase().includes(normalizedLogFilter));
+  }, [logEntries, normalizedLogFilter]);
+  const filteredNetworkEntries = useMemo(() => {
+    if (!normalizedNetworkFilter) {
+      return networkEntries;
+    }
+    return networkEntries.filter(item => item.url.toLowerCase().includes(normalizedNetworkFilter));
+  }, [networkEntries, normalizedNetworkFilter]);
   const logDataByTab = useMemo(() => ({
-    All: logEntries,
-    log: logEntries.filter(item => item.level === 'log'),
-    info: logEntries.filter(item => item.level === 'info'),
-    warn: logEntries.filter(item => item.level === 'warn'),
-    error: logEntries.filter(item => item.level === 'error')
-  }), [logEntries]);
+    All: filteredLogEntries,
+    log: filteredLogEntries.filter(item => item.level === 'log'),
+    info: filteredLogEntries.filter(item => item.level === 'info'),
+    warn: filteredLogEntries.filter(item => item.level === 'warn'),
+    error: filteredLogEntries.filter(item => item.level === 'error')
+  }), [filteredLogEntries]);
   const onToggleNode = key => {
     setExpandedMap(prev => ({
       ...prev,
@@ -335,6 +457,27 @@ export function VConsole({
       animated: true
     });
   };
+  const retryNetworkRequest = item => {
+    const method = (item.method || 'GET').toUpperCase();
+    const url = normalizeRetryUrl(item.url);
+    if (!url) {
+      console.error('[vConsole] Retry failed: empty request URL');
+      return;
+    }
+    const headers = buildRetryHeaders(item.requestHeaders);
+    const body = buildRetryBody(item.requestBody, method);
+    const hasContentType = Object.keys(headers).some(key => key.toLowerCase() === 'content-type');
+    if (body && typeof body === 'string' && typeof item.requestBody === 'object' && item.requestBody !== null && !hasContentType) {
+      headers['Content-Type'] = 'application/json';
+    }
+    fetch(url, {
+      method,
+      headers,
+      body: body
+    }).catch(error => {
+      console.error('[vConsole] Retry request failed', error);
+    });
+  };
   const renderRootTab = tab => /*#__PURE__*/_jsx(Pressable, {
     style: [styles.topTabButton, activeTab === tab && styles.topTabButtonActive],
     onPress: () => setActiveTab(tab),
@@ -365,7 +508,10 @@ export function VConsole({
           style: [styles.logLevelText, {
             color: levelTheme.color
           }],
-          children: ["[", item.level.toUpperCase(), "]"]
+          children: ["[", item.level.toUpperCase(), "]", /*#__PURE__*/_jsxs(Text, {
+            style: styles.logTimeText,
+            children: [' ', formatLogTime(item.timestamp)]
+          })]
         }), /*#__PURE__*/_jsx(View, {
           style: styles.logPayload,
           children: item.args.map((arg, index) => /*#__PURE__*/_jsx(ObjectTree, {
@@ -388,8 +534,13 @@ export function VConsole({
   const renderNetworkItem = ({
     item
   }) => {
+    const isError = isNetworkErrorEntry(item);
+    const startedTime = formatLogTime(item.startedAt);
+    const finishedTime = typeof item.finishedAt === 'number' ? formatLogTime(item.finishedAt) : '-';
     return /*#__PURE__*/_jsxs(View, {
-      style: styles.listItem,
+      style: [styles.listItem, isError ? {
+        backgroundColor: LOG_THEME.error.backgroundColor
+      } : null],
       children: [/*#__PURE__*/_jsxs(View, {
         style: styles.listItemMain,
         children: [/*#__PURE__*/_jsxs(Text, {
@@ -397,7 +548,10 @@ export function VConsole({
           children: [item.method, " ", item.url]
         }), /*#__PURE__*/_jsxs(Text, {
           style: styles.networkLabel,
-          children: ["Status: ", item.status ?? '-', '   ', "Duration:", ' ', typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-']
+          children: ["Time: ", startedTime, finishedTime !== '-' ? ` ~ ${finishedTime}` : '', '   ', "Duration:", ' ', typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-']
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.networkLabel,
+          children: ["Status: ", item.status ?? '-']
         }), /*#__PURE__*/_jsxs(View, {
           style: styles.networkBlock,
           children: [/*#__PURE__*/_jsx(Text, {
@@ -420,30 +574,41 @@ export function VConsole({
             expandedMap: expandedMap,
             onToggle: onToggleNode
           })]
-        }), /*#__PURE__*/_jsxs(View, {
+        }), isError ? /*#__PURE__*/_jsxs(View, {
           style: styles.networkBlock,
           children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.networkLabel,
-            children: "Response Headers"
-          }), /*#__PURE__*/_jsx(ObjectTree, {
-            value: item.responseHeaders,
-            nodeKey: `${item.id}.responseHeaders`,
-            expandedMap: expandedMap,
-            onToggle: onToggleNode
+            style: [styles.networkLabel, styles.networkErrorLabel],
+            children: "Error Reason"
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.networkErrorText,
+            children: item.errorReason ?? 'Network request failed'
           })]
-        }), /*#__PURE__*/_jsxs(View, {
-          style: styles.networkBlock,
-          children: [/*#__PURE__*/_jsx(Text, {
-            style: styles.networkLabel,
-            children: "Response Data"
-          }), /*#__PURE__*/_jsx(ScrollView, {
-            horizontal: true,
-            children: /*#__PURE__*/_jsx(ObjectTree, {
-              value: item.responseData ?? '',
-              nodeKey: `${item.id}.responseData`,
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.networkBlock,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.networkLabel,
+              children: "Response Headers"
+            }), /*#__PURE__*/_jsx(ObjectTree, {
+              value: item.responseHeaders,
+              nodeKey: `${item.id}.responseHeaders`,
               expandedMap: expandedMap,
               onToggle: onToggleNode
-            })
+            })]
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.networkBlock,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.networkLabel,
+              children: "Response Data"
+            }), /*#__PURE__*/_jsx(ScrollView, {
+              horizontal: true,
+              children: /*#__PURE__*/_jsx(ObjectTree, {
+                value: item.responseData ?? '',
+                nodeKey: `${item.id}.responseData`,
+                expandedMap: expandedMap,
+                onToggle: onToggleNode
+              })
+            })]
           })]
         })]
       }), /*#__PURE__*/_jsx(Pressable, {
@@ -453,11 +618,18 @@ export function VConsole({
           style: styles.copyButtonText,
           children: "Copy"
         })
+      }), /*#__PURE__*/_jsx(Pressable, {
+        style: styles.retryButton,
+        onPress: () => retryNetworkRequest(item),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.retryButtonText,
+          children: "Retry"
+        })
       })]
     });
   };
-  const renderLogPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderLogPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsx(View, {
       style: styles.subTabRow,
       children: LOG_SUB_TABS.map(tab => /*#__PURE__*/_jsx(Pressable, {
@@ -480,6 +652,16 @@ export function VConsole({
           ItemSeparatorComponent: ListSeparator
         })
       }, tab))
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.filterInputWrap,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        style: styles.filterInput,
+        textAlignVertical: "center",
+        value: logFilterInput,
+        onChangeText: setLogFilterInput,
+        placeholder: "filter...",
+        placeholderTextColor: "#999999"
+      })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.actionsRow,
       children: [renderActionButton('Clear', () => {
@@ -488,14 +670,23 @@ export function VConsole({
       }), renderActionButton('Top', scrollLogTop), renderActionButton('Bottom', scrollLogBottom), renderActionButton('Hide', closePanel)]
     })]
   });
-  const renderNetworkPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderNetworkPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsx(FlatList, {
       ref: networkListRef,
-      data: networkEntries,
+      data: filteredNetworkEntries,
       keyExtractor: item => `network-${item.id}`,
       renderItem: renderNetworkItem,
       ItemSeparatorComponent: ListSeparator
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.filterInputWrap,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        style: styles.filterInput,
+        value: networkFilterInput,
+        onChangeText: setNetworkFilterInput,
+        placeholder: "filter",
+        placeholderTextColor: "#999999"
+      })
     }), /*#__PURE__*/_jsxs(View, {
       style: styles.actionsRow,
       children: [renderActionButton('Clear', () => {
@@ -504,8 +695,8 @@ export function VConsole({
       }), renderActionButton('Top', scrollNetworkTop), renderActionButton('Bottom', scrollNetworkBottom), renderActionButton('Hide', closePanel)]
     })]
   });
-  const renderSystemPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderSystemPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.infoCard,
       children: [/*#__PURE__*/_jsxs(Text, {
@@ -535,8 +726,8 @@ export function VConsole({
       children: renderActionButton('Hide', closePanel)
     })]
   });
-  const renderAppPanel = () => /*#__PURE__*/_jsxs(View, {
-    style: styles.contentArea,
+  const renderAppPanel = visible => /*#__PURE__*/_jsxs(View, {
+    style: [styles.contentArea, visible ? {} : styles.hidden],
     children: [/*#__PURE__*/_jsxs(View, {
       style: styles.infoCard,
       children: [/*#__PURE__*/_jsxs(Text, {
@@ -578,6 +769,7 @@ export function VConsole({
       }), /*#__PURE__*/_jsxs(Animated.View, {
         style: [styles.panel, {
           height: panelHeight,
+          marginBottom: keyboardHeight,
           transform: [{
             translateY: panelTranslateY
           }]
@@ -585,7 +777,7 @@ export function VConsole({
         children: [/*#__PURE__*/_jsx(View, {
           style: styles.topTabRow,
           children: ROOT_TABS.map(renderRootTab)
-        }), activeTab === 'Log' ? renderLogPanel() : null, activeTab === 'Network' ? renderNetworkPanel() : null, activeTab === 'System' ? renderSystemPanel() : null, activeTab === 'App' ? renderAppPanel() : null]
+        }), renderLogPanel(activeTab === 'Log'), renderNetworkPanel(activeTab === 'Network'), renderSystemPanel(activeTab === 'System'), renderAppPanel(activeTab === 'App')]
       })]
     }) : null]
   });
@@ -701,6 +893,11 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     marginBottom: 4
   },
+  logTimeText: {
+    fontSize: 11,
+    fontWeight: '400',
+    color: '#888888'
+  },
   logPayload: {
     flex: 1
   },
@@ -718,6 +915,20 @@ const styles = StyleSheet.create({
     fontSize: 11,
     color: '#333333'
   },
+  retryButton: {
+    position: 'absolute',
+    right: 8,
+    top: 40,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#D0D0D0',
+    borderRadius: 6,
+    paddingVertical: 4,
+    paddingHorizontal: 8
+  },
+  retryButtonText: {
+    fontSize: 11,
+    color: '#333333'
+  },
   valuePrimitive: {
     color: '#222222',
     fontSize: 12,
@@ -780,6 +991,32 @@ const styles = StyleSheet.create({
     color: '#444444',
     marginBottom: 2
   },
+  networkErrorLabel: {
+    color: LOG_THEME.error.color,
+    fontWeight: '600'
+  },
+  networkErrorText: {
+    color: LOG_THEME.error.color,
+    fontSize: 12
+  },
+  filterInputWrap: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#E1E1E1',
+    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingBottom: 6
+  },
+  filterInput: {
+    height: 34,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#D0D0D0',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    fontSize: 12,
+    color: '#222222',
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 0
+  },
   actionsRow: {
     borderTopWidth: StyleSheet.hairlineWidth,
     borderTopColor: '#E1E1E1',