react-native-inapp-inspector 2.0.0 → 2.0.1

package/dist/esm/helpers/searchQueryParser.js

@@ -0,0 +1,233 @@
+/**
+ * Parses query strings like `method:POST is:error slow:>1s status:200 auth`
+ * and checks whether a given NetworkLog matches all tokens.
+ */
+export function matchNetworkLogQuery(log, searchQuery, routePath) {
+    if (!searchQuery || searchQuery.trim().length === 0)
+        return true;
+    const rawTokens = searchQuery
+        .trim()
+        .match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g) || [];
+    if (rawTokens.length === 0)
+        return true;
+    const methodStr = (log.method || '').toLowerCase();
+    const urlStr = (log.url || '').toLowerCase();
+    const statusNum = typeof log.status === 'number' ? log.status : parseInt(String(log.status || 0), 10);
+    const statusStr = String(log.status ?? '');
+    const durationNum = log.duration || 0;
+    const clientStr = (log.client || '').toLowerCase();
+    const reqStr = typeof log.request === 'string' ? log.request : JSON.stringify(log.request || '');
+    const resStr = typeof log.response === 'string' ? log.response : JSON.stringify(log.response || '');
+    const reqHeadersStr = JSON.stringify(log.requestHeaders || '').toLowerCase();
+    const resHeadersStr = JSON.stringify(log.responseHeaders || '').toLowerCase();
+    const pathStr = routePath ? routePath.toLowerCase() : '';
+    const fullSearchCorpus = [
+        methodStr,
+        urlStr,
+        statusStr,
+        pathStr,
+        clientStr,
+        reqStr.toLowerCase(),
+        resStr.toLowerCase(),
+        reqHeadersStr,
+        resHeadersStr,
+    ].join(' ');
+    for (const rawToken of rawTokens) {
+        const token = rawToken.replace(/^["']|["']$/g, '').trim();
+        if (!token)
+            continue;
+        const lowerToken = token.toLowerCase();
+        // 1. method:<VAL> or m:<VAL>
+        if (lowerToken.startsWith('method:') || lowerToken.startsWith('m:')) {
+            const targetMethod = lowerToken.replace(/^(method:|m:)/, '').trim();
+            if (targetMethod.startsWith('!')) {
+                if (methodStr === targetMethod.slice(1))
+                    return false;
+            }
+            else {
+                if (methodStr !== targetMethod)
+                    return false;
+            }
+            continue;
+        }
+        // 2. status:<VAL> or s:<VAL>
+        if (lowerToken.startsWith('status:') || lowerToken.startsWith('s:')) {
+            const val = lowerToken.replace(/^(status:|s:)/, '').trim();
+            if (val.startsWith('>=')) {
+                const threshold = parseInt(val.slice(2), 10);
+                if (isNaN(threshold) || statusNum < threshold)
+                    return false;
+            }
+            else if (val.startsWith('>')) {
+                const threshold = parseInt(val.slice(1), 10);
+                if (isNaN(threshold) || statusNum <= threshold)
+                    return false;
+            }
+            else if (val.startsWith('<=')) {
+                const threshold = parseInt(val.slice(2), 10);
+                if (isNaN(threshold) || statusNum > threshold)
+                    return false;
+            }
+            else if (val.startsWith('<')) {
+                const threshold = parseInt(val.slice(1), 10);
+                if (isNaN(threshold) || statusNum >= threshold)
+                    return false;
+            }
+            else if (val.endsWith('xx') || val.endsWith('x')) {
+                const prefix = val.replace(/x/g, '');
+                if (!statusStr.startsWith(prefix))
+                    return false;
+            }
+            else {
+                const targetCode = parseInt(val, 10);
+                if (!isNaN(targetCode)) {
+                    if (statusNum !== targetCode)
+                        return false;
+                }
+                else if (!statusStr.includes(val)) {
+                    return false;
+                }
+            }
+            continue;
+        }
+        // 3. is:<FLAG>
+        if (lowerToken.startsWith('is:')) {
+            const flag = lowerToken.slice(3).trim();
+            if (flag === 'error' || flag === 'failed' || flag === 'err' || flag === 'fail') {
+                const isErr = log.status === 0 || log.status == null || statusNum >= 400;
+                if (!isErr)
+                    return false;
+            }
+            else if (flag === 'success' || flag === 'ok' || flag === '2xx') {
+                const isSuccess = statusNum >= 200 && statusNum < 300;
+                if (!isSuccess)
+                    return false;
+            }
+            else if (flag === 'slow') {
+                if (durationNum < 1000)
+                    return false;
+            }
+            else if (flag === 'fast') {
+                if (durationNum >= 200)
+                    return false;
+            }
+            else if (flag === 'graphql' || flag === 'gql') {
+                const isGql = urlStr.includes('graphql') ||
+                    clientStr === 'graphql' ||
+                    clientStr === 'apollo';
+                if (!isGql)
+                    return false;
+            }
+            else if (flag === 'https') {
+                if (!urlStr.startsWith('https'))
+                    return false;
+            }
+            else if (flag === 'http') {
+                if (urlStr.startsWith('https') || !urlStr.startsWith('http'))
+                    return false;
+            }
+            else if (flag === 'json') {
+                const isJson = reqHeadersStr.includes('application/json') ||
+                    resHeadersStr.includes('application/json') ||
+                    urlStr.includes('.json');
+                if (!isJson)
+                    return false;
+            }
+            continue;
+        }
+        // 4. slow:<DURATION> or dur:<DURATION> or duration:<DURATION>
+        if (lowerToken.startsWith('slow:') ||
+            lowerToken.startsWith('dur:') ||
+            lowerToken.startsWith('duration:')) {
+            const val = lowerToken.replace(/^(slow:|dur:|duration:)/, '').trim();
+            let thresholdMs = 0;
+            let isGreater = true;
+            let cleanVal = val;
+            if (val.startsWith('>=')) {
+                isGreater = true;
+                cleanVal = val.slice(2);
+            }
+            else if (val.startsWith('>')) {
+                isGreater = true;
+                cleanVal = val.slice(1);
+            }
+            else if (val.startsWith('<=')) {
+                isGreater = false;
+                cleanVal = val.slice(2);
+            }
+            else if (val.startsWith('<')) {
+                isGreater = false;
+                cleanVal = val.slice(1);
+            }
+            if (cleanVal.endsWith('s') && !cleanVal.endsWith('ms')) {
+                thresholdMs = parseFloat(cleanVal.slice(0, -1)) * 1000;
+            }
+            else if (cleanVal.endsWith('ms')) {
+                thresholdMs = parseFloat(cleanVal.slice(0, -2));
+            }
+            else {
+                thresholdMs = parseFloat(cleanVal);
+            }
+            if (!isNaN(thresholdMs)) {
+                if (isGreater) {
+                    if (durationNum < thresholdMs)
+                        return false;
+                }
+                else {
+                    if (durationNum > thresholdMs)
+                        return false;
+                }
+            }
+            continue;
+        }
+        // 5. client:<CLIENT> or c:<CLIENT>
+        if (lowerToken.startsWith('client:') || lowerToken.startsWith('c:')) {
+            const targetClient = lowerToken.replace(/^(client:|c:)/, '').trim();
+            if (!clientStr.includes(targetClient))
+                return false;
+            continue;
+        }
+        // 6. domain:<DOMAIN> or d:<DOMAIN>
+        if (lowerToken.startsWith('domain:') || lowerToken.startsWith('d:')) {
+            const targetDomain = lowerToken.replace(/^(domain:|d:)/, '').trim();
+            if (!urlStr.includes(targetDomain))
+                return false;
+            continue;
+        }
+        // 7. path:<PATH> or p:<PATH>
+        if (lowerToken.startsWith('path:') || lowerToken.startsWith('p:')) {
+            const targetPath = lowerToken.replace(/^(path:|p:)/, '').trim();
+            if (!urlStr.includes(targetPath) && !pathStr.includes(targetPath)) {
+                return false;
+            }
+            continue;
+        }
+        // 8. req:<TERM> or body:<TERM>
+        if (lowerToken.startsWith('req:') || lowerToken.startsWith('body:')) {
+            const target = lowerToken.replace(/^(req:|body:)/, '').trim();
+            if (!reqStr.toLowerCase().includes(target))
+                return false;
+            continue;
+        }
+        // 9. res:<TERM>
+        if (lowerToken.startsWith('res:')) {
+            const target = lowerToken.slice(4).trim();
+            if (!resStr.toLowerCase().includes(target))
+                return false;
+            continue;
+        }
+        // 10. header:<TERM> or h:<TERM>
+        if (lowerToken.startsWith('header:') || lowerToken.startsWith('h:')) {
+            const target = lowerToken.replace(/^(header:|h:)/, '').trim();
+            if (!reqHeadersStr.includes(target) && !resHeadersStr.includes(target)) {
+                return false;
+            }
+            continue;
+        }
+        // 11. Generic Plain Substring Match
+        if (!fullSearchCorpus.includes(lowerToken)) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/esm/helpers/settingsStore.js

@@ -101,19 +101,19 @@ export function getCustomStorage() {
 export function calculateRamBasedLimits(freeRamMb) {
     if (freeRamMb >= 3000) {
         return {
-            maxNetworkLogs: 1000,
-            maxConsoleLogs: 1500,
-            maxAnalyticsEvents: 500,
-            maxCrashRecords: 100,
+            maxNetworkLogs: 100,
+            maxConsoleLogs: 100,
+            maxAnalyticsEvents: 75,
+            maxCrashRecords: 50,
             profileName: 'High-End',
             freeRamMb,
         };
     }
     else if (freeRamMb >= 1500) {
         return {
-            maxNetworkLogs: 500,
-            maxConsoleLogs: 750,
-            maxAnalyticsEvents: 250,
+            maxNetworkLogs: 100,
+            maxConsoleLogs: 100,
+            maxAnalyticsEvents: 75,
             maxCrashRecords: 50,
             profileName: 'Standard',
             freeRamMb,
@@ -121,9 +121,9 @@ export function calculateRamBasedLimits(freeRamMb) {
     }
     else if (freeRamMb >= 600) {
         return {
-            maxNetworkLogs: 200,
-            maxConsoleLogs: 300,
-            maxAnalyticsEvents: 100,
+            maxNetworkLogs: 100,
+            maxConsoleLogs: 100,
+            maxAnalyticsEvents: 50,
             maxCrashRecords: 25,
             profileName: 'Compact',
             freeRamMb,
@@ -131,9 +131,9 @@ export function calculateRamBasedLimits(freeRamMb) {
     }
     else {
         return {
-            maxNetworkLogs: 100,
-            maxConsoleLogs: 150,
-            maxAnalyticsEvents: 50,
+            maxNetworkLogs: 50,
+            maxConsoleLogs: 50,
+            maxAnalyticsEvents: 25,
             maxCrashRecords: 15,
             profileName: 'Ultra-Light',
             freeRamMb,

package/dist/esm/index.js

@@ -8,7 +8,7 @@ import ErrorBoundary from './components/ErrorBoundary';
 import MainScreen from './components/Inspector/MainScreen';
 import { InspectorContext, animateNextLayout, } from './components/Inspector/InspectorContext';
 // Helpers
-import { formatDisplayUrl, getNavigationInfo, deduplicateLogs, getDomainColor, getEventCategory, } from './helpers';
+import { formatDisplayUrl, getNavigationInfo, deduplicateLogs, getDomainColor, getEventCategory, matchNetworkLogQuery, } from './helpers';
 // #5 — settings persistence
 import { loadSettings, saveSettings, setCustomStorage, clearPersistedSettings, calculateRamBasedLimits, } from './helpers/settingsStore';
 import { getNativeSystemMetrics, pushNativeLogRecord, fetchNativeCachedPage, } from './native/NativeInspector';
@@ -99,7 +99,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     // ─── Crash state ───────────────────────────────────────────────────────────
     const [crashRecords, setCrashRecords] = useState(() => getCrashRecords());
     const [selectedCrash, setSelectedCrash] = useState(null);
-    const [maxCrashLogs, setMaxCrashLogs] = useState(100);
+    const [maxCrashLogs, setMaxCrashLogs] = useState(50);
     useEffect(() => {
         setMaxCrashLogsLimit(maxCrashLogs);
     }, [maxCrashLogs]);
@@ -131,7 +131,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             setLastReadCrashesCount(crashRecords.length);
         }
     }, [activeTab, crashRecords.length]);
-    const [maxConsoleLogs, setMaxConsoleLogs] = useState(200);
+    const [maxConsoleLogs, setMaxConsoleLogs] = useState(100);
     const [showConsoleLevels, setShowConsoleLevels] = useState({
         info: true,
         warn: false,
@@ -176,7 +176,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         crash: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = useState(100);
-    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(250);
+    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(75);
     const [isAutoRamLimitEnabled, setIsAutoRamLimitEnabled] = useState(true);
     const [deviceFreeRamMb, setDeviceFreeRamMb] = useState(1800);
     const [reduxAutoRefresh, setReduxAutoRefreshState] = useState(true);
@@ -1006,23 +1006,10 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 if (!matchedMethod)
                     return false;
             }
-            // Comprehensive Search Bar Check
+            // Advanced Search Query Engine Check (Supports method:POST, is:error, slow:>1s, status:200, headers, body, etc.)
             if (search && search.trim().length > 0) {
-                const queryTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
                 const routePath = logRouteMapRef.current.get(log.id)?.path || '';
-                const reqStr = typeof log.request === 'string' ? log.request : JSON.stringify(log.request || '');
-                const resStr = typeof log.response === 'string' ? log.response : JSON.stringify(log.response || '');
-                const searchTarget = [
-                    log.method || '',
-                    log.url || '',
-                    String(log.status ?? ''),
-                    routePath,
-                    reqStr,
-                    resStr,
-                    JSON.stringify(log.requestHeaders || ''),
-                    JSON.stringify(log.responseHeaders || ''),
-                ].join(' ').toLowerCase();
-                const isMatch = queryTokens.every(token => searchTarget.includes(token));
+                const isMatch = matchNetworkLogQuery(log, search, routePath);
                 if (!isMatch)
                     return false;
             }
@@ -1326,8 +1313,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         else if (analyticsFilters.sortBy === 'count_desc') {
             result = [...result].sort((a, b) => (b.count || 1) - (a.count || 1));
         }
-        return result;
-    }, [analyticsEvents, analyticsSearch, analyticsFilters]);
+        return result.slice(0, maxAnalyticsEventsLimit);
+    }, [analyticsEvents, analyticsSearch, analyticsFilters, maxAnalyticsEventsLimit]);
     const filteredConsoleLogs = useMemo(() => {
         let result = visibleConsoleLogs;
         // Filters check

package/dist/esm/styles/index.js

@@ -7,10 +7,10 @@ export const getRawStyles = (colors) => ({
     header: {
         flexDirection: 'row',
         alignItems: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 10,
+        paddingHorizontal: 10,
+        paddingVertical: 8,
         zIndex: 10,
-        minHeight: 56,
+        minHeight: 52,
         shadowColor: colors.black,
         shadowOffset: { width: 0, height: 2 },
         shadowOpacity: 0.08,
@@ -34,7 +34,7 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'flex-end',
-        gap: 6,
+        gap: 5,
     },
     headerTitle: {
         fontFamily: AppFonts.interBold,
@@ -136,7 +136,7 @@ export const getRawStyles = (colors) => ({
         fontSize: 12,
         letterSpacing: 0.2,
     },
-    listContent: { paddingBottom: 12 },
+    listContent: { paddingBottom: Platform.OS === 'ios' ? 44 : 32 },
     // #2 — scroll-to-top button, always shown at the bottom right.
     scrollTopBtn: {
         position: 'absolute',
@@ -157,9 +157,9 @@ export const getRawStyles = (colors) => ({
     },
     detailScroll: { flex: 1 },
     closeButtonSquare: {
-        width: 32,
-        height: 32,
-        borderRadius: 8,
+        width: 30,
+        height: 30,
+        borderRadius: 7,
         backgroundColor: `${colors.white}2B`,
         alignItems: 'center',
         justifyContent: 'center',
@@ -378,12 +378,12 @@ export const getRawStyles = (colors) => ({
     },
     clearBtn: { padding: 4 },
     domainHeaderCard: {
-        marginHorizontal: 12,
-        marginTop: 12,
+        marginHorizontal: 8,
+        marginTop: 10,
         marginBottom: 4,
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        borderRadius: 10,
+        paddingHorizontal: 8,
+        paddingVertical: 7,
+        borderRadius: 9,
         backgroundColor: colors.grayBackground,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
@@ -405,18 +405,18 @@ export const getRawStyles = (colors) => ({
         flex: 1,
         minWidth: 0,
         marginRight: 6,
-        gap: 8,
+        gap: 6,
     },
     domainIconWrap: {
-        width: 26,
-        height: 26,
-        borderRadius: 6,
+        width: 22,
+        height: 22,
+        borderRadius: 5,
         alignItems: 'center',
         justifyContent: 'center',
     },
     domainTitleText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 13.5,
+        fontSize: 13,
         fontWeight: '700',
         color: colors.primaryBlack,
         textTransform: 'capitalize',
@@ -478,23 +478,23 @@ export const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         gap: 3,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 6,
+        paddingHorizontal: 5,
+        paddingVertical: 2.5,
+        borderRadius: 5,
         borderWidth: 1,
         borderColor: colors.grayBorderSecondary,
         backgroundColor: colors.primaryLight,
     },
     domainStatText: {
         fontFamily: AppFonts.interBold,
-        fontSize: 10,
+        fontSize: 9.5,
     },
     treeNodeRow: {
         flexDirection: 'row',
         alignItems: 'stretch',
-        marginHorizontal: 12,
-        paddingRight: 8,
-        paddingLeft: 4,
+        marginHorizontal: 8,
+        paddingRight: 4,
+        paddingLeft: 0,
         backgroundColor: colors.grayBackground,
         borderLeftWidth: 1,
         borderRightWidth: 1,
@@ -508,14 +508,14 @@ export const getRawStyles = (colors) => ({
         paddingBottom: 6,
     },
     treeLines: {
-        width: 28,
+        width: 14,
         position: 'relative',
     },
     modernTreeLine: {
         position: 'absolute',
-        left: 14,
+        left: 7,
         top: 0,
-        width: 14,
+        width: 7,
         height: '100%',
         borderLeftWidth: 1.5,
         opacity: 0.5,
@@ -523,19 +523,19 @@ export const getRawStyles = (colors) => ({
     modernTreeLineLast: {
         height: '50%',
         borderBottomWidth: 1.5,
-        borderBottomLeftRadius: 10,
+        borderBottomLeftRadius: 8,
     },
     modernTreeBranch: {
         position: 'absolute',
-        left: 14,
+        left: 7,
         top: '50%',
-        width: 14,
+        width: 7,
         borderTopWidth: 1.5,
         opacity: 0.5,
     },
     treeCardWrapper: {
         flex: 1,
-        paddingVertical: 3.5,
+        paddingVertical: 3,
     },
     card: {
         marginHorizontal: 0,
@@ -575,10 +575,10 @@ export const getRawStyles = (colors) => ({
         gap: 5,
     },
     smallCheckbox: {
-        width: 13,
-        height: 13,
+        width: 15,
+        height: 15,
         borderRadius: 4,
-        borderWidth: 1.5,
+        borderWidth: 1.8,
         borderColor: colors.grayTextWeak,
         alignItems: 'center',
         justifyContent: 'center',