react-native-inapp-inspector 2.0.0 → 2.0.1

package/dist/commonjs/helpers/searchQueryParser.js

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matchNetworkLogQuery = matchNetworkLogQuery;
+/**
+ * Parses query strings like `method:POST is:error slow:>1s status:200 auth`
+ * and checks whether a given NetworkLog matches all tokens.
+ */
+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/commonjs/helpers/settingsStore.js

@@ -111,19 +111,19 @@ function getCustomStorage() {
 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,
@@ -131,9 +131,9 @@ 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,
@@ -141,9 +141,9 @@ 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/commonjs/index.js

@@ -139,7 +139,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     // ─── Crash state ───────────────────────────────────────────────────────────
     const [crashRecords, setCrashRecords] = (0, react_1.useState)(() => (0, crashHandler_1.getCrashRecords)());
     const [selectedCrash, setSelectedCrash] = (0, react_1.useState)(null);
-    const [maxCrashLogs, setMaxCrashLogs] = (0, react_1.useState)(100);
+    const [maxCrashLogs, setMaxCrashLogs] = (0, react_1.useState)(50);
     (0, react_1.useEffect)(() => {
         (0, crashHandler_1.setMaxCrashLogsLimit)(maxCrashLogs);
     }, [maxCrashLogs]);
@@ -171,7 +171,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             setLastReadCrashesCount(crashRecords.length);
         }
     }, [activeTab, crashRecords.length]);
-    const [maxConsoleLogs, setMaxConsoleLogs] = (0, react_1.useState)(200);
+    const [maxConsoleLogs, setMaxConsoleLogs] = (0, react_1.useState)(100);
     const [showConsoleLevels, setShowConsoleLevels] = (0, react_1.useState)({
         info: true,
         warn: false,
@@ -216,7 +216,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         crash: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = (0, react_1.useState)(100);
-    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = (0, react_1.useState)(250);
+    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = (0, react_1.useState)(75);
     const [isAutoRamLimitEnabled, setIsAutoRamLimitEnabled] = (0, react_1.useState)(true);
     const [deviceFreeRamMb, setDeviceFreeRamMb] = (0, react_1.useState)(1800);
     const [reduxAutoRefresh, setReduxAutoRefreshState] = (0, react_1.useState)(true);
@@ -1046,23 +1046,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 = (0, helpers_1.matchNetworkLogQuery)(log, search, routePath);
                 if (!isMatch)
                     return false;
             }
@@ -1366,8 +1353,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 = (0, react_1.useMemo)(() => {
         let result = visibleConsoleLogs;
         // Filters check

package/dist/commonjs/styles/index.js

@@ -43,10 +43,10 @@ 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,
@@ -70,7 +70,7 @@ const getRawStyles = (colors) => ({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'flex-end',
-        gap: 6,
+        gap: 5,
     },
     headerTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold,
@@ -172,7 +172,7 @@ const getRawStyles = (colors) => ({
         fontSize: 12,
         letterSpacing: 0.2,
     },
-    listContent: { paddingBottom: 12 },
+    listContent: { paddingBottom: react_native_1.Platform.OS === 'ios' ? 44 : 32 },
     // #2 — scroll-to-top button, always shown at the bottom right.
     scrollTopBtn: {
         position: 'absolute',
@@ -193,9 +193,9 @@ 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',
@@ -414,12 +414,12 @@ 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,
@@ -441,18 +441,18 @@ 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_1.AppFonts.interBold,
-        fontSize: 13.5,
+        fontSize: 13,
         fontWeight: '700',
         color: colors.primaryBlack,
         textTransform: 'capitalize',
@@ -514,23 +514,23 @@ 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_1.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,
@@ -544,14 +544,14 @@ 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,
@@ -559,19 +559,19 @@ 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,
@@ -611,10 +611,10 @@ 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',

package/dist/esm/components/ConsoleLogCard.js

@@ -4,8 +4,8 @@ import { Pressable, StyleSheet, Text, View, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { formatTime, getJsonContent, getJsonPreviewText, parseStackLine, openInVSCode, } from '../helpers';
-import HighlightText from './HighlightText';
 import CopyButton from './CopyButton';
+import LogSyntaxHighlighter from './LogSyntaxHighlighter';
 import { ChevronIcon, ExternalLinkIcon, FlaskIcon, ZapIcon, GlobeIcon, DiceIcon, AtomIcon, BarChartIcon, KeyIcon, SmartphoneIcon, AlertTriangleIcon, BugIcon, TagIcon, } from './NetworkIcons';
 import { useInspector } from './Inspector/InspectorContext';
 const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle, numberOfLines) => {
@@ -73,10 +73,10 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
               </View>);
             })}
         </View>
-        <HighlightText text={remainingText} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>
+        <LogSyntaxHighlighter text={remainingText} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>
       </View>);
     }
-    return (<HighlightText text={message} search={searchStr} style={textStyle} highlightStyle={highlightStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
+    return (<LogSyntaxHighlighter text={message} search={searchStr} style={textStyle} numberOfLines={numberOfLines} detectLinks={true}/>);
 };
 export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchStr = '', }) {
     const { setSelectedLog } = useInspector();
@@ -234,10 +234,10 @@ export const ConsoleLogCard = React.memo(function ConsoleLogCard({ item, searchS
           {jsonContent ? (<>
               {jsonContent.header ? (getLogMessageWithBadges(jsonContent.header, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, 2)) : null}
               {jsonPreview && (<View style={styles.jsonPreviewContainer}>
-                  <HighlightText text={jsonPreview.text} search={searchStr} style={[
+                  <LogSyntaxHighlighter text={jsonPreview.text} search={searchStr} style={[
                     styles.jsonPreviewText,
                     { color: AppColors.primaryBlack },
-                ]} highlightStyle={styles.highlight} detectLinks={false} numberOfLines={5}/>
+                ]} detectLinks={false} numberOfLines={5}/>
                 </View>)}
             </>) : (getLogMessageWithBadges(item.message, searchStr, [styles.messageText, { color: AppColors.primaryBlack }], styles.highlight, 3))}
         </View>

package/dist/esm/components/EndOfListFooter.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { Platform, StyleSheet, Text, View } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { CheckIcon } from './NetworkIcons';
@@ -27,7 +27,7 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
         paddingHorizontal: 16,
         paddingTop: 16,
-        paddingBottom: 28,
+        paddingBottom: Platform.OS === 'ios' ? 44 : 32,
         gap: 8,
     },
     dividerLine: {