react-native-inapp-inspector 1.0.13 → 1.0.15

package/README.md

@@ -8,66 +8,75 @@
   </picture>
 </p>
 
-A premium, self-contained, and interactive in-app debugger for React Native applications. Inspect network requests, console logs, analytics events, and WebView states directly from your device.
+<p align="center">
+  <a href="https://www.npmjs.com/package/react-native-inapp-inspector"><img src="https://img.shields.io/npm/v/react-native-inapp-inspector?color=6366f1&label=npm" alt="npm version" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-green" alt="license" /></a>
+  <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/badge/platform-iOS%20%7C%20Android-blue" alt="platform" /></a>
+</p>
+
+A self-contained in-app debugging overlay for React Native. Inspect network traffic, console output, analytics events, Redux state, and WebView activity directly inside your app.
+
+---
 
 ## Features
 
-- **🌐 Network Inspector**: Intercept and view HTTP requests and responses, track latency, export as cURL or Fetch, search logs, and view differences between subsequent requests.
-- **💻 Console Logger**: In-app terminal displaying your `console.log`, `console.warn`, and `console.error` logs with customizable filters.
-- **📊 Analytics Event Tracker**: Real-time logging and analytics debugging (e.g. Firebase Analytics, GA events).
-- **🕸️ WebView Inspector**: Live tracking of navigation history, console logs, and inspection of HTML, CSS, and JS inside your `WebView` components.
-- **📈 Embedded Visualizations**: Built-in mini charts visualizing metrics like latency, payload size, and errors over time.
-- **🎨 Modern Dark UI**: Sleek, glassmorphism-inspired dark design with smooth micro-animations.
+| Feature | Description |
+|---|---|
+| Network inspector | Captures `fetch` and axios `GET`, `POST`, `PUT`, `PATCH`, and `DELETE` calls with URL, method, status, headers, body, response, duration, caller, cURL, and fetch snippets. |
+| Insights dashboard | Shows request totals, status breakdowns, latency, payload size, slow requests, and recent activity charts. |
+| Console logger | Captures `console.log`, `console.info`, `console.warn`, and `console.error` with source method and caller details. |
+| Analytics tracker | Captures manual analytics events and patched `@react-native-firebase/analytics` calls including `logEvent`, `logScreenView`, user properties, and user id. |
+| Redux inspector | Connects to a Redux store, displays the live state tree, tracks dispatched actions, affected slices, and action history. |
+| WebView inspector | Provides an instrumented `WebView` with console capture, navigation history, HTML/CSS/JS snapshots, and optional loading overlay. |
+| Error boundary | Exports an `ErrorBoundary` for catching React errors and wrapping the inspector safely. |
 
 ---
 
 ## Video Walkthrough
 
-Watch the library in action, demonstrating network inspection, Redux state tree analysis, WebView debugging, and console logging:
-
-[🎬 Download or watch the Video Walkthrough](https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/example/guidance/Video-WalkThrough.mp4)
+[Download or watch the Video Walkthrough](https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/example/guidance/Video-WalkThrough.mp4)
 
 ---
 
 ## Installation
 
-Install the package as a development dependency in your React Native project:
+```bash
+npm install --save-dev react-native-inapp-inspector axios
+```
 
 ```bash
-npm install --save-dev react-native-inapp-inspector
-# OR
-yarn add -D react-native-inapp-inspector
+yarn add -D react-native-inapp-inspector axios
 ```
 
-The package will automatically install its dependencies (`@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`).
+The package has React and React Native as peer dependencies. It depends on `@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`. The current network logger imports `axios` for axios interception, so install `axios` even if most of your requests use `fetch`.
+
+Install optional integrations when you use WebView or Firebase Analytics capture:
 
-For iOS projects, don't forget to run pod install:
 ```bash
-cd ios && pod install
+npm install react-native-webview @react-native-firebase/analytics
 ```
 
-### Dependency Isolation
+For iOS, install pods after adding native dependencies:
 
-This package is designed to operate in strict isolation. If the host application already uses `@react-navigation/native`, `react-native-linear-gradient`, or `react-native-svg`, the package's dependencies will not conflict with the application's runtime. The bundler (Metro/Webpack) and autolink systems automatically resolve duplicate native module links without affecting your main application environment.
+```bash
+cd ios && pod install
+```
 
 ---
 
-## Integration
+## Basic Setup
 
