react-native-inapp-inspector 1.0.18 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -40
- package/dist/commonjs/components/ReduxTreeView.d.ts +4 -0
- package/dist/commonjs/components/ReduxTreeView.js +35 -5
- package/dist/commonjs/constants/index.d.ts +1 -0
- package/dist/commonjs/constants/index.js +5 -1
- package/dist/commonjs/constants/version.d.ts +1 -0
- package/dist/commonjs/constants/version.js +6 -0
- package/dist/commonjs/customHooks/reduxLogger.js +9 -1
- package/dist/commonjs/index.js +488 -40
- package/dist/esm/components/ReduxTreeView.d.ts +4 -0
- package/dist/esm/components/ReduxTreeView.js +30 -4
- package/dist/esm/constants/index.d.ts +1 -0
- package/dist/esm/constants/index.js +3 -0
- package/dist/esm/constants/version.d.ts +1 -0
- package/dist/esm/constants/version.js +3 -0
- package/dist/esm/customHooks/reduxLogger.js +9 -1
- package/dist/esm/index.js +490 -42
- package/example/ios/example.xcodeproj/project.pbxproj +10 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
4
|
<picture>
|
|
5
|
-
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
|
|
6
5
|
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_light.svg">
|
|
7
|
-
<
|
|
6
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg">
|
|
7
|
+
<img alt="React Native In-App Inspector Banner" src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/banner_dark.svg" width="100%">
|
|
8
8
|
</picture>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
@@ -20,15 +20,15 @@ A self-contained in-app debugging overlay for React Native. Inspect network traf
|
|
|
20
20
|
|
|
21
21
|
## Features
|
|
22
22
|
|
|
23
|
-
| Feature
|
|
24
|
-
|
|
25
|
-
| Network inspector
|
|
26
|
-
| Insights dashboard | Shows request totals, status breakdowns, latency, payload size, slow requests, and recent activity charts.
|
|
27
|
-
| Console logger
|
|
28
|
-
| Analytics tracker
|
|
29
|
-
| Redux inspector
|
|
30
|
-
| WebView inspector
|
|
31
|
-
| Error boundary
|
|
23
|
+
| Feature | Description |
|
|
24
|
+
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
25
|
+
| 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. |
|
|
26
|
+
| Insights dashboard | Shows request totals, status breakdowns, latency, payload size, slow requests, and recent activity charts. |
|
|
27
|
+
| Console logger | Captures `console.log`, `console.info`, `console.warn`, and `console.error` with source method and caller details. |
|
|
28
|
+
| Analytics tracker | Captures manual analytics events and patched `@react-native-firebase/analytics` calls including `logEvent`, `logScreenView`, user properties, and user id. |
|
|
29
|
+
| Redux inspector | Connects to a Redux store, displays the live state tree, tracks dispatched actions, affected slices, and action history. |
|
|
30
|
+
| WebView inspector | Provides an instrumented `WebView` with console capture, navigation history, HTML/CSS/JS snapshots, and optional loading overlay. |
|
|
31
|
+
| Error boundary | Exports an `ErrorBoundary` for catching React errors and wrapping the inspector safely. |
|
|
32
32
|
|
|
33
33
|
---
|
|
34
34
|
|
|
@@ -90,7 +90,9 @@ When mounted, the inspector sets up network logging, clears previous network log
|
|
|
90
90
|
If you need to capture requests that happen before the component mounts, call `setupNetworkLogger()` at module level in your app entry file.
|
|
91
91
|
|
|
92
92
|
```tsx
|
|
93
|
-
import NetworkInspector, {
|
|
93
|
+
import NetworkInspector, {
|
|
94
|
+
setupNetworkLogger,
|
|
95
|
+
} from 'react-native-inapp-inspector';
|
|
94
96
|
|
|
95
97
|
setupNetworkLogger();
|
|
96
98
|
```
|
|
@@ -214,40 +216,40 @@ import {ErrorBoundary} from 'react-native-inapp-inspector';
|
|
|
214
216
|
|
|
215
217
|
<ErrorBoundary>
|
|
216
218
|
<YourComponent />
|
|
217
|
-
</ErrorBoundary
|
|
219
|
+
</ErrorBoundary>;
|
|
218
220
|
```
|
|
219
221
|
|
|
220
222
|
---
|
|
221
223
|
|
|
222
224
|
## Public API
|
|
223
225
|
|
|
224
|
-
| Export
|
|
225
|
-
|
|
226
|
-
| `NetworkInspector`
|
|
227
|
-
| `setupNetworkLogger()`
|
|
228
|
-
| `addAxiosInterceptors(instance)`
|
|
229
|
-
| `clearNetworkLogs()`
|
|
230
|
-
| `subscribeNetworkLogs(callback)`
|
|
231
|
-
| `setupConsoleLogger()`
|
|
232
|
-
| `clearConsoleLogs()`
|
|
233
|
-
| `subscribeConsoleLogs(callback)`
|
|
234
|
-
| `setupAnalyticsLogger(instance)`
|
|
235
|
-
| `logAnalyticsEvent(name, params?, userProperties?)` | function
|
|
236
|
-
| `clearAnalyticsEvents()`
|
|
237
|
-
| `subscribeAnalyticsEvents(callback)`
|
|
238
|
-
| `connectReduxStore(store)`
|
|
239
|
-
| `getReduxState()`
|
|
240
|
-
| `subscribeReduxState(callback)`
|
|
241
|
-
| `WebView`
|
|
242
|
-
| `getWebViewLogs()`
|
|
243
|
-
| `getWebViewNavHistory()`
|
|
244
|
-
| `getWebViewHtml()`
|
|
245
|
-
| `getWebViewCss()`
|
|
246
|
-
| `getWebViewJs()`
|
|
247
|
-
| `getWebViewHtmlUrl()`
|
|
248
|
-
| `clearWebViewData()`
|
|
249
|
-
| `subscribeWebView(callback)`
|
|
250
|
-
| `ErrorBoundary`
|
|
226
|
+
| Export | Type | Description |
|
|
227
|
+
| --------------------------------------------------- | ----------------- | -------------------------------------------------------------------------- |
|
|
228
|
+
| `NetworkInspector` | default component | Floating inspector overlay. Mount once near the root of the app. |
|
|
229
|
+
| `setupNetworkLogger()` | function | Patches `fetch`, default axios, and future `axios.create()` instances. |
|
|
230
|
+
| `addAxiosInterceptors(instance)` | function | Manually attaches axios interceptors to an existing instance. |
|
|
231
|
+
| `clearNetworkLogs()` | function | Clears captured network logs. |
|
|
232
|
+
| `subscribeNetworkLogs(callback)` | function | Subscribes to network log updates and returns an unsubscribe function. |
|
|
233
|
+
| `setupConsoleLogger()` | function | Patches console methods. |
|
|
234
|
+
| `clearConsoleLogs()` | function | Clears captured console logs. |
|
|
235
|
+
| `subscribeConsoleLogs(callback)` | function | Subscribes to console log updates and returns an unsubscribe function. |
|
|
236
|
+
| `setupAnalyticsLogger(instance)` | function | Patches a Firebase Analytics instance. |
|
|
237
|
+
| `logAnalyticsEvent(name, params?, userProperties?)` | function | Adds a manual analytics event to the inspector. |
|
|
238
|
+
| `clearAnalyticsEvents()` | function | Clears captured analytics events. |
|
|
239
|
+
| `subscribeAnalyticsEvents(callback)` | function | Subscribes to analytics event updates and returns an unsubscribe function. |
|
|
240
|
+
| `connectReduxStore(store)` | function | Connects a Redux store for live state and action inspection. |
|
|
241
|
+
| `getReduxState()` | function | Returns the latest captured Redux state. |
|
|
242
|
+
| `subscribeReduxState(callback)` | function | Subscribes to Redux state updates and returns an unsubscribe function. |
|
|
243
|
+
| `WebView` | component | Instrumented WebView wrapper. |
|
|
244
|
+
| `getWebViewLogs()` | function | Returns captured WebView console logs. |
|
|
245
|
+
| `getWebViewNavHistory()` | function | Returns captured WebView navigation history. |
|
|
246
|
+
| `getWebViewHtml()` | function | Returns the latest captured WebView HTML. |
|
|
247
|
+
| `getWebViewCss()` | function | Returns the latest captured WebView CSS. |
|
|
248
|
+
| `getWebViewJs()` | function | Returns the latest captured WebView JavaScript. |
|
|
249
|
+
| `getWebViewHtmlUrl()` | function | Returns the URL for the latest captured WebView source snapshot. |
|
|
250
|
+
| `clearWebViewData()` | function | Clears captured WebView logs, navigation, and source data. |
|
|
251
|
+
| `subscribeWebView(callback)` | function | Subscribes to WebView data changes and returns an unsubscribe function. |
|
|
252
|
+
| `ErrorBoundary` | component | React error boundary component. |
|
|
251
253
|
|
|
252
254
|
---
|
|
253
255
|
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
export declare const ReduxStoreIcon: ({ color, size, }: any) => React.JSX.Element;
|
|
3
|
+
export declare const ReduxBoltIcon: ({ color, size, }: any) => React.JSX.Element;
|
|
4
|
+
export declare const ReduxTimelineIcon: ({ color, size, }: any) => React.JSX.Element;
|
|
5
|
+
export declare const ReduxTreeIcon: ({ color, size, }: any) => React.JSX.Element;
|
|
2
6
|
export declare const ReduxTreeView: ({ state, lastActionMap, search, }: {
|
|
3
7
|
state: any;
|
|
4
8
|
lastActionMap: Record<string, any>;
|
|
@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
36
36
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
37
37
|
};
|
|
38
38
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
39
|
-
exports.ReduxActionTimeline = exports.ReduxTreeView = void 0;
|
|
39
|
+
exports.ReduxActionTimeline = exports.ReduxTreeView = exports.ReduxTreeIcon = exports.ReduxTimelineIcon = exports.ReduxBoltIcon = exports.ReduxStoreIcon = void 0;
|
|
40
40
|
const react_1 = __importStar(require("react"));
|
|
41
41
|
const react_native_1 = require("react-native");
|
|
42
42
|
const AppColors_1 = require("../styles/AppColors");
|
|
@@ -56,6 +56,30 @@ const BoltIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) =>
|
|
|
56
56
|
const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
57
57
|
<react_native_svg_1.Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
58
58
|
</react_native_svg_1.default>);
|
|
59
|
+
// Exported icons so the Redux tab's section headers and sub-tab buttons can
|
|
60
|
+
// render real vector icons instead of emoji (which fail to render on some
|
|
61
|
+
// Android/font setups).
|
|
62
|
+
const ReduxStoreIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
63
|
+
<react_native_svg_1.Path d="M3 9l1.5-5h15L21 9M3 9v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9M3 9h18M7 9v3a2 2 0 0 0 4 0V9m2 0v3a2 2 0 0 0 4 0V9" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
|
|
64
|
+
</react_native_svg_1.default>);
|
|
65
|
+
exports.ReduxStoreIcon = ReduxStoreIcon;
|
|
66
|
+
const ReduxBoltIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
67
|
+
<react_native_svg_1.Path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
|
68
|
+
</react_native_svg_1.default>);
|
|
69
|
+
exports.ReduxBoltIcon = ReduxBoltIcon;
|
|
70
|
+
// Action Timeline — a history/clock icon reads as "sequence over time".
|
|
71
|
+
const ReduxTimelineIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
72
|
+
<react_native_svg_1.Path d="M3 3v5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
73
|
+
<react_native_svg_1.Path d="M3.05 13A9 9 0 1 0 6 5.3L3 8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
74
|
+
<react_native_svg_1.Path d="M12 7v5l3 2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
75
|
+
</react_native_svg_1.default>);
|
|
76
|
+
exports.ReduxTimelineIcon = ReduxTimelineIcon;
|
|
77
|
+
// Store Tree — a node hierarchy icon reads as "nested tree structure".
|
|
78
|
+
const ReduxTreeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
|
|
79
|
+
<react_native_svg_1.Path d="M9 4h6v4H9zM3 16h6v4H3zm12 0h6v4h-6z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
80
|
+
<react_native_svg_1.Path d="M12 8v4M6 16v-2h12v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
81
|
+
</react_native_svg_1.default>);
|
|
82
|
+
exports.ReduxTreeIcon = ReduxTreeIcon;
|
|
59
83
|
const animateTreeLayout = () => {
|
|
60
84
|
react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
|
|
61
85
|
};
|
|
@@ -181,7 +205,10 @@ const ReduxTreeView = ({ state, lastActionMap, search, }) => {
|
|
|
181
205
|
setStoreExpanded(!storeExpanded);
|
|
182
206
|
}} style={styles.storeHeader}>
|
|
183
207
|
<AnimatedChevron color="#FFFFFF" expanded={storeExpanded} size={12} style={styles.chevronWrap}/>
|
|
184
|
-
<react_native_1.
|
|
208
|
+
<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
|
|
209
|
+
<exports.ReduxStoreIcon color="#FFFFFF" size={14}/>
|
|
210
|
+
<react_native_1.Text style={styles.storeTitle}>Redux Store</react_native_1.Text>
|
|
211
|
+
</react_native_1.View>
|
|
185
212
|
<react_native_1.View style={styles.badge}>
|
|
186
213
|
<react_native_1.Text style={styles.badgeText}>{reducers.length} Reducers</react_native_1.Text>
|
|
187
214
|
</react_native_1.View>
|
|
@@ -286,9 +313,12 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
|
|
|
286
313
|
});
|
|
287
314
|
return (<react_native_1.View style={timelineStyles.container}>
|
|
288
315
|
<react_native_1.View style={timelineStyles.headerRow}>
|
|
289
|
-
<react_native_1.
|
|
290
|
-
|
|
291
|
-
|
|
316
|
+
<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
|
|
317
|
+
<exports.ReduxBoltIcon color={AppColors_1.AppColors.purple} size={15}/>
|
|
318
|
+
<react_native_1.Text style={timelineStyles.headerTitle}>
|
|
319
|
+
Dispatched Actions ({filteredHistory.length})
|
|
320
|
+
</react_native_1.Text>
|
|
321
|
+
</react_native_1.View>
|
|
292
322
|
{history.length > 0 && (<react_native_1.Pressable onPress={onClear} style={timelineStyles.clearBtn}>
|
|
293
323
|
<react_native_1.Text style={timelineStyles.clearBtnText}>Clear Log</react_native_1.Text>
|
|
294
324
|
</react_native_1.Pressable>)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.DURATION_SLOW_MS = exports.DURATION_FAST_MS = exports.DOMAIN_COLORS = exports.METHOD_COLORS = exports.STATUS_FILTERS = void 0;
|
|
3
|
+
exports.LIB_VERSION = exports.DURATION_SLOW_MS = exports.DURATION_FAST_MS = exports.DOMAIN_COLORS = exports.METHOD_COLORS = exports.STATUS_FILTERS = void 0;
|
|
4
4
|
// Styles
|
|
5
5
|
const AppColors_1 = require("../styles/AppColors");
|
|
6
6
|
exports.STATUS_FILTERS = [
|
|
@@ -33,3 +33,7 @@ exports.DOMAIN_COLORS = [
|
|
|
33
33
|
];
|
|
34
34
|
exports.DURATION_FAST_MS = 200;
|
|
35
35
|
exports.DURATION_SLOW_MS = 800;
|
|
36
|
+
// Package version — auto-generated from package.json at build time.
|
|
37
|
+
// See scripts/gen-version.js (wired to the "prebuild" npm script).
|
|
38
|
+
var version_1 = require("./version");
|
|
39
|
+
Object.defineProperty(exports, "LIB_VERSION", { enumerable: true, get: function () { return version_1.LIB_VERSION; } });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const LIB_VERSION = "1.1.1";
|
|
@@ -41,7 +41,9 @@ const subscribeReduxState = (cb) => {
|
|
|
41
41
|
};
|
|
42
42
|
exports.subscribeReduxState = subscribeReduxState;
|
|
43
43
|
const connectReduxStore = (store) => {
|
|
44
|
-
if (!store ||
|
|
44
|
+
if (!store ||
|
|
45
|
+
typeof store.getState !== 'function' ||
|
|
46
|
+
typeof store.subscribe !== 'function') {
|
|
45
47
|
console.warn('[NetworkInspector] Invalid Redux store passed to connectReduxStore.');
|
|
46
48
|
return;
|
|
47
49
|
}
|
|
@@ -84,8 +86,14 @@ const connectReduxStore = (store) => {
|
|
|
84
86
|
}
|
|
85
87
|
}
|
|
86
88
|
if (globalReduxAutoRefresh) {
|
|
89
|
+
// Refresh the displayed state tree snapshot.
|
|
87
90
|
(0, exports.setReduxState)(nextState);
|
|
88
91
|
}
|
|
92
|
+
else {
|
|
93
|
+
// Tree is paused, but the action timeline / last-action map still changed,
|
|
94
|
+
// so notify subscribers to re-render those without moving the tree snapshot.
|
|
95
|
+
listeners.forEach(cb => cb());
|
|
96
|
+
}
|
|
89
97
|
return result;
|
|
90
98
|
};
|
|
91
99
|
(0, exports.setReduxState)(store.getState());
|