react-native-inapp-inspector 2.2.9 → 2.3.1

package/src/customHooks/storageInspector.ts

@@ -273,13 +273,13 @@ export const calculateByteSize = (str: string): number => {
 };
 
 /**
- * Determine type and format value safely
+ * Determine type and format value safely without blocking JS thread
  */
 export const analyzeStorageValue = (
   rawVal: any,
 ): {
   strVal: string;
-  parsedVal?: any;
+  parsedValue?: any;
   type: 'json' | 'string' | 'number' | 'boolean' | 'null';
   byteSize: number;
 } => {
@@ -288,14 +288,14 @@ export const analyzeStorageValue = (
   }
 
   const strVal = typeof rawVal === 'string' ? rawVal : String(rawVal);
-  const byteSize = calculateByteSize(strVal);
+  const byteSize = strVal.length * 2;
 
   if (typeof rawVal === 'number') {
-    return {strVal, parsedVal: rawVal, type: 'number', byteSize};
+    return {strVal, parsedValue: rawVal, type: 'number', byteSize};
   }
 
   if (typeof rawVal === 'boolean') {
-    return {strVal, parsedVal: rawVal, type: 'boolean', byteSize};
+    return {strVal, parsedValue: rawVal, type: 'boolean', byteSize};
   }
 
   const trimmed = strVal.trim();
@@ -303,18 +303,22 @@ export const analyzeStorageValue = (
     (trimmed.startsWith('{') && trimmed.endsWith('}')) ||
     (trimmed.startsWith('[') && trimmed.endsWith(']'))
   ) {
-    try {
-      const parsed = JSON.parse(trimmed);
-      return {strVal, parsedVal: parsed, type: 'json', byteSize};
-    } catch {}
+    // For small/medium JSON, parse eagerly; for huge payloads (>10KB), parse lazily on expand
+    if (trimmed.length < 10000) {
+      try {
+        const parsed = JSON.parse(trimmed);
+        return {strVal, parsedValue: parsed, type: 'json', byteSize};
+      } catch {}
+    }
+    return {strVal, type: 'json', byteSize};
   }
 
   if (trimmed === 'true' || trimmed === 'false') {
-    return {strVal, parsedVal: trimmed === 'true', type: 'boolean', byteSize};
+    return {strVal, parsedValue: trimmed === 'true', type: 'boolean', byteSize};
   }
 
   if (!isNaN(Number(trimmed)) && trimmed !== '') {
-    return {strVal, parsedVal: Number(trimmed), type: 'number', byteSize};
+    return {strVal, parsedValue: Number(trimmed), type: 'number', byteSize};
   }
 
   return {strVal, type: 'string', byteSize};
@@ -346,7 +350,7 @@ export const fetchStorageEntries = async (
           entries.push({
             key: k,
             value: analysis.strVal,
-            parsedValue: analysis.parsedVal,
+            parsedValue: analysis.parsedValue,
             type: analysis.type,
             byteSize: analysis.byteSize,
           });
@@ -358,7 +362,7 @@ export const fetchStorageEntries = async (
           entries.push({
             key: k,
             value: analysis.strVal,
-            parsedValue: analysis.parsedVal,
+            parsedValue: analysis.parsedValue,
             type: analysis.type,
             byteSize: analysis.byteSize,
           });
@@ -397,7 +401,7 @@ export const fetchStorageEntries = async (
         entries.push({
           key: k,
           value: analysis.strVal,
-          parsedValue: analysis.parsedVal,
+          parsedValue: analysis.parsedValue,
           type: analysis.type,
           byteSize: analysis.byteSize,
         });

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,
 };
 
 /**