react-native-inapp-inspector 2.0.1 → 2.0.2

package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt

@@ -176,6 +176,29 @@ class NetworkInspectorModule(private val reactContext: ReactApplicationContext)
             val cpuAbi = if (Build.SUPPORTED_ABIS.isNotEmpty()) Build.SUPPORTED_ABIS[0] else "unknown"
             map.putString("cpuAbi", cpuAbi)
 
+            // 6. Application Identifiers (Legal & Non-PII)
+            try {
+                val packageManager = reactContext.packageManager
+                val packageName = reactContext.packageName
+                val packageInfo = packageManager.getPackageInfo(packageName, 0)
+                val appInfo = packageManager.getApplicationInfo(packageName, 0)
+                val appName = packageManager.getApplicationLabel(appInfo).toString()
+                val appVersion = packageInfo.versionName ?: "unknown"
+                val appBuild = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
+                    packageInfo.longVersionCode.toString()
+                } else {
+                    @Suppress("DEPRECATION")
+                    packageInfo.versionCode.toString()
+                }
+                map.putString("appName", appName)
+                map.putString("appPackageName", packageName)
+                map.putString("appBundleId", packageName)
+                map.putString("appVersion", appVersion)
+                map.putString("appBuild", appBuild)
+            } catch (e: Exception) {
+                // Ignore app info fallback
+            }
+
             promise.resolve(map)
         } catch (e: Exception) {
             promise.reject("DEVICE_METRICS_ERROR", e.message, e)

package/dist/commonjs/components/Inspector/MainScreen.js

@@ -56,6 +56,7 @@ const PerformanceTab_1 = __importDefault(require("./PerformanceTab"));
 const CrashTab_1 = __importDefault(require("./CrashTab"));
 const CrashDetail_1 = __importDefault(require("./CrashDetail"));
 const SettingsPanel_1 = __importDefault(require("./SettingsPanel"));
+const TelemetryConsentModal_1 = __importDefault(require("./TelemetryConsentModal"));
 const Toast_1 = __importDefault(require("../Toast"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
@@ -204,6 +205,9 @@ const MainScreen = () => {
 
               {/* Bottom floating toast notification */}
               <Toast_1.default />
+
+              {/* Anonymous Telemetry Consent Dialog */}
+              <TelemetryConsentModal_1.default />
             </react_native_1.View>
           </react_native_1.View>
         </ErrorBoundary_1.default>)}

package/dist/commonjs/components/Inspector/TelemetryConsentModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const TelemetryConsentModal: () => React.JSX.Element;
+export default TelemetryConsentModal;

package/dist/commonjs/components/Inspector/TelemetryConsentModal.js

@@ -0,0 +1,212 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TelemetryConsentModal = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../../styles/AppColors");
+const BrandCircleIcon_1 = require("../BrandCircleIcon");
+const telemetry_1 = require("../../helpers/telemetry");
+const TelemetryConsentModal = () => {
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const fadeAnim = (0, react_1.useState)(new react_native_1.Animated.Value(0))[0];
+    (0, react_1.useEffect)(() => {
+        let isMounted = true;
+        (0, telemetry_1.getTelemetryConsentStatus)().then(status => {
+            if (isMounted && status === 'undetermined') {
+                setVisible(true);
+                react_native_1.Animated.timing(fadeAnim, {
+                    toValue: 1,
+                    duration: 300,
+                    useNativeDriver: true,
+                }).start();
+            }
+        });
+        return () => {
+            isMounted = false;
+        };
+    }, [fadeAnim]);
+    const handleDecision = async (granted) => {
+        react_native_1.Animated.timing(fadeAnim, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true,
+        }).start(async () => {
+            setVisible(false);
+            await (0, telemetry_1.setTelemetryConsent)(granted);
+            if (granted) {
+                // Immediately trigger the session initialization ping
+                (0, telemetry_1.sendSessionTelemetryPing)({ force: true });
+            }
+        });
+    };
+    if (!visible)
+        return null;
+    return (<react_native_1.Modal transparent visible={visible} animationType="none" statusBarTranslucent>
+      <react_native_1.View style={styles.overlay}>
+        <react_native_1.Animated.View style={[styles.card, { opacity: fadeAnim }]}>
+          <react_native_1.View style={styles.headerRow}>
+            <react_native_1.View style={styles.iconWrapper}>
+              <BrandCircleIcon_1.BrandCircleIcon size={40}/>
+            </react_native_1.View>
+            <react_native_1.View style={styles.titleContainer}>
+              <react_native_1.Text style={styles.title}>Help Improve In-App Inspector</react_native_1.Text>
+              <react_native_1.Text style={styles.subtitle}>Anonymous Diagnostic Insights</react_native_1.Text>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          <react_native_1.Text style={styles.description}>
+            To help us continually enhance tooling performance and compatibility,
+            would you mind sharing anonymous diagnostics (such as React Native
+            version, JavaScript engine, and platform architecture)?
+          </react_native_1.Text>
+
+          <react_native_1.View style={styles.privacyBadge}>
+            <react_native_1.Text style={styles.privacyText}>
+              🔒 <react_native_1.Text style={{ fontWeight: '700' }}>Privacy Guaranteed:</react_native_1.Text> We
+              only collect non-identifiable environment metrics. No personal
+              data, tokens, or network request payloads are ever collected.
+            </react_native_1.Text>
+          </react_native_1.View>
+
+          <react_native_1.View style={styles.buttonRow}>
+            <react_native_1.TouchableOpacity style={styles.declineButton} onPress={() => handleDecision(false)} activeOpacity={0.7}>
+              <react_native_1.Text style={styles.declineText}>Not Now</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+
+            <react_native_1.TouchableOpacity style={styles.allowButton} onPress={() => handleDecision(true)} activeOpacity={0.8}>
+              <react_native_1.Text style={styles.allowText}>Allow & Share</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.Animated.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+exports.TelemetryConsentModal = TelemetryConsentModal;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0, 0, 0, 0.65)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        zIndex: 999999,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 420,
+        backgroundColor: '#1E1F29',
+        borderRadius: 20,
+        padding: 22,
+        borderWidth: 1,
+        borderColor: 'rgba(255, 255, 255, 0.12)',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 10 },
+        shadowOpacity: 0.5,
+        shadowRadius: 20,
+        elevation: 24,
+    },
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 14,
+    },
+    iconWrapper: {
+        marginRight: 14,
+    },
+    titleContainer: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 17,
+        fontWeight: '700',
+        color: '#FFFFFF',
+        letterSpacing: -0.2,
+    },
+    subtitle: {
+        fontSize: 12,
+        color: AppColors_1.AppColors.purple || '#9055FF',
+        fontWeight: '600',
+        marginTop: 2,
+    },
+    description: {
+        fontSize: 13,
+        lineHeight: 19,
+        color: 'rgba(255, 255, 255, 0.75)',
+        marginBottom: 14,
+    },
+    privacyBadge: {
+        backgroundColor: 'rgba(144, 85, 255, 0.12)',
+        borderRadius: 10,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(144, 85, 255, 0.25)',
+        marginBottom: 20,
+    },
+    privacyText: {
+        fontSize: 11,
+        lineHeight: 16,
+        color: '#D8C6FF',
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        gap: 12,
+    },
+    declineButton: {
+        paddingVertical: 10,
+        paddingHorizontal: 16,
+        borderRadius: 10,
+        backgroundColor: 'rgba(255, 255, 255, 0.08)',
+    },
+    declineText: {
+        fontSize: 13,
+        fontWeight: '600',
+        color: 'rgba(255, 255, 255, 0.7)',
+    },
+    allowButton: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+        borderRadius: 10,
+        backgroundColor: '#7C3AED',
+    },
+    allowText: {
+        fontSize: 13,
+        fontWeight: '700',
+        color: '#FFFFFF',
+    },
+});
+exports.default = exports.TelemetryConsentModal;

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.0.1";
+export declare const LIB_VERSION = "2.0.2";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '2.0.1';
+exports.LIB_VERSION = '2.0.2';

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