-### 1. Embed the Inspector Component
-Place the `<NetworkInspector />` component at the root level of your application (usually in `App.tsx` or your root navigation container):
+Mount the inspector once near the root of your app.
 
 ```tsx
 import React from 'react';
-import { SafeAreaView } from 'react-native';
+import {SafeAreaView} from 'react-native';
 import NetworkInspector from 'react-native-inapp-inspector';
 
 const App = () => {
   return (
-    <SafeAreaView style={{ flex: 1 }}>
-      {/* Your application components */}
-      
-      {/* Floating Inspector overlay */}
+    <SafeAreaView style={{flex: 1}}>
+      {/* Your app */}
       <NetworkInspector />
     </SafeAreaView>
   );
@@ -76,38 +85,188 @@ const App = () => {
 export default App;
 ```
 
-### 2. Auto-Intercept Network Requests (Axios / Fetch)
-The library automatically intercepts standard `fetch` and `XMLHttpRequest` requests when loaded. If you are using `axios`, you can register it to intercept requests:
+When mounted, the inspector sets up network logging, clears previous network logs, patches console logging, and attempts Firebase Analytics auto-setup if `@react-native-firebase/analytics` is installed.
+
+If you need to capture requests that happen before the component mounts, call `setupNetworkLogger()` at module level in your app entry file.
+
+```tsx
+import NetworkInspector, {setupNetworkLogger} from 'react-native-inapp-inspector';
+
+setupNetworkLogger();
+```
+
+You can disable the overlay without removing it from your tree:
+
+```tsx
+<NetworkInspector enabled={false} />
+```
+
+---
 
-```typescript
+## Network Logging
+
+`setupNetworkLogger()` patches global `fetch`, the default axios instance, and future axios instances created with `axios.create()`.
+
+```tsx
 import axios from 'axios';
-import { addAxiosInterceptors } from 'react-native-inapp-inspector';
+import {setupNetworkLogger} from 'react-native-inapp-inspector';
 
-const api = axios.create({
-  baseURL: 'https://api.example.com',
-});
+setupNetworkLogger();
+
+const api = axios.create({baseURL: 'https://api.example.com'});
+
+await fetch('https://api.example.com/users');
+await api.post('/login', {email, password});
+```
+
+If an axios instance was created before `setupNetworkLogger()` ran, attach interceptors manually:
+
+```tsx
+import {addAxiosInterceptors} from 'react-native-inapp-inspector';
 
-// Register the interceptor
 addAxiosInterceptors(api);
 ```
 
-### 3. Log Analytics Events
-Subscribe to and log custom analytics events:
+Network logs are capped at 100 entries and ignore React Native symbolication requests.
+
+---
 
-```typescript
-import { subscribeAnalyticsEvents } from 'react-native-inapp-inspector';
+## Console Logging
 
