react-native-inapp-inspector 2.2.8 → 2.3.0

package/src/helpers/index.ts

@@ -198,16 +198,37 @@ export const getNavigationInfo = (
   state: any,
   path: string[] = [],
 ): RouteInfo => {
-  if (!state?.routes) {
+  if (!state) {
     return {
-      path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+      path: path.length > 0 ? path.join(' ➔ ') : '',
       params: null,
     };
   }
-  const route = state.routes[state.index ?? 0];
+  if (state.name && !state.routes) {
+    const fullPath =
+      path.length > 0 ? [...path, state.name].join(' ➔ ') : state.name;
+    return {path: fullPath, params: state.params || null};
+  }
+  if (
+    !state.routes ||
+    !Array.isArray(state.routes) ||
+    state.routes.length === 0
+  ) {
+    return {
+      path: path.length > 0 ? path.join(' ➔ ') : '',
+      params: null,
+    };
+  }
+  const index =
+    typeof state.index === 'number' &&
+    state.index >= 0 &&
+    state.index < state.routes.length
+      ? state.index
+      : 0;
+  const route = state.routes[index];
   if (!route) {
     return {
-      path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+      path: path.length > 0 ? path.join(' ➔ ') : '',
       params: null,
     };
   }
@@ -217,10 +238,96 @@ export const getNavigationInfo = (
     return getNavigationInfo(route.state, currentPath);
   }
   const resolved =
-    currentPath.length > 0 ? currentPath.join(' ➔ ') : 'Navigators';
+    currentPath.length > 0 ? currentPath.join(' ➔ ') : route.name || '';
   return {path: resolved, params: route.params || null};
 };
 
+export const getLogPageName = (
+  log: NetworkLog,
+  routeInfo?: RouteInfo | null,
+): string => {
+  // 1. If routeInfo has a valid path, resolve the leaf screen name
+  const effectiveRoute = routeInfo || (log as any)?.routeInfo;
+  if (
+    effectiveRoute &&
+    effectiveRoute.path &&
+    effectiveRoute.path !== 'Navigators'
+  ) {
+    const parts = effectiveRoute.path
+      .split(' ➔ ')
+      .map((s: string) => s.trim())
+      .filter(Boolean);
+    if (parts.length > 0) {
+      return parts[parts.length - 1]; // Leaf screen name, e.g. "HomeScreen", "ProfileScreen"
+    }
+    return effectiveRoute.path;
+  }
+
+  // 2. Extract screen / component name from log.caller stack trace
+  if (log.caller && log.caller !== 'Unknown') {
+    try {
+      const match = log.caller.match(/([^/\\]+)\.(tsx|jsx|ts|js)/i);
+      if (match && match[1]) {
+        const file = match[1];
+        const ignored = [
+          'networklogger',
+          'fetch',
+          'axios',
+          'apiclient',
+          'request',
+          'http',
+          'index',
+          'nativeinspector',
+          'inappinspector',
+          'bundleanalyzer',
+        ];
+        if (!ignored.includes(file.toLowerCase())) {
+          return file;
+        }
+      }
+    } catch (e) {}
+  }
+
+  // 3. Fallback to API resource / endpoint category from URL
+  if (log.url) {
+    try {
+      const cleanUrl = log.url.split('?')[0].split('#')[0];
+      const withoutProto = cleanUrl.replace(/^https?:\/\//i, '');
+      const slashIdx = withoutProto.indexOf('/');
+      if (slashIdx !== -1) {
+        const pathSegments = withoutProto
+          .substring(slashIdx + 1)
+          .split('/')
+          .filter(Boolean);
+        const ignoredSegments = [
+          'api',
+          'v1',
+          'v2',
+          'v3',
+          'v4',
+          'rest',
+          'graphql',
+          'json',
+          'data',
+          'service',
+          'app',
+        ];
+        const meaningful = pathSegments.filter(
+          s => !ignoredSegments.includes(s.toLowerCase()),
+        );
+        if (meaningful.length > 0) {
+          const seg = meaningful[0];
+          return seg.charAt(0).toUpperCase() + seg.slice(1);
+        }
+      }
+      const host = withoutProto.split('/')[0];
+      if (host) return host;
+    } catch (e) {}
+  }
+
+  return 'General';
+};
+
 export const flattenObject = (obj: any, prefix = ''): Record<string, any> => {
   let result: Record<string, any> = {};
   if (typeof obj === 'object' && obj !== null) {
@@ -409,6 +516,107 @@ export const getAppName = (): string => {
   return 'App';
 };
 
+export const getAppVersionAndBuild = (): {
+  version: string;
+  build: string;
+  formatted: string;
+} => {
+  let version = '';
+  let build = '';
+
+  // 1. Try ExpoApplication / ExponentConstants
+  const ExpoApplication = NativeModules.ExpoApplication;
+  if (ExpoApplication) {
+    if (typeof ExpoApplication.nativeAppVersion === 'string') {
+      version = ExpoApplication.nativeAppVersion;
+    }
+    if (typeof ExpoApplication.nativeBuildVersion === 'string') {
+      build = ExpoApplication.nativeBuildVersion;
+    }
+  }
+
+  const ExponentConstants = NativeModules.ExponentConstants;
+  if (ExponentConstants) {
+    const manifest = ExponentConstants.manifest || ExponentConstants.expoConfig;
+    if (manifest) {
+      if (!version && manifest.version) {
+        version = String(manifest.version);
+      }
+      if (!build) {
+        if (manifest.ios?.buildNumber) {
+          build = String(manifest.ios.buildNumber);
+        } else if (manifest.android?.versionCode) {
+          build = String(manifest.android.versionCode);
+        }
+      }
+    }
+  }
+
+  // 2. Try react-native-device-info
+  const RNDeviceInfo = NativeModules.RNDeviceInfo;
+  if (RNDeviceInfo) {
+    if (!version) {
+      if (typeof RNDeviceInfo.appVersion === 'string') {
+        version = RNDeviceInfo.appVersion;
+      } else if (typeof RNDeviceInfo.getVersion === 'function') {
+        try {
+          version = RNDeviceInfo.getVersion();
+        } catch (e) {}
+      }
+    }
+    if (!build) {
+      if (typeof RNDeviceInfo.buildNumber === 'string') {
+        build = RNDeviceInfo.buildNumber;
+      } else if (typeof RNDeviceInfo.getBuildNumber === 'function') {
+        try {
+          build = RNDeviceInfo.getBuildNumber();
+        } catch (e) {}
+      }
+    }
+  }
+
+  // 3. Try PlatformConstants / Platform.constants
+  const constants =
+    (Platform.constants as any) || NativeModules.PlatformConstants;
+  if (constants) {
+    if (
+      !version &&
+      constants.Version &&
+      typeof constants.Version === 'string' &&
+      constants.Version.includes('.')
+    ) {
+      version = constants.Version;
+    }
+    if (!version && constants.reactNativeVersion) {
+      const rnv = constants.reactNativeVersion;
+      if (rnv.major !== undefined) {
+        version = `${rnv.major}.${rnv.minor}.${rnv.patch}`;
+      }
+    }
+  }
+
+  // 4. Try Android AppInfo
+  const AppInfo = NativeModules.AppInfo;
+  if (AppInfo) {
+    if (!version && typeof AppInfo.versionName === 'string') {
+      version = AppInfo.versionName;
+    }
+    if (!build && typeof AppInfo.versionCode === 'string') {
+      build = AppInfo.versionCode;
+    }
+  }
+
+  // Fallbacks
+  if (!version) version = '1.0.0';
+  if (!build) build = '1';
+
+  return {
+    version,
+    build,
+    formatted: `${version} (${build})`,
+  };
+};
+
 export const handleOpenExternalLink = (url: string): void => {
   if (!url) return;
   const openUrl = formatDisplayUrl(url);

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/native/NativeInspector.ts

@@ -207,6 +207,19 @@ export const subscribeNativeFloatingButtonPress = (
     } catch (e) {}
   }
 
+  // Active Bridgeless / TurboModule tap detection
+  const interval = setInterval(async () => {
+    if (NativeModule && NativeModule.checkFloatingButtonPress) {
+      try {
+        const pressed = await NativeModule.checkFloatingButtonPress();
+        if (pressed) {
+          callback();
+        }
+      } catch (e) {}
+    }
+  }, 180);
+  cleanups.push(() => clearInterval(interval));
+
   return () => {
     cleanups.forEach(fn => {
       try {

package/src/native/NativeNetworkInspector.ts

@@ -16,7 +16,7 @@ export interface Spec extends TurboModule {
   triggerHaptic(style: string): Promise<boolean>;
   getNativeSystemMetrics(): Promise<Object>;
   pushNativeLogRecord(pageKey: string, jsonPayload: string): Promise<boolean>;
-  getNativeCachedPage(pageKey: string, offset: number, limit: number, query: string): Promise<string>;
+  checkFloatingButtonPress(): Promise<boolean>;
   addListener(eventName: string): void;
   removeListeners(count: number): void;
 }