react-native-inapp-inspector 1.0.3 → 1.0.5

package/dist/esm/customHooks/webViewLogger.js

@@ -1,270 +1,305 @@
-import React, { forwardRef } from 'react';
-// Intercept react-native-webview exports to capture console logs and URL navigation changes globally
+import React, { forwardRef, useState } from 'react';
+import { View, ActivityIndicator, StyleSheet } from 'react-native';
+let OriginalWebView = null;
 try {
     const RNWebView = require('react-native-webview');
-    const OriginalWebView = RNWebView.WebView || RNWebView.default;
-    if (OriginalWebView) {
-        const injectJS = `
-        (function() {
-            if (!window.__webview_console_overridden__) {
-            window.__webview_console_overridden__ = true;
-            var originalLog = console.log;
-            var originalWarn = console.warn;
-            var originalError = console.error;
-            var originalInfo = console.info;
-
-            var sendToRN = function(type, args) {
-                if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
-                var messageStr = '';
-                try {
-                    var argsList = [];
-                    for (var i = 0; i < args.length; i++) {
-                    var arg = args[i];
-                    if (typeof arg === 'object') {
-                        try {
-                        argsList.push(JSON.stringify(arg));
-                        } catch (e) {
-                        argsList.push(String(arg));
-                        }
-                    } else {
-                        argsList.push(String(arg));
-                    }
-                    }
-                    messageStr = argsList.join(' ');
-                } catch (err) {
-                    messageStr = String(args);
-                }
+    OriginalWebView = RNWebView.WebView || RNWebView.default;
+}
+catch (e) {
+    // Silent fail
+}
+const injectJS = `
+(function() {
+    if (!window.__webview_console_overridden__) {
+    window.__webview_console_overridden__ = true;
+    var originalLog = console.log;
+    var originalWarn = console.warn;
+    var originalError = console.error;
+    var originalInfo = console.info;
 
+    var sendToRN = function(type, args) {
+        if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+        var messageStr = '';
+        try {
+            var argsList = [];
+            for (var i = 0; i < args.length; i++) {
+            var arg = args[i];
+            if (typeof arg === 'object') {
                 try {
-                    window.ReactNativeWebView.postMessage(JSON.stringify({
-                    type: 'webview-log',
-                    logType: type,
-                    message: messageStr
-                    }));
-                } catch (postErr) {}
-                }
-            };
-
-            console.log = function() {
-                if (originalLog) {
-                originalLog.apply(console, arguments);
-                }
-                sendToRN('log', arguments);
-            };
-            console.warn = function() {
-                if (originalWarn) {
-                originalWarn.apply(console, arguments);
-                }
-                sendToRN('warn', arguments);
-            };
-            console.error = function() {
-                if (originalError) {
-                originalError.apply(console, arguments);
+                argsList.push(JSON.stringify(arg));
+                } catch (e) {
+                argsList.push(String(arg));
                 }
-                sendToRN('error', arguments);
-            };
-            console.info = function() {
-                if (originalInfo) {
-                originalInfo.apply(console, arguments);
-                }
-                sendToRN('info', arguments);
-            };
+            } else {
+                argsList.push(String(arg));
+            }
             }
+            messageStr = argsList.join(' ');
+        } catch (err) {
+            messageStr = String(args);
+        }
 
-            if (!window.__webview_html_capture_setup__) {
-            window.__webview_html_capture_setup__ = true;
+        try {
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+            type: 'webview-log',
+            logType: type,
+            message: messageStr
+            }));
+        } catch (postErr) {}
+        }
+    };
 
