react-native-inapp-inspector 2.0.0 → 2.0.2

package/dist/esm/helpers/telemetry.js

@@ -0,0 +1,380 @@
+// ─── Google Analytics 4 (GA4) Measurement Protocol Telemetry ───────────────
+//
+// Comprehensive, anonymous usage telemetry for react-native-inapp-inspector.
+//
+// - NEVER collects user PII, auth tokens, device names, or network payload bodies.
+// - Zero main-thread blocking; 100% fail-safe fire-and-forget.
+// - Full environment diagnostics (Hermes, New Arch, RN version, screen size, UI mode).
+// - Tracks developer interactions: tab switches, page views, search, exports, retries.
+// - Supports opt-out via `telemetry={false}` or `DO_NOT_TRACK=1`.
+// ─────────────────────────────────────────────────────────────────────────────
+import { Platform, Dimensions, Appearance } from 'react-native';
+import { LIB_VERSION } from '../constants';
+import { getNativeStorageItem, setNativeStorageItem, isNativeModuleAvailable, getNativeDeviceMetrics, } from '../native/NativeInspector';
+// ─── GA4 Measurement Protocol Configuration ──────────────────────────────────
+// Automatically replaced at build-time from .env by scripts/inject-telemetry.js
+export const GA4_MEASUREMENT_ID = 'G-3QGMQVZX5V';
+export const GA4_API_SECRET = 'C46RQZ3PTfmHDnLnvU3KIg';
+const GA4_ENDPOINT = 'https://www.google-analytics.com/mp/collect';
+const CLIENT_ID_KEY = 'telemetry_client_id';
+// Stable session ID created once per JavaScript runtime instance
+const CURRENT_SESSION_ID = String(Math.floor(Date.now() / 1000));
+let hasPingedSession = false;
+let cachedClientId = null;
+let lastModalOpenTimestamp = 0;
+let cachedAppDiagnostics = null;
+/**
+ * Generates an anonymous, pseudorandom UUIDv4-like string for client grouping.
+ * Contains zero hardware or personal identifiers.
+ */
+function generateAnonymousClientId() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
+        const r = (Math.random() * 16) | 0;
+        const v = c === 'x' ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+    });
+}
+/**
+ * Retrieves or generates the anonymous client identifier.
+ */
+async function getOrCreateClientId() {
+    if (cachedClientId)
+        return cachedClientId;
+    try {
+        const stored = await getNativeStorageItem(CLIENT_ID_KEY);
+        if (stored && typeof stored === 'string' && stored.length > 0) {
+            cachedClientId = stored;
+            return stored;
+        }
+    }
+    catch {
+        // Fallback to memory
+    }
+    const newId = generateAnonymousClientId();
+    cachedClientId = newId;
+    try {
+        await setNativeStorageItem(CLIENT_ID_KEY, newId);
+    }
+    catch {
+        // Silently ignore storage errors
+    }
+    return newId;
+}
+/**
+ * Asynchronously loads host application and device metadata (strictly non-PII/technical).
+ */
+export async function loadAppDiagnosticsAsync() {
+    if (cachedAppDiagnostics)
+        return cachedAppDiagnostics;
+    try {
+        const metrics = await getNativeDeviceMetrics();
+        cachedAppDiagnostics = {
+            app_name: metrics?.appName ||
+                Platform.constants?.appName ||
+                'unknown',
+            app_version: metrics?.appVersion ||
+                Platform.constants?.appVersion ||
+                'unknown',
+            app_build: metrics?.appBuild || 'unknown',
+            app_bundle_id: metrics?.appBundleId || metrics?.appPackageName || 'unknown',
+            device_brand: metrics?.deviceBrand ||
+                Platform.constants?.Brand ||
+                Platform.constants?.systemName ||
+                'unknown',
+            device_model: metrics?.deviceModel ||
+                Platform.constants?.Model ||
+                Platform.constants?.interfaceIdiom ||
+                'unknown',
+        };
+    }
+    catch {
+        cachedAppDiagnostics = {
+            app_name: Platform.constants?.appName || 'unknown',
+            app_version: Platform.constants?.appVersion || 'unknown',
+            app_build: 'unknown',
+            app_bundle_id: 'unknown',
+            device_brand: Platform.constants?.Brand || 'unknown',
+            device_model: Platform.constants?.Model || 'unknown',
+        };
+    }
+    return cachedAppDiagnostics;
+}
+/**
+ * Extracts React Native framework version string (e.g. "0.81.4").
+ */
+function getReactNativeVersion() {
+    try {
+        const constants = Platform.constants;
+        if (constants && constants.reactNativeVersion) {
+            const { major, minor, patch, prerelease } = constants.reactNativeVersion;
+            return `${major}.${minor}.${patch}${prerelease ? `-${prerelease}` : ''}`;
+        }
+    }
+    catch {
+        // Fallback
+    }
+    return 'unknown';
+}
+/**
+ * Collects complete anonymous device, host app & runtime environment diagnostics.
+ */
+function getEnvironmentDiagnostics(extraParams = {}) {
+    const isHermes = Boolean(global.HermesInternal);
+    const isNewArch = Boolean(global._RN_FABRIC_ENABLED || global.__turboModuleProxy);
+    const isNativeLinked = isNativeModuleAvailable();
+    const rnVersion = getReactNativeVersion();
+    const isExpo = Boolean(global?.expo?.modules?.ExponentConstants ||
+        global?.__expo ||
+        (typeof process !== 'undefined' &&
+            process?.env?.EXPO_PUBLIC_PROJECT_ROOT));
+    let screenResolution = 'unknown';
+    let fontScale = 1;
+    try {
+        const { width, height, scale, fontScale: fs } = Dimensions.get('window');
+        screenResolution = `${Math.round(width)}x${Math.round(height)}@${scale}x`;
+        fontScale = fs || 1;
+    }
+    catch {
+        // Ignore dimension errors
+    }
+    let colorScheme = 'unknown';
+    try {
+        colorScheme = Appearance.getColorScheme() || 'unspecified';
+    }
+    catch {
+        // Ignore appearance errors
+    }
+    const appMeta = cachedAppDiagnostics || {
+        app_name: Platform.constants?.appName || 'unknown',
+        app_version: Platform.constants?.appVersion || 'unknown',
+        app_build: 'unknown',
+        app_bundle_id: 'unknown',
+        device_brand: Platform.constants?.Brand ||
+            Platform.constants?.systemName ||
+            'unknown',
+        device_model: Platform.constants?.Model ||
+            Platform.constants?.interfaceIdiom ||
+            'unknown',
+    };
+    return {
+        session_id: CURRENT_SESSION_ID,
+        engagement_time_msec: 100,
+        lib_version: LIB_VERSION,
+        platform: Platform.OS,
+        os_version: String(Platform.Version),
+        rn_version: rnVersion,
+        is_hermes: isHermes,
+        is_new_arch: isNewArch,
+        is_native_linked: isNativeLinked,
+        is_expo: isExpo,
+        is_dev: Boolean(typeof __DEV__ !== 'undefined' && __DEV__),
+        screen_resolution: screenResolution,
+        font_scale: fontScale,
+        color_scheme: colorScheme,
+        ...appMeta,
+        ...extraParams,
+    };
+}
+const CONSENT_STORAGE_KEY = 'telemetry_consent_status';
+let cachedConsentStatus = null;
+/**
+ * Returns the developer's telemetry consent status.
+ */
+export async function getTelemetryConsentStatus() {
+    if (cachedConsentStatus)
+        return cachedConsentStatus;
+    try {
+        const stored = await getNativeStorageItem(CONSENT_STORAGE_KEY);
+        if (stored === 'granted' || stored === 'declined') {
+            cachedConsentStatus = stored;
+            return stored;
+        }
+    }
+    catch {
+        // Fallback
+    }
+    return 'undetermined';
+}
+/**
+ * Saves the developer's telemetry consent choice.
+ */
+export async function setTelemetryConsent(granted) {
+    const status = granted ? 'granted' : 'declined';
+    cachedConsentStatus = status;
+    try {
+        await setNativeStorageItem(CONSENT_STORAGE_KEY, status);
+    }
+    catch {
+        // Ignore storage errors
+    }
+}
+/**
+ * Checks if the user or environment has opted out of telemetry.
+ */
+export function isTelemetryOptedOut(explicitSetting) {
+    if (explicitSetting === false)
+        return true;
+    if (cachedConsentStatus === 'declined')
+        return true;
+    try {
+        if (typeof process !== 'undefined' &&
+            process?.env &&
+            (process.env.DO_NOT_TRACK === '1' || process.env.DISABLE_TELEMETRY === '1')) {
+            return true;
+        }
+    }
+    catch {
+        // Ignore environments where process is undefined or restricted
+    }
+    return false;
+}
+/**
+ * Track an anonymous event via GA4 Measurement Protocol.
+ */
+export async function trackTelemetryEvent(eventName, params = {}, options) {
+    if (isTelemetryOptedOut(options?.telemetry))
+        return;
+    // Don't send if credentials haven't been configured yet
+    if (!GA4_MEASUREMENT_ID ||
+        GA4_MEASUREMENT_ID === 'G-3QGMQVZX5V' ||
+        !GA4_API_SECRET ||
+        GA4_API_SECRET === 'C46RQZ3PTfmHDnLnvU3KIg') {
+        return;
+    }
+    try {
+        const clientId = await getOrCreateClientId();
+        await loadAppDiagnosticsAsync();
+        const eventParams = getEnvironmentDiagnostics(params);
+        const payload = {
+            client_id: clientId,
+            events: [
+                {
+                    name: eventName,
+                    params: eventParams,
+                },
+            ],
+        };
+        const url = `${GA4_ENDPOINT}?measurement_id=${encodeURIComponent(GA4_MEASUREMENT_ID)}&api_secret=${encodeURIComponent(GA4_API_SECRET)}`;
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(payload),
+        }).catch(() => {
+            // If offline on initial cold start, allow a single delayed retry
+            if (eventName === 'inspector_session_init') {
+                hasPingedSession = false;
+                setTimeout(() => {
+                    sendSessionTelemetryPing(options);
+                }, 8000);
+            }
+        });
+    }
+    catch {
+        // Fail silently
+    }
+}
+/**
+ * 1. Session initialization heartbeat ping.
+ */
+export async function sendSessionTelemetryPing(options) {
+    if (hasPingedSession && !options?.force)
+        return;
+    if (isTelemetryOptedOut(options?.telemetry))
+        return;
+    hasPingedSession = true;
+    await trackTelemetryEvent('inspector_session_init', {
+        environment: options?.environment || 'unknown',
+        has_navigation: Boolean(options?.hasNavigation),
+        has_app_icon: Boolean(options?.hasAppIcon),
+    }, options);
+}
+/**
+ * 2. Track when the inspector modal is opened.
+ */
+export function trackInspectorOpen(options) {
+    lastModalOpenTimestamp = Date.now();
+    trackTelemetryEvent('inspector_open', {
+        open_source: options?.openSource || 'fab',
+        active_tab: options?.activeTab || 'apis',
+    }, options);
+}
+/**
+ * 3. Track when the inspector modal is closed.
+ */
+export function trackInspectorClose(options) {
+    const durationSec = lastModalOpenTimestamp > 0
+        ? Math.round((Date.now() - lastModalOpenTimestamp) / 1000)
+        : 0;
+    trackTelemetryEvent('inspector_close', {
+        open_duration_seconds: durationSec,
+    }, options);
+}
+/**
+ * 4. Track tab / page view navigation inside the inspector.
+ */
+export function trackTabSwitch(tabName, options) {
+    trackTelemetryEvent('page_view', {
+        page_title: `Tab: ${tabName}`,
+        page_location: `inapp-inspector://tab/${tabName}`,
+        tab_name: tabName,
+        from_tab: options?.fromTab || 'unknown',
+    }, options);
+}
+/**
+ * 5. Track network API interaction (inspect details, copy cURL, retry).
+ */
+export function trackNetworkInteraction(action, options) {
+    trackTelemetryEvent('network_interaction', {
+        action_type: action,
+        http_method: options?.method || 'GET',
+        status_code: options?.statusCode || 0,
+        duration_ms: options?.durationMs || 0,
+    }, options);
+}
+/**
+ * 6. Track Redux / State management interaction.
+ */
+export function trackReduxInteraction(action, options) {
+    trackTelemetryEvent('redux_interaction', {
+        action_type: action,
+        reducer_name: options?.reducerName || 'root',
+    }, options);
+}
+/**
+ * 7. Track Crash & Exception interaction.
+ */
+export function trackCrashInteraction(action, options) {
+    trackTelemetryEvent('crash_interaction', {
+        action_type: action,
+        crash_type: options?.crashType || 'js_exception',
+    }, options);
+}
+/**
+ * 8. Track Performance monitoring tab interaction.
+ */
+export function trackPerformanceInteraction(subTab, options) {
+    trackTelemetryEvent('performance_interaction', {
+        sub_tab: subTab,
+    }, options);
+}
+/**
+ * 9. Track search queries and filter applications.
+ */
+export function trackSearchOrFilter(target, actionType, options) {
+    trackTelemetryEvent('search_and_filter', {
+        target_tab: target,
+        action_type: actionType,
+        filter_value: options?.filterValue || 'all',
+    }, options);
+}
+/**
+ * 10. Track when logs / reports are exported or shared.
+ */
+export function trackLogExport(exportType, options) {
+    trackTelemetryEvent('log_export', {
+        export_type: exportType,
+        item_count: options?.count || 1,
+    }, options);
+}

