react-native-inapp-inspector 1.0.0

package/dist/esm/customHooks/analyticsLogger.js

@@ -0,0 +1,152 @@
+// ─── Analytics Logger ─────────────────────────────────────────────────────────
+//
+// Captures @react-native-firebase/analytics events by monkey-patching the
+// analytics instance returned by `analytics()`.
+//
+// Setup (call once at app startup, before any analytics calls):
+//
+//   import analytics from '@react-native-firebase/analytics';
+//   import { setupAnalyticsLogger } from './network/analyticsLogger';
+//
+//   setupAnalyticsLogger(analytics());
+//
+// That's it — every subsequent logEvent / logScreenView / setUserProperty call
+// will be intercepted and shown in the Analytics tab of NetworkInspector.
+//
+// Patched methods:
+//   logEvent(name, params)
+//   logScreenView({ screen_name, screen_class })
+//   setUserProperty(name, value)
+//   setUserProperties(properties)
+//   setUserId(id)
+// ─────────────────────────────────────────────────────────────────────────────
+// ─── Internal state ───────────────────────────────────────────────────────────
+let events = [];
+let listeners = [];
+let counter = 0;
+// Running snapshot of user properties set so far — attached to every event
+let currentUserProperties = {};
+let currentUserId;
+// ─── Core helpers ─────────────────────────────────────────────────────────────
+const notify = () => {
+    const snapshot = [...events];
+    listeners.forEach((cb) => cb(snapshot));
+};
+const addEvent = (event) => {
+    events.unshift(event);
+    events = events.slice(0, 200);
+    notify();
+};
+// ─── Public subscribe / query API ────────────────────────────────────────────
+export const subscribeAnalyticsEvents = (callback) => {
+    listeners.push(callback);
+    callback([...events]);
+    return () => {
+        listeners = listeners.filter((l) => l !== callback);
+    };
+};
+export const clearAnalyticsEvents = () => {
+    events = [];
+    notify();
+};
+export const getAnalyticsEvents = () => [...events];
+// ─── Manual logging (escape hatch, rarely needed) ────────────────────────────
+/**
+ * Directly push an event into the inspector without going through Firebase.
+ * Useful for custom analytics wrappers or testing.
+ */
+export const logAnalyticsEvent = (name, params = {}, userProperties = {}) => {
+    addEvent({
+        id: counter++,
+        name,
+        params,
+        userProperties: { ...currentUserProperties, ...userProperties },
+        timestamp: Date.now(),
+        source: "manual",
+        userId: currentUserId ?? "",
+        screenName: "",
+        screenClass: "",
+    });
+};
+// ─── Firebase Analytics instance patcher ─────────────────────────────────────
+/**
+ * Monkey-patches a @react-native-firebase/analytics instance so all calls
+ * are intercepted and forwarded to the NetworkInspector analytics tab.
+ *
+ * Pass the result of `analytics()` (the default app instance or any named one).
+ * Safe to call multiple times with the same instance — won't double-patch.
+ *
+ * @example
+ *   import analytics from '@react-native-firebase/analytics';
+ *   setupAnalyticsLogger(analytics());
+ */
+export const setupAnalyticsLogger = (analyticsInstance) => {
+    if (!analyticsInstance) {
+        console.warn("[AnalyticsLogger] No analytics instance provided — skipping setup.");
+        return;
+    }
+    // Guard against double-patching the same instance
+    if (analyticsInstance.__INSPECTOR_PATCHED__)
+        return;
+    analyticsInstance.__INSPECTOR_PATCHED__ = true;
+    // ── logEvent ──────────────────────────────────────────────────────────────
+    const originalLogEvent = analyticsInstance.logEvent.bind(analyticsInstance);
+    analyticsInstance.logEvent = async (name, params) => {
+        addEvent({
+            id: counter++,
+            name,
+            params: params ?? {},
+            userProperties: { ...currentUserProperties },
+            timestamp: Date.now(),
+            source: "firebase",
+            userId: currentUserId ?? "",
+            screenName: "",
+            screenClass: "",
+        });
+        return originalLogEvent(name, params);
+    };
+    // ── logScreenView ─────────────────────────────────────────────────────────
+    const originalLogScreenView = analyticsInstance.logScreenView.bind(analyticsInstance);
+    analyticsInstance.logScreenView = async (params) => {
+        addEvent({
+            id: counter++,
+            name: "screen_view",
+            params: params ?? {},
+            userProperties: { ...currentUserProperties },
+            timestamp: Date.now(),
+            source: "firebase",
+            screenName: params?.screen_name ?? "",
+            screenClass: params?.screen_class ?? "",
+            userId: currentUserId ?? "",
+        });
+        return originalLogScreenView(params);
+    };
+    // ── setUserProperty ───────────────────────────────────────────────────────
+    const originalSetUserProperty = analyticsInstance.setUserProperty.bind(analyticsInstance);
+    analyticsInstance.setUserProperty = async (name, value) => {
+        if (value === null) {
+            delete currentUserProperties[name];
+        }
+        else {
+            currentUserProperties[name] = value;
+        }
+        return originalSetUserProperty(name, value);
+    };
+    // ── setUserProperties ─────────────────────────────────────────────────────
+    const originalSetUserProperties = analyticsInstance.setUserProperties.bind(analyticsInstance);
+    analyticsInstance.setUserProperties = async (properties) => {
+        Object.entries(properties).forEach(([k, v]) => {
+            if (v === null)
+                delete currentUserProperties[k];
+            else
+                currentUserProperties[k] = v;
+        });
+        return originalSetUserProperties(properties);
+    };
+    // ── setUserId ─────────────────────────────────────────────────────────────
+    const originalSetUserId = analyticsInstance.setUserId.bind(analyticsInstance);
+    analyticsInstance.setUserId = async (id) => {
+        currentUserId = id ?? undefined;
+        return originalSetUserId(id);
+    };
+};

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

