react-native-inapp-inspector 1.1.35 → 2.0.0

package/README.md

@@ -31,7 +31,10 @@ The **zero-config, all-in-one in-app debugging overlay for React Native & Expo**
 
 | Capability | **react-native-inapp-inspector** | react-native-network-logger | Flipper / RN Debugger |
 | :--- | :---: | :---: | :---: |
-| **Zero Native Setup / No Cables** | ✅ | ✅ | ❌ (Requires desktop app/cables) |
+| **Native Module (Kotlin & iOS Bridge)** | ✅ | ❌ | ⚠️ |
+| **Low-Level Hardware & RAM Telemetry** | ✅ | ❌ | ⚠️ |
+| **Zero-Render Inactive Mode (0% Background Overhead)** | ✅ | ❌ | ❌ |
+| **Network Timing Waterfall & P95 Telemetry** | ✅ | ❌ | ✅ |
 | **Network Inspector (Fetch & Axios)** | ✅ | ✅ | ✅ |
 | **cURL & Fetch Snippet Export** | ✅ | ❌ | ⚠️ |
 | **Console Logger + Stack Traces** | ✅ (Metro Symbolicated) | ❌ | ✅ |
@@ -47,14 +50,16 @@ The **zero-config, all-in-one in-app debugging overlay for React Native & Expo**
 
 | Feature | Description |
 | --- | --- |
+| ⚡ **Native Hardware Telemetry** | Native Kotlin (`Android`) & Objective-C (`iOS`) bridge to query total RAM, available RAM, native heap size, internal storage free space, battery level, charging status, and CPU ABI. |
+| 🌊 **Network Timing Waterfall** | Latency breakdown with visual proportional waterfall bars, performance ratings (Fast `<200ms`, Moderate `200-800ms`, Slow `>800ms`), and aggregate **Success Rate %**, **Avg Latency**, and **P95 Latency** health indicators. |
+| 🚀 **Zero-Render Inactive Mode** | High-performance architecture that eliminates background React re-renders while the inspector modal is closed, synchronizing state instantaneously upon opening. |
 | 🌐 **Network Inspector** | Intercepts `fetch` and Axios (`GET`, `POST`, `PUT`, `PATCH`, `DELETE`). Inspect status codes, request/response headers, body JSON, duration, caller origin, and instant cURL / fetch export snippets. |
 | 🪵 **Console Logger & Stack Trace** | Captures `console.log`, `info`, `warn`, and `error`. Displays trigger file (`TSX`, `JSX`, `TS`, `JS`) & line numbers via **Metro Symbolication**, call stack frames, individual arguments inspection, and duplicate collapsing (`×N`). |
 | ⏸️ **Live Stream Pause / Resume** | Freeze incoming network requests, console logs, and analytics streams on the fly to inspect active traffic without list jumping. |
 | 📊 **Analytics Tracker** | Tracks manual events and auto-patches `@react-native-firebase/analytics` calls (`logEvent`, `logScreenView`, `setUserProperties`, and `setUserId`). |
 | 🔄 **Redux State & Actions** | Connects to Redux / Redux Toolkit. Inspect dispatched actions with deep state diffs, payload breakdown, slice state trees, and `redux-persist` metadata. |
 | 📦 **Bundle Visualizer** | In-app JavaScript bundle size breakdown, Hermes engine bytecode metrics, visual package treemap, and integrated `react-native-bundle-visualizer` CLI. |
-| 🪟 **Rich JSON Viewer** | Explore data in **Pretty**, **Raw**, and **Table** modes with full-text search highlighting and uniform typography. |
-| 🛡️ **Error Boundary** | Built-in `ErrorBoundary` to gracefully catch and inspect React render crashes. |
+| 🛡️ **Error Boundary & Native Crash Catcher** | Built-in React `ErrorBoundary` and native exception/signal crash catcher emitting rich stack traces and device diagnostics. |
 
 ---
 
@@ -90,11 +95,11 @@ The package requires React (`>=18.0.0`) and React Native (`>=0.60.0`) as peer de
 
 ---
 
-## 🚀 Basic Setup
+## 🚀 Basic Setup (JavaScript & TypeScript)
 