package/dist/esm/index.d.ts

@@ -13,4 +13,6 @@ export { getEventCategory, registerGAPlugin, type GAPlugin, } from './helpers/ga
 export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';
 export { InspectLog, InspectTrackTime, InspectCatch, type InspectLogOptions, } from './decorators';
 export { getNativeDeviceMetrics, enableNativeCrashProtection, subscribeNativeCrashes, showNativeFloatingButton, hideNativeFloatingButton, setNativeFloatingButtonBadge, subscribeNativeFloatingButtonPress, subscribeNativeDeviceShake, startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeStorageItem, setNativeStorageItem, isNativeModuleAvailable, type NativeDeviceMetrics, type NativeCrashEvent, type FloatingButtonOptions, type NativeFpsMetrics, } from './native/NativeInspector';
+export { sendSessionTelemetryPing, trackTelemetryEvent, trackInspectorOpen, trackTabSwitch, trackLogExport, GA4_MEASUREMENT_ID, GA4_API_SECRET, } from './helpers';
+export { BrandSquareIcon, BrandCircleIcon, } from './components/NetworkIcons';
 export { ActiveTab, Method, StatusFilter, SortOrder, LocalFilter, ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, ConsoleLogType, AnalyticsEventSource, GAEventCategory, StackFrameType, DiffResultType, BundleSubTab, PerformanceSubTab, CrashType, CrashExportFormat, CrashDetailSubTab, CrashFilterType, BreadcrumbType, } from './types';