@@ -0,0 +1,5 @@
+import { ConsoleLog } from '../types';
+export declare const subscribeConsoleLogs: (callback: (logs: ConsoleLog[]) => void) => () => void;
+export declare const clearConsoleLogs: () => void;
+export declare const getConsoleLogs: () => ConsoleLog[];
+export declare const setupConsoleLogger: () => void;

package/dist/esm/customHooks/consoleLogger.js

@@ -0,0 +1,134 @@
+import { IGNORED_LOG_PREFIXES } from './logFilters';
+let logs = [];
+let listeners = [];
+let counter = 0;
+let isIntercepting = false;
+const MAX_LOGS = 100;
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const formatArgs = (args) => {
+    return args
+        .map(arg => {
+        if (arg === null)
+            return 'null';
+        if (arg === undefined)
+            return 'undefined';
+        if (typeof arg === 'object') {
+            try {
+                return JSON.stringify(arg, null, 2);
+            }
+            catch {
+                return Object.prototype.toString.call(arg);
+            }
+        }
+        return String(arg);
+    })
+        .join(' ');
+};
+const getCallerFromStack = () => {
+    try {
+        const stack = new Error().stack;
+        if (!stack)
+            return 'Unknown';
+        const lines = stack.split('\n');
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            // Skip internal console logger stack frames and native helpers
+            if (line.includes('consoleLogger') ||
+                line.includes('setupConsoleLogger') ||
+                line.includes('node_modules') ||
+                line.includes('Error')) {
+                continue;
+            }
+            return line.trim().replace(/^at /, '');
+        }
+    }
+    catch (e) { }
+    return 'Unknown';
+};
+const notify = () => {
+    const snapshot = [...logs];
+    listeners.forEach(cb => cb(snapshot));
+};
+const addLog = (type, args, sourceMethod) => {
+    if (isIntercepting)
+        return;
+    isIntercepting = true;
+    try {
+        const message = formatArgs(args);
+        // Check if the log should be ignored based on starting prefixes across all categories
+        const allPrefixes = [
+            ...((IGNORED_LOG_PREFIXES && IGNORED_LOG_PREFIXES.info) || []),
+            ...((IGNORED_LOG_PREFIXES && IGNORED_LOG_PREFIXES.warn) || []),
+            ...((IGNORED_LOG_PREFIXES && IGNORED_LOG_PREFIXES.error) || []),
+        ].filter(p => typeof p === 'string' && p.trim().length > 0);
+        if (allPrefixes.some(prefix => message
+            .toLowerCase()
+            .trim()
+            .startsWith(prefix.toLowerCase().trim()) ||
+            message.toLowerCase().trim().includes(prefix.toLowerCase().trim()))) {
+            return;
+        }
+        const caller = getCallerFromStack();
+        const newLog = {
+            id: counter++,
+            type,
+            message,
+            timestamp: Date.now(),
+            caller,
+            sourceMethod,
+        };
+        logs.unshift(newLog);
+        logs = logs.slice(0, MAX_LOGS);
+        notify();
+    }
+    catch (e) {
+        // Fail-safe to prevent crash during logging
+    }
+    finally {
+        isIntercepting = false;
+    }
+};
+// ─── Public API ───────────────────────────────────────────────────────────────
+export const subscribeConsoleLogs = (callback) => {
+    listeners.push(callback);
+    callback([...logs]);
+    return () => {
+        listeners = listeners.filter(l => l !== callback);
+    };
+};
+export const clearConsoleLogs = () => {
+    logs = [];
+    notify();
+};
+export const getConsoleLogs = () => [...logs];
+export const setupConsoleLogger = () => {
+    if (global.__CONSOLE_LOGGER_INITIALIZED__)
+        return;
+    const originalConsole = {
+        log: console.log,
+        info: console.info,
+        warn: console.warn,
+        error: console.error,
+    };
+    // Intercept console.log
+    console.log = (...args) => {
+        addLog('info', args, 'log');
+        originalConsole.log(...args);
+    };
+    // Intercept console.info
+    console.info = (...args) => {
+        addLog('info', args, 'info');
+        originalConsole.info(...args);
+    };
+    // Intercept console.warn
+    console.warn = (...args) => {
+        addLog('warn', args, 'warn');
+        originalConsole.warn(...args);
+    };
+    // Intercept console.error
+    console.error = (...args) => {
+        addLog('error', args, 'error');
+        originalConsole.error(...args);
+    };
+    global.__CONSOLE_LOGGER_INITIALIZED__ = true;
+};

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

@@ -0,0 +1,5 @@
+/**
+ * Configuration for console logs to ignore.
+ * Logs matching any of these starting prefixes will be filtered out.
+ */
+export declare const IGNORED_LOG_PREFIXES: Record<'info' | 'warn' | 'error', string[]>;

package/dist/esm/customHooks/logFilters.js

@@ -0,0 +1,31 @@
+/**
+ * Configuration for console logs to ignore.
+ * Logs matching any of these starting prefixes will be filtered out.
+ */
+export const IGNORED_LOG_PREFIXES = {
+    info: [
+        // Add prefixes of info logs you want to ignore, e.g.:
+        // 'Starting server',
+        'VirtualizedList: You have a large list that is slow to update',
+    ],
+    warn: [
+        // Add prefixes of warning logs you want to ignore, e.g.:
+        // 'Require cycle:',
+        // 'ViewPropTypes will be removed',
+        'This method is deprecated (as well as all React Native Firebase namespaced API) and will be removed in the next major release as part of move to match Firebase Web modular SDK API.',
+        'SerializableStateInvariantMiddleware took',
+        'Non-serializable values were found in the navigation state.',
+        'SafeAreaView has been deprecated and will be removed in a future release.',
+        'Clipboard has been extracted from react-native core and will be removed in a future release.',
+        'You should always pass contentWidth prop to properly handle screen rotations and have a seamless support for images scaling.',
+        'Selector unknown returned a different result when called with the same parameters.',
+        'You seem to update props of the "TRenderEngineProvider" component in short periods of time',
+        'A non-serializable value was detected in an action',
+    ],
+    error: [
+        // Add prefixes of error logs you want to ignore, e.g.:
+        // 'Warning: Each child in a list should have a unique',
+        'A non-serializable value was detected in the state, in the path: `tierStatusCalculator.date`',
+        'VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead.',
+    ],
+};

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

@@ -0,0 +1,20 @@
+import './webViewLogger';
+type NetworkLog = {
+    id: number;
+    url: string;
+    method: string;
+    status?: number;
+    request?: any;
+    response?: any;
+    duration?: number;
+    startTime: number;
+    caller?: string;
+    requestHeaders?: Record<string, string>;
+    responseHeaders?: Record<string, string>;
+};
+export declare const subscribeNetworkLogs: (callback: (logs: NetworkLog[]) => void) => () => void;
+export declare const clearNetworkLogs: () => void;
+export declare const getNetworkLogs: () => NetworkLog[];
+export declare const setupNetworkLogger: () => void;
+export declare const addAxiosInterceptors: (axiosInstance: any) => void;
+export {};

package/dist/esm/customHooks/networkLogger.js

@@ -0,0 +1,264 @@
+import './webViewLogger';
+let logs = [];
+let listeners = [];
+let counter = 0;
+const ALLOWED_METHODS = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function normaliseHeaders(raw) {
+    if (!raw)
+        return undefined;
+    if (typeof raw.forEach === 'function') {
+        const result = {};
+        raw.forEach((value, key) => {
+            result[key] = value;
+        });
+        return Object.keys(result).length > 0 ? result : undefined;
+    }
+    if (Array.isArray(raw)) {
+        const result = {};
+        raw.forEach(([key, value]) => {
+            result[key] = value;
+        });
+        return Object.keys(result).length > 0 ? result : undefined;
+    }
+    const obj = raw;
+    const result = {};
+    Object.entries(obj).forEach(([key, value]) => {
+        if (value != null) {
+            result[key] = String(value);
+        }
+    });
+    return Object.keys(result).length > 0 ? result : undefined;
+}
+// ✅ Parse FormData for File Upload previews
+function parseRequestData(data) {
+    if (!data)
+        return data;
+    if (data && data._parts && Array.isArray(data._parts)) {
+        const parsedFormData = {};
+        data._parts.forEach((part) => {
+            const key = part[0];
+            const value = part[1];
+            if (value && typeof value === 'object' && value.uri) {
+                parsedFormData[key] = {
+                    _isFile: true,
+                    name: value.name || 'unknown',
+                    type: value.type || 'unknown',
+                    uri: value.uri,
+                };
+            }
+            else {
+                parsedFormData[key] = value;
+            }
+        });
+        return { _isFormData: true, ...parsedFormData };
+    }
+    return data;
+}
+// ✅ Magic function to extract file and line number from the call stack
+function getCallerFromStack() {
+    try {
+        const stack = new Error().stack;
+        if (!stack)
+            return 'Unknown';
+        const lines = stack.split('\n');
+        for (let i = 0; i < lines.length; i++) {
+            const line = lines[i];
+            // Skip internal react-native network modules and the logger itself
+            if (line.includes('networkLogger') ||
+                line.includes('node_modules') ||
+                line.includes('Error') ||
+                line.includes('regeneratorRuntime')) {
+                continue;
+            }
+            return line.trim().replace(/^at /, '');
+        }
+    }
+    catch (e) { }
+    return 'Unknown';
+}
+// ─── Subscribe ────────────────────────────────────────────────────────────────
+export const subscribeNetworkLogs = (callback) => {
+    listeners.push(callback);
+    callback([...logs]);
+    return () => {
+        listeners = listeners.filter(l => l !== callback);
+    };
+};
+export const clearNetworkLogs = () => {
+    logs = [];
+    notify();
+};
+export const getNetworkLogs = () => [...logs];
+// ─── Internal ─────────────────────────────────────────────────────────────────
+const notify = () => {
+    const snapshot = [...logs];
+    listeners.forEach(cb => cb(snapshot));
+};
+const addOrUpdateLog = (log) => {
+    const method = log.method?.toUpperCase();
+    if (!ALLOWED_METHODS.includes(method))
+        return;
+    const index = logs.findIndex(l => l.id === log.id);
+    if (index >= 0) {
+        logs[index] = { ...logs[index], ...log };
+    }
+    else {
+        logs.unshift(log);
+    }
+    logs = logs.slice(0, 100);
+    notify();
+};
+// ─── Setup ────────────────────────────────────────────────────────────────────
+export const setupNetworkLogger = () => {
+    if (global.__NETWORK_LOGGER_INITIALIZED__)
+        return;
+    global.__NETWORK_LOGGER__ = addOrUpdateLog;
+    const originalFetch = global.fetch;
+    if (originalFetch) {
+        global.fetch = async (url, options = {}) => {
+            const method = (options?.method || 'GET').toUpperCase();
+            if (!ALLOWED_METHODS.includes(method))
+                return originalFetch(url, options);
+            const id = counter++;
+            const start = Date.now();
+            const finalUrl = typeof url === 'string' ? url : url?.url;
+            const requestHeaders = normaliseHeaders(options?.headers);
+            const caller = getCallerFromStack(); // ✅ Capture call line
+            addOrUpdateLog({
+                id,
+                url: finalUrl,
+                method,
+                startTime: start,
+                caller,
+                request: method === 'GET' ? undefined : parseRequestData(options?.body),
+                requestHeaders,
+            });
+            try {
+                const response = await originalFetch(url, options);
+                const duration = Date.now() - start;
+                const responseHeaders = normaliseHeaders(response.headers);
+                let data = null;
+                const contentType = responseHeaders?.['content-type'] ||
+                    responseHeaders?.['Content-Type'] ||
+                    '';
+                if (contentType.includes('image/')) {
+                    data = '[Image Data]';
+                }
+                else {
+                    try {
+                        const clone = response.clone();
+                        const text = await clone.text();
+                        try {
+                            data = JSON.parse(text);
+                        }
+                        catch {
+                            data = text;
+                        }
+                    }
+                    catch { }
+                }
+                addOrUpdateLog({
+                    id,
+                    url: finalUrl,
+                    method,
+                    status: response.status,
+                    response: data,
+                    duration,
+                    startTime: start,
+                    caller,
+                    responseHeaders,
+                });
+                return response;
+            }
+            catch (error) {
+                addOrUpdateLog({
+                    id,
+                    url: finalUrl,
+                    method,
+                    status: 0,
+                    startTime: start,
+                    response: error,
+                    caller,
+                    duration: Date.now() - start,
+                });
+                throw error;
+            }
+        };
+    }
+    global.__NETWORK_LOGGER_INITIALIZED__ = true;
+};
+// ─── Axios interceptor helper ─────────────────────────────────────────────────
+export const addAxiosInterceptors = (axiosInstance) => {
+    axiosInstance.interceptors.request.use(async (config) => {
+        const method = (config.method || 'GET').toUpperCase();
+        if (!ALLOWED_METHODS.includes(method))
+            return config;
+        const id = counter++;
+        const start = Date.now();
+        const caller = getCallerFromStack(); // ✅ Capture call line
+        config.__logId = id;
+        config.__logStart = start;
+        config.__logCaller = caller;
+        let url = config.url ?? '';
+        if (!url.startsWith('http'))
+            url = `${config.baseURL ?? ''}${url}`;
+        addOrUpdateLog({
+            id,
+            url,
+            method,
+            startTime: start,
+            caller,
+            request: method === 'GET' ? undefined : parseRequestData(config.data),
+            requestHeaders: normaliseHeaders(config.headers),
+        });
+        return config;
+    });
+    axiosInstance.interceptors.response.use((response) => {
+        const config = response.config || {};
+        const id = config.__logId;
+        const start = config.__logStart;
+        const caller = config.__logCaller;
+        const method = (config.method || 'GET').toUpperCase();
+        if (id == null || !ALLOWED_METHODS.includes(method))
+            return response;
+        let url = config.url ?? '';
+        if (!url.startsWith('http'))
+            url = `${config.baseURL ?? ''}${url}`;
+        addOrUpdateLog({
+            id,
+            url,
+            method,
+            status: response.status,
+            response: response.data,
+            startTime: start || Date.now(),
+            duration: start != null ? Date.now() - start : undefined,
+            caller,
+            responseHeaders: normaliseHeaders(response.headers),
+        });
+        return response;
+    }, (error) => {
+        const config = error.config || {};
+        const id = config.__logId;
+        const start = config.__logStart;
+        const caller = config.__logCaller;
+        const method = (config.method || 'GET').toUpperCase();
+        if (id != null && ALLOWED_METHODS.includes(method)) {
+            let url = config.url ?? '';
+            if (!url.startsWith('http'))
+                url = `${config.baseURL ?? ''}${url}`;
+            addOrUpdateLog({
+                id,
+                url,
+                method,
+                status: error.response?.status ?? 0,
+                response: error.response?.data ?? error.message,
+                startTime: start || Date.now(),
+                duration: start != null ? Date.now() - start : undefined,
+                caller,
+                responseHeaders: normaliseHeaders(error.response?.headers),
+            });
+        }
+        return Promise.reject(error);
+    });
+};

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

@@ -0,0 +1,17 @@
+import { Animated } from 'react-native';
+declare const useAccordion: (initialOpen?: boolean, maxBodyHeight?: number, duration?: number) => {
+    isOpen: boolean;
+    toggleOpen: () => void;
+    forceOpen: (open: boolean) => void;
+    chevronStyle: {
+        transform: {
+            rotate: Animated.AnimatedInterpolation<string | number>;
+        }[];
+    };
+    bodyStyle: {
+        maxHeight: Animated.AnimatedInterpolation<string | number>;
+        overflow: "hidden";
+        opacity: Animated.AnimatedInterpolation<string | number>;
+    };
+};
+export default useAccordion;

package/dist/esm/customHooks/useAccordion.js

@@ -0,0 +1,46 @@
+import { useCallback, useRef, useState } from 'react';
+import { Animated } from 'react-native';
+const useAccordion = (initialOpen = false, maxBodyHeight = 1200, duration = 280) => {
+    const [isOpen, setIsOpen] = useState(initialOpen);
+    const animVal = useRef(new Animated.Value(initialOpen ? 1 : 0)).current;
+    const toggleOpen = useCallback(() => {
+        const next = !isOpen;
+        setIsOpen(next);
+        Animated.timing(animVal, {
+            toValue: next ? 1 : 0,
+            duration,
+            useNativeDriver: false,
+        }).start();
+    }, [isOpen, animVal, duration]);
+    const forceOpen = useCallback((open) => {
+        setIsOpen(open);
+        Animated.timing(animVal, {
+            toValue: open ? 1 : 0,
+            duration,
+            useNativeDriver: false,
+        }).start();
+    }, [animVal, duration]);
+    const chevronStyle = {
+        transform: [
+            {
+                rotate: animVal.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['0deg', '180deg'],
+                }),
+            },
+        ],
+    };
+    const bodyStyle = {
+        maxHeight: animVal.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, maxBodyHeight],
+        }),
+        overflow: 'hidden',
+        opacity: animVal.interpolate({
+            inputRange: [0, 0.4, 1],
+            outputRange: [0, 0.7, 1],
+        }),
+    };
+    return { isOpen, toggleOpen, forceOpen, chevronStyle, bodyStyle };
+};
+export default useAccordion;