react-native-inapp-inspector 1.0.0

package/dist/esm/customHooks/webViewLogger.d.ts

@@ -0,0 +1,22 @@
+export interface WebViewLog {
+    id: number;
+    type: 'log' | 'info' | 'warn' | 'error';
+    message: string;
+    timestamp: number;
+}
+export interface WebViewNavState {
+    url: string;
+    title?: string;
+    timestamp: number;
+}
+export declare const addWebViewLog: (type: "log" | "info" | "warn" | "error", message: string) => void;
+export declare const addWebViewNav: (url: string, title?: string) => void;
+export declare const addWebViewHtml: (url: string, html: string, css?: string, js?: string) => void;
+export declare const getWebViewLogs: () => WebViewLog[];
+export declare const getWebViewNavHistory: () => WebViewNavState[];
+export declare const getWebViewHtml: () => string;
+export declare const getWebViewCss: () => string;
+export declare const getWebViewJs: () => string;
+export declare const getWebViewHtmlUrl: () => string;
+export declare const clearWebViewData: () => void;
+export declare const subscribeWebView: (cb: () => void) => () => void;

package/dist/esm/customHooks/webViewLogger.js

@@ -0,0 +1,365 @@
+import React, { forwardRef } from 'react';
+// Intercept react-native-webview exports to capture console logs and URL navigation changes globally
+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);
+                }
+
+                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);
+                }
+                sendToRN('error', arguments);
+            };
+            console.info = function() {
+                if (originalInfo) {
+                originalInfo.apply(console, arguments);
+                }
+                sendToRN('info', arguments);
+            };
+            }
+
+            if (!window.__webview_html_capture_setup__) {
+            window.__webview_html_capture_setup__ = true;
+
+            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 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) {}
+
+                    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) {}
+
+                    // 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);
+                            }
+                        }
+                        }
+                    }
+                    } 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 (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
+                });
+            } 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;
+        `;
+        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,
+            });
+        });
+        // Replace properties on required module singleton to redirect all imports globally
+        const defineProp = (obj, prop, value) => {
+            try {
+                Object.defineProperty(obj, prop, {
+                    value: value,
+                    configurable: true,
+                    writable: true,
+                    enumerable: true,
+                });
+            }
+            catch (e) {
+                try {
+                    obj[prop] = value;
+                }
+                catch (err) { }
+            }
+        };
+        if (RNWebView.WebView) {
+            defineProp(RNWebView, 'WebView', InterceptedWebView);
+        }
+        if (RNWebView.default) {
+            if (RNWebView.default.WebView) {
+                defineProp(RNWebView.default, 'WebView', InterceptedWebView);
+            }
+            defineProp(RNWebView, 'default', InterceptedWebView);
+        }
+    }
+}
+catch (e) {
+    // Silent fail if react-native-webview is not resolved
+}
+let logs = [];
+let navHistory = [];
+let currentHtml = '';
+let currentCss = '';
+let currentJs = '';
+let currentHtmlUrl = '';
+let listeners = [];
+let counter = 0;
+const notify = () => {
+    const snapshotLogs = [...logs];
+    const snapshotHistory = [...navHistory];
+    listeners.forEach(cb => cb());
+};
+export const addWebViewLog = (type, message) => {
+    logs.unshift({
+        id: counter++,
+        type,
+        message,
+        timestamp: Date.now(),
+    });
+    logs = logs.slice(0, 100);
+    notify();
+};
+export const addWebViewNav = (url, title) => {
+    // Prevent duplicate consecutive navigation events for the same URL
+    if (navHistory.length > 0 && navHistory[0].url === url) {
+        if (title && !navHistory[0].title) {
+            navHistory[0].title = title;
+            notify();
+        }
+        return;
+    }
+    navHistory.unshift({
+        url,
+        title,
+        timestamp: Date.now(),
+    });
+    navHistory = navHistory.slice(0, 50);
+    notify();
+};
+export const addWebViewHtml = (url, html, css, js) => {
+    currentHtml = html;
+    currentCss = css || '';
+    currentJs = js || '';
+    currentHtmlUrl = url;
+    notify();
+};
+export const getWebViewLogs = () => [...logs];
+export const getWebViewNavHistory = () => [...navHistory];
+export const getWebViewHtml = () => currentHtml;
+export const getWebViewCss = () => currentCss;
+export const getWebViewJs = () => currentJs;
+export const getWebViewHtmlUrl = () => currentHtmlUrl;
+export const clearWebViewData = () => {
+    logs = [];
+    navHistory = [];
+    currentHtml = '';
+    currentCss = '';
+    currentJs = '';
+    currentHtmlUrl = '';
+    notify();
+};
+export const subscribeWebView = (cb) => {
+    listeners.push(cb);
+    return () => {
+        listeners = listeners.filter(l => l !== cb);
+    };
+};

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

@@ -0,0 +1,20 @@
+import { NetworkLog, RouteInfo, DiffResult } from '../types';
+export declare const getDomainColor: (domain: string) => string;
+export declare const formatDateTime: (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;
+export declare const copyToClipboard: (value: unknown, label: string) => void;
+export declare const getPath: (url: string) => string;
+export declare const getCurlCommand: (log: NetworkLog) => string;
+export declare const getFetchCommand: (log: NetworkLog) => string;
+export declare const deduplicateLogs: (raw: NetworkLog[]) => NetworkLog[];
+export declare const escapeRegex: (str: string) => string;
+export declare const getNavigationInfo: (state: any, path?: string[]) => RouteInfo;
+export declare const flattenObject: (obj: any, prefix?: string) => Record<string, any>;
+export declare const getDiff: (oldObj: any, newObj: any) => DiffResult[];
+export declare const formatDisplayUrl: (url: string) => string;
+export declare const getLocalizedFilePath: (path: string | any, country: string | any, language: string | any) => any;
+export declare const getLocalizedFilePathWithSlash: (path: string | any, country: string | any, language: string | any) => any;
+export declare const isAllValuesEmpty: (obj: Record<string, any>) => boolean;
+export declare const formatDateTimeToAnalytics: (ts: number) => string;

package/dist/esm/helpers/index.js

@@ -0,0 +1,207 @@
+import { Clipboard, Platform, ToastAndroid, Alert } from 'react-native';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+// Constants
+import { DOMAIN_COLORS, DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
+export const getDomainColor = (domain) => {
+    if (!domain)
+        return DOMAIN_COLORS[0];
+    let hash = 0;
+    for (let i = 0; i < domain.length; i++) {
+        hash = domain.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return DOMAIN_COLORS[Math.abs(hash) % DOMAIN_COLORS.length];
+};
+export const formatDateTime = (timestamp) => {
+    const date = new Date(timestamp);
+    const pad = (n, len = 2) => String(n).padStart(len, '0');
+    const day = pad(date.getDate());
+    const month = pad(date.getMonth() + 1);
+    const year = date.getFullYear();
+    const hours = pad(date.getHours());
+    const minutes = pad(date.getMinutes());
+    const seconds = pad(date.getSeconds());
+    return `${day}/${month}/${year}  ${hours}:${minutes}:${seconds}`;
+};
+export const getStatusColor = (status) => {
+    if (!status || status === 0)
+        return AppColors.errorColor;
+    if (status >= 500)
+        return AppColors.errorColor;
+    if (status >= 400)
+        return AppColors.darkOrange;
+    if (status >= 300)
+        return AppColors.warningIconGold;
+    return AppColors.greenColor;
+};
+export const getDurationColor = (duration) => {
+    if (duration == null)
+        return AppColors.grayTextWeak;
+    if (duration < DURATION_FAST_MS)
+        return AppColors.greenColor;
+    if (duration < DURATION_SLOW_MS)
+        return AppColors.lightOrange;
+    return AppColors.errorColor;
+};
+export const getSize = (data) => {
+    try {
+        const bytes = JSON.stringify(data)?.length ?? 0;
+        return bytes < 1024 ? `${bytes} B` : `${(bytes / 1024).toFixed(1)} KB`;
+    }
+    catch {
+        return '—';
+    }
+};
+export const copyToClipboard = (value, label) => {
+    const text = typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+    Clipboard.setString(text ?? '');
+    if (Platform.OS === 'android') {
+        ToastAndroid.show(`${label} copied`, ToastAndroid.SHORT);
+    }
+    else {
+        Alert.alert('Copied', `${label} copied to clipboard`, [{ text: 'OK' }]);
+    }
+};
+export const getPath = (url) => {
+    try {
+        const u = new URL(url);
+        return u.pathname + (u.search ? u.search : '');
+    }
+    catch {
+        const withoutDomain = url.replace(/^https?:\/\/[^/?#]+/, '');
+        return withoutDomain || '/';
+    }
+};
+export const getCurlCommand = (log) => {
+    let cmd = `curl -X ${log.method} "${log.url}"`;
+    if (log.requestHeaders) {
+        Object.entries(log.requestHeaders).forEach(([k, v]) => {
+            cmd += ` \\\n  -H "${k}: ${v}"`;
+        });
+    }
+    if (log.request && log.method !== 'GET') {
+        const body = typeof log.request === 'string'
+            ? log.request
+            : JSON.stringify(log.request);
+        cmd += ` \\\n  -d '${body.replace(/'/g, "'\\''")}'`;
+    }
+    return cmd;
+};
+export const getFetchCommand = (log) => {
+    const opts = { method: log.method };
+    if (log.requestHeaders && Object.keys(log.requestHeaders).length > 0) {
+        opts.headers = log.requestHeaders;
+    }
+    if (log.request && log.method !== 'GET') {
+        opts.body = JSON.stringify(log.request);
+    }
+    return `fetch("${log.url}", ${JSON.stringify(opts, null, 2)})`;
+};
+export const deduplicateLogs = (raw) => {
+    const map = new Map();
+    raw.forEach(entry => {
+        if (!map.has(entry.id) || entry.status != null) {
+            map.set(entry.id, entry);
+        }
+    });
+    return Array.from(map.values()).sort((a, b) => b.id - a.id);
+};
+export const escapeRegex = (str) => {
+    return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+};
+export const getNavigationInfo = (state, path = []) => {
+    if (!state?.routes) {
+        return {
+            path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+            params: null,
+        };
+    }
+    const route = state.routes[state.index ?? 0];
+    if (!route) {
+        return {
+            path: path.length > 0 ? path.join(' ➔ ') : 'Navigators',
+            params: null,
+        };
+    }
+    const currentPath = route.name ? [...path, route.name] : path;
+    if (route?.state) {
+        return getNavigationInfo(route.state, currentPath);
+    }
+    const resolved = currentPath.length > 0 ? currentPath.join(' ➔ ') : 'Navigators';
+    return { path: resolved, params: route.params || null };
+};
+export const flattenObject = (obj, prefix = '') => {
+    let result = {};
+    if (typeof obj === 'object' && obj !== null) {
+        if (Array.isArray(obj)) {
+            obj.forEach((v, i) => {
+                Object.assign(result, flattenObject(v, prefix ? `${prefix}[${i}]` : `[${i}]`));
+            });
+        }
+        else {
+            Object.keys(obj).forEach(k => {
+                Object.assign(result, flattenObject(obj[k], prefix ? `${prefix}.${k}` : k));
+            });
+        }
+    }
+    else {
+        result[prefix || 'root'] = obj;
+    }
+    return result;
+};
+export const getDiff = (oldObj, newObj) => {
+    const oldFlat = flattenObject(oldObj);
+    const newFlat = flattenObject(newObj);
+    const diff = [];
+    const allKeys = new Set([...Object.keys(oldFlat), ...Object.keys(newFlat)]);
+    allKeys.forEach(k => {
+        if (!(k in oldFlat)) {
+            diff.push({ type: 'added', path: k, newVal: newFlat[k] });
+        }
+        else if (!(k in newFlat)) {
+            diff.push({ type: 'removed', path: k, oldVal: oldFlat[k] });
+        }
+        else if (oldFlat[k] !== newFlat[k]) {
+            diff.push({
+                type: 'changed',
+                path: k,
+                oldVal: oldFlat[k],
+                newVal: newFlat[k],
+            });
+        }
+    });
+    return diff.sort((a, b) => a.path.localeCompare(b.path));
+};
+export const formatDisplayUrl = (url) => {
+    if (!url)
+        return '';
+    if (url.startsWith('http://') || url.startsWith('https://'))
+        return url;
+    return `https://${url}`;
+};
+export const getLocalizedFilePath = (path, country, language) => {
+    const url = path.replace('country-language', `${country?.toLowerCase()}-${language?.toLowerCase()}`);
+    return url;
+};
+export const getLocalizedFilePathWithSlash = (path, country, language) => {
+    const url = path.replace('country/language', `${country?.toLowerCase()}/${language?.toLowerCase()}`);
+    return url;
+};
+export const isAllValuesEmpty = (obj) => {
+    if (!obj || typeof obj !== 'object')
+        return true;
+    return Object.values(obj).every(value => value &&
+        typeof value === 'object' &&
+        !Array.isArray(value) &&
+        Object.keys(value).length === 0);
+};
+export const formatDateTimeToAnalytics = (ts) => {
+    const d = new Date(ts);
+    return d?.toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+    });
+};

package/dist/esm/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const NetworkInspector: () => React.JSX.Element;
+export default NetworkInspector;
+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';