-Mount `<NetworkInspector />` near the root of your application:
+Mount `<NetworkInspector />` near the root of your application (e.g. in `App.js` or `App.tsx`):
 
-```tsx
+```jsx
 import React from 'react';
 import {SafeAreaView} from 'react-native';
 import NetworkInspector from 'react-native-inapp-inspector';
@@ -117,7 +122,7 @@ When mounted, the inspector automatically sets up network logging, intercepts co
 
 If your application makes API calls before the root component finishes mounting, initialize the logger at the module level in your entry file (`index.js` or `App.tsx`):
 
-```tsx
+```javascript
 import NetworkInspector, {
   setupNetworkLogger,
   setupConsoleLogger,
@@ -127,16 +132,39 @@ setupNetworkLogger();
 setupConsoleLogger();
 ```
 
-### Toggling Visibility
+---
+
+## ⚡ Native Hardware & Memory Telemetry
 
-You can disable or hide the floating launcher overlay conditionally:
+Access native low-level device, battery, and memory metrics:
 
-```tsx
-// Fully disable the overlay and interception
-<NetworkInspector enabled={__DEV__} />
+```javascript
+import { 
+  getNativeDeviceMetrics, 
+  enableNativeCrashProtection, 
+  subscribeNativeCrashes 
+} from 'react-native-inapp-inspector';
 
-// Hide the floating trigger button while keeping background interception active
-<NetworkInspector isEnabled={false} />
+// Fetch hardware & memory metrics
+async function logStats() {
+  const metrics = await getNativeDeviceMetrics();
+  if (metrics) {
+    console.log('Model:', metrics.deviceModel, metrics.osVersion);
+    console.log('Total RAM:', (metrics.totalRAM / (1024 * 1024)).toFixed(0), 'MB');
+    console.log('Free RAM:', (metrics.freeRAM / (1024 * 1024)).toFixed(0), 'MB');
+    console.log('Native Heap:', (metrics.nativeHeapAllocated / (1024 * 1024)).toFixed(1), 'MB');
+    console.log('Free Storage:', (metrics.freeStorage / (1024 * 1024 * 1024)).toFixed(2), 'GB');
+    console.log('Battery:', `${metrics.batteryPercent}% (Charging: ${metrics.isCharging})`);
+  }
+}
+
+// Enable native crash protection
+enableNativeCrashProtection();
+
+// Subscribe to native crash events
+const unsubscribe = subscribeNativeCrashes((crash) => {
+  console.log('Native Exception:', crash.error, crash.stack);
+});
 ```
 
 ---
@@ -145,8 +173,8 @@ You can disable or hide the floating launcher overlay conditionally:
 
 The console logger provides deep insight into every `console.log`, `info`, `warn`, and `error` call:
 
-- **Metro Source Map Symbolication**: In development mode, stack traces are automatically symbolicated against Metro to point directly to your exact project source files (`HomeScreen.tsx:42:15`, `App.tsx:20`).
-- **File Type Badges**: Distinct visual chips identifying `.tsx`, `.jsx`, `.ts`, and `.js` callers.
+- **Metro Source Map Symbolication**: Stack traces are automatically symbolicated against Metro to point directly to your exact project source files (`HomeScreen.tsx:42:15`, `App.js:20`).
+- **Vector SVG Category Tags**: Clean vector icons for `[TEST]`, `[API]`, `[REDUX]`, `[ANALYTICS]`, `[AUTH]`, `[WARN]`, `[ERROR]` tags.
 - **Detailed Sub-Tabs**:
   - **Output / Message**: Full message with JSON Viewer (Pretty, Raw, Table modes) and link detection.
   - **Args (N)**: Inspect each passed argument individually with type detection (`Array[5]`, `Object{4}`).
@@ -154,18 +182,13 @@ The console logger provides deep insight into every `console.log`, `info`, `warn
   - **Error Stack**: Automatically captures the thrown Error stack trace when logging Error objects.
   - **Metadata**: Structured table of log properties, timestamp, character count, and duplicate counter.
 
-```tsx
-console.log('[API] User authenticated successfully', {userId: 42, role: 'admin'});
-console.error(new Error('Payment gateway timeout'));
-```
-
 ---
 
-## 🌐 Network Logging
+## 🌐 Network Logging & Latency Waterfall
 
 `setupNetworkLogger()` intercepts global `fetch`, the default Axios instance, and instances created with `axios.create()`.
 
-```tsx
+```javascript
 import axios from 'axios';
 import {setupNetworkLogger} from 'react-native-inapp-inspector';
 
@@ -177,13 +200,10 @@ await fetch('https://api.example.com/users');
 await api.post('/login', {email, password});
 ```
 
-If an Axios instance was instantiated before `setupNetworkLogger()` ran, attach interceptors manually:
-
-```tsx
-import {addAxiosInterceptors} from 'react-native-inapp-inspector';
-
-addAxiosInterceptors(api);
-```
+The APIs tab features:
+- **Telemetry Strip**: Real-time **Success Rate %**, **Avg Latency (ms)**, and **P95 Latency (ms)**.
+- **Timing Waterfall**: Color-coded latency progress bars on each request card and duration benchmarks in request details.
+- **cURL & Fetch Export**: Instant copyable commands for debugging in Postman, Charles, or Terminal.
 
 ---
 
@@ -191,18 +211,7 @@ addAxiosInterceptors(api);
 
 Connect your Redux store once during application startup:
 
-```tsx
-import {connectReduxStore} from 'react-native-inapp-inspector';
-import store from './store';
-
-connectReduxStore(store);
-```
-
-### RTK Query, Thunks & Sagas (Recommended)
-
-To capture actions dispatched from inside async thunks, sagas, or RTK Query, add `inspectorReduxMiddleware`:
-
-```tsx
+```javascript
 import {configureStore} from '@reduxjs/toolkit';
 import {inspectorReduxMiddleware, connectReduxStore} from 'react-native-inapp-inspector';
 import rootReducer from './slices';
@@ -216,42 +225,13 @@ const store = configureStore({
 connectReduxStore(store);
 ```
 
-The Redux tab provides:
-- **Action History**: Action type badge, timestamp, payload size, affected slices, deep state diffs, and snapshot viewer.
-- **Slice Tree**: Live state tree per slice, persisted slice detection (`_persist`), search filtering, and JSON table exploration.
-
----
-
-## 📊 Analytics Logging
-
-Log manual analytics events or connect Firebase Analytics:
-
-```tsx
-import {logAnalyticsEvent} from 'react-native-inapp-inspector';
-
-logAnalyticsEvent('purchase_completed', {
-  item_id: 'SKU-42',
-  value: 29.99,
-  currency: 'USD',
-});
-```
-
-### Firebase Analytics Integration
-
-```tsx
-import analytics from '@react-native-firebase/analytics';
-import {setupAnalyticsLogger} from 'react-native-inapp-inspector';
-
-setupAnalyticsLogger(analytics());
-```
-
 ---
 
 ## 🧭 Navigation & Screen Tracking
 
 To group network requests, logs, and analytics by the active screen, pass your navigation container ref:
 
-```tsx
+```jsx
 import {NavigationContainer, createNavigationContainerRef} from '@react-navigation/native';
 import NetworkInspector from 'react-native-inapp-inspector';
 
@@ -271,25 +251,13 @@ const App = () => {
 
 ---
 
-## 📦 Application Bundle Size & Asset Inspector
-
-The inspector includes a dedicated **Bundle** tab (placed right after Redux) with **5 specialized sub-tabs** to inspect and optimize bundle assets:
-
-1. 📊 **Overview & Treemap**: Real-time stacked visual ratio bar, total bundle size (`MB`), Hermes Bytecode engine detection, and category weight cards.
-2. 📁 **Files Explorer**: Searchable file-by-file footprint breakdown (`PNG`, `TSX`, `JS`, `TTF`, `JSON`) with lines, resolution, and optimization status.
-3. 📦 **Packages**: Node modules footprint audit (`react-native`, `@react-navigation`, `axios`, `react-native-svg`), version tags, and direct vs. transitive dependency analysis.
-4. 🖼️ **Media Auditor**: Dedicated asset compression analysis for images and custom fonts with potential WebP savings calculators.
-5. ⚡ **Optimizer Checklist**: Actionable best-practice tips for Hermes engine, selective path imports (tree-shaking), font subsetting, and screen lazy-loading.
-
----
-
 ## ⚙️ Settings Persistence
 
 Inspector preferences (dark mode, active modules, default landing tab) persist across app launches:
 - **iOS**: Uses React Native's built-in `Settings` module (`NSUserDefaults`) with zero extra configuration.
 - **Android / Custom Storage**: Pass `@react-native-async-storage/async-storage` or `react-native-mmkv` to the `storage` prop:
 
-```tsx
+```jsx
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 <NetworkInspector storage={AsyncStorage} />
@@ -297,18 +265,72 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 
 ---
 
-## 🛡️ Error Boundary
-
-Catch and inspect unhandled React component render crashes:
-
-```tsx
-import {ErrorBoundary} from 'react-native-inapp-inspector';
-
-<ErrorBoundary>
-  <YourApp />
-</ErrorBoundary>
+## 🏛️ Full Native Migration Guide (Native Core + JS Bridge API)
+
+If you wish to migrate the inspector's entire UI and data engine to **100% Native (Kotlin / Swift)** while keeping a seamless, zero-friction JavaScript API for React Native developers, follow this architectural roadmap:
+
+```mermaid
+flowchart TB
+    subgraph React Native / JavaScript Layer
+        JS_App[Host React Native App]
+        JS_Bridge[Thin TS API: setupNetworkLogger / connectRedux / NativeInspector]
+        JS_App -->|Logs, Redux, Analytics| JS_Bridge
+    end
+
+    subgraph Native iOS / Android Engine
+        Native_Store[(Native Circular Ring Buffer & SQLite Storage)]
+        Native_Overlay[100% Native Floating Overlay & Window]
+        Native_Modal[Native Inspector Modal: SwiftUI / Compose / UIKit]
+        Native_Network[Native OkHttp Interceptor & NSURLProtocol]
+
+        JS_Bridge <-->|JSI / TurboModules / Event Emitters| Native_Store
+        Native_Network -->|Direct Native Traffic| Native_Store
+        Native_Overlay -->|Taps & Gestures| Native_Modal
+        Native_Store -->|Instant 120 FPS Rendering| Native_Modal
+    end
 ```
 
+### Step-by-Step Migration Plan
+
+#### Step 1: Native Floating Overlay & Gesture Engine *(Completed)*
+- **iOS:** Floating `UIWindow` or root `UIView` subview at `UIWindowLevelAlert` with `UIPanGestureRecognizer` and edge-snapping physics on `[NSOperationQueue mainQueue]`.
+- **Android:** Custom `FrameLayout` attached to `activity.window.decorView` with hardware-accelerated `OnTouchListener` running on the Main Looper.
+- **Benefit:** 100% immune to JS thread stalls, instant 120 FPS drag response.
+
+#### Step 2: Native Full-Screen Inspector Modal
+- **iOS (UIKit / SwiftUI):**
+  - Create an `InspectorViewController` or SwiftUI `InspectorView`.
+  - When the floating icon is tapped, present it via `rootViewController.presentViewController:animated:completion:` directly on the native main thread.
+- **Android (Jetpack Compose / XML View):**
+  - Create an `InspectorBottomSheetDialogFragment` or full-screen `DialogFragment`.
+  - Present with `fragmentManager.beginTransaction()` from `currentActivity`.
+- **Benefit:** Searching 10,000+ network calls and expanding multi-megabyte JSON payloads occurs natively with virtualized lists and zero React re-render overhead.
+
+#### Step 3: Native Network Interception (OkHttp & NSURLProtocol)
+- **Android:** Add an `OkHttpInterceptor` into React Native's `OkHttpClientProvider.setOkHttpClientFactory` or custom client. Captures headers, byte streams, and timing without touching JavaScript `fetch` proxies.
+- **iOS:** Register a custom `NSURLProtocol` on `[NSURLSessionConfiguration defaultSessionConfiguration]` to intercept low-level iOS network traffic globally.
+- **Benefit:** Intercepts 3rd-party native SDK calls (Firebase, Stripe, AWS, Native Image loaders) in addition to JavaScript `fetch`/Axios requests.
+
+#### Step 4: High-Performance JSI / C++ Shared Store
+- Use React Native's **JSI (JavaScript Interface)** to share memory directly between C++/Kotlin/Swift and Hermes/JSC without JSON serialization over the legacy bridge.
+- Expose synchronous methods:
+  ```ts
+  // JSI Direct Memory Calls (0ms latency):
+  global.__InAppInspector_log(item);
+  global.__InAppInspector_getLogs();
+  ```
+
+#### Step 5: Preserve JavaScript Backwards Compatibility
+- Keep existing JS exports (`setupNetworkLogger`, `connectReduxStore`, `logAnalyticsEvent`, `<NetworkInspector />`).
+- The TS wrapper transparently forwards data into the native store:
+  ```ts
+  export const logAnalyticsEvent = (name: string, params?: Record<string, any>) => {
+    if (NativeModules.NetworkInspectorModule?.logEvent) {
+      NativeModules.NetworkInspectorModule.logEvent(name, params);
+    }
+  };
+  ```
+
 ---
 
 ## 📚 Public API Reference
@@ -316,6 +338,9 @@ import {ErrorBoundary} from 'react-native-inapp-inspector';
 | Export | Type | Description |
 | --- | --- | --- |
 | `NetworkInspector` | Component | Floating inspector overlay. Mount near app root. |
+| `getNativeDeviceMetrics()` | Function | Returns native RAM, heap, disk, battery, and hardware metrics. |
+| `enableNativeCrashProtection()` | Function | Enables native signal & uncaught exception protection. |
+| `subscribeNativeCrashes(cb)` | Function | Subscribes to native crash events. |
 | `setupNetworkLogger()` | Function | Patches `fetch`, default Axios, and future `axios.create()` instances. |
 | `addAxiosInterceptors(instance)` | Function | Manually attaches Axios interceptors to an existing instance. |
 | `clearNetworkLogs()` | Function | Clears captured network requests. |
@@ -325,14 +350,8 @@ import {ErrorBoundary} from 'react-native-inapp-inspector';
 | `subscribeConsoleLogs(cb)` | Function | Subscribes to console log updates. |
 | `connectReduxStore(store)` | Function | Connects a Redux store for state and action inspection. |
 | `inspectorReduxMiddleware` | Middleware | Redux middleware for capturing thunks, sagas, and RTK Query actions. |
-| `getReduxState()` | Function | Returns the current captured Redux state snapshot. |
-| `subscribeReduxState(cb)` | Function | Subscribes to Redux state changes. |
-| `getActionHistory()` | Function | Returns the history of dispatched Redux actions. |
-| `clearActionHistory()` | Function | Clears Redux action history. |
 | `setupAnalyticsLogger(instance)` | Function | Patches a Firebase Analytics instance. |
 | `logAnalyticsEvent(name, params?, userProps?)` | Function | Logs a manual analytics event. |
-| `clearAnalyticsEvents()` | Function | Clears captured analytics events. |
-| `subscribeAnalyticsEvents(cb)` | Function | Subscribes to analytics event updates. |
 | `ErrorBoundary` | Component | React error boundary component. |
 
 ---
@@ -346,6 +365,8 @@ cd example
 npm install
 cd ios && pod install && cd ..
 npm run ios
+# or
+npm run android
 ```
 
 ---
@@ -369,3 +390,4 @@ This library is a free, open-source utility maintained in spare time. If it save
 ## 📄 License
 
 MIT © [vengatmacuser](LICENSE)
+

package/android/build.gradle

@@ -1,14 +1,25 @@
 buildscript {
+    ext.kotlin_version = '1.9.22'
     repositories {
         google()
         mavenCentral()
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:8.0.2'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }
 
 apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+def isNewArchitectureEnabled() {
+    return project.hasProperty("newArchEnabled") && project.getProperty("newArchEnabled") == "true"
+}
+
+if (isNewArchitectureEnabled()) {
+    apply plugin: "com.facebook.react"
+}
 
 android {
     namespace "com.inappinspector"
@@ -18,7 +29,7 @@ android {
         minSdkVersion 21
         targetSdkVersion 34
         versionCode 1
-        versionName "1.1.25"
+        versionName "1.1.35"
     }
 
     lintOptions {
@@ -34,4 +45,5 @@ repositories {
 dependencies {
     //noinspection GradleDynamicVersion
     implementation 'com.facebook.react:react-native:+'
+    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
 }