react-native-vconsole 0.3.1 → 0.5.0

package/src/VConsole.tsx

@@ -4,10 +4,12 @@ import {
   Clipboard,
   Dimensions,
   FlatList,
+  Keyboard,
   NativeModules,
   PanResponder,
   Platform,
   Pressable,
+  TextInput,
   StatusBar,
   StyleSheet,
   Text,
@@ -42,9 +44,11 @@ import type {
 const BUTTON_WIDTH = 88;
 const BUTTON_HEIGHT = 36;
 const PANEL_HEIGHT_RATIO = 7 / 9;
-const EMPTY_FILTER: string[] = [];
+const EMPTY_EXCLUDE: VConsoleExclude = {};
 const LOG_SUB_TABS: LogFilterTab[] = ['All', 'log', 'info', 'warn', 'error'];
 const ROOT_TABS: VConsoleTab[] = ['Log', 'Network', 'System', 'App'];
+const NETWORK_DURATION_WARN_THRESHOLD_MS = 1000;
+const NETWORK_DURATION_SEVERE_THRESHOLD_MS = 3000;
 
 const LOG_THEME = {
   log: { backgroundColor: '#FFFFFF', color: '#111111' },
@@ -62,7 +66,12 @@ type NativeModuleShape = {
 
 export type VConsoleProps = {
   enable?: boolean;
-  exclude?: string[];
+  exclude?: VConsoleExclude;
+};
+
+type VConsoleExclude = {
+  domains?: string[];
+  ip?: boolean;
 };
 
 function clamp(value: number, min: number, max: number): number {
@@ -102,6 +111,18 @@ function formatMemorySize(bytes: unknown): string {
   return `${mb.toFixed(2)} MB`;
 }
 
+function formatLogTime(timestamp: number): string {
+  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: unknown): string {
   if (value === undefined) {
     return '';
@@ -116,19 +137,123 @@ function prettyText(value: unknown): string {
   }
 }
 
+function isNetworkErrorEntry(item: NetworkEntry): boolean {
+  return item.isError === true;
+}
+
+function getNetworkItemBackgroundColor(item: NetworkEntry): string | undefined {
+  if (isNetworkErrorEntry(item)) {
+    return LOG_THEME.error.backgroundColor;
+  }
+
+  if (typeof item.durationMs !== 'number') {
+    return undefined;
+  }
+
+  if (item.durationMs >= NETWORK_DURATION_SEVERE_THRESHOLD_MS) {
+    return LOG_THEME.error.backgroundColor;
+  }
+
+  if (item.durationMs >= NETWORK_DURATION_WARN_THRESHOLD_MS) {
+    return LOG_THEME.warn.backgroundColor;
+  }
+
+  return undefined;
+}
+
 function buildNetworkCopyText(item: NetworkEntry): string {
   const status = item.status ?? '-';
   const duration =
     typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-';
+  const isError = isNetworkErrorEntry(item);
 
-  return [
+  const segments = [
     `${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');
+  ];
+
+  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: string): string {
+  if (!rawUrl) {
+    return '';
+  }
+  if (/^\/\//.test(rawUrl)) {
+    return `https:${rawUrl}`;
+  }
+  return rawUrl;
+}
+
+function buildRetryHeaders(
+  headers: Record<string, string> | undefined
+): Record<string, string> {
+  const nextHeaders: Record<string, string> = {};
+  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: unknown, method: string): unknown | undefined {
+  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);
+  }
 }
 
 type ObjectTreeProps = {
@@ -225,7 +350,7 @@ function useFlatListRefs() {
 
 export function VConsole({
   enable = true,
-  exclude = EMPTY_FILTER,
+  exclude = EMPTY_EXCLUDE,
 }: VConsoleProps) {
   const nativeModule = NativeModules.Vconsole as NativeModuleShape | undefined;
   const { width, height } = Dimensions.get('window');
@@ -258,6 +383,11 @@ export function VConsole({
   const [logSubTab, setLogSubTab] = useState<LogFilterTab>('All');
   const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
   const [networkEntries, setNetworkEntries] = useState<NetworkEntry[]>([]);
+  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<ExpandedMap>({});
   const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(null);
   const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
@@ -266,10 +396,14 @@ export function VConsole({
   const panelTranslateY = useRef(new Animated.Value(panelHeight)).current;
   const logListRefs = useFlatListRefs();
   const networkListRef = useRef<FlatList<NetworkEntry>>(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) {
@@ -278,7 +412,10 @@ export function VConsole({
     }
 
     installConsoleProxy();
-    installXhrProxy({ excludeHosts: normalizedExclude });
+    installXhrProxy({
+      excludeHosts: normalizedExcludeDomains,
+      excludeIp: shouldExcludeIp,
+    });
 
     const unsubscribeLog = subscribeLogEntries(setLogEntries);
     const unsubscribeNetwork = subscribeNetworkEntries(setNetworkEntries);
@@ -291,7 +428,7 @@ export function VConsole({
       uninstallConsoleProxy();
       uninstallXhrProxy();
     };
-  }, [enable, normalizedExclude]);
+  }, [enable, normalizedExcludeDomains, shouldExcludeIp]);
 
   useEffect(() => {
     dragPosition.stopAnimation((value) => {
@@ -317,6 +454,39 @@ export function VConsole({
     }
   }, [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({
@@ -370,15 +540,36 @@ 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'),
+      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'),
     }),
-    [logEntries]
+    [filteredLogEntries]
   );
 
   const onToggleNode = (key: string) => {
@@ -407,6 +598,39 @@ export function VConsole({
     networkListRef.current?.scrollToEnd({ animated: true });
   };
 
+  const retryNetworkRequest = (item: NetworkEntry) => {
+    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 as never,
+    }).catch((error: unknown) => {
+      console.error('[vConsole] Retry request failed', error);
+    });
+  };
+
   const renderRootTab = (tab: VConsoleTab) => (
     <Pressable
       key={tab}
@@ -445,6 +669,10 @@ export function VConsole({
         <View style={styles.listItemMain}>
           <Text style={[styles.logLevelText, { color: levelTheme.color }]}>
             [{item.level.toUpperCase()}]
+            <Text style={styles.logTimeText}>
+              {' '}
+              {formatLogTime(item.timestamp)}
+            </Text>
           </Text>
           <View style={styles.logPayload}>
             {item.args.map((arg, index) => (
@@ -471,18 +699,29 @@ export function VConsole({
   const renderNetworkItem: FlatListProps<NetworkEntry>['renderItem'] = ({
     item,
   }) => {
+    const isError = isNetworkErrorEntry(item);
+    const backgroundColor = getNetworkItemBackgroundColor(item);
+    const startedTime = formatLogTime(item.startedAt);
+    const finishedTime =
+      typeof item.finishedAt === 'number'
+        ? formatLogTime(item.finishedAt)
+        : '-';
     return (
-      <View style={styles.listItem}>
+      <View
+        style={[styles.listItem, backgroundColor ? { backgroundColor } : null]}
+      >
         <View style={styles.listItemMain}>
           <Text style={styles.networkTitle}>
             {item.method} {item.url}
           </Text>
           <Text style={styles.networkLabel}>
-            Status: {item.status ?? '-'}
+            Time: {startedTime}
+            {finishedTime !== '-' ? ` ~ ${finishedTime}` : ''}
             {'   '}
             Duration:{' '}
             {typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-'}
           </Text>
+          <Text style={styles.networkLabel}>Status: {item.status ?? '-'}</Text>
           <View style={styles.networkBlock}>
             <Text style={styles.networkLabel}>Request Headers</Text>
             <ObjectTree
@@ -501,26 +740,39 @@ export function VConsole({
               onToggle={onToggleNode}
             />
           </View>
-          <View style={styles.networkBlock}>
-            <Text style={styles.networkLabel}>Response Headers</Text>
-            <ObjectTree
-              value={item.responseHeaders}
-              nodeKey={`${item.id}.responseHeaders`}
-              expandedMap={expandedMap}
-              onToggle={onToggleNode}
-            />
-          </View>
-          <View style={styles.networkBlock}>
-            <Text style={styles.networkLabel}>Response Data</Text>
-            <ScrollView horizontal={true}>
-              <ObjectTree
-                value={item.responseData ?? ''}
-                nodeKey={`${item.id}.responseData`}
-                expandedMap={expandedMap}
-                onToggle={onToggleNode}
-              />
-            </ScrollView>
-          </View>
+          {isError ? (
+            <View style={styles.networkBlock}>
+              <Text style={[styles.networkLabel, styles.networkErrorLabel]}>
+                Error Reason
+              </Text>
+              <Text style={styles.networkErrorText}>
+                {item.errorReason ?? 'Network request failed'}
+              </Text>
+            </View>
+          ) : (
+            <>
+              <View style={styles.networkBlock}>
+                <Text style={styles.networkLabel}>Response Headers</Text>
+                <ObjectTree
+                  value={item.responseHeaders}
+                  nodeKey={`${item.id}.responseHeaders`}
+                  expandedMap={expandedMap}
+                  onToggle={onToggleNode}
+                />
+              </View>
+              <View style={styles.networkBlock}>
+                <Text style={styles.networkLabel}>Response Data</Text>
+                <ScrollView horizontal={true}>
+                  <ObjectTree
+                    value={item.responseData ?? ''}
+                    nodeKey={`${item.id}.responseData`}
+                    expandedMap={expandedMap}
+                    onToggle={onToggleNode}
+                  />
+                </ScrollView>
+              </View>
+            </>
+          )}
         </View>
         <Pressable
           style={styles.copyButton}
@@ -530,12 +782,18 @@ export function VConsole({
         >
           <Text style={styles.copyButtonText}>Copy</Text>
         </Pressable>
+        <Pressable
+          style={styles.retryButton}
+          onPress={() => retryNetworkRequest(item)}
+        >
+          <Text style={styles.retryButtonText}>Retry</Text>
+        </Pressable>
       </View>
     );
   };
 
-  const renderLogPanel = () => (
-    <View style={styles.contentArea}>
+  const renderLogPanel = (visible: boolean) => (
+    <View style={[styles.contentArea, visible ? {} : styles.hidden]}>
       <View style={styles.subTabRow}>
         {LOG_SUB_TABS.map((tab) => (
           <Pressable
@@ -573,6 +831,16 @@ export function VConsole({
           </View>
         ))}
       </View>
+      <View style={styles.filterInputWrap}>
+        <TextInput
+          style={styles.filterInput}
+          textAlignVertical="center"
+          value={logFilterInput}
+          onChangeText={setLogFilterInput}
+          placeholder="filter..."
+          placeholderTextColor="#999999"
+        />
+      </View>
       <View style={styles.actionsRow}>
         {renderActionButton('Clear', () => {
           clearLogEntries();
@@ -585,15 +853,24 @@ export function VConsole({
     </View>
   );
 
-  const renderNetworkPanel = () => (
-    <View style={styles.contentArea}>
+  const renderNetworkPanel = (visible: boolean) => (
+    <View style={[styles.contentArea, visible ? {} : styles.hidden]}>
       <FlatList
         ref={networkListRef}
-        data={networkEntries}
+        data={filteredNetworkEntries}
         keyExtractor={(item) => `network-${item.id}`}
         renderItem={renderNetworkItem}
         ItemSeparatorComponent={ListSeparator}
       />
+      <View style={styles.filterInputWrap}>
+        <TextInput
+          style={styles.filterInput}
+          value={networkFilterInput}
+          onChangeText={setNetworkFilterInput}
+          placeholder="filter"
+          placeholderTextColor="#999999"
+        />
+      </View>
       <View style={styles.actionsRow}>
         {renderActionButton('Clear', () => {
           clearNetworkEntries();
@@ -606,8 +883,8 @@ export function VConsole({
     </View>
   );
 
-  const renderSystemPanel = () => (
-    <View style={styles.contentArea}>
+  const renderSystemPanel = (visible: boolean) => (
+    <View style={[styles.contentArea, visible ? {} : styles.hidden]}>
       <View style={styles.infoCard}>
         <Text style={styles.infoText}>
           Brand: {systemInfo?.manufacturer ?? '-'}
@@ -642,8 +919,8 @@ export function VConsole({
     </View>
   );
 
-  const renderAppPanel = () => (
-    <View style={styles.contentArea}>
+  const renderAppPanel = (visible: boolean) => (
+    <View style={[styles.contentArea, visible ? {} : styles.hidden]}>
       <View style={styles.infoCard}>
         <Text style={styles.infoText}>
           App Version: {appInfo?.appVersion ?? '-'}
@@ -686,15 +963,16 @@ export function VConsole({
               styles.panel,
               {
                 height: panelHeight,
+                marginBottom: keyboardHeight,
                 transform: [{ translateY: panelTranslateY }],
               },
             ]}
           >
             <View style={styles.topTabRow}>{ROOT_TABS.map(renderRootTab)}</View>
-            {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')}
           </Animated.View>
         </View>
       ) : null}
@@ -813,6 +1091,11 @@ const styles = StyleSheet.create({
     fontWeight: '700',
     marginBottom: 4,
   },
+  logTimeText: {
+    fontSize: 11,
+    fontWeight: '400',
+    color: '#888888',
+  },
   logPayload: {
     flex: 1,
   },
@@ -830,6 +1113,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,
@@ -892,6 +1189,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',