react-native-inapp-inspector 2.3.14 → 2.3.16

package/src/components/NetworkIcons.tsx

@@ -1520,6 +1520,23 @@ export const PackageBoxIcon = ({
   );
 };
 
+export const StarIcon = ({
+  color = '#F59E0B',
+  size = 14,
+}: IconProps) => {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
+      <Path
+        d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+};
+
 export const GitHubIcon = ({
   color = AppColors.grayTextWeak,
   size = 14,
@@ -2355,3 +2372,78 @@ export const TurtleIcon = ({
   </Svg>
 );
 
+export const HeadphonesIcon = ({
+  color = AppColors.white,
+  size = 20,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M3 18v-6a9 9 0 0 1 18 0v6"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const HelpCircleIcon = ({
+  color = AppColors.white,
+  size = 20,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2" />
+    <Path
+      d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Line x1="12" y1="17" x2="12.01" y2="17" stroke={color} strokeWidth="2" strokeLinecap="round" />
+  </Svg>
+);
+
+export const SendIcon = ({
+  color = AppColors.white,
+  size = 18,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M22 2L11 13"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <Path
+      d="M22 2L15 22L11 13L2 9L22 2Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </Svg>
+);
+
+export const LifeBuoyIcon = ({
+  color = AppColors.white,
+  size = 20,
+}: IconProps) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2" />
+    <Circle cx="12" cy="12" r="4" stroke={color} strokeWidth="2" />
+    <Line x1="4.93" y1="4.93" x2="9.17" y2="9.17" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="14.83" y1="9.17" x2="19.07" y2="4.93" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="14.83" y1="14.83" x2="19.07" y2="19.07" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <Line x1="4.93" y1="19.07" x2="9.17" y2="14.83" stroke={color} strokeWidth="2" strokeLinecap="round" />
+  </Svg>
+);
+

package/src/constants/version.ts

@@ -1,3 +1,3 @@
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-export const LIB_VERSION = '2.3.14';
+export const LIB_VERSION = '2.3.16';

package/src/customHooks/analyticsLogger.ts

@@ -42,7 +42,7 @@ let currentUserId: string | undefined;
 let currentDefaultEventParameters: Record<string, any> = {};
 let isCollectionEnabled = true;
 
-let maxAnalyticsLogsLimit = 75;
+let maxAnalyticsLogsLimit = 150;
 
 export const setMaxAnalyticsLogsLimit = (limit: number): void => {
   maxAnalyticsLogsLimit = Math.max(10, limit);

package/src/customHooks/consoleLogger.ts

@@ -15,7 +15,7 @@ export const setConsoleModuleEnabled = (enabled: boolean) => {
 
 export const getConsoleModuleEnabled = () => isConsoleModuleEnabled;
 
-let maxConsoleLogsLimit = 100;
+let maxConsoleLogsLimit = 250;
 
 export const setMaxConsoleLogsLimit = (limit: number): void => {
   maxConsoleLogsLimit = Math.max(10, limit);
@@ -293,9 +293,9 @@ const addLog = (
     logs = logs.slice(0, maxConsoleLogsLimit);
     notify();
 
-    // Asynchronously symbolicate stack trace via Metro in development
+    // Asynchronously symbolicate stack trace via Metro in development (errors only)
     const stackToSymbolicate = errorStack || stackToUse || stack;
-    if (stackToSymbolicate && typeof __DEV__ !== 'undefined' && __DEV__) {
+    if (type === 'error' && stackToSymbolicate && typeof __DEV__ !== 'undefined' && __DEV__) {
       const currentLogId = newLog.id;
       symbolicateStack(stackToSymbolicate)
         .then(symFrames => {
@@ -443,6 +443,8 @@ export const setupConsoleLogger = () => {
     info: console.info,
     warn: console.warn,
     error: console.error,
+    debug: console.debug,
+    trace: console.trace,
   };
 
   // Intercept console.log
@@ -461,6 +463,30 @@ export const setupConsoleLogger = () => {
     originalConsole.info(...args);
   };
 
+  // Intercept console.debug
+  console.debug = (...args: any[]) => {
+    try {
+      addLog('info', args, 'info');
+    } catch {}
+    if (typeof originalConsole.debug === 'function') {
+      originalConsole.debug(...args);
+    } else {
+      originalConsole.log(...args);
+    }
+  };
+
+  // Intercept console.trace
+  console.trace = (...args: any[]) => {
+    try {
+      addLog('info', args, 'info');
+    } catch {}
+    if (typeof originalConsole.trace === 'function') {
+      originalConsole.trace(...args);
+    } else {
+      originalConsole.log(...args);
+    }
+  };
+
   // Intercept console.warn
   console.warn = (...args: any[]) => {
     try {
@@ -495,3 +521,10 @@ export const setupConsoleLogger = () => {
 
   (globalThis as any).__CONSOLE_LOGGER_INITIALIZED__ = true;
 };
+
+// Auto-initialize console logger on module load
+if (typeof globalThis !== 'undefined') {
+  try {
+    setupConsoleLogger();
+  } catch {}
+}

package/src/customHooks/crashHandler.ts

@@ -36,7 +36,7 @@ let lastHandledErrorTimestamp = 0;
 let crashRecordsStore: CrashRecord[] = [];
 let breadcrumbsStore: CrashBreadcrumb[] = [];
 const MAX_BREADCRUMBS = 50;
-let maxStoredCrashes = 50;
+let maxStoredCrashes = 100;
 const appStartTime = Date.now();
 let isCrashModuleEnabled = false;
 

package/src/customHooks/networkLogger.ts

@@ -36,17 +36,23 @@ export const setNetworkModuleEnabled = (enabled: boolean) => {
 
 export const getNetworkModuleEnabled = () => isNetworkModuleEnabled;
 
-const ALLOWED_METHODS = ["GET", "POST", "PUT", "PATCH", "DELETE"];
+const ALLOWED_METHODS = [
+  "GET",
+  "POST",
+  "PUT",
+  "PATCH",
+  "DELETE",
+  "HEAD",
+  "OPTIONS",
+  "CONNECT",
+  "TRACE",
+];
 
 const IGNORED_URL_PATTERNS: RegExp[] = [
-  /\/symbolicate(?:[/?#]|$)/i,
+  /\/symbolicate(?:\?|$)/i,
   /\/index\.bundle(?:\?|$)/i,
-  /\/hot(?:\?|$)/i,
-  /\/message(?:\?|$)/i,
   /\/open-debugger(?:\?|$)/i,
-  /\/status(?:\?|$)/i,
-  /127\.0\.0\.1:(?:8081|8082|8083|19000|19001|19002|3000|8000)/i,
-  /localhost:(?:8081|8082|8083|19000|19001|19002|3000|8000)\/index\.bundle/i,
+  /:(?:8081|8082|8083|19000|19001)\/(?:index\.bundle|symbolicate|hot|message|status)/i,
   /google-analytics\.com\/mp\/collect/i,
   /analytics\.google\.com/i,
 ];
@@ -58,6 +64,23 @@ function shouldIgnoreUrl(url: string | undefined | null): boolean {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
+function parseXHRResponseHeaders(
+  headerStr: string | null | undefined,
+): Record<string, string> | undefined {
+  if (!headerStr || typeof headerStr !== "string") return undefined;
+  const lines = headerStr.trim().split(/[\r\n]+/);
+  const result: Record<string, string> = {};
+  lines.forEach((line) => {
+    const idx = line.indexOf(":");
+    if (idx > 0) {
+      const key = line.substring(0, idx).trim().toLowerCase();
+      const val = line.substring(idx + 1).trim();
+      result[key] = val;
+    }
+  });
+  return Object.keys(result).length > 0 ? result : undefined;
+}
+
 function normaliseHeaders(
   raw: Headers | undefined | null,
 ): Record<string, string> | undefined {
@@ -158,7 +181,7 @@ export const clearNetworkLogs = () => {
 
 export const getNetworkLogs = () => [...logs];
 
-let maxNetworkLogsLimit = 100;
+let maxNetworkLogsLimit = 250;
 
 export const setMaxNetworkLogsLimit = (limit: number): void => {
   maxNetworkLogsLimit = Math.max(10, limit);
@@ -191,7 +214,7 @@ const addOrUpdateLog = (log: NetworkLog) => {
   if (!isNetworkModuleEnabled) return;
   const method = log.method?.toUpperCase();
 
-  if (!ALLOWED_METHODS.includes(method)) return;
+  if (method && !ALLOWED_METHODS.includes(method)) return;
 
   if (shouldIgnoreUrl(log.url)) return;
 
@@ -207,19 +230,167 @@ const addOrUpdateLog = (log: NetworkLog) => {
   notify();
 };
 
+let isInsideFetch = false;
+
 // ─── Setup ────────────────────────────────────────────────────────────────────
 
 export const setupNetworkLogger = () => {
   if ((globalThis as any).__NETWORK_LOGGER_INITIALIZED__) return;
   (globalThis as any).__NETWORK_LOGGER__ = addOrUpdateLog;
 
+  // 1. Hook XMLHttpRequest
+  const globalXHR = (globalThis as any).XMLHttpRequest;
+  if (globalXHR && globalXHR.prototype && !(globalThis as any).__XHR_LOGGER_INITIALIZED__) {
+    (globalThis as any).__XHR_LOGGER_INITIALIZED__ = true;
+    const originalOpen = globalXHR.prototype.open;
+    const originalSend = globalXHR.prototype.send;
+    const originalSetRequestHeader = globalXHR.prototype.setRequestHeader;
+
+    globalXHR.prototype.open = function (
+      method: string,
+      url: string | any,
+      async?: boolean,
+      user?: string | null,
+      password?: string | null,
+    ) {
+      this.__logMethod = (method || "GET").toUpperCase();
+      this.__logUrl = typeof url === "string" ? url : String(url);
+      this.__logRequestHeaders = {};
+      this.__logStartTime = Date.now();
+      this.__logCaller = getCallerFromStack();
+
+      return originalOpen.apply(this, [method, url, async !== false, user, password]);
+    };
+
+    globalXHR.prototype.setRequestHeader = function (header: string, value: string) {
+      if (header && value != null) {
+        if (!this.__logRequestHeaders) this.__logRequestHeaders = {};
+        this.__logRequestHeaders[header.toLowerCase()] = String(value);
+      }
+      return originalSetRequestHeader.apply(this, [header, value]);
+    };
+
+    globalXHR.prototype.send = function (body?: any) {
+      if (!isNetworkModuleEnabled || isInsideFetch || this.__inAppInspectorTracked) {
+        return originalSend.apply(this, [body]);
+      }
+
+      const url = this.__logUrl || "";
+      const method = this.__logMethod || "GET";
+
+      if (shouldIgnoreUrl(url)) {
+        return originalSend.apply(this, [body]);
+      }
+
+      const id = counter++;
+      this.__logId = id;
+      const start = this.__logStartTime || Date.now();
+      const caller = this.__logCaller || "Unknown";
+      const requestHeaders = this.__logRequestHeaders;
+
+      let client = "xhr";
+      if (
+        requestHeaders?.["apollographql-client-name"] ||
+        url.toLowerCase().includes("/graphql")
+      ) {
+        client = "apollo";
+      } else if (caller.toLowerCase().includes("axios")) {
+        client = "axios";
+      }
+
+      const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
+
+      addOrUpdateLog({
+        id,
+        url,
+        method,
+        startTime: start,
+        caller,
+        client,
+        routeInfo: currentRoute || undefined,
+        request: method === "GET" ? undefined : parseRequestData(body),
+        requestHeaders:
+          Object.keys(requestHeaders || {}).length > 0 ? requestHeaders : undefined,
+      });
+
+      const onFinished = () => {
+        if (this.__logFinished) return;
+        this.__logFinished = true;
+        const duration = Date.now() - start;
+        let responseData: any = null;
+
+        try {
+          if (this.responseType === "" || this.responseType === "text") {
+            const raw = this.responseText;
+            try {
+              responseData = JSON.parse(raw);
+            } catch {
+              responseData = raw;
+            }
+          } else if (this.responseType === "json") {
+            responseData = this.response;
+          } else if (this.responseType === "blob") {
+            responseData = `[Blob: ${this.response?.size || 0} bytes]`;
+          } else {
+            responseData = `[${this.responseType || "Unknown"} Data]`;
+          }
+        } catch {
+          responseData = this.response || null;
+        }
+
+        const rawRespHeaders = this.getAllResponseHeaders
+          ? this.getAllResponseHeaders()
+          : "";
+        const responseHeaders = parseXHRResponseHeaders(rawRespHeaders);
+
+        addOrUpdateLog({
+          id,
+          url,
+          method,
+          status: this.status,
+          response: responseData,
+          duration,
+          startTime: start,
+          caller,
+          client,
+          responseHeaders,
+        });
+      };
+
+      const onErrorOrAbort = () => {
+        if (this.__logFinished) return;
+        this.__logFinished = true;
+        const duration = Date.now() - start;
+
+        addOrUpdateLog({
+          id,
+          url,
+          method,
+          status: this.status || 0,
+          response: "Network request failed",
+          duration,
+          startTime: start,
+          caller,
+          client,
+        });
+      };
+
+      this.addEventListener("load", onFinished);
+      this.addEventListener("error", onErrorOrAbort);
+      this.addEventListener("abort", onErrorOrAbort);
+      this.addEventListener("timeout", onErrorOrAbort);
+
+      return originalSend.apply(this, [body]);
+    };
+  }
+
+  // 2. Hook fetch
   const originalFetch = (globalThis as any).fetch;
 
   if (originalFetch) {
     (globalThis as any).fetch = async (url: any, options: any = {}) => {
       if (!isNetworkModuleEnabled) return originalFetch(url, options);
       const method = (options?.method || "GET").toUpperCase();
-      if (!ALLOWED_METHODS.includes(method)) return originalFetch(url, options);
 
       const id = counter++;
       const start = Date.now();
@@ -229,18 +400,23 @@ export const setupNetworkLogger = () => {
 
       let caller = "Unknown";
       let requestHeaders: Record<string, string> | undefined;
-      let client = 'fetch';
+      let client = "fetch";
 
       try {
         requestHeaders = normaliseHeaders(options?.headers);
         caller = getCallerFromStack(); // ✅ Capture call line
 
-        if (requestHeaders?.['apollographql-client-name'] || finalUrl?.toLowerCase().includes('/graphql')) {
-          client = 'apollo';
-        } else if (requestHeaders?.['x-requested-with']?.toLowerCase().includes('xmlhttprequest')) {
-          client = 'xhr';
-        } else if (caller?.toLowerCase().includes('axios')) {
-          client = 'axios';
+        if (
+          requestHeaders?.["apollographql-client-name"] ||
+          finalUrl?.toLowerCase().includes("/graphql")
+        ) {
+          client = "apollo";
+        } else if (
+          requestHeaders?.["x-requested-with"]?.toLowerCase().includes("xmlhttprequest")
+        ) {
+          client = "xhr";
+        } else if (caller?.toLowerCase().includes("axios")) {
+          client = "axios";
         }
 
         const currentRoute = currentRouteProvider ? currentRouteProvider() : null;
@@ -259,7 +435,13 @@ export const setupNetworkLogger = () => {
       } catch {}
 
       try {
-        const response = await originalFetch(url, options);
+        isInsideFetch = true;
+        let response: any;
+        try {
+          response = await originalFetch(url, options);
+        } finally {
+          isInsideFetch = false;
+        }
         const duration = Date.now() - start;
 
         try {
@@ -317,7 +499,7 @@ export const setupNetworkLogger = () => {
     };
   }
 
-  // Hook Axios — patches both the default instance and any future axios.create() instances
+  // 3. Hook Axios — patches default instance and future axios.create() instances
   try {
     if (axios) {
       addAxiosInterceptors(axios);
@@ -331,7 +513,7 @@ export const setupNetworkLogger = () => {
       }
     }
   } catch (_e) {
-    // Axios not available — fetch-only mode
+    // Axios not available — fetch/XHR mode
   }
 
   try {
@@ -345,7 +527,6 @@ export const setupNetworkLogger = () => {
 export const addAxiosInterceptors = (axiosInstance: any) => {
   axiosInstance.interceptors.request.use(async (config: any) => {
     const method = (config.method || "GET").toUpperCase();
-    if (!ALLOWED_METHODS.includes(method)) return config;
 
     const id = counter++;
     const start = Date.now();
@@ -369,7 +550,7 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
       method,
       startTime: start,
       caller,
-      client: 'axios',
+      client: "axios",
       routeInfo: currentRoute || undefined,
       request: method === "GET" ? undefined : parseRequestData(config.data),
       requestHeaders: normaliseHeaders(config.headers),
@@ -386,7 +567,7 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
       const caller = config.__logCaller;
       const method = (config.method || "GET").toUpperCase();
 
-      if (id == null || !ALLOWED_METHODS.includes(method)) return response;
+      if (id == null) return response;
 
       let url = config.url ?? "";
       if (!url.startsWith("http")) url = `${config.baseURL ?? ""}${url}`;
@@ -400,7 +581,7 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
         startTime: start || Date.now(),
         duration: start != null ? Date.now() - start : undefined,
         caller,
-        client: 'axios',
+        client: "axios",
         responseHeaders: normaliseHeaders(response.headers),
       });
 
@@ -413,7 +594,7 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
       const caller = config.__logCaller;
       const method = (config.method || "GET").toUpperCase();
 
-      if (id != null && ALLOWED_METHODS.includes(method)) {
+      if (id != null) {
         let url = config.url ?? "";
         if (!url.startsWith("http")) url = `${config.baseURL ?? ""}${url}`;
 
@@ -426,7 +607,7 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
           startTime: start || Date.now(),
           duration: start != null ? Date.now() - start : undefined,
           caller,
-          client: 'axios',
+          client: "axios",
           responseHeaders: normaliseHeaders(error.response?.headers),
         });
       }
@@ -434,3 +615,10 @@ export const addAxiosInterceptors = (axiosInstance: any) => {
     },
   );
 };
+
+// Auto-initialize logger on module load so startup requests are never missed
+if (typeof globalThis !== "undefined") {
+  try {
+    setupNetworkLogger();
+  } catch {}
+}

package/src/helpers/index.ts

@@ -24,6 +24,7 @@ import {
 } from '../types';
 export * from './searchQueryParser';
 export * from './memoryManager';
+export * from './toast';
 
 /**
  * Returns true if running in local debug environment (connected to Metro/dev server, __DEV__ is true).