react-native-inapp-inspector 1.1.27 → 1.1.29

package/dist/commonjs/customHooks/reduxLogger.d.ts

@@ -1,5 +1,6 @@
 import { ReduxHistoryEntry } from '../types';
 export { ReduxHistoryEntry };
+export declare const isReduxConnected: () => boolean;
 export declare const getReduxState: () => any;
 export declare const setReduxAutoRefresh: (val: boolean) => void;
 export declare const getReduxAutoRefresh: () => boolean;

package/dist/commonjs/customHooks/reduxLogger.js

@@ -13,7 +13,7 @@
 //      dispatch reference at store-creation time) still update the state tree
 //      and per-reducer "last action" consistently.
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.connectReduxStore = exports.inspectorReduxMiddleware = exports.subscribeReduxState = exports.setReduxState = exports.clearActionHistory = exports.getActionHistory = exports.clearLastActionForReducer = exports.getLastActionForReducer = exports.getReduxAutoRefresh = exports.setReduxAutoRefresh = exports.getReduxState = void 0;
+exports.connectReduxStore = exports.inspectorReduxMiddleware = exports.subscribeReduxState = exports.setReduxState = exports.clearActionHistory = exports.getActionHistory = exports.clearLastActionForReducer = exports.getLastActionForReducer = exports.getReduxAutoRefresh = exports.setReduxAutoRefresh = exports.getReduxState = exports.isReduxConnected = void 0;
 let currentReduxState = null;
 const listeners = new Set();
 let globalReduxAutoRefresh = true;
@@ -26,6 +26,8 @@ let historyIdSeq = 0;
 // timeline entries and inconsistent counts.
 const connectedStores = new WeakSet();
 let middlewareAttached = false;
+const isReduxConnected = () => middlewareAttached || currentReduxState != null || actionHistory.length > 0;
+exports.isReduxConnected = isReduxConnected;
 const getReduxState = () => currentReduxState;
 exports.getReduxState = getReduxState;
 const setReduxAutoRefresh = (val) => {

package/dist/commonjs/helpers/index.d.ts

@@ -1,6 +1,7 @@
 import { NetworkLog, RouteInfo, DiffResult, JsonContent, StackFrameType } from '../types';
 export declare const getDomainColor: (domain: string) => string;
 export declare const formatDateTime: (timestamp: number) => string;
+export declare const formatTimestamp: (timestamp: number) => string;
 export declare const getStatusColor: (status: number | null) => string;
 export declare const getDurationColor: (duration: number | null) => string;
 export declare const getSize: (data: unknown) => string;
@@ -44,6 +45,7 @@ export interface ParsedStackFrame {
     frameType: StackFrameType | 'app' | 'dependency' | 'runtime' | 'native';
     isUserCode: boolean;
     isRuntimeNoise: boolean;
+    rawFilePath?: string;
     lineNumber?: string;
     columnNumber?: string;
     isOrigin?: boolean;
@@ -51,6 +53,8 @@ export interface ParsedStackFrame {
 }
 /** Parses a stack trace line to extract function name, file name, extension (.tsx/.jsx/.ts), line, and column numbers */
 export declare const parseStackLine: (rawLine: string, isOrigin?: boolean) => ParsedStackFrame;
+/** Opens a file and line number directly in VS Code */
+export declare const openInVSCode: (filePath: string, lineNumber?: string | number, columnNumber?: string | number) => void;
 export declare const ANALYTICS_EVENT_PALETTE: string[];
 export declare const getEventColor: (name: string) => string;
 export { getEventCategory, registerGAPlugin, type GAEventCategory, type GAPlugin, } from './gaAnalyticsRegistry';

package/dist/commonjs/helpers/index.js

@@ -1,7 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRuntimeDiagnostics = exports.getCategoryColors = exports.registerGAPlugin = exports.getEventCategory = exports.getEventColor = exports.ANALYTICS_EVENT_PALETTE = exports.parseStackLine = exports.getJsonPreviewText = exports.getJsonContent = exports.formatGap = exports.formatTime = exports.formatTimeShort = exports.handleOpenExternalLink = exports.getAppName = exports.getBundleIdentifier = exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getBaseUrl = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatDateTime = exports.getDomainColor = void 0;
+exports.getRuntimeDiagnostics = exports.getCategoryColors = exports.registerGAPlugin = exports.getEventCategory = exports.getEventColor = exports.ANALYTICS_EVENT_PALETTE = exports.openInVSCode = exports.parseStackLine = exports.getJsonPreviewText = exports.getJsonContent = exports.formatGap = exports.formatTime = exports.formatTimeShort = exports.handleOpenExternalLink = exports.getAppName = exports.getBundleIdentifier = exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getBaseUrl = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatTimestamp = exports.formatDateTime = exports.getDomainColor = void 0;
 const react_native_1 = require("react-native");
+const clipboard_1 = __importDefault(require("@react-native-clipboard/clipboard"));
+const toast_1 = require("./toast");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 // Constants
@@ -28,6 +33,20 @@ const formatDateTime = (timestamp) => {
     return `${day}/${month}/${year}  ${hours}:${minutes}:${seconds}`;
 };
 exports.formatDateTime = formatDateTime;
+const formatTimestamp = (timestamp) => {
+    try {
+        const date = new Date(timestamp);
+        const hours = date.getHours().toString().padStart(2, '0');
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const seconds = date.getSeconds().toString().padStart(2, '0');
+        const ms = date.getMilliseconds().toString().padStart(3, '0');
+        return `${hours}:${minutes}:${seconds}.${ms}`;
+    }
+    catch {
+        return '—';
+    }
+};
+exports.formatTimestamp = formatTimestamp;
 const getStatusColor = (status) => {
     if (!status || status === 0)
         return AppColors_1.AppColors.errorColor;
@@ -60,80 +79,43 @@ const getSize = (data) => {
     }
 };
 exports.getSize = getSize;
-// Safely detect and load clipboard natively without static require() calls that Metro fails on
-const getClipboardModule = () => {
-    // 1. Check TurboModuleRegistry (TurboModules / New Architecture)
-    try {
-        const tmReg = react_native_1.TurboModuleRegistry || globalThis.__turboModuleProxy;
-        if (tmReg?.get) {
-            const tm = tmReg.get('RNCClipboard') ||
-                tmReg.get('NativeClipboard') ||
-                tmReg.get('ExpoClipboard');
-            if (tm &&
-                (typeof tm.setString === 'function' ||
-                    typeof tm.setStringAsync === 'function')) {
-                return tm;
-            }
+const copyToClipboard = (value, label) => {
+    const resolved = typeof value === 'function' ? value() : value;
+    let textToCopy = '';
+    if (typeof resolved === 'string') {
+        textToCopy = resolved;
+    }
+    else {
+        try {
+            textToCopy = JSON.stringify(resolved, null, 2);
+        }
+        catch {
+            textToCopy = String(resolved);
         }
     }
-    catch { }
-    // 2. Check legacy NativeModules table (Bridge / Old Architecture)
+    // Use @react-native-clipboard/clipboard npm package
     try {
-        if (react_native_1.NativeModules?.RNCClipboard &&
-            typeof react_native_1.NativeModules.RNCClipboard.setString === 'function') {
-            return react_native_1.NativeModules.RNCClipboard;
-        }
-        if (react_native_1.NativeModules?.ExpoClipboard &&
-            typeof react_native_1.NativeModules.ExpoClipboard.setStringAsync === 'function') {
-            return react_native_1.NativeModules.ExpoClipboard;
+        if (typeof clipboard_1.default?.setString === 'function') {
+            clipboard_1.default.setString(textToCopy);
         }
-        if (react_native_1.NativeModules?.Clipboard &&
-            typeof react_native_1.NativeModules.Clipboard.setString === 'function') {
-            return react_native_1.NativeModules.Clipboard;
+        else if (typeof clipboard_1.default?.default?.setString === 'function') {
+            clipboard_1.default.default.setString(textToCopy);
         }
     }
-    catch { }
-    // 3. Check legacy React Native core Clipboard
-    try {
-        if (react_native_1.Clipboard && typeof react_native_1.Clipboard.setString === 'function') {
-            return react_native_1.Clipboard;
+    catch (err) {
+        if (__DEV__) {
+            console.warn('[NetworkInspector] Clipboard.setString failed:', err);
         }
     }
-    catch { }
-    return null;
-};
-const copyToClipboard = (value, label) => {
-    const resolved = typeof value === 'function' ? value() : value;
-    const text = typeof resolved === 'string' ? resolved : JSON.stringify(resolved, null, 2);
-    const textToCopy = text ?? '';
-    let copied = false;
+    // Trigger floating in-app bottom toast notification
     try {
-        const cb = getClipboardModule();
-        if (cb) {
-            if (typeof cb.setStringAsync === 'function') {
-                cb.setStringAsync(textToCopy);
-                copied = true;
-            }
-            else if (typeof cb.setString === 'function') {
-                cb.setString(textToCopy);
-                copied = true;
-            }
-        }
+        (0, toast_1.showToast)(label ? `${label} copied to clipboard` : 'Copied to clipboard');
     }
     catch { }
-    if (!copied) {
-        try {
-            if (typeof navigator !== 'undefined' && navigator?.clipboard?.writeText) {
-                navigator.clipboard.writeText(textToCopy);
-                copied = true;
-            }
-        }
-        catch { }
-    }
-    // Visual toast feedback on Android if ToastAndroid exists
+    // Native Android Toast fallback
     try {
         if (react_native_1.Platform.OS === 'android' && react_native_1.ToastAndroid?.show) {
-            react_native_1.ToastAndroid.show(`${label} copied`, react_native_1.ToastAndroid.SHORT);
+            react_native_1.ToastAndroid.show(label ? `${label} copied to clipboard` : 'Copied to clipboard', react_native_1.ToastAndroid.SHORT);
         }
     }
     catch { }
@@ -542,11 +524,16 @@ const parseStackLine = (rawLine, isOrigin = false) => {
         (functionName === 'next' && isNative);
     const isDependency = cleanPath.includes('node_modules') ||
         cleanPath.includes('react-native/Libraries') ||
-        (cleanPath.includes('react-native-inapp-inspector') && !cleanPath.includes('/example/'));
+        (cleanPath.includes('react-native-inapp-inspector') &&
+            !cleanPath.includes('/example/'));
     const isUserCode = !isNative &&
         !isInternalBytecode &&
         !isDependency &&
-        (fileExt === 'tsx' || fileExt === 'jsx' || fileExt === 'ts' || fileExt === 'js' || !fileName.includes('.bundle'));
+        (fileExt === 'tsx' ||
+            fileExt === 'jsx' ||
+            fileExt === 'ts' ||
+            fileExt === 'js' ||
+            !fileName.includes('.bundle'));
     const frameType = isUserCode
         ? 'app'
         : isDependency
@@ -554,7 +541,10 @@ const parseStackLine = (rawLine, isOrigin = false) => {
             : isNative
                 ? 'native'
                 : 'runtime';
-    const isRuntimeNoise = isInternalBytecode || isNative || functionName === 'asyncGeneratorStep' || functionName === '_next';
+    const isRuntimeNoise = isInternalBytecode ||
+        isNative ||
+        functionName === 'asyncGeneratorStep' ||
+        functionName === '_next';
     // Format clean relative project path
     let relativePath = cleanPath;
     if (relativePath.includes('/example/')) {
@@ -574,6 +564,7 @@ const parseStackLine = (rawLine, isOrigin = false) => {
         functionName,
         fileName,
         fullPath: relativePath,
+        rawFilePath: fullPath,
         fileExt,
         frameType,
         isUserCode,
@@ -585,6 +576,31 @@ const parseStackLine = (rawLine, isOrigin = false) => {
     };
 };
 exports.parseStackLine = parseStackLine;
+/** Opens a file and line number directly in VS Code */
+const openInVSCode = (filePath, lineNumber, columnNumber) => {
+    const line = lineNumber ? `:${lineNumber}` : '';
+    const col = columnNumber ? `:${columnNumber}` : '';
+    const cleanPath = filePath.replace(/^file:\/\//, '');
+    const vscodeUrl = `vscode://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+    react_native_1.Linking.canOpenURL(vscodeUrl)
+        .then(supported => {
+        if (supported) {
+            react_native_1.Linking.openURL(vscodeUrl);
+        }
+        else {
+            react_native_1.Linking.openURL(vscodeUrl).catch(() => {
+                const insidersUrl = `vscode-insiders://file/${cleanPath.replace(/^\/+/, '')}${line}${col}`;
+                react_native_1.Linking.openURL(insidersUrl).catch(() => {
+                    react_native_1.Alert.alert('Open in VS Code', `Target location:\n${cleanPath}${line}${col}\n\nPlease ensure VS Code is installed.`, [{ text: 'OK' }]);
+                });
+            });
+        }
+    })
+        .catch(() => {
+        react_native_1.Linking.openURL(vscodeUrl).catch(() => { });
+    });
+};
+exports.openInVSCode = openInVSCode;
 // ─── Analytics Helpers ────────────────────────────────────────────────────────
 exports.ANALYTICS_EVENT_PALETTE = [
     AppColors_1.AppColors.googleBlue,
@@ -643,7 +659,11 @@ exports.getCategoryColors = getCategoryColors;
 const getRuntimeDiagnostics = () => {
     const isHermes = typeof global.HermesInternal !== 'undefined';
     const isV8 = typeof global._v8runtime !== 'undefined';
-    const engineType = isHermes ? 'hermes' : isV8 ? 'v8' : 'jsc';
+    const engineType = isHermes
+        ? 'hermes'
+        : isV8
+            ? 'v8'
+            : 'jsc';
     const isFabric = typeof global.nativeFabricUIManager !== 'undefined' ||
         Boolean(global.__turboModuleProxy);
     const archType = isFabric ? 'fabric' : 'paper';
@@ -653,11 +673,14 @@ const getRuntimeDiagnostics = () => {
         const hermesStats = global.HermesInternal?.getInstrumentedStats?.();
         if (hermesStats?.js_heap_size) {
             usedHeapMb = Number((hermesStats.js_heap_size / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) / (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number(((hermesStats.js_allocated_bytes || hermesStats.js_heap_size * 1.6) /
+                (1024 * 1024)).toFixed(1));
         }
         else if (global.performance?.memory?.usedJSHeapSize) {
-            usedHeapMb = Number((global.performance.memory.usedJSHeapSize / (1024 * 1024)).toFixed(1));
-            totalAllocMb = Number((global.performance.memory.totalJSHeapSize / (1024 * 1024)).toFixed(1));
+            usedHeapMb = Number((global.performance.memory.usedJSHeapSize /
+                (1024 * 1024)).toFixed(1));
+            totalAllocMb = Number((global.performance.memory.totalJSHeapSize /
+                (1024 * 1024)).toFixed(1));
         }
     }
     catch { }

package/dist/commonjs/helpers/toast.d.ts

@@ -0,0 +1,4 @@
+type ToastListener = (message: string) => void;
+export declare const showToast: (message: string) => void;
+export declare const subscribeToast: (listener: ToastListener) => () => void;
+export {};

package/dist/commonjs/helpers/toast.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.subscribeToast = exports.showToast = void 0;
+const listeners = new Set();
+const showToast = (message) => {
+    listeners.forEach(fn => {
+        try {
+            fn(message);
+        }
+        catch { }
+    });
+};
+exports.showToast = showToast;
+const subscribeToast = (listener) => {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+};
+exports.subscribeToast = subscribeToast;

package/dist/commonjs/i18n/locales/en.json

@@ -15,7 +15,10 @@
         "expandAll": "Expand All",
         "viewOnNpm": "View on NPM",
         "later": "Later",
-        "source": "SOURCE"
+        "source": "SOURCE",
+        "open": "Open",
+        "openInBrowser": "Open in Browser",
+        "openInBrowserPrompt": "Are you sure you want to open this URL in your external browser?"
     },
     "header": {
         "updateAvailableTitle": "Update Available",
@@ -39,6 +42,11 @@
         "mainTitle": "Settings",
         "requiredBadge": "REQUIRED",
         "defaultBadge": "DEFAULT",
+        "notConnectedBadge": "NOT CONNECTED",
+        "notDetectedBadge": "NOT DETECTED",
+        "readOnlyBadge": "READ ONLY",
+        "reduxNotConnectedTip": "Redux store is not connected. Call connectReduxStore(store) or use inspectorReduxMiddleware to enable.",
+        "analyticsNotConnectedTip": "Analytics is not initialized. Call setupAnalyticsLogger(analytics()) to enable.",
         "tabVisibility": "Tab Visibility",
         "tabVisibilityDescription": "Choose which modules appear in the inspector",
         "settingsTitle": "Settings",
@@ -262,7 +270,19 @@
         "pageViewCategory": "Page View",
         "ecommerceCategory": "Ecommerce",
         "systemCategory": "System",
-        "customCategory": "Custom"
+        "customCategory": "Custom",
+        "realtimeStream": "Realtime Activity",
+        "liveTelemetry": "Live Telemetry",
+        "eventsInWindow": "events in window",
+        "eventVelocity": "{{rate}} ev/min",
+        "peakVolume": "Peak: {{count}}",
+        "time30mAgo": "-30m",
+        "time20mAgo": "-20m",
+        "time10mAgo": "-10m",
+        "timeNow": "NOW",
+        "selectedBucket": "Bucket: {{time}} ({{count}} events)",
+        "totalRevenue": "Revenue",
+        "activeDistribution": "Category Split"
     },
     "redux": {
         "title": "Redux",
@@ -351,6 +371,14 @@
         "components": "Components",
         "memoryGc": "Memory & GC",
         "networkIo": "Network & I/O",
+        "catAll": "All",
+        "catJanky": "Janky",
+        "catNavigation": "Navigation",
+        "catRender": "Components",
+        "catMemory": "Memory",
+        "catIo": "I/O",
+        "recording": "Recording",
+        "paused": "Paused",
         "budgetHeadroom": "~{{time}}ms Headroom ({{percent}}%)",
         "jsExec": "JS Exec: {{time}}ms",
         "yogaLayoutTime": "Yoga Layout: {{time}}ms",
@@ -370,8 +398,144 @@
         "fpsUnit": "FPS",
         "jsLag": "JS Lag",
         "jankRate": "Jank Rate",
+        "fpsAreaChartTitle": "Real-Time FPS Stream & Jitter (30s)",
+        "fpsAreaChartSub": "Live 60 FPS target with continuous frame variance measurement",
+        "frameLatencyDistTitle": "Frame Latency Distribution",
+        "frameLatencyDistSub": "Proportion of frames delivered within 16.6ms budget",
+        "optimalBucket": "< 16.6ms (60 FPS)",
+        "minorJankBucket": "16.7 - 33.3ms (30-60 FPS)",
+        "noticeableJankBucket": "33.4 - 50.0ms (20-30 FPS)",
+        "severeFreezeBucket": "> 50.0ms (< 20 FPS)",
+        "hermesHeapTrendTitle": "Memory & Hermes Heap Dynamics",
+        "hermesHeapTrendSub": "Live allocation vs generational GC scavenge cycles",
         "live": "Live",
-        "msTotal": "{{duration}}ms total • {{time}}"
+        "msTotal": "{{duration}}ms total • {{time}}",
+        "droppedFrames": "{{count}} Dropped",
+        "zeroDropped": "0 Dropped",
+        "frameBudgetMs": "{{time}}ms / frame ({{budget}}% budget)",
+        "target60Fps": "Target 60 FPS • Actual {{fps}} FPS",
+        "frameDuration": "Frame Duration",
+        "frameDurationVal": "{{time}} ms (16.67ms budget)",
+        "frameUtilization": "Frame Budget Exceeded",
+        "frameBudgetOk": "Frame Budget Headroom",
+        "bottleneck": "Bottleneck",
+        "jsBound": "JS Thread Bound",
+        "uiBound": "UI Thread Bound",
+        "balanced": "Balanced",
+        "smooth": "Smooth 60 FPS",
+        "minorJank": "Minor Stutter",
+        "noticeableJank": "Noticeable Jank",
+        "severeFreeze": "Severe Freeze",
+        "screenContext": "Screen Context",
+        "profileReason1": "Inline arrow function props passed to children (onAddToCart={() => ...})",
+        "profileReason2": "Unmemoized Redux selector creating new object reference on every dispatch",
+        "profileReason3": "Dynamic style object created in render body ({ marginTop: insets.top + 10 })",
+        "profileReason4": "FlatList missing getItemLayout causing async layout measuring passes",
+        "profileReason5": "renderItem function defined anonymously inside JSX body",
+        "profileReason6": "List item components not wrapped with React.memo",
+        "profileReason7": "Parent screen re-rendered on keyboard show/hide event",
+        "profileReason8": "Unstable callback reference passed into checkout button",
+        "profileReason9": "TextInput value state triggers parent re-render on every keystroke without debouncing",
+        "profileReason10": "Passing unmemoized filter object ({ category, minPrice }) down to child chips",
+        "profileReason11": "Avatar image cache re-validation on auth session refresh",
+        "fixUseCallbackTitle": "Wrap Event Handlers in useCallback",
+        "fixUseCallbackDesc": "Inline functions recreate a new memory reference on every render, invalidating React.memo on child components.",
+        "fixCreateSelectorTitle": "Memoize Redux / Zustand Selectors with shallowEqual",
+        "fixCreateSelectorDesc": "Returning new object or array references inside useSelector forces an automatic re-render on every state dispatch.",
+        "fixUseMemoStylesTitle": "Hoist Styles or Use useMemo for Dynamic Dimensions",
+        "fixUseMemoStylesDesc": "Inline style objects create new object identities on every frame pass, causing Yoga Flexbox reconciliation diffs.",
+        "fixGetItemLayoutTitle": "Implement getItemLayout for Fixed-Height Items",
+        "fixGetItemLayoutDesc": "Supplying getItemLayout allows FlatList to immediately compute scroll offsets and virtual windows without measuring views asynchronously.",
+        "fixReactMemoTitle": "Wrap List Items in React.memo",
+        "fixReactMemoDesc": "Prevents all 50+ visible list items from re-rendering when parent list state (e.g. scroll position or pagination) updates.",
+        "fixComponentSplittingTitle": "Isolate Fast-Changing State in Leaf Components",
+        "fixComponentSplittingDesc": "Move keyboard listeners and modal animation state into self-contained subcomponents so the parent does not re-render.",
+        "fixDebouncedInputTitle": "Debounce Search Input or Use Local Controlled State",
+        "fixDebouncedInputDesc": "Do not propagate keystroke state into global store immediately. Use a 250ms debounce or uncontrolled ref.",
+        "fixPrimitivePropsTitle": "Pass Primitive Props Instead of Large Objects",
+        "fixPrimitivePropsDesc": "Passing only categoryId string instead of whole category object prevents re-renders when other category metadata updates.",
+        "fixUseRefForTrackingTitle": "Use useRef for Non-Visual Tracking Values",
+        "fixUseRefForTrackingDesc": "Do not store analytics timers, scroll offsets, or tracking IDs in useState if they do not directly alter the JSX tree.",
+        "highImpact": "High Impact",
+        "mediumImpact": "Medium Impact",
+        "bestPractice": "Best Practice",
+        "beforeUseCallback": "// ❌ Before in <{{comp}} /> (re-creates function reference on every render):",
+        "afterUseCallback": "// ✅ After (stable memoized callback reference):",
+        "beforeCreateSelector": "// ❌ Before in <{{comp}} /> (returns new object reference every render):",
+        "afterCreateSelector": "// ✅ After (shallowEqual prevents re-render unless values change):",
+        "beforeMemo": "// ❌ Before (<{{comp}} />):",
+        "afterMemo": "// ✅ After (skips render if props are shallowly identical):",
+        "flatListOptimization": "// FlatList Optimization for <{{comp}} />",
+        "customComparator": "// Custom equality function for <{{comp}} />",
+        "debounceInput": "// Debounce input inside <{{comp}} /> to prevent per-keystroke renders:",
+        "isolateState": "// Isolate rapidly changing state from <{{comp}} /> to child sub-tree\n// ✅ Encapsulate animated layout inside isolated component:",
+        "beforeUseRef": "// ❌ Before in <{{comp}} /> (triggers whole component re-render on value change):",
+        "afterUseRef": "// ✅ After (preserves mutable reference across renders without re-rendering):",
+        "fixInteractionManagerTitle": "Defer Offscreen Logic with InteractionManager",
+        "fixInteractionManagerDesc": "Heavy data processing during screen animations drops frames. Defer until transition finishes.",
+        "beforeInteractionManager": "// ❌ Before in <{{comp}} /> (runs heavy computation while transition animates):\nuseEffect(() => {\n  loadHeavyData();\n}, []);",
+        "afterInteractionManager": "// ✅ After (waits until transition completes smoothly):\nuseEffect(() => {\n  const task = InteractionManager.runAfterInteractions(() => {\n    loadHeavyData();\n  });\n  return () => task.cancel();\n}, []);",
+        "fixFlatListWindowingTitle": "Tune FlatList Windowing Properties",
+        "fixFlatListWindowingDesc": "Configure maxToRenderPerBatch and windowSize to minimize offscreen virtualized view allocations.",
+        "beforeFlatListWindowing": "// FlatList Windowing Optimization for <{{comp}} />:\n<FlatList\n  data={items}\n  maxToRenderPerBatch={10}\n  windowSize={5}\n  initialNumToRender={8}\n  removeClippedSubviews={true}\n/>",
+        "fixImageCachingTitle": "Optimize Image Caching and Downscaling",
+        "fixImageCachingDesc": "Use priority headers or resizeMode downscaling to avoid massive bitmap allocations in the Hermes heap.",
+        "beforeImageCaching": "// Image Optimization for <{{comp}} />:\n<Image\n  source={{ uri: imageUrl, cache: 'force-cache' }}\n  resizeMode=\"cover\"\n  fadeDuration={100}\n/>",
+        "fixContextSplittingTitle": "Split Monolithic Context into Granular Providers",
+        "fixContextSplittingDesc": "Components subscribing to a large context re-render even when unused state properties change.",
+        "beforeContextSplitting": "// ❌ Before (<{{comp}} /> consumes entire AppContext):\nconst { user, cart, theme } = useAppContext();",
+        "afterContextSplitting": "// ✅ After (subscribe to dedicated slice context):\nconst theme = useThemeContext();",
+        "fixInlineStylesHoistTitle": "Hoist Static Styles with StyleSheet.create",
+        "fixInlineStylesHoistDesc": "Inline style objects allocate new memory references on each render pass, causing Yoga reconciliation overhead.",
+        "beforeInlineStyles": "// ❌ Before (<{{comp}} /> allocates inline object every frame):\n<View style={{ flex: 1, padding: 16, backgroundColor: '#ffffff' }} />",
+        "afterInlineStyles": "// ✅ After (hoisted StyleSheet reference):\nconst styles = StyleSheet.create({ container: { flex: 1, padding: 16, backgroundColor: '#ffffff' } });\n<View style={styles.container} />",
+        "transitionEventLabel": "Screen Transition: {{screen}}",
+        "transitionEventDetail": "Transition completed in {{duration}}ms (TTI: {{tti}}ms).",
+        "transitionEventAdvice": "Interaction completed within 60 FPS target budget.",
+        "heavyTaskEventLabel": "Heavy Synchronous Task: {{taskName}}",
+        "heavyTaskEventDetail": "JS thread blocked for {{duration}}ms during task execution.",
+        "heavyTaskEventAdvice": "Consider offloading to web worker, InteractionManager, or batching in chunks.",
+        "asyncOpEventLabel": "Slow Async Operation: {{opName}}",
+        "asyncOpEventDetail": "Async task took {{duration}}ms to resolve.",
+        "renderLoopWarningLabel": "Rapid Re-render Spike in <{{comp}} />",
+        "renderLoopWarningDetail": "Component re-rendered {{count}} times in 500ms. Potential infinite loop or unstable dependencies.",
+        "renderLoopWarningAdvice": "Check useEffect / useCallback dependency arrays for unstable object or function references.",
+        "event1Label": "Main Thread Spike during Navigation",
+        "event1Detail": "Screen transition triggered heavy layout reconciliation and simultaneous component mounts.",
+        "event1Advice": "Defer non-critical offscreen hooks with InteractionManager.runAfterInteractions to preserve 60 FPS.",
+        "event2Label": "FlatList Virtualization Re-render Pass",
+        "event2Detail": "FlatList rendered 25 items simultaneously on orientation change without memoized row component.",
+        "event2Advice": "Implement getItemLayout and React.memo(LogCard) to skip redundant diffing passes.",
+        "event3Label": "Native Modal Slide-Up Transition",
+        "event3Detail": "Hardware accelerated native driver animated transform running smoothly at sustained 60 FPS.",
+        "event3Advice": "Using nativeDriver: true successfully prevents JS thread blocking during animations.",
+        "event4Label": "Hermes Generational Garbage Collection",
+        "event4Detail": "Minor generational GC cycle scavenged 4.2 MB ephemeral heap objects with sub-millisecond thread pause.",
+        "event4Advice": "Hermes generational garbage collector is operating within optimal sub-5ms limits.",
+        "gcCycleLabel": "Manual Garbage Collection Cycle",
+        "gcCycleDetail": "Reclaimed ~{{amount}} MB unreferenced heap objects and compacted memory nursery.",
+        "gcCycleAdvice": "Heap usage optimized. Generational nursery cleared.",
+        "liveFpsDropLabel": "Live Frame Rate Dip ({{fps}} FPS)",
+        "liveFpsDropDetail": "Main thread frame duration extended to {{duration}}ms during view update.",
+        "liveFpsDropAdvice": "Heavy JavaScript execution during frame pass delayed display presentation.",
+        "event5Label": "Large JSON Payload Deserialization",
+        "event5Detail": "50-item API response parse overhead in network adapter (185 KB JSON raw string).",
+        "event5Advice": "Consider paginating API payloads or streaming responses if payload size exceeds 250 KB.",
+        "event6Label": "Image Bitmap Decode & Rasterization",
+        "event6Detail": "Retina raster decode for banner_dark.png (1200×630px raster buffer allocation).",
+        "event6Advice": "Downscale asset dimensions or convert to WebP to reduce decode latency by ~65%.",
+        "event7Label": "Native TurboModule JSI Invocation",
+        "event7Detail": "AsyncStorage / MMKV preferences transaction read across 32 configuration keys.",
+        "event7Advice": "Direct C++ JSI Turbomodule bindings completely bypass legacy JSON bridge serialization overhead.",
+        "event8Label": "Redux Action State Tree Diffing",
+        "event8Detail": "Redux dispatch pass evaluated 6 reducer slices and emitted state notification in 4.8ms.",
+        "event8Advice": "State tree immutability preserved. Memoized selectors prevented redundant component renders.",
+        "event9Label": "Touch-to-Render Event Latency",
+        "event9Detail": "Gesture responder dispatched tap event to TabBar button with immediate 60 FPS response.",
+        "event9Advice": "Touch responder latency is well within standard 16.67ms frame budget.",
+        "event10Label": "C++ Yoga Flexbox Layout Pass",
+        "event10Detail": "Inspector UI multi-tab card layout recalculation and font metrics pass in C++ Yoga engine.",
+        "event10Advice": "Flexbox layout constraints are cached and computed efficiently with zero reflow penalties."
     },
     "bundle": {
         "heroTitle": "Bundle & Asset Architecture",
@@ -525,7 +689,52 @@
         "bestPractice": "Best Practice",
         "actionRequired": "Action Required",
         "active": "Active",
-        "tipDetails": "Tip Details"
+        "tipDetails": "Tip Details",
+        "iosComp1Name": "Frameworks & Dynamic Pods",
+        "iosComp1Desc": "React, Hermes, and {{count}} native pod frameworks.",
+        "iosComp1Advice": "Ensure Dead Code Stripping (STRIP_INSTALLED_PRODUCT = YES) in Release mode.",
+        "iosComp2Name": "Mach-O Executable (ARM64)",
+        "iosComp2Desc": "Host App compiled Swift/Objective-C and C++ native bridges.",
+        "iosComp2Advice": "Enable Monolithic LTO (Link-Time Optimization) in Xcode Scheme.",
+        "iosComp3Name": "Asset Catalog (Assets.car)",
+        "iosComp3Desc": "AppIcons, splash screens, vector glyphs, and bundled fonts.",
+        "iosComp3Advice": "Compile images into Xcode Asset Catalog for automatic App Thinning.",
+        "iosComp4Name": "Hermes Bytecode (main.jsbundle)",
+        "iosComp4Desc": "Host app JavaScript compiled AOT into Hermes bytecode ({{count}} files).",
+        "iosComp4Advice": "AOT bytecode loads with 0ms compile latency on device launch.",
+        "iosComp5Name": "Metadata & Code Signatures",
+        "iosComp5Desc": "_CodeSignature, Info.plist, and entitlements block.",
+        "iosComp5Advice": "Standard Apple Code Signing & provisioning signature.",
+        "andComp1Name": "Native C++ Libraries (.so)",
+        "andComp1Desc": "libhermes.so, libfbjni.so, and {{count}} C++ native adapters.",
+        "andComp1Advice": "Deploy with Android App Bundle (.aab) to deliver per-ABI split APKs.",
+        "andComp2Name": "Compiled DEX (classes.dex)",
+        "andComp2Desc": "Compiled Java & Kotlin runtime, AndroidX, and React Native bridges.",
+        "andComp2Advice": "Enable R8 / ProGuard shrinking (minifyEnabled true) in build.gradle.",
+        "andComp3Name": "Android Resources (res/)",
+        "andComp3Desc": "Drawables, vector XMLs, mipmap densities, resources.arsc, fonts.",
+        "andComp3Advice": "Use WebP and VectorDrawables to avoid multi-density asset duplication.",
+        "andComp4Name": "Hermes Bytecode (Android)",
+        "andComp4Desc": "Host app JavaScript compiled into Hermes bytecode ({{count}} files).",
+        "andComp4Advice": "Pre-compiled bytecode during assembleRelease gradle task.",
+        "andComp5Name": "Manifest & Signatures (META-INF)",
+        "andComp5Desc": "AndroidManifest.xml, signing certs, v2/v3/v4 APK Signature Scheme blocks.",
+        "andComp5Advice": "Official Google Play signing & signature block.",
+        "apkComp1Name": "Multi-ABI C++ Libraries (.so)",
+        "apkComp1Desc": "Universal multi-architecture shared libraries (.so) bundled for direct sideloading.",
+        "apkComp1Advice": "Use Android App Bundle (.aab) for Google Play to reduce install size by 60%.",
+        "apkComp2Name": "Compiled DEX Bytecode (classes.dex)",
+        "apkComp2Desc": "Compiled Java & Kotlin runtime, AndroidX libraries, and native bridge modules.",
+        "apkComp2Advice": "Enable R8 / ProGuard shrinking (minifyEnabled true) and shrinkResources true.",
+        "apkComp3Name": "Android Resources & Assets (res/)",
+        "apkComp3Desc": "Drawables, vector XMLs, mipmap densities, resources.arsc, fonts.",
+        "apkComp3Advice": "Use WebP and VectorDrawables to avoid multi-density asset duplication.",
+        "apkComp4Name": "Hermes Bytecode Bundle (Android)",
+        "apkComp4Desc": "Host app JavaScript compiled into Hermes bytecode ({{count}} files).",
+        "apkComp4Advice": "Pre-compiled bytecode during assembleRelease gradle task.",
+        "apkComp5Name": "Manifest & Signatures (META-INF)",
+        "apkComp5Desc": "AndroidManifest.xml, signing certs, JAR & v2/v3/v4 APK Signature Scheme.",
+        "apkComp5Advice": "Enterprise sideload & direct install signature block."
     },
     "errors": {
         "title": "Something went wrong",
@@ -538,7 +747,22 @@
         "modalMessage": "The inspector hit an unexpected error. You can reset it below.",
         "inlineTitle": "Inspector error",
         "inlineMessage": "An unexpected error occurred inside the inspector.",
-        "networkError": "Network request failed"
+        "networkError": "Network request failed",
+        "crashIntercepted": "CRASH INTERCEPTED",
+        "protected": "PROTECTED",
+        "rootCauseTitle": "Root Cause Diagnostics",
+        "rootCauseSubtitle": "Inspector caught this runtime error to prevent app termination",
+        "exactLocation": "EXACT SOURCE LOCATION",
+        "file": "File:",
+        "lineCol": "Line / Col:",
+        "lineColVal": "Line {{line}}, Col {{col}}",
+        "function": "Function:",
+        "callStack": "CALL STACK FRAMES",
+        "framesCount": "{{count}} frames",
+        "tryAgainRecover": "Try Again / Recover",
+        "copyDiagnostics": "Copy Diagnostics",
+        "appTag": "APP",
+        "copy": "Copy"
     },
     "jsonViewer": {
         "pretty": "Pretty",

package/dist/commonjs/index.d.ts

@@ -10,6 +10,6 @@ export { default as CrashTab } from './components/Inspector/CrashTab';
 export { default as ErrorBoundary } from './components/ErrorBoundary';
 export { connectReduxStore, inspectorReduxMiddleware, getReduxState, subscribeReduxState, getActionHistory, clearActionHistory, getLastActionForReducer, } from './customHooks/reduxLogger';
 export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/gaAnalyticsRegistry';
-export { usePerformanceTracker, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, } from './customHooks/performanceTracker';
+export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';
 export { InspectLog, InspectTrackTime, InspectCatch, type InspectLogOptions, } from './decorators';
 export { ActiveTab, Method, StatusFilter, SortOrder, LocalFilter, ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, ConsoleLogType, AnalyticsEventSource, GAEventCategory, StackFrameType, DiffResultType, BundleSubTab, PerformanceSubTab, CrashType, CrashExportFormat, CrashDetailSubTab, CrashFilterType, BreadcrumbType, } from './types';