react-native-inapp-inspector 2.3.14 → 2.3.15

package/dist/esm/helpers/searchQueryParser.js

@@ -1,311 +1,57 @@
-export function matchNetworkLogQuery(log, searchQuery, routePath, options) {
+export function matchNetworkLogQuery(log, searchQuery, routePath, _options) {
     if (!searchQuery || searchQuery.trim().length === 0)
         return true;
-    const rawTokens = searchQuery.trim().match(/(?:[^\s,"']+|"[^"]*"|'[^']*')+/g) || [];
+    const rawTokens = searchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean);
     if (rawTokens.length === 0)
         return true;
-    const isCaseSensitive = Boolean(options?.isCaseSensitive);
-    const isRegex = Boolean(options?.isRegex);
-    const scope = options?.scope || 'all';
-    const methodRaw = log.method || '';
-    const urlRaw = log.url || '';
+    const methodRaw = (log.method || '').toLowerCase();
+    const urlRaw = (log.url || '').toLowerCase();
+    const statusStr = log.status != null ? String(log.status).toLowerCase() : 'pending';
     const statusNum = typeof log.status === 'number'
         ? log.status
         : log.status != null
             ? parseInt(String(log.status), 10)
             : null;
-    const statusStr = log.status != null ? String(log.status) : 'pending';
-    const durationNum = log.duration || 0;
-    const clientRaw = log.client || '';
-    const callerRaw = log.caller || '';
+    const clientRaw = (log.client || '').toLowerCase();
+    const callerRaw = (log.caller || '').toLowerCase();
+    const pathRaw = (routePath || log?.routeInfo?.path || '').toLowerCase();
     const reqRaw = typeof log.request === 'string'
-        ? log.request
+        ? log.request.toLowerCase()
         : log.request != null
-            ? JSON.stringify(log.request)
+            ? JSON.stringify(log.request).toLowerCase()
             : '';
     const resRaw = typeof log.response === 'string'
-        ? log.response
+        ? log.response.toLowerCase()
         : log.response != null
-            ? JSON.stringify(log.response)
+            ? JSON.stringify(log.response).toLowerCase()
             : '';
     const reqHeadersRaw = log.requestHeaders
-        ? JSON.stringify(log.requestHeaders)
+        ? JSON.stringify(log.requestHeaders).toLowerCase()
         : '';
     const resHeadersRaw = log.responseHeaders
-        ? JSON.stringify(log.responseHeaders)
+        ? JSON.stringify(log.responseHeaders).toLowerCase()
         : '';
-    const pathRaw = routePath || log?.routeInfo?.path || '';
-    const getScopedCorpus = (caseSens) => {
-        let parts = [];
-        if (scope === 'url') {
-            parts = [methodRaw, urlRaw, pathRaw, callerRaw];
-        }
-        else if (scope === 'reqBody') {
-            parts = [reqRaw];
-        }
-        else if (scope === 'resBody') {
-            parts = [resRaw];
-        }
-        else if (scope === 'headers') {
-            parts = [reqHeadersRaw, resHeadersRaw];
-        }
-        else {
-            parts = [
-                methodRaw,
-                urlRaw,
-                statusStr,
-                pathRaw,
-                callerRaw,
-                clientRaw,
-                reqRaw,
-                resRaw,
-                reqHeadersRaw,
-                resHeadersRaw,
-            ];
-        }
-        const combined = parts.join(' ');
-        return caseSens ? combined : combined.toLowerCase();
-    };
-    const targetCorpus = getScopedCorpus(isCaseSensitive);
-    const methodStr = methodRaw.toLowerCase();
-    const urlStr = urlRaw.toLowerCase();
-    const clientStr = clientRaw.toLowerCase();
-    const callerStr = callerRaw.toLowerCase();
-    const reqStr = reqRaw.toLowerCase();
-    const resStr = resRaw.toLowerCase();
-    const reqHeadersStr = reqHeadersRaw.toLowerCase();
-    const resHeadersStr = resHeadersRaw.toLowerCase();
-    const pathStr = pathRaw.toLowerCase();
-    for (const rawToken of rawTokens) {
-        const token = rawToken.replace(/^["']|["']$/g, '').trim();
-        if (!token)
-            continue;
-        const lowerToken = token.toLowerCase();
-        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;
-        }
-        if (lowerToken.startsWith('status:') || lowerToken.startsWith('s:')) {
-            const val = lowerToken.replace(/^(status:|s:)/, '').trim();
-            if (val === 'pending' || val === 'loading') {
-                if (log.status != null)
-                    return false;
-            }
-            else if (val.startsWith('>=')) {
-                const threshold = parseInt(val.slice(2), 10);
-                if (isNaN(threshold) || statusNum === null || statusNum < threshold)
-                    return false;
-            }
-            else if (val.startsWith('>')) {
-                const threshold = parseInt(val.slice(1), 10);
-                if (isNaN(threshold) || statusNum === null || statusNum <= threshold)
-                    return false;
-            }
-            else if (val.startsWith('<=')) {
-                const threshold = parseInt(val.slice(2), 10);
-                if (isNaN(threshold) || statusNum === null || statusNum > threshold)
-                    return false;
-            }
-            else if (val.startsWith('<')) {
-                const threshold = parseInt(val.slice(1), 10);
-                if (isNaN(threshold) || statusNum === null || 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;
-        }
-        if (lowerToken.startsWith('is:')) {
-            const flag = lowerToken.slice(3).trim();
-            if (flag === 'error' ||
-                flag === 'failed' ||
-                flag === 'err' ||
-                flag === 'fail') {
-                const isErr = log.status === 0 || (statusNum !== null && statusNum >= 400);
-                if (!isErr)
-                    return false;
-            }
-            else if (flag === 'success' || flag === 'ok' || flag === '2xx') {
-                const isSuccess = statusNum !== null && statusNum >= 200 && statusNum < 300;
-                if (!isSuccess)
-                    return false;
-            }
-            else if (flag === 'pending' || flag === 'loading') {
-                if (log.status != null)
-                    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;
-            }
-            else if (flag === 'image') {
-                const isImg = resHeadersStr.includes('image/') ||
-                    /\.(png|jpe?g|gif|webp|svg)/i.test(urlStr);
-                if (!isImg)
-                    return false;
-            }
-            continue;
-        }
-        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;
-        }
-        if (lowerToken.startsWith('client:') || lowerToken.startsWith('c:')) {
-            const targetClient = lowerToken.replace(/^(client:|c:)/, '').trim();
-            if (!clientStr.includes(targetClient))
-                return false;
-            continue;
-        }
-        if (lowerToken.startsWith('domain:') || lowerToken.startsWith('d:')) {
-            const targetDomain = lowerToken.replace(/^(domain:|d:)/, '').trim();
-            if (!urlStr.includes(targetDomain))
-                return false;
-            continue;
-        }
-        if (lowerToken.startsWith('path:') ||
-            lowerToken.startsWith('p:') ||
-            lowerToken.startsWith('page:')) {
-            const targetPath = lowerToken
-                .replace(/^(path:|p:|page:)/, '')
-                .trim();
-            if (!urlStr.includes(targetPath) &&
-                !pathStr.includes(targetPath) &&
-                !callerStr.includes(targetPath)) {
-                return false;
-            }
-            continue;
-        }
-        if (lowerToken.startsWith('req:') || lowerToken.startsWith('body:')) {
-            const target = lowerToken.replace(/^(req:|body:)/, '').trim();
-            if (!reqStr.includes(target))
-                return false;
-            continue;
-        }
-        if (lowerToken.startsWith('res:')) {
-            const target = lowerToken.slice(4).trim();
-            if (!resStr.includes(target))
-                return false;
-            continue;
-        }
-        if (lowerToken.startsWith('header:') || lowerToken.startsWith('h:')) {
-            const target = lowerToken.replace(/^(header:|h:)/, '').trim();
-            if (!reqHeadersStr.includes(target) && !resHeadersStr.includes(target)) {
-                return false;
-            }
-            continue;
-        }
-        if (isRegex) {
-            try {
-                const re = new RegExp(token, isCaseSensitive ? '' : 'i');
-                if (!re.test(targetCorpus))
-                    return false;
-            }
-            catch {
-                const queryTerm = isCaseSensitive ? token : lowerToken;
-                if (!targetCorpus.includes(queryTerm))
-                    return false;
-            }
-        }
-        else {
-            const queryTerm = isCaseSensitive ? token : lowerToken;
-            if (!targetCorpus.includes(queryTerm)) {
-                if (queryTerm === 'error' ||
-                    queryTerm === 'failed' ||
-                    queryTerm === 'fail') {
-                    const isErr = log.status === 0 || (statusNum !== null && statusNum >= 400);
-                    if (isErr)
-                        continue;
-                }
-                return false;
-            }
-        }
-    }
-    return true;
+    const corpus = [
+        methodRaw,
+        urlRaw,
+        statusStr,
+        pathRaw,
+        callerRaw,
+        clientRaw,
+        reqRaw,
+        resRaw,
+        reqHeadersRaw,
+        resHeadersRaw,
+    ].join(' ');
+    return rawTokens.every(token => {
+        if (corpus.includes(token))
+            return true;
+        if (token === 'error' || token === 'failed' || token === 'err' || token === 'fail') {
+            return log.status === 0 || (statusNum !== null && statusNum >= 400);
+        }
+        if (token === 'success' || token === 'ok' || token === '2xx') {
+            return statusNum !== null && statusNum >= 200 && statusNum < 300;
+        }
+        return false;
+    });
 }

package/dist/esm/index.js

@@ -127,7 +127,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
     const [maxConsoleLogs, setMaxConsoleLogs] = useState(100);
     const [showConsoleLevels, setShowConsoleLevels] = useState({
         info: true,
-        warn: false,
+        warn: true,
         error: true,
     });
     const visibleConsoleLogs = useMemo(() => {
@@ -155,7 +155,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         return filtered.slice(0, maxConsoleLogs);
     }, [consoleLogs, showConsoleLevels, maxConsoleLogs]);
     const [logSearch, setLogSearch] = useState('');
-    const [logFilters, setLogFilters] = useState(new Set(['user-log']));
+    const [logFilters, setLogFilters] = useState(new Set(['all']));
     const [settingsPage, setSettingsPage] = useState(null);
     const [settingsActiveSubTab, setSettingsActiveSubTab] = useState('module');
     const [tabVisibility, setTabVisibility] = useState({
@@ -170,8 +170,8 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         storage: false,
         debugging: false,
     });
-    const [maxNetworkLogs, setMaxNetworkLogs] = useState(100);
-    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(75);
+    const [maxNetworkLogs, setMaxNetworkLogs] = useState(250);
+    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(150);
     const [isAutoRamLimitEnabled, setIsAutoRamLimitEnabled] = useState(true);
     const [deviceFreeRamMb, setDeviceFreeRamMb] = useState(1800);
     const [reduxAutoRefresh, setReduxAutoRefreshState] = useState(true);
@@ -1366,27 +1366,18 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
                     log.caller || '',
                     log.type || '',
                     log.sourceMethod || '',
+                    log.stack || '',
                 ].join(' ').toLowerCase();
                 return queryTokens.every(token => {
-                    if (token.startsWith('level:') || token.startsWith('is:') || token.startsWith('type:')) {
-                        const flag = token.replace(/^(level:|is:|type:)/, '').trim();
-                        if (flag === 'error' || flag === 'err')
-                            return log.type === 'error';
-                        if (flag === 'warn' || flag === 'warning')
-                            return log.type === 'warn';
-                        if (flag === 'info')
-                            return log.type === 'info';
-                        if (flag === 'log')
-                            return log.sourceMethod === 'log';
-                        if (flag === 'analytics')
-                            return (log.message || '').toLowerCase().includes('[analytics');
-                    }
                     if (token === 'error' || token === 'err') {
                         return log.type === 'error' || searchTarget.includes(token);
                     }
                     if (token === 'warn' || token === 'warning') {
                         return log.type === 'warn' || searchTarget.includes(token);
                     }
+                    if (token === 'info') {
+                        return log.type === 'info' || searchTarget.includes(token);
+                    }
                     return searchTarget.includes(token);
                 });
             });
@@ -1431,8 +1422,20 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
                     log.caller || '',
                     log.type || '',
                     log.sourceMethod || '',
+                    log.stack || '',
                 ].join(' ').toLowerCase();
-                return queryTokens.every(token => searchTarget.includes(token));
+                return queryTokens.every(token => {
+                    if (token === 'error' || token === 'err') {
+                        return log.type === 'error' || searchTarget.includes(token);
+                    }
+                    if (token === 'warn' || token === 'warning') {
+                        return log.type === 'warn' || searchTarget.includes(token);
+                    }
+                    if (token === 'info') {
+                        return log.type === 'info' || searchTarget.includes(token);
+                    }
+                    return searchTarget.includes(token);
+                });
             });
         }
         const total = visibleConsoleLogs.length;
@@ -1446,14 +1449,15 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         };
     }, [visibleConsoleLogs, logSearch]);
     function closeModal() {
-        animateNextLayout();
         setVisible(false);
-        setSelected(null);
-        setSelectedEvent(null);
-        setSelectedLog(null);
-        setSelectedReduxSlice(null);
-        setSelectedReduxAction(null);
-        setSelectedCrash(null);
+        setTimeout(() => {
+            setSelected(null);
+            setSelectedEvent(null);
+            setSelectedLog(null);
+            setSelectedReduxSlice(null);
+            setSelectedReduxAction(null);
+            setSelectedCrash(null);
+        }, 300);
     }
     function handleClearAll() {
         clearNetworkLogs();
@@ -1463,13 +1467,17 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         setCollapsedSections(new Set());
         setStatusFilters(new Set());
         setMethodFilters(new Set());
+        setSearch('');
         prevLogIdsRef.current = new Set();
         logRouteMapRef.current = new Map();
         clearAnalyticsEvents();
         setAnalyticsEvents([]);
+        setAnalyticsSearch('');
         prevEventIdsRef.current = new Set();
         clearConsoleLogs();
         setConsoleLogs([]);
+        setLogFilters(new Set(['all']));
+        setLogSearch('');
     }
     function handleDelete() {
         if (activeTab === 'logs') {
@@ -1583,7 +1591,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
             return next;
         });
     }, []);
-    const contextValue = {
+    const contextValue = useMemo(() => ({
         visible,
         setVisible,
         closeModal,
@@ -1750,7 +1758,113 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, appIcon, env
         setReduxAutoRefreshState,
         reduxExpandDepth,
         setReduxExpandDepth,
-    };
+    }), [
+        visible,
+        closeModal,
+        isReady,
+        enabled,
+        appIcon,
+        environment,
+        modalHeightPercent,
+        modalAnimationType,
+        hasNavigationContext,
+        setNavState,
+        activeTab,
+        switchActiveTab,
+        tabVisibility,
+        toggleTabVisibility,
+        lastReadApisCount,
+        lastReadLogsCount,
+        selected,
+        selectedEvent,
+        selectedLog,
+        showHeaderInfo,
+        settingsPage,
+        updateAvailable,
+        latestNpmVersion,
+        clearAnim,
+        activePulseAnim,
+        unreadPulseAnim,
+        runClearAllWithAnimation,
+        useNativeFab,
+        fabPan,
+        fabPanResponder,
+        pulseAnim,
+        fabShineAnim,
+        logs,
+        filteredLogs,
+        groupedData,
+        search,
+        searchScope,
+        isRegexSearch,
+        isCaseSensitive,
+        quickFilter,
+        statusFilters,
+        methodFilters,
+        availableMethods,
+        sortOrder,
+        selectedLogs,
+        toggleSelect,
+        minStart,
+        totalRange,
+        newLogIds,
+        toggleSectionFilter,
+        toggleSectionCollapse,
+        handleDelete,
+        isNetworkPaused,
+        detailTitle,
+        detailDisplayUrl,
+        apiDetailActiveTab,
+        detailSearch,
+        reqExpanded,
+        resExpanded,
+        showReqDiff,
+        showResDiff,
+        prevRequestData,
+        prevResponseData,
+        consoleLogs,
+        visibleConsoleLogs,
+        filteredConsoleLogs,
+        logSearch,
+        logFilters,
+        logCounts,
+        logSortOrder,
+        isConsolePaused,
+        analyticsEvents,
+        filteredAnalyticsEvents,
+        analyticsSearch,
+        analyticsFilters,
+        isAnalyticsFilterApplied,
+        resetAnalyticsFilters,
+        newEventIds,
+        isAnalyticsLayoutReady,
+        analyticsHeaderExpanded,
+        isAnalyticsPaused,
+        reduxState,
+        reduxLastActionMap,
+        reduxSearch,
+        selectedReduxSlice,
+        selectedReduxAction,
+        reduxActiveSubTab,
+        crashRecords,
+        selectedCrash,
+        lastReadCrashesCount,
+        maxCrashLogs,
+        settingsActiveSubTab,
+        defaultTab,
+        isDark,
+        showDuplicateLogs,
+        showUpdateToast,
+        showConsoleLevels,
+        storage,
+        maxNetworkLogs,
+        maxConsoleLogs,
+        maxAnalyticsEventsLimit,
+        isAutoRamLimitEnabled,
+        deviceFreeRamMb,
+        reduxAutoRefresh,
+        reduxExpandDepth,
+    ]);
     return (<InspectorContext.Provider value={contextValue}>
       <MainScreen />
     </InspectorContext.Provider>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-inapp-inspector",
-  "version": "2.3.14",
+  "version": "2.3.15",
   "description": "The zero-config, all-in-one in-app debugger for React Native & Expo. Inspect Network (fetch/axios), Console logs, Stack Traces, Redux State, Firebase Analytics, and JS Bundle size directly on device.",
   "repository": {
     "type": "git",

package/src/components/AnimatedEntrance.tsx

@@ -23,16 +23,16 @@ const AnimatedEntrance = React.memo(function AnimatedEntrance({
   }
 
   const progress = useRef(new Animated.Value(0)).current;
+  const initialIndex = useRef(index).current;
 
   useEffect(() => {
-    progress.setValue(0);
     Animated.timing(progress, {
       toValue: 1,
       duration,
-      delay: delay + Math.min(index, 12) * 18,
+      delay: delay + Math.min(initialIndex, 8) * 12,
       useNativeDriver: true,
     }).start();
-  }, [delay, duration, index, progress]);
+  }, []);
 
   return (
     <Animated.View