react-native-debug-toolkit 0.1.5 → 0.1.7

package/lib/features/NetworkFeature.js

@@ -12,6 +12,7 @@ class NetworkFeature {
     this.logs = []
     this.pendingAxiosRequests = new Map()
     this.originalFetch = null
+    this.blacklist = [] // URL patterns to exclude from logging
 
     NetworkFeature.instance = this
   }
@@ -39,6 +40,39 @@ class NetworkFeature {
     this.pendingAxiosRequests.clear()
   }
 
+  // Check if a URL matches any pattern in the blacklist
+  isUrlBlacklisted(url) {
+    if (!url) return false
+    
+    return this.blacklist.some(pattern => {
+      if (pattern instanceof RegExp) {
+        return pattern.test(url)
+      }
+      return url.includes(pattern)
+    })
+  }
+
+  // Add a URL pattern to blacklist
+  addUrlToBlacklist(pattern) {
+    if (!this.blacklist.some(p => 
+        (p instanceof RegExp && pattern instanceof RegExp) ? 
+        p.toString() === pattern.toString() : p === pattern)) {
+      this.blacklist.push(pattern)
+    }
+  }
+
+  // Remove a URL pattern from blacklist
+  removeUrlFromBlacklist(pattern) {
+    this.blacklist = this.blacklist.filter(p => 
+      (p instanceof RegExp && pattern instanceof RegExp) ? 
+      p.toString() !== pattern.toString() : p !== pattern)
+  }
+
+  // Clear all patterns from blacklist
+  clearBlacklist() {
+    this.blacklist = []
+  }
+
   setupAxiosInterceptors(axiosInstance) {
     if (!__DEV__) {
       return
@@ -94,6 +128,14 @@ class NetworkFeature {
       return
     }
 
+    const url = `${response.config.baseURL || ''}${response.config.url}`
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(url)) {
+      this.pendingAxiosRequests.delete(trackId)
+      return
+    }
+
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
     }
