react-native-inapp-inspector 2.2.9 → 2.3.1

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
@@ -144,14 +146,13 @@ import {toggleGlobalTheme} from './styles';
 
 const NetworkInspector = ({
   enabled = true,
-  isEnabled = true,
   storage,
   navigationRef,
   appIcon,
   environment,
-  initialVisible,
+  initialVisible = false,
   visible: controlledVisible,
-}: NetworkInspectorProps): React.JSX.Element => {
+}: NetworkInspectorProps): React.JSX.Element | null => {
   // Set custom storage synchronously during render phase
   setCustomStorage(storage || null);
 
@@ -168,7 +169,7 @@ const NetworkInspector = ({
 
   const [logs, setLogs] = useState<NetworkLog[]>([]);
   const [visible, setVisible] = useState<boolean>(
-    initialVisible ?? controlledVisible ?? false,
+    controlledVisible ?? initialVisible ?? false,
   );
 
   useEffect(() => {
@@ -357,8 +358,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 +420,8 @@ const NetworkInspector = ({
       bundle: false,
       performance: false,
       crash: false,
-      device: true,
-      storage: true,
+      device: false,
+      storage: false,
     });
     setDefaultTab('apis');
     setIsAutoRamLimitEnabled(true);
@@ -490,6 +491,8 @@ const NetworkInspector = ({
             bundle: false,
             performance: false,
             crash: false,
+            device: false,
+            storage: false,
           },
           ...(saved.tabVisibility || {}),
           apis: true,
@@ -708,12 +711,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 +737,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) {
@@ -917,24 +944,29 @@ const NetworkInspector = ({
 
   // 100% Native Main-Thread Floating Button Lifecycle
   useEffect(() => {
-    if (!useNativeFab || !isEnabled || !enabled) {
+    if (!useNativeFab || !enabled) {
       if (useNativeFab) {
-        hideNativeFloatingButton();
+        hideNativeFloatingButton().catch(() => {});
       }
       return;
     }
 
     if (visible) {
-      hideNativeFloatingButton();
+      hideNativeFloatingButton().catch(() => {});
     } else {
-      showNativeFloatingButton();
+      showNativeFloatingButton().catch(() => {});
       setNativeFloatingButtonBadge(
         logs.length > 0 || analyticsEvents.length > 0,
-      );
+      ).catch(() => {});
     }
+
+    return () => {
+      if (useNativeFab) {
+        hideNativeFloatingButton().catch(() => {});
+      }
+    };
   }, [
     useNativeFab,
-    isEnabled,
     enabled,
     visible,
     logs.length,
@@ -999,21 +1031,12 @@ const NetworkInspector = ({
       if (freshCrashes.length > 0) {
         setCrashRecords(freshCrashes);
       }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible]);
 
-  useEffect(() => {
-    if (visible) {
-      const task = InteractionManager.runAfterInteractions(() => {
+      const frame = requestAnimationFrame(() => {
         setIsReady(true);
       });
-      const fallbackTimer = setTimeout(() => {
-        setIsReady(true);
-      }, 350);
       return () => {
-        task.cancel();
-        clearTimeout(fallbackTimer);
+        cancelAnimationFrame(frame);
       };
     } else {
       setIsReady(false);
@@ -1077,7 +1100,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 +1117,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 +1411,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 +1714,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);
+        });
       });
     }
 
@@ -1927,7 +1977,8 @@ const NetworkInspector = ({
     setVisible,
     closeModal,
     isReady,
-    isEnabled,
+    enabled,
+    isEnabled: enabled,
     appIcon,
     environment,
     modalHeightPercent,
@@ -2118,16 +2169,29 @@ const NetworkInspector = ({
 };
 
 const NetworkInspectorWrapper = (props: NetworkInspectorProps) => {
-  // If running in production release build and not explicitly force-enabled (e.g. for QA builds),
-  // return null immediately for 0-overhead production stubbing.
-  if (typeof __DEV__ !== 'undefined' && !__DEV__ && !props?.forceEnable) {
+  const enabled = props?.enabled ?? true;
+
+  useEffect(() => {
+    if (!enabled) {
+      hideNativeFloatingButton().catch(() => {});
+    }
+    return () => {
+      hideNativeFloatingButton().catch(() => {});
+    };
+  }, [enabled]);
+
+  // If enabled is false, return null immediately with 0 overhead
+  if (!enabled) {
     return null;
   }
 
   return (
     <I18nextProvider i18n={i18n}>
       <ErrorBoundary fallbackType="inline">
-        <NetworkInspector {...props} />
+        <NetworkInspector
+          {...props}
+          enabled={enabled}
+        />
       </ErrorBoundary>
     </I18nextProvider>
   );
@@ -2331,4 +2395,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 {
@@ -185,8 +186,6 @@ export interface PersistedSettings {
 
 export interface NetworkInspectorProps {
   enabled?: boolean;
-  isEnabled?: boolean;
-  forceEnable?: boolean;
   storage?: InspectorStorage;
   navigationRef?: any;
   appIcon?: any;
@@ -205,6 +204,7 @@ export interface InspectorContextValue {
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
   closeModal: () => void;
   isReady: boolean;
+  enabled: boolean;
   isEnabled: boolean;
   appIcon?: any;
   environment?: string;