-            var sendHtmlRetries = 0;
-            window.__webview_send_html__ = function() {
-                if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
-                try {
-                    var html = '';
-                    try {
-                    if (document && document.documentElement) {
-                        html = document.documentElement.outerHTML || '';
-                    }
-                    } catch (e) {}
+    console.log = function() {
+        if (originalLog) {
+        originalLog.apply(console, arguments);
+        }
+        sendToRN('log', arguments);
+    };
+    console.warn = function() {
+        if (originalWarn) {
+        originalWarn.apply(console, arguments);
+        }
+        sendToRN('warn', arguments);
+    };
+    console.error = function() {
+        if (originalError) {
+        originalError.apply(console, arguments);
+        }
+        sendToRN('error', arguments);
+    };
+    console.info = function() {
+        if (originalInfo) {
+        originalInfo.apply(console, arguments);
+        }
+        sendToRN('info', arguments);
+    };
+    }
 
-                    // Get CSS
-                    var css = '';
-                    try {
-                    var sheets = document.styleSheets;
-                    if (sheets) {
-                        for (var i = 0; i < sheets.length; i++) {
-                        var sheet = sheets[i];
-                        try {
-                            var rules = sheet.cssRules || sheet.rules;
-                            if (rules) {
-                            for (var j = 0; j < rules.length; j++) {
-                                css += rules[j].cssText + String.fromCharCode(10);
-                            }
-                            }
-                        } catch (e) {
-                            if (sheet.href) {
-                            css += '/* External stylesheet: ' + sheet.href + ' */' + String.fromCharCode(10);
-                            }
-                        }
-                        }
-                    }
-                    } catch (e) {}
+    if (!window.__webview_html_capture_setup__) {
+    window.__webview_html_capture_setup__ = true;
 
-                    try {
-                    var styles = document.querySelectorAll('style');
-                    if (styles) {
-                        for (var i = 0; i < styles.length; i++) {
-                        var style = styles[i];
-                        if (style && style.textContent) {
-                            if (css.indexOf(style.textContent) === -1) {
-                            css += style.textContent + String.fromCharCode(10);
-                            }
-                        }
-                        }
-                    }
-                    } catch (e) {}
+    var sendHtmlRetries = 0;
+    window.__webview_send_html__ = function() {
+        if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
+        try {
+            var html = '';
+            try {
+            if (document && document.documentElement) {
+                html = document.documentElement.outerHTML || '';
+            }
+            } catch (e) {}
 
-                    // Get JS
-                    var js = '';
-                    try {
-                    var scripts = document.querySelectorAll('script');
-                    if (scripts) {
-                        for (var i = 0; i < scripts.length; i++) {
-                        var script = scripts[i];
-                        if (script) {
-                            if (script.src) {
-                            js += '// External Script: ' + script.src + String.fromCharCode(10);
-                            } else if (script.textContent) {
-                            js += script.textContent + String.fromCharCode(10);
-                            }
-                        }
-                        }
+            // Get CSS
+            var css = '';
+            try {
+            var sheets = document.styleSheets;
+            if (sheets) {
+                for (var i = 0; i < sheets.length; i++) {
+                var sheet = sheets[i];
+                try {
+                    var rules = sheet.cssRules || sheet.rules;
+                    if (rules) {
+                    for (var j = 0; j < rules.length; j++) {
+                        css += rules[j].cssText + String.fromCharCode(10);
                     }
-                    } catch (e) {}
-
-                    try {
-                    window.ReactNativeWebView.postMessage(JSON.stringify({
-                        type: 'webview-html',
-                        html: html,
-                        css: css,
-                        js: js,
-                        url: window.location.href
-                    }));
-                    } catch (postError) {
-                    try {
-                        window.ReactNativeWebView.postMessage(JSON.stringify({
-                        type: 'webview-html',
-                        html: html,
-                        css: '/* CSS truncated due to size limit */',
-                        js: '/* JS truncated due to size limit */',
-                        url: window.location.href
-                        }));
-                    } catch (htmlOnlyError) {
-                        window.ReactNativeWebView.postMessage(JSON.stringify({
-                        type: 'webview-html',
-                        html: '<h1>Page source too large to capture</h1>',
-                        url: window.location.href
-                        }));
                     }
+                } catch (e) {
+                    if (sheet.href) {
+                    css += '/* External stylesheet: ' + sheet.href + ' */' + String.fromCharCode(10);
                     }
-                } catch (err) {}
-                } else if (sendHtmlRetries < 50) {
-                sendHtmlRetries++;
-                setTimeout(window.__webview_send_html__, 100);
                 }
-            };
-
-            var debounceTimeout = null;
-            window.__webview_debounced_send_html__ = function() {
-                if (debounceTimeout) {
-                clearTimeout(debounceTimeout);
                 }
-                debounceTimeout = setTimeout(window.__webview_send_html__, 500);
-            };
+            }
+            } catch (e) {}
 
-            // Setup MutationObserver for SPAs
             try {
-                var observer = new MutationObserver(function() {
-                window.__webview_debounced_send_html__();
-                });
-                observer.observe(document.documentElement, {
-                attributes: true,
-                childList: true,
-                subtree: true
-                });
+            var styles = document.querySelectorAll('style');
+            if (styles) {
+                for (var i = 0; i < styles.length; i++) {
+                var style = styles[i];
+                if (style && style.textContent) {
+                    if (css.indexOf(style.textContent) === -1) {
+                    css += style.textContent + String.fromCharCode(10);
+                    }
+                }
+                }
+            }
             } catch (e) {}
 
-            // Setup SPA router state changes
+            // Get JS
+            var js = '';
             try {
-                var originalPushState = history.pushState;
-                history.pushState = function() {
-                originalPushState.apply(this, arguments);
-                window.__webview_debounced_send_html__();
-                };
-                var originalReplaceState = history.replaceState;
-                history.replaceState = function() {
-                originalReplaceState.apply(this, arguments);
-                window.__webview_debounced_send_html__();
-                };
-                window.addEventListener('popstate', window.__webview_debounced_send_html__);
-                window.addEventListener('hashchange', window.__webview_debounced_send_html__);
+            var scripts = document.querySelectorAll('script');
+            if (scripts) {
+                for (var i = 0; i < scripts.length; i++) {
+                var script = scripts[i];
+                if (script) {
+                    if (script.src) {
+                    js += '// External Script: ' + script.src + String.fromCharCode(10);
+                    } else if (script.textContent) {
+                    js += script.textContent + String.fromCharCode(10);
+                    }
+                }
+                }
+            }
             } catch (e) {}
 
-            window.addEventListener('DOMContentLoaded', window.__webview_send_html__);
-            window.addEventListener('load', window.__webview_send_html__);
-            if (document.readyState === 'interactive' || document.readyState === 'complete') {
-                window.__webview_send_html__();
-            }
-            } else {
-            if (window.__webview_send_html__) {
-                window.__webview_send_html__();
+            try {
+            window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: 'webview-html',
+                html: html,
+                css: css,
+                js: js,
+                url: window.location.href
+            }));
+            } catch (postError) {
+            try {
+                window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: 'webview-html',
+                html: html,
+                css: '/* CSS truncated due to size limit */',
+                js: '/* JS truncated due to size limit */',
+                url: window.location.href
+                }));
+            } catch (htmlOnlyError) {
+                window.ReactNativeWebView.postMessage(JSON.stringify({
+                type: 'webview-html',
+                html: '<h1>Page source too large to capture</h1>',
+                url: window.location.href
+                }));
             }
             }
-        })();
-        true;
-        `;
-        const InterceptedWebView = forwardRef((props, ref) => {
-            const handleMessage = (event) => {
-                try {
-                    const data = JSON.parse(event.nativeEvent.data);
-                    if (data.type === 'webview-log') {
-                        addWebViewLog(data.logType, data.message);
-                    }
-                    else if (data.type === 'webview-html') {
-                        addWebViewHtml(data.url, data.html, data.css, data.js);
-                    }
-                }
-                catch (e) { }
-                if (props.onMessage) {
-                    props.onMessage(event);
-                }
-            };
-            const handleNavigationStateChange = (navState) => {
-                addWebViewNav(navState.url, navState.title);
-                if (props.onNavigationStateChange) {
-                    props.onNavigationStateChange(navState);
-                }
-            };
-            // Register initial URL
-            React.useEffect(() => {
-                if (props.source && props.source.uri) {
-                    addWebViewNav(props.source.uri, 'Initial Page');
-                }
-            }, [props.source?.uri]);
-            const combinedInjectedJSBefore = props.injectedJavaScriptBeforeContentLoaded
-                ? `${injectJS}\n${props.injectedJavaScriptBeforeContentLoaded}`
-                : injectJS;
-            const combinedInjectedJS = props.injectedJavaScript
-                ? `${injectJS}\n${props.injectedJavaScript}`
-                : injectJS;
-            return React.createElement(OriginalWebView, {
-                ...props,
-                ref: ref,
-                injectedJavaScriptBeforeContentLoaded: combinedInjectedJSBefore,
-                injectedJavaScript: combinedInjectedJS,
-                onMessage: handleMessage,
-                onNavigationStateChange: handleNavigationStateChange,
-            });
+        } catch (err) {}
+        } else if (sendHtmlRetries < 50) {
+        sendHtmlRetries++;
+        setTimeout(window.__webview_send_html__, 100);
+        }
+    };
+
+    var debounceTimeout = null;
+    window.__webview_debounced_send_html__ = function() {
+        if (debounceTimeout) {
+        clearTimeout(debounceTimeout);
+        }
+        debounceTimeout = setTimeout(window.__webview_send_html__, 500);
+    };
+
+    // Setup MutationObserver for SPAs
+    try {
+        var observer = new MutationObserver(function() {
+        window.__webview_debounced_send_html__();
+        });
+        observer.observe(document.documentElement, {
+        attributes: true,
+        childList: true,
+        subtree: true
         });
-        // Replace properties on required module singleton to redirect all imports globally
+    } catch (e) {}
+
+    // Setup SPA router state changes
+    try {
+        var originalPushState = history.pushState;
+        history.pushState = function() {
+        originalPushState.apply(this, arguments);
+        window.__webview_debounced_send_html__();
+        };
+        var originalReplaceState = history.replaceState;
+        history.replaceState = function() {
+        originalReplaceState.apply(this, arguments);
+        window.__webview_debounced_send_html__();
+        };
+        window.addEventListener('popstate', window.__webview_debounced_send_html__);
+        window.addEventListener('hashchange', window.__webview_debounced_send_html__);
+    } catch (e) {}
+
+    window.addEventListener('DOMContentLoaded', window.__webview_send_html__);
+    window.addEventListener('load', window.__webview_send_html__);
+    if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        window.__webview_send_html__();
+    }
+    } else {
+    if (window.__webview_send_html__) {
+        window.__webview_send_html__();
+    }
+    }
+})();
+true;
+`;
+export const WebView = forwardRef((props, ref) => {
+    if (!OriginalWebView) {
+        console.warn('[NetworkInspector] react-native-webview not found. Make sure it is installed.');
+        return null;
+    }
+    const [loading, setLoading] = useState(false);
+    const handleMessage = (event) => {
+        try {
+            const data = JSON.parse(event.nativeEvent.data);
+            if (data.type === 'webview-log') {
+                addWebViewLog(data.logType, data.message);
+            }
+            else if (data.type === 'webview-html') {
+                addWebViewHtml(data.url, data.html, data.css, data.js);
+            }
+        }
+        catch (e) { }
+        if (props.onMessage) {
+            props.onMessage(event);
+        }
+    };
+    const handleNavigationStateChange = (navState) => {
+        addWebViewNav(navState.url, navState.title);
+        if (props.onNavigationStateChange) {
+            props.onNavigationStateChange(navState);
+        }
+    };
+    const handleLoadStart = (syntheticEvent) => {
+        setLoading(true);
+        if (props.onLoadStart) {
+            props.onLoadStart(syntheticEvent);
+        }
+    };
+    const handleLoadEnd = (syntheticEvent) => {
+        setLoading(false);
+        if (props.onLoadEnd) {
+            props.onLoadEnd(syntheticEvent);
+        }
+    };
+    // Register initial URL
+    React.useEffect(() => {
+        if (props.source && props.source.uri) {
+            addWebViewNav(props.source.uri, 'Initial Page');
+        }
+    }, [props.source?.uri]);
+    const combinedInjectedJSBefore = props.injectedJavaScriptBeforeContentLoaded
+        ? `${injectJS}\n${props.injectedJavaScriptBeforeContentLoaded}`
+        : injectJS;
+    const combinedInjectedJS = props.injectedJavaScript
+        ? `${injectJS}\n${props.injectedJavaScript}`
+        : injectJS;
+    const showLoader = props.showLoader !== false;
+    return React.createElement(View, { style: props.style || { flex: 1 } }, React.createElement(OriginalWebView, {
+        ...props,
+        style: { flex: 1 },
+        ref: ref,
+        injectedJavaScriptBeforeContentLoaded: combinedInjectedJSBefore,
+        injectedJavaScript: combinedInjectedJS,
+        onMessage: handleMessage,
+        onNavigationStateChange: handleNavigationStateChange,
+        onLoadStart: handleLoadStart,
+        onLoadEnd: handleLoadEnd,
+    }), loading && showLoader && React.createElement(View, {
+        style: {
+            ...StyleSheet.absoluteFill,
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'rgba(255, 255, 255, 0.4)',
+        },
+    }, React.createElement(ActivityIndicator, { size: 'large', color: '#684B9B' })));
+});
+// Perform monkey-patching to intercept react-native-webview exports globally
+try {
+    const RNWebView = require('react-native-webview');
+    if (RNWebView) {
         const defineProp = (obj, prop, value) => {
             try {
                 Object.defineProperty(obj, prop, {
@@ -282,18 +317,18 @@ try {
             }
         };
         if (RNWebView.WebView) {
-            defineProp(RNWebView, 'WebView', InterceptedWebView);
+            defineProp(RNWebView, 'WebView', WebView);
         }
         if (RNWebView.default) {
             if (RNWebView.default.WebView) {
-                defineProp(RNWebView.default, 'WebView', InterceptedWebView);
+                defineProp(RNWebView.default, 'WebView', WebView);
             }
-            defineProp(RNWebView, 'default', InterceptedWebView);
+            defineProp(RNWebView, 'default', WebView);
         }
     }
 }
 catch (e) {
-    // Silent fail if react-native-webview is not resolved
+    // Silent fail
 }
 let logs = [];
 let navHistory = [];
@@ -332,7 +367,7 @@ export const addWebViewNav = (url, title) => {
         title,
         timestamp: Date.now(),
     });
-    navHistory = navHistory.slice(0, 50);
+    navHistory = navHistory.slice(0, 5);
     notify();
 };
 export const addWebViewHtml = (url, html, css, js) => {

package/dist/esm/helpers/index.js

@@ -53,7 +53,8 @@ export const getSize = (data) => {
     }
 };
 export const copyToClipboard = (value, label) => {
-    const text = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+    const resolved = typeof value === 'function' ? value() : value;
+    const text = typeof resolved === 'string' ? resolved : JSON.stringify(resolved, null, 2);
     Clipboard.setString(text ?? '');
     if (Platform.OS === 'android') {
         ToastAndroid.show(`${label} copied`, ToastAndroid.SHORT);

package/dist/esm/index.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
-declare const NetworkInspector: () => React.JSX.Element;
-export default NetworkInspector;
+declare const NetworkInspectorWrapper: (props: any) => React.JSX.Element;
+export default NetworkInspectorWrapper;
 export { setupNetworkLogger, clearNetworkLogs, subscribeNetworkLogs, } from './customHooks/networkLogger';
 export { setupConsoleLogger, clearConsoleLogs, subscribeConsoleLogs, } from './customHooks/consoleLogger';
 export { setupAnalyticsLogger, logAnalyticsEvent, subscribeAnalyticsEvents, clearAnalyticsEvents, } from './customHooks/analyticsLogger';
-export { getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
+export { WebView, getWebViewLogs, getWebViewNavHistory, getWebViewHtml, getWebViewCss, getWebViewJs, getWebViewHtmlUrl, clearWebViewData, subscribeWebView, } from './customHooks/webViewLogger';
+export { default as ErrorBoundary } from './components/ErrorBoundary';
+export { connectReduxStore, getReduxState, subscribeReduxState, } from './customHooks/reduxLogger';