@@ -1,5 +1,6 @@
 import { NetworkLog, RouteInfo, DiffResult, JsonContent, StackFrameType } from '../types';
 export * from './searchQueryParser';
+export * from './telemetry';
 export declare const getDomainColor: (domain: string) => string;
 export declare const formatDateTime: (timestamp: number) => string;
 export declare const formatTimestamp: (timestamp: number) => string;

package/dist/commonjs/helpers/index.js

@@ -26,6 +26,7 @@ const AppColors_1 = require("../styles/AppColors");
 // Constants
 const constants_1 = require("../constants");
 __exportStar(require("./searchQueryParser"), exports);
+__exportStar(require("./telemetry"), exports);
 const getDomainColor = (domain) => {
     if (!domain)
         return constants_1.DOMAIN_COLORS[0];

package/dist/commonjs/helpers/telemetry.d.ts

@@ -0,0 +1,99 @@
+export declare const GA4_MEASUREMENT_ID = "G-XXXXXXXXXX";
+export declare const GA4_API_SECRET = "YOUR_GA4_API_SECRET";
+/**
+ * Asynchronously loads host application and device metadata (strictly non-PII/technical).
+ */
+export declare function loadAppDiagnosticsAsync(): Promise<Record<string, any>>;
+/**
+ * Returns the developer's telemetry consent status.
+ */
+export declare function getTelemetryConsentStatus(): Promise<'granted' | 'declined' | 'undetermined'>;
+/**
+ * Saves the developer's telemetry consent choice.
+ */
+export declare function setTelemetryConsent(granted: boolean): Promise<void>;
+/**
+ * Checks if the user or environment has opted out of telemetry.
+ */
+export declare function isTelemetryOptedOut(explicitSetting?: boolean): boolean;
+/**
+ * Track an anonymous event via GA4 Measurement Protocol.
+ */
+export declare function trackTelemetryEvent(eventName: string, params?: Record<string, any>, options?: {
+    telemetry?: boolean;
+    force?: boolean;
+}): Promise<void>;
+/**
+ * 1. Session initialization heartbeat ping.
+ */
+export declare function sendSessionTelemetryPing(options?: {
+    telemetry?: boolean;
+    environment?: string;
+    hasNavigation?: boolean;
+    hasAppIcon?: boolean;
+    force?: boolean;
+}): Promise<void>;
+/**
+ * 2. Track when the inspector modal is opened.
+ */
+export declare function trackInspectorOpen(options?: {
+    activeTab?: string;
+    openSource?: 'fab' | 'shake' | 'programmatic';
+    telemetry?: boolean;
+}): void;
+/**
+ * 3. Track when the inspector modal is closed.
+ */
+export declare function trackInspectorClose(options?: {
+    telemetry?: boolean;
+}): void;
+/**
+ * 4. Track tab / page view navigation inside the inspector.
+ */
+export declare function trackTabSwitch(tabName: string, options?: {
+    telemetry?: boolean;
+    fromTab?: string;
+}): void;
+/**
+ * 5. Track network API interaction (inspect details, copy cURL, retry).
+ */
+export declare function trackNetworkInteraction(action: 'view_detail' | 'copy_curl' | 'retry_request' | 'copy_url' | 'clear_logs' | 'export_har', options?: {
+    method?: string;
+    statusCode?: number;
+    durationMs?: number;
+    telemetry?: boolean;
+}): void;
+/**
+ * 6. Track Redux / State management interaction.
+ */
+export declare function trackReduxInteraction(action: 'view_diff' | 'view_state' | 'view_action' | 'filter_reducer', options?: {
+    reducerName?: string;
+    telemetry?: boolean;
+}): void;
+/**
+ * 7. Track Crash & Exception interaction.
+ */
+export declare function trackCrashInteraction(action: 'view_crash_detail' | 'share_crash_report' | 'copy_stacktrace' | 'clear_crashes', options?: {
+    crashType?: string;
+    telemetry?: boolean;
+}): void;
+/**
+ * 8. Track Performance monitoring tab interaction.
+ */
+export declare function trackPerformanceInteraction(subTab: 'fps' | 'memory' | 'rerenders' | 'bundles', options?: {
+    telemetry?: boolean;
+}): void;
+/**
+ * 9. Track search queries and filter applications.
+ */
+export declare function trackSearchOrFilter(target: 'apis' | 'console' | 'redux' | 'crashes' | 'analytics', actionType: 'search_query' | 'status_filter' | 'method_filter' | 'tag_filter', options?: {
+    filterValue?: string;
+    telemetry?: boolean;
+}): void;
+/**
+ * 10. Track when logs / reports are exported or shared.
+ */
+export declare function trackLogExport(exportType: 'logs_json' | 'logs_har' | 'curl' | 'crash_report', options?: {
+    telemetry?: boolean;
+    count?: number;
+}): void;