-// Log your custom events
-subscribeAnalyticsEvents((events) => {
-  // Access and analyze logged events
+The inspector captures console output automatically when mounted. You can also set it up manually:
+
+```tsx
+import {setupConsoleLogger} from 'react-native-inapp-inspector';
+
+setupConsoleLogger();
+```
+
+Captured levels are `log`, `info`, `warn`, and `error`.
+
+---
+
+## Analytics Logging
+
+Manual events can be pushed into the Analytics tab:
+
+```tsx
+import {logAnalyticsEvent} from 'react-native-inapp-inspector';
+
+logAnalyticsEvent('purchase_completed', {
+  item_id: 'SKU-42',
+  value: 29.99,
+  currency: 'USD',
 });
 ```
 
+For Firebase Analytics, pass the result of `analytics()` to `setupAnalyticsLogger()` before analytics calls begin:
+
+```tsx
+import analytics from '@react-native-firebase/analytics';
+import {setupAnalyticsLogger} from 'react-native-inapp-inspector';
+
+setupAnalyticsLogger(analytics());
+```
+
+The logger patches `logEvent`, `logScreenView`, `setUserProperty`, `setUserProperties`, and `setUserId`. Analytics events are capped at 200 entries.
+
+---
+
+## Redux Inspection
+
+Connect your Redux store once during app startup.
+
+```tsx
+import {connectReduxStore} from 'react-native-inapp-inspector';
+import store from './store';
+
+connectReduxStore(store);
+```
+
+The Redux tab shows the latest state tree, recent dispatches, payloads, and changed top-level state slices. Action history is capped at 50 entries.
+
+---
+
+## WebView Inspection
+
+Use the exported `WebView` as a drop-in wrapper around `react-native-webview`.
+
+```tsx
+import {WebView} from 'react-native-inapp-inspector';
+
+<WebView source={{uri: 'https://example.com'}} />;
+```
+
+The wrapper forwards your props and ref, preserves your `onMessage`, `onNavigationStateChange`, `onLoadStart`, and `onLoadEnd` handlers, and injects scripts for WebView console logs, navigation history, and source snapshots.
+
+Disable the loading overlay with `showLoader={false}`:
+
+```tsx
+<WebView source={{uri: 'https://example.com'}} showLoader={false} />
+```
+
+---
+
+## Error Boundary
+
+```tsx
+import {ErrorBoundary} from 'react-native-inapp-inspector';
+
+<ErrorBoundary>
+  <YourComponent />
+</ErrorBoundary>
+```
+
+---
+
+## Public API
+
+| Export | Type | Description |
+|---|---|---|
+| `NetworkInspector` | default component | Floating inspector overlay. Mount once near the root of the app. |
+| `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 logs. |
+| `subscribeNetworkLogs(callback)` | function | Subscribes to network log updates and returns an unsubscribe function. |
+| `setupConsoleLogger()` | function | Patches console methods. |
+| `clearConsoleLogs()` | function | Clears captured console logs. |
+| `subscribeConsoleLogs(callback)` | function | Subscribes to console log updates and returns an unsubscribe function. |
+| `setupAnalyticsLogger(instance)` | function | Patches a Firebase Analytics instance. |
+| `logAnalyticsEvent(name, params?, userProperties?)` | function | Adds a manual analytics event to the inspector. |
+| `clearAnalyticsEvents()` | function | Clears captured analytics events. |
+| `subscribeAnalyticsEvents(callback)` | function | Subscribes to analytics event updates and returns an unsubscribe function. |
+| `connectReduxStore(store)` | function | Connects a Redux store for live state and action inspection. |
+| `getReduxState()` | function | Returns the latest captured Redux state. |
+| `subscribeReduxState(callback)` | function | Subscribes to Redux state updates and returns an unsubscribe function. |
+| `WebView` | component | Instrumented WebView wrapper. |
+| `getWebViewLogs()` | function | Returns captured WebView console logs. |
+| `getWebViewNavHistory()` | function | Returns captured WebView navigation history. |
+| `getWebViewHtml()` | function | Returns the latest captured WebView HTML. |
+| `getWebViewCss()` | function | Returns the latest captured WebView CSS. |
+| `getWebViewJs()` | function | Returns the latest captured WebView JavaScript. |
+| `getWebViewHtmlUrl()` | function | Returns the URL for the latest captured WebView source snapshot. |
+| `clearWebViewData()` | function | Clears captured WebView logs, navigation, and source data. |
+| `subscribeWebView(callback)` | function | Subscribes to WebView data changes and returns an unsubscribe function. |
+| `ErrorBoundary` | component | React error boundary component. |
+
+---
+
+## Example App
+
+The `example` directory contains a React Native sample app and video walkthrough.
+
+```bash
+cd example
+npm install
+cd ios && pod install && cd ..
+npm run ios
+```
+
 ---
 
 ## Support
 
-If you find this project useful, consider sponsoring its development on GitHub Sponsors:
+If you find this project useful, consider sponsoring its development:
 
 [![GitHub Sponsors](https://img.shields.io/badge/Sponsor-@vengatmacuser-ea4aaa?logo=githubsponsors&logoColor=white)](https://github.com/sponsors/vengatmacuser)
 
@@ -115,4 +274,4 @@ If you find this project useful, consider sponsoring its development on GitHub S
 
 ## License
 
-This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+MIT - see the [LICENSE](LICENSE) file for details.

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

@@ -19,3 +19,4 @@ export declare const logAnalyticsEvent: (name: string, params?: Record<string, a
  *   setupAnalyticsLogger(analytics());
  */
 export declare const setupAnalyticsLogger: (analyticsInstance: any) => void;
+export declare const autoSetupAnalyticsLogger: () => boolean;

package/dist/commonjs/customHooks/analyticsLogger.js

@@ -22,7 +22,7 @@
 //   setUserId(id)
 // ─────────────────────────────────────────────────────────────────────────────
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setupAnalyticsLogger = exports.logAnalyticsEvent = exports.getAnalyticsEvents = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = void 0;
+exports.autoSetupAnalyticsLogger = exports.setupAnalyticsLogger = exports.logAnalyticsEvent = exports.getAnalyticsEvents = exports.clearAnalyticsEvents = exports.subscribeAnalyticsEvents = void 0;
 // ─── Internal state ───────────────────────────────────────────────────────────
 let events = [];
 let listeners = [];
@@ -33,7 +33,7 @@ let currentUserId;
 // ─── Core helpers ─────────────────────────────────────────────────────────────
 const notify = () => {
     const snapshot = [...events];
-    listeners.forEach((cb) => cb(snapshot));
+    listeners.forEach(cb => cb(snapshot));
 };
 const addEvent = (event) => {
     events.unshift(event);
@@ -45,7 +45,7 @@ const subscribeAnalyticsEvents = (callback) => {
     listeners.push(callback);
     callback([...events]);
     return () => {
-        listeners = listeners.filter((l) => l !== callback);
+        listeners = listeners.filter(l => l !== callback);
     };
 };
 exports.subscribeAnalyticsEvents = subscribeAnalyticsEvents;
@@ -68,10 +68,10 @@ const logAnalyticsEvent = (name, params = {}, userProperties = {}) => {
         params,
         userProperties: { ...currentUserProperties, ...userProperties },
         timestamp: Date.now(),
-        source: "manual",
-        userId: currentUserId ?? "",
-        screenName: "",
-        screenClass: "",
+        source: 'manual',
+        userId: currentUserId ?? '',
+        screenName: '',
+        screenClass: '',
     });
 };
 exports.logAnalyticsEvent = logAnalyticsEvent;
@@ -89,7 +89,7 @@ exports.logAnalyticsEvent = logAnalyticsEvent;
  */
 const setupAnalyticsLogger = (analyticsInstance) => {
     if (!analyticsInstance) {
-        console.warn("[AnalyticsLogger] No analytics instance provided — skipping setup.");
+        console.warn('[AnalyticsLogger] No analytics instance provided — skipping setup.');
         return;
     }
     // Guard against double-patching the same instance
@@ -105,10 +105,10 @@ const setupAnalyticsLogger = (analyticsInstance) => {
             params: params ?? {},
             userProperties: { ...currentUserProperties },
             timestamp: Date.now(),
-            source: "firebase",
-            userId: currentUserId ?? "",
-            screenName: "",
-            screenClass: "",
+            source: 'firebase',
+            userId: currentUserId ?? '',
+            screenName: '',
+            screenClass: '',
         });
         return originalLogEvent(name, params);
     };
@@ -117,14 +117,14 @@ const setupAnalyticsLogger = (analyticsInstance) => {
     analyticsInstance.logScreenView = async (params) => {
         addEvent({
             id: counter++,
-            name: "screen_view",
+            name: 'screen_view',
             params: params ?? {},
             userProperties: { ...currentUserProperties },
             timestamp: Date.now(),
-            source: "firebase",
-            screenName: params?.screen_name ?? "",
-            screenClass: params?.screen_class ?? "",
-            userId: currentUserId ?? "",
+            source: 'firebase',
+            screenName: params?.screen_name ?? '',
+            screenClass: params?.screen_class ?? '',
+            userId: currentUserId ?? '',
         });
         return originalLogScreenView(params);
     };
@@ -158,3 +158,43 @@ const setupAnalyticsLogger = (analyticsInstance) => {
     };
 };
 exports.setupAnalyticsLogger = setupAnalyticsLogger;
+const autoSetupAnalyticsLogger = () => {
+    if (globalThis.__INSPECTOR_ANALYTICS_AUTOSETUP__)
+        return true;
+    let mod;
+    try {
+        mod = require('@react-native-firebase/analytics'); // optional dep
+    }
+    catch {
+        return false; // GA not installed — silent no-op
+    }
+    const accessor = mod?.default ?? mod;
+    if (typeof accessor !== 'function')
+        return false;
+    try {
+        (0, exports.setupAnalyticsLogger)(accessor());
+    }
+    catch { } // patch default-app instance
+    if (!accessor.__INSPECTOR_WRAPPED__) {
+        // patch future/named instances
+        const wrapped = function (...args) {
+            const instance = accessor.apply(this, args);
+            try {
+                (0, exports.setupAnalyticsLogger)(instance);
+            }
+            catch { }
+            return instance;
+        };
+        Object.setPrototypeOf(wrapped, accessor);
+        Object.assign(wrapped, accessor);
+        wrapped.__INSPECTOR_WRAPPED__ = true;
+        try {
+            if (mod.default !== undefined)
+                mod.default = wrapped;
+        }
+        catch { }
+    }
+    globalThis.__INSPECTOR_ANALYTICS_AUTOSETUP__ = true;
+    return true;
+};
+exports.autoSetupAnalyticsLogger = autoSetupAnalyticsLogger;

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

@@ -1,4 +1,4 @@
-import './webViewLogger';
+import "./webViewLogger";
 type NetworkLog = {
     id: number;
     url: string;