@@ -105,7 +147,7 @@ class NetworkFeature {
       timestamp: pendingRequest.timestamp,
       duration: Math.round(duration),
       request: {
-        url: `${response.config.baseURL || ''}${response.config.url}`,
+        url: url,
         method: response.config.method?.toUpperCase() || 'GET',
         headers: response.config.headers,
         body: response.config.data || response.config.params,
@@ -148,6 +190,14 @@ class NetworkFeature {
     const startTime = pendingRequest
       ? pendingRequest.startTime
       : Date.now() - 100
+      
+    const url = `${error.config.baseURL || ''}${error.config.url}`
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(url)) {
+      this.pendingAxiosRequests.delete(trackId)
+      return
+    }
 
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
@@ -159,7 +209,7 @@ class NetworkFeature {
       timestamp: pendingRequest ? pendingRequest.timestamp : new Date(),
       duration: Math.round(duration),
       request: {
-        url: `${error.config.baseURL || ''}${error.config.url}`,
+        url: url,
         method: error.config.method?.toUpperCase() || 'GET',
         headers: error.config.headers,
         body: error.config.data || error.config.params,
@@ -206,12 +256,18 @@ class NetworkFeature {
   }
 
   _logFetchResponse(request, options, response, startTime) {
+    const requestUrl = typeof request === 'string' ? request : request.url
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(requestUrl)) {
+      return
+    }
+    
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
     }
 
     const duration = Date.now() - startTime
-    const requestUrl = typeof request === 'string' ? request : request.url
 
     const commonData = {
       timestamp: new Date(),
@@ -276,6 +332,13 @@ class NetworkFeature {
   }
 
   _logFetchError(request, options, error, startTime) {
+    const requestUrl = typeof request === 'string' ? request : request.url
+    
+    // Skip logging if URL is blacklisted
+    if (this.isUrlBlacklisted(requestUrl)) {
+      return
+    }
+    
     if (this.logs.length >= NetworkFeature.MAX_LOGS) {
       this.logs.shift()
     }
@@ -286,7 +349,7 @@ class NetworkFeature {
       timestamp: new Date(),
       duration: Math.round(duration),
       request: {
-        url: typeof request === 'string' ? request : request.url,
+        url: requestUrl,
         method: options.method || 'GET',
         headers: options.headers || {},
         body: options.body,
@@ -326,5 +389,10 @@ export const createNetworkFeature = () => {
     cleanup: () => feature.cleanup(),
     setupAxiosInterceptors: (axiosInstance) =>
       feature.setupAxiosInterceptors(axiosInstance),
+    // Expose blacklist management methods
+    addUrlToBlacklist: (pattern) => feature.addUrlToBlacklist(pattern),
+    removeUrlFromBlacklist: (pattern) => feature.removeUrlFromBlacklist(pattern),
+    clearBlacklist: () => feature.clearBlacklist(),
+    getBlacklist: () => feature.blacklist,
   }
 }

package/lib/views/HttpLogDetails.js

@@ -1,8 +1,28 @@
 import React, { useState, useCallback } from 'react'
 import { View, Text, StyleSheet, Clipboard, Dimensions } from 'react-native'
 import { ScrollView, Pressable } from 'react-native'
-
+import JSONTree from 'react-native-json-tree'
 const { width: SCREEN_WIDTH } = Dimensions.get('window')
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
 
 const CopyButton = ({ text, style }) => {
   const [copied, setCopied] = useState(false)
@@ -54,8 +74,6 @@ const LongTextContent = ({ text }) => {
 }
 
 const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
-  const [expanded, setExpanded] = useState(level < maxExpandLevel)
-
   if (value === null) {
     return <Text style={styles.jsonNull}>null</Text>
   }
@@ -75,9 +93,7 @@ const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
   if (typeof value === 'string') {
     if (value.length > 150) {
       return (
-        <CollapsibleSection
-          title={`String (${value.length} chars)`}
-          initiallyExpanded={false}>
+        <CollapsibleSection title={`String (${value.length} chars)`} initiallyExpanded={false}>
           <LongTextContent text={value} />
         </CollapsibleSection>
       )
@@ -90,88 +106,16 @@ const JSONValue = ({ value, path = '', level = 0, maxExpandLevel = 2 }) => {
     )
   }
 
-  if (Array.isArray(value)) {
-    if (value.length === 0) {
-      return <Text style={styles.jsonArray}>[]</Text>
-    }
-
-    return (
-      <View style={styles.jsonContainer}>
-        <Pressable
-          onPress={() => setExpanded(!expanded)}
-          style={styles.jsonToggle}>
-          <Text style={styles.jsonBrackets}>
-            [{!expanded && '...'}
-            {expanded && value.length > 0 && ''}
-          </Text>
-          {!expanded && (
-            <Text style={styles.jsonCollapsed}> Array({value.length}) </Text>
-          )}
-        </Pressable>
-
-        {expanded && (
-          <View style={styles.jsonChildren}>
-            {value.map((item, index) => (
-              <View key={`${path}-${index}`} style={styles.jsonArrayItem}>
-                <Text style={styles.jsonKey}>{index}: </Text>
-                <View style={styles.jsonValue}>
-                  <JSONValue
-                    value={item}
-                    path={`${path}[${index}]`}
-                    level={level + 1}
-                  />
-                </View>
-              </View>
-            ))}
-          </View>
-        )}
-
-        {expanded && <Text style={styles.jsonBrackets}>]</Text>}
-      </View>
-    )
-  }
-
+  // For objects and arrays, use JSONTree for improved large data handling
   if (typeof value === 'object') {
-    const keys = Object.keys(value)
-
-    if (keys.length === 0) {
-      return <Text style={styles.jsonObject}>{'{}'}</Text>
-    }
-
     return (
-      <View style={styles.jsonContainer}>
-        <Pressable
-          onPress={() => setExpanded(!expanded)}
-          style={styles.jsonToggle}>
-          <Text style={styles.jsonBrackets}>
-            {'{'}
-            {!expanded && '...'}
-            {expanded && keys.length > 0 && ''}
-          </Text>
-          {!expanded && (
-            <Text style={styles.jsonCollapsed}> Object({keys.length}) </Text>
-          )}
-        </Pressable>
-
-        {expanded && (
-          <View style={styles.jsonChildren}>
-            {keys.map((key) => (
-              <View key={`${path}-${key}`} style={styles.jsonProperty}>
-                <Text style={styles.jsonKey}>{key}: </Text>
-                <View style={styles.jsonValue}>
-                  <JSONValue
-                    value={value[key]}
-                    path={`${path}.${key}`}
-                    level={level + 1}
-                  />
-                </View>
-              </View>
-            ))}
-          </View>
-        )}
-
-        {expanded && <Text style={styles.jsonBrackets}>{'}'}</Text>}
-      </View>
+      <JSONTree 
+         data={value} 
+         theme={theme} 
+         invertTheme={true} 
+         hideRoot={true}
+         shouldExpandNode={(keyPath, nodeData, currentLevel) => currentLevel < maxExpandLevel}
+      />
     )
   }
 
@@ -387,7 +331,7 @@ const HttpLogDetails = ({ log }) => {
                   nestedScrollEnabled={true}
                   bounces={false}
                   showsVerticalScrollIndicator={true}>
-                  <JSONValue value={responseData} maxExpandLevel={1} />
+                  <JSONValue value={responseData} maxExpandLevel={2} />
                 </ScrollView>
               </View>
             </View>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",
@@ -23,7 +23,8 @@
   "author": "zcj",
   "license": "MIT",
   "dependencies": {
-    "react-native-root-siblings": "^4.0.0"
+    "react-native-root-siblings": "^4.0.0",
+    "react-native-json-tree": "^1.5.0"
   },
   "peerDependencies": {
     "react": "*",