package/dist/esm/index.js

@@ -8,7 +8,7 @@ import ErrorBoundary from './components/ErrorBoundary';
 import MainScreen from './components/Inspector/MainScreen';
 import { InspectorContext, animateNextLayout, } from './components/Inspector/InspectorContext';
 // Helpers
-import { formatDisplayUrl, getNavigationInfo, deduplicateLogs, getDomainColor, getEventCategory, } from './helpers';
+import { formatDisplayUrl, getNavigationInfo, deduplicateLogs, getDomainColor, getEventCategory, matchNetworkLogQuery, sendSessionTelemetryPing, trackInspectorOpen, } from './helpers';
 // #5 — settings persistence
 import { loadSettings, saveSettings, setCustomStorage, clearPersistedSettings, calculateRamBasedLimits, } from './helpers/settingsStore';
 import { getNativeSystemMetrics, pushNativeLogRecord, fetchNativeCachedPage, } from './native/NativeInspector';
@@ -99,7 +99,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     // ─── Crash state ───────────────────────────────────────────────────────────
     const [crashRecords, setCrashRecords] = useState(() => getCrashRecords());
     const [selectedCrash, setSelectedCrash] = useState(null);
-    const [maxCrashLogs, setMaxCrashLogs] = useState(100);
+    const [maxCrashLogs, setMaxCrashLogs] = useState(50);
     useEffect(() => {
         setMaxCrashLogsLimit(maxCrashLogs);
     }, [maxCrashLogs]);
@@ -131,7 +131,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
             setLastReadCrashesCount(crashRecords.length);
         }
     }, [activeTab, crashRecords.length]);
-    const [maxConsoleLogs, setMaxConsoleLogs] = useState(200);
+    const [maxConsoleLogs, setMaxConsoleLogs] = useState(100);
     const [showConsoleLevels, setShowConsoleLevels] = useState({
         info: true,
         warn: false,
@@ -176,7 +176,7 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         crash: false,
     });
     const [maxNetworkLogs, setMaxNetworkLogs] = useState(100);
-    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(250);
+    const [maxAnalyticsEventsLimit, setMaxAnalyticsEventsLimit] = useState(75);
     const [isAutoRamLimitEnabled, setIsAutoRamLimitEnabled] = useState(true);
     const [deviceFreeRamMb, setDeviceFreeRamMb] = useState(1800);
     const [reduxAutoRefresh, setReduxAutoRefreshState] = useState(true);
@@ -699,6 +699,14 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
     }, [unreadPulseAnim]);
     const isNativeModule = useMemo(() => isNativeModuleAvailable(), []);
     const useNativeFab = (Platform.OS === 'ios' || Platform.OS === 'android') && isNativeModule;
+    // Send anonymous initialization heartbeat to GA4 Measurement Protocol
+    useEffect(() => {
+        sendSessionTelemetryPing({
+            environment,
+            hasNavigation: Boolean(navigationRef),
+            hasAppIcon: Boolean(appIcon),
+        });
+    }, [environment, navigationRef, appIcon]);
     // 100% Native Main-Thread Floating Button Lifecycle
     useEffect(() => {
         if (!useNativeFab || !isEnabled || !enabled) {
@@ -753,6 +761,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 ? defaultTab
                 : 'apis';
             setActiveTab(target);
+            // Track inspector opened event in GA4
+            trackInspectorOpen({ activeTab: target });
             // Instant synchronization of data collected while modal was closed
             if (latestNetworkLogsRef.current.length > 0) {
                 const deduped = deduplicateLogs(latestNetworkLogsRef.current);
@@ -1006,23 +1016,10 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
                 if (!matchedMethod)
                     return false;
             }
-            // Comprehensive Search Bar Check
+            // Advanced Search Query Engine Check (Supports method:POST, is:error, slow:>1s, status:200, headers, body, etc.)
             if (search && search.trim().length > 0) {
-                const queryTokens = search.trim().toLowerCase().split(/\s+/).filter(Boolean);
                 const routePath = logRouteMapRef.current.get(log.id)?.path || '';
-                const reqStr = typeof log.request === 'string' ? log.request : JSON.stringify(log.request || '');
-                const resStr = typeof log.response === 'string' ? log.response : JSON.stringify(log.response || '');
-                const searchTarget = [
-                    log.method || '',
-                    log.url || '',
-                    String(log.status ?? ''),
-                    routePath,
-                    reqStr,
-                    resStr,
-                    JSON.stringify(log.requestHeaders || ''),
-                    JSON.stringify(log.responseHeaders || ''),
-                ].join(' ').toLowerCase();
-                const isMatch = queryTokens.every(token => searchTarget.includes(token));
+                const isMatch = matchNetworkLogQuery(log, search, routePath);
                 if (!isMatch)
                     return false;
             }
@@ -1326,8 +1323,8 @@ const NetworkInspector = ({ enabled = true, isEnabled = true, storage, navigatio
         else if (analyticsFilters.sortBy === 'count_desc') {
             result = [...result].sort((a, b) => (b.count || 1) - (a.count || 1));
         }
-        return result;
-    }, [analyticsEvents, analyticsSearch, analyticsFilters]);
+        return result.slice(0, maxAnalyticsEventsLimit);
+    }, [analyticsEvents, analyticsSearch, analyticsFilters, maxAnalyticsEventsLimit]);
     const filteredConsoleLogs = useMemo(() => {
         let result = visibleConsoleLogs;
         // Filters check
@@ -1752,4 +1749,6 @@ export { getEventCategory, registerGAPlugin, } from './helpers/gaAnalyticsRegist
 export { usePerformanceTracker, useComponentProfiler, useNavigationProfiler, trackComponentRender, trackNavigationTransition, trackHeavyTask, measureAsync, getHermesMemoryStats, registerComponentProfile, subscribeRenderProfiles, getRenderProfiles, logPerformanceEvent, clearPerformanceEvents, subscribePerformanceEvents, getPerformanceEvents, getInitialRenderProfiles, getInitialPerformanceEvents, generateFixSnippet, } from './customHooks/performanceTracker';
 export { InspectLog, InspectTrackTime, InspectCatch, } from './decorators';
 export { getNativeDeviceMetrics, enableNativeCrashProtection, subscribeNativeCrashes, showNativeFloatingButton, hideNativeFloatingButton, setNativeFloatingButtonBadge, subscribeNativeFloatingButtonPress, subscribeNativeDeviceShake, startNativeFpsMonitoring, stopNativeFpsMonitoring, getNativeFpsMetrics, getNativeStorageItem, setNativeStorageItem, isNativeModuleAvailable, } from './native/NativeInspector';
+export { sendSessionTelemetryPing, trackTelemetryEvent, trackInspectorOpen, trackTabSwitch, trackLogExport, GA4_MEASUREMENT_ID, GA4_API_SECRET, } from './helpers';
+export { BrandSquareIcon, BrandCircleIcon, } from './components/NetworkIcons';
 export { ActiveTab, Method, StatusFilter, SortOrder, LocalFilter, ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, ConsoleLogType, AnalyticsEventSource, GAEventCategory, StackFrameType, DiffResultType, BundleSubTab, PerformanceSubTab, CrashType, CrashExportFormat, CrashDetailSubTab, CrashFilterType, BreadcrumbType, } from './types';

package/dist/esm/native/NativeInspector.d.ts

@@ -17,6 +17,11 @@ export interface NativeDeviceMetrics {
     osVersion?: string;
     apiLevel?: number;
     cpuAbi?: string;
+    appName?: string;
+    appVersion?: string;
+    appBuild?: string;
+    appBundleId?: string;
+    appPackageName?: string;
 }
 export interface NativeCrashEvent {
     platform: 'android' | 'ios';

package/dist/esm/native/NativeInspector.js

@@ -5,8 +5,9 @@ const NativeModule = NativeNetworkInspector || NativeModules.NetworkInspectorMod
 export const isNativeModuleAvailable = () => {
     return !!NativeModule;
 };
-const nativeEmitter = isNativeModuleAvailable()
-    ? new NativeEventEmitter(NativeModule)
+const eventTarget = NativeModules.NetworkInspectorModule || NativeNetworkInspector;
+const nativeEmitter = eventTarget
+    ? new NativeEventEmitter(eventTarget)
     : null;
 /**
  * Retrieves low-level native hardware and system metrics (RAM, Heap, Disk, Battery, CPU).