react-native-inapp-inspector 2.2.9 → 2.3.0

package/src/helpers/searchQueryParser.ts

@@ -18,8 +18,9 @@ export function matchNetworkLogQuery(
 ): boolean {
   if (!searchQuery || searchQuery.trim().length === 0) return true;
 
+  // Split tokens by spaces or commas while respecting quotes
   const rawTokens =
-    searchQuery.trim().match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g) || [];
+    searchQuery.trim().match(/(?:[^\s,"']+|"[^"]*"|'[^']*')+/g) || [];
 
   if (rawTokens.length === 0) return true;
 
@@ -32,27 +33,38 @@ export function matchNetworkLogQuery(
   const statusNum =
     typeof log.status === 'number'
       ? log.status
-      : parseInt(String(log.status || 0), 10);
-  const statusStr = String(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 reqRaw =
     typeof log.request === 'string'
       ? log.request
-      : JSON.stringify(log.request || '');
+      : log.request != null
+      ? JSON.stringify(log.request)
+      : '';
   const resRaw =
     typeof log.response === 'string'
       ? log.response
-      : JSON.stringify(log.response || '');
-  const reqHeadersRaw = JSON.stringify(log.requestHeaders || '');
-  const resHeadersRaw = JSON.stringify(log.responseHeaders || '');
-  const pathRaw = routePath || '';
+      : log.response != null
+      ? JSON.stringify(log.response)
+      : '';
+  const reqHeadersRaw = log.requestHeaders
+    ? JSON.stringify(log.requestHeaders)
+    : '';
+  const resHeadersRaw = log.responseHeaders
+    ? JSON.stringify(log.responseHeaders)
+    : '';
+  const pathRaw = routePath || (log as any)?.routeInfo?.path || '';
 
   // Construct search corpus based on active scope
   const getScopedCorpus = (caseSens: boolean): string => {
     let parts: string[] = [];
     if (scope === 'url') {
-      parts = [methodRaw, urlRaw, pathRaw];
+      parts = [methodRaw, urlRaw, pathRaw, callerRaw];
     } else if (scope === 'reqBody') {
       parts = [reqRaw];
     } else if (scope === 'resBody') {
@@ -65,6 +77,7 @@ export function matchNetworkLogQuery(
         urlRaw,
         statusStr,
         pathRaw,
+        callerRaw,
         clientRaw,
         reqRaw,
         resRaw,
@@ -81,6 +94,7 @@ export function matchNetworkLogQuery(
   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();
@@ -107,18 +121,20 @@ export function matchNetworkLogQuery(
     // 2. status:<VAL> or s:<VAL>
     if (lowerToken.startsWith('status:') || lowerToken.startsWith('s:')) {
       const val = lowerToken.replace(/^(status:|s:)/, '').trim();
-      if (val.startsWith('>=')) {
+      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 < threshold) return false;
+        if (isNaN(threshold) || statusNum === null || statusNum < threshold) return false;
       } else if (val.startsWith('>')) {
         const threshold = parseInt(val.slice(1), 10);
-        if (isNaN(threshold) || statusNum <= threshold) return false;
+        if (isNaN(threshold) || statusNum === null || statusNum <= threshold) return false;
       } else if (val.startsWith('<=')) {
         const threshold = parseInt(val.slice(2), 10);
-        if (isNaN(threshold) || statusNum > threshold) return false;
+        if (isNaN(threshold) || statusNum === null || statusNum > threshold) return false;
       } else if (val.startsWith('<')) {
         const threshold = parseInt(val.slice(1), 10);
-        if (isNaN(threshold) || statusNum >= threshold) return false;
+        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;
@@ -143,11 +159,13 @@ export function matchNetworkLogQuery(
         flag === 'fail'
       ) {
         const isErr =
-          log.status === 0 || log.status == null || statusNum >= 400;
+          log.status === 0 || (statusNum !== null && statusNum >= 400);
         if (!isErr) return false;
       } else if (flag === 'success' || flag === 'ok' || flag === '2xx') {
-        const isSuccess = statusNum >= 200 && statusNum < 300;
+        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') {
@@ -169,6 +187,11 @@ export function matchNetworkLogQuery(
           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;
     }
@@ -230,10 +253,20 @@ export function matchNetworkLogQuery(
       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)) {
+    // 7. path:<PATH> or p:<PATH> or page:<PAGE>
+    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;
@@ -274,6 +307,16 @@ export function matchNetworkLogQuery(
     } else {
       const queryTerm = isCaseSensitive ? token : lowerToken;
       if (!targetCorpus.includes(queryTerm)) {
+        // Special case: if user typed "error" / "failed", check error status
+        if (
+          queryTerm === 'error' ||
+          queryTerm === 'failed' ||
+          queryTerm === 'fail'
+        ) {
+          const isErr =
+            log.status === 0 || (statusNum !== null && statusNum >= 400);
+          if (isErr) continue;
+        }
         return false;
       }
     }

package/src/i18n/index.ts

@@ -1,8 +1,14 @@
 import React from 'react';
-import en from './locales/en.json';
+import enLocale from './locales/en.json';
 
 type TranslationParams = Record<string, any>;
 
+const localeRegistry: Record<string, Record<string, any>> = {
+  en: enLocale,
+};
+
+let currentLanguage = 'en';
+
 /**
  * Lightweight nested lookup for translation keys (e.g. "network.headers")
  */
@@ -31,7 +37,12 @@ function interpolate(template: string, params?: TranslationParams): string {
  * Standalone zero-dependency translation function
  */
 export function t(key: string, optionsOrFallback?: TranslationParams | string): string {
-  const raw = lookupKey(en, key);
+  const activeBundle = localeRegistry[currentLanguage] || localeRegistry.en;
+  let raw = lookupKey(activeBundle, key);
+  if (raw === undefined && currentLanguage !== 'en') {
+    raw = lookupKey(localeRegistry.en, key);
+  }
+
   if (typeof raw === 'string') {
     if (typeof optionsOrFallback === 'object' && optionsOrFallback !== null) {
       return interpolate(raw, optionsOrFallback);
@@ -44,9 +55,33 @@ export function t(key: string, optionsOrFallback?: TranslationParams | string):
   return key;
 }
 
+export function setLanguage(lang: string): void {
+  if (typeof lang === 'string' && lang.trim()) {
+    currentLanguage = lang.trim();
+    i18n.language = currentLanguage;
+  }
+}
+
+export function addTranslations(lang: string, translations: Record<string, any>): void {
+  if (!lang || !translations || typeof translations !== 'object') return;
+  localeRegistry[lang] = {
+    ...(localeRegistry[lang] || {}),
+    ...translations,
+  };
+}
+
+export function setTranslations(translations: Record<string, any>, lang: string = 'en'): void {
+  addTranslations(lang, translations);
+}
+
 export const i18n = {
   t,
-  language: 'en',
+  language: currentLanguage,
+  changeLanguage: setLanguage,
+  addResourceBundle: (lng: string, _ns: string, resources: any) => addTranslations(lng, resources),
+  setLanguage,
+  addTranslations,
+  setTranslations,
 };
 
 /**

package/src/index.tsx

@@ -26,6 +26,7 @@ import {
 import {
   formatDisplayUrl,
   getNavigationInfo,
+  getLogPageName,
   deduplicateLogs,
   getDomainColor,
   getEventCategory,
@@ -55,6 +56,7 @@ import {
   subscribeNetworkLogs,
   setNetworkModuleEnabled,
   setMaxNetworkLogsLimit,
+  setRouteInfoProvider,
 } from './customHooks/networkLogger';
 
 // Console
@@ -357,8 +359,8 @@ const NetworkInspector = ({
     bundle: false,
     performance: false,
     crash: false,
-    device: true,
-    storage: true,
+    device: false,
+    storage: false,
   });
 
   const [maxNetworkLogs, setMaxNetworkLogs] = useState<number>(100);
@@ -419,8 +421,8 @@ const NetworkInspector = ({
       bundle: false,
       performance: false,
       crash: false,
-      device: true,
-      storage: true,
+      device: false,
+      storage: false,
     });
     setDefaultTab('apis');
     setIsAutoRamLimitEnabled(true);
@@ -490,6 +492,8 @@ const NetworkInspector = ({
             bundle: false,
             performance: false,
             crash: false,
+            device: false,
+            storage: false,
           },
           ...(saved.tabVisibility || {}),
           apis: true,
@@ -708,12 +712,23 @@ const NetworkInspector = ({
   const hasNavigationContext = navigationContext !== undefined;
 
   const currentRouteRef = useRef<RouteInfo>({
-    path: 'Navigators',
+    path: '',
     params: null,
   });
+
+  useEffect(() => {
+    setRouteInfoProvider(() => currentRouteRef.current);
+    return () => {
+      setRouteInfoProvider(null);
+    };
+  }, []);
+
   useEffect(() => {
     if (navState) {
-      currentRouteRef.current = getNavigationInfo(navState);
+      const info = getNavigationInfo(navState);
+      if (info?.path) {
+        currentRouteRef.current = info;
+      }
     }
   }, [navState]);
 
@@ -723,9 +738,22 @@ const NetworkInspector = ({
     const updateState = () => {
       try {
         if (typeof navigationRef.isReady === 'function' && navigationRef.isReady()) {
+          const currentRoute = typeof navigationRef.getCurrentRoute === 'function'
+            ? navigationRef.getCurrentRoute()
+            : null;
+          if (currentRoute?.name) {
+            currentRouteRef.current = {
+              path: currentRoute.name,
+              params: currentRoute.params || null,
+            };
+          }
           const state = navigationRef.getRootState();
           if (state) {
             setNavState(state);
+            const routeInfo = getNavigationInfo(state);
+            if (routeInfo?.path) {
+              currentRouteRef.current = routeInfo;
+            }
           }
         }
       } catch (err) {
@@ -1077,7 +1105,10 @@ const NetworkInspector = ({
         if (freshIds.size > 0) {
           freshIds.forEach(id => {
             if (!logRouteMapRef.current.has(id)) {
-              logRouteMapRef.current.set(id, currentRouteRef.current);
+              const matchedLog = deduped.find(l => l.id === id);
+              const resolvedRoute =
+                (matchedLog as any)?.routeInfo || currentRouteRef.current;
+              logRouteMapRef.current.set(id, resolvedRoute);
             }
           });
           setNewLogIds(freshIds);
@@ -1091,6 +1122,13 @@ const NetworkInspector = ({
         const deduped = deduplicateLogs(raw);
         const incoming = new Set(deduped.map(l => l.id));
         prevLogIdsRef.current = incoming;
+        deduped.forEach(l => {
+          if (!logRouteMapRef.current.has(l.id)) {
+            const resolvedRoute =
+              (l as any)?.routeInfo || currentRouteRef.current;
+            logRouteMapRef.current.set(l.id, resolvedRoute);
+          }
+        });
         setLogs(deduped);
       } else {
         timeoutId = setTimeout(updateNetworkState, 250);
@@ -1378,8 +1416,9 @@ const NetworkInspector = ({
 
     for (let i = 0; i < filteredLogs.length; i++) {
       const log = filteredLogs[i];
-      const routeInfo = logRouteMapRef.current.get(log.id);
-      const pageName = routeInfo?.path || 'Navigators';
+      const routeInfo =
+        logRouteMapRef.current.get(log.id) || (log as any)?.routeInfo;
+      const pageName = getLogPageName(log, routeInfo);
 
       if (
         groups.length === 0 ||
@@ -1680,7 +1719,23 @@ const NetworkInspector = ({
           log.sourceMethod || '',
         ].join(' ').toLowerCase();
 
-        return queryTokens.every(token => searchTarget.includes(token));
+        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);
+          }
+          return searchTarget.includes(token);
+        });
       });
     }
 
@@ -2331,4 +2386,27 @@ export {
   CrashDetailSubTab,
   CrashFilterType,
   BreadcrumbType,
-} from './types';
+} from './types';
+
+export {
+  AppFonts,
+  setAppFonts,
+  type AppFontConfig,
+} from './styles/AppFonts';
+
+export {
+  AppColors,
+  setAppColors,
+  getThemeColors,
+  updateAppColorsTheme,
+} from './styles/AppColors';
+
+export {
+  t,
+  i18n,
+  useTranslation,
+  setLanguage,
+  addTranslations,
+  setTranslations,
+  I18nextProvider,
+} from './i18n';

package/src/styles/AppColors.ts

@@ -405,4 +405,13 @@ export const updateAppColorsTheme = (isDark: boolean) => {
   Object.assign(AppColors, getThemeColors(isDark));
 };
 
+/**
+ * Configure or override specific color tokens used throughout the inspector.
+ */
+export const setAppColors = (customColors: Partial<typeof LightColors>): void => {
+  if (!customColors || typeof customColors !== 'object') return;
+  Object.assign(AppColors, customColors);
+  Object.assign(LightColors, customColors);
+};
+
 export default AppColors;

package/src/styles/AppFonts.ts

@@ -1,3 +1,10 @@
+export interface AppFontConfig {
+  interRegular?: string;
+  interMedium?: string;
+  interBold?: string;
+  Sfprotext?: string;
+}
+
 export const AppFonts = {
   interRegular: 'Inter-Regular',
   interMedium: 'Inter-Medium',
@@ -5,4 +12,13 @@ export const AppFonts = {
   Sfprotext: 'Inter-Regular',
 };
 
+/**
+ * Configure or override font families used across all inspector screens.
+ * Useful when integrating into apps with custom font setups or system fonts.
+ */
+export const setAppFonts = (customFonts: Partial<typeof AppFonts>): void => {
+  if (!customFonts || typeof customFonts !== 'object') return;
+  Object.assign(AppFonts, customFonts);
+};
+
 export default AppFonts;

package/src/types/interfaces.ts

@@ -128,6 +128,7 @@ export interface NetworkLog {
   /** Client identifier: axios, fetch, xhr, apollo, etc. */
   client?: 'axios' | 'fetch' | 'xhr' | 'apollo' | 'graphql' | string;
   caller?: string;
+  routeInfo?: RouteInfo;
 }
 
 export interface RouteInfo {