react-native-inapp-inspector 1.1.27 → 1.1.29

package/dist/esm/components/Inspector/SettingsPanel.js

@@ -13,8 +13,12 @@ import { clearNetworkLogs } from '../../customHooks/networkLogger';
 import { clearConsoleLogs } from '../../customHooks/consoleLogger';
 import { clearAnalyticsEvents } from '../../customHooks/analyticsLogger';
 import { clearCrashRecords, } from '../../customHooks/crashHandler';
+import { isReduxConnected } from '../../customHooks/reduxLogger';
+import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
+import { useTranslation } from '../../i18n';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, WhiteBackNavigation, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, } from '../NetworkIcons';
 const SettingsPanel = () => {
+    const { t } = useTranslation();
     const { settingsPage, setSettingsPage, settingsActiveSubTab, setSettingsActiveSubTab, tabVisibility, toggleTabVisibility, defaultTab, setDefaultTab, isDark, setIsDark, modalHeightPercent, setModalHeightPercent, modalAnimationType, setModalAnimationType, showDuplicateLogs, setShowDuplicateLogs, showConsoleLevels, setShowConsoleLevels, resetToDefaults, storage, logs, consoleLogs, analyticsEvents, reduxState, maxNetworkLogs, setMaxNetworkLogs, maxConsoleLogs, setMaxConsoleLogs, reduxAutoRefresh, setReduxAutoRefreshState, reduxExpandDepth, setReduxExpandDepth, switchActiveTab, setSelected, setSelectedEvent, setReduxState, crashRecords, maxCrashLogs, setMaxCrashLogs, } = useInspector();
     const isPersistent = isPersistentStorageAvailable();
     const headerTopPadding = Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
@@ -185,9 +189,14 @@ const SettingsPanel = () => {
               </View>
 
               {settingsTabs.map((tab, idx) => {
-                    const isVisible = tab.key === 'apis' || tabVisibility?.[tab.key];
+                    const isReduxAvail = isReduxConnected();
+                    const isAnalyticsAvail = isAnalyticsConnected();
+                    const isUnavailable = (tab.key === 'redux' && !isReduxAvail) ||
+                        (tab.key === 'analytics' && !isAnalyticsAvail);
+                    const isLocked = tab.key === 'apis' || isUnavailable;
+                    const isVisible = tab.key === 'apis' ||
+                        (Boolean(tabVisibility?.[tab.key]) && !isUnavailable);
                     const isLast = idx === settingsTabs.length - 1;
-                    const isLocked = tab.key === 'apis';
                     return (<View key={tab.key} style={{
                             flexDirection: 'row',
                             alignItems: 'center',
@@ -203,6 +212,7 @@ const SettingsPanel = () => {
                             flexDirection: 'row',
                             alignItems: 'center',
                             gap: 8,
+                            flexWrap: 'wrap',
                         }}>
                       {/* Small icon tile */}
                       <View style={{
@@ -251,8 +261,28 @@ const SettingsPanel = () => {
                         }}>
                         {tab.label}
                       </Text>
+                      {/* Unavailable badge */}
+                      {isUnavailable && (<View style={{
+                                backgroundColor: `${AppColors.amber500}18`,
+                                borderRadius: 4,
+                                paddingHorizontal: 5,
+                                paddingVertical: 1.5,
+                                borderWidth: 1,
+                                borderColor: `${AppColors.amber500}35`,
+                            }}>
+                          <Text style={{
+                                fontFamily: AppFonts.interBold,
+                                fontSize: 8,
+                                color: AppColors.amber700,
+                                letterSpacing: 0.3,
+                            }}>
+                            {tab.key === 'redux'
+                                ? t('settings.notConnectedBadge')
+                                : t('settings.notDetectedBadge')}
+                          </Text>
+                        </View>)}
                       {/* #6 — badge marks the configured default tab */}
-                      {tab.key === defaultTab && (<View style={{
+                      {tab.key === defaultTab && !isUnavailable && (<View style={{
                                 flexDirection: 'row',
                                 alignItems: 'center',
                                 backgroundColor: `${AppColors.purple}14`,
@@ -281,21 +311,21 @@ const SettingsPanel = () => {
                         </View>)}
 
                       {/* Settings gear icon next to label */}
-                      <TouchableScale onPress={() => {
-                            animateNextLayout();
-                            setSettingsPage(tab.key);
-                        }} hitSlop={8} style={{
-                            marginLeft: 4,
-                            padding: 4,
-                            borderRadius: 6,
-                            backgroundColor: AppColors.purpleShade50,
-                            borderWidth: 1,
-                            borderColor: `${AppColors.purple}26`,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                        }}>
-                        <SettingsIcon color={AppColors.purple} size={10}/>
-                      </TouchableScale>
+                      {!isUnavailable && (<TouchableScale onPress={() => {
+                                animateNextLayout();
+                                setSettingsPage(tab.key);
+                            }} hitSlop={8} style={{
+                                marginLeft: 4,
+                                padding: 4,
+                                borderRadius: 6,
+                                backgroundColor: AppColors.purpleShade50,
+                                borderWidth: 1,
+                                borderColor: `${AppColors.purple}26`,
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}>
+                          <SettingsIcon color={AppColors.purple} size={10}/>
+                        </TouchableScale>)}
                     </View>
 
                     {/* Visibility Switch in VISIBILITY column */}
@@ -345,12 +375,17 @@ const SettingsPanel = () => {
                       </TouchableScale>
                       {isLocked && (<Text style={{
                                 fontFamily: AppFonts.interBold,
-                                fontSize: 8,
-                                color: AppColors.grayTextWeak,
-                                letterSpacing: 0.4,
+                                fontSize: 7.5,
+                                color: isUnavailable
+                                    ? AppColors.amber700
+                                    : AppColors.grayTextWeak,
+                                letterSpacing: 0.3,
                                 marginTop: 3,
+                                textAlign: 'right',
                             }}>
-                          REQUIRED
+                          {tab.key === 'apis'
+                                ? t('settings.requiredBadge')
+                                : t('settings.readOnlyBadge')}
                         </Text>)}
                     </View>
                   </View>);

package/dist/esm/components/Inspector/TabBar.js

@@ -5,8 +5,12 @@ import TouchableScale from '../TouchableScale';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
+import { isReduxConnected } from '../../customHooks/reduxLogger';
+import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
 const TabBar = React.memo(() => {
     const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
+    const isReduxAvail = isReduxConnected();
+    const isAnalyticsAvail = isAnalyticsConnected();
     return (<View style={styles.tabBarContainer}>
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
@@ -53,7 +57,15 @@ const TabBar = React.memo(() => {
                 icon: 'crash',
             },
         ]
-            .filter(tab => tabVisibility?.[tab.key])
+            .filter(tab => {
+            if (!tabVisibility?.[tab.key])
+                return false;
+            if (tab.key === 'redux' && !isReduxAvail)
+                return false;
+            if (tab.key === 'analytics' && !isAnalyticsAvail)
+                return false;
+            return true;
+        })
             .map(tab => {
             const isActive = activeTab === tab.key;
             const iconColor = isActive

package/dist/esm/components/JsonViewer.js

@@ -57,7 +57,7 @@ const JsonTableRow = React.memo(({ itemKey, val, search, }) => {
 // ── JsonViewer Component ─────────────────────────────────────────────────────
 const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight = false, maxHeight, mode: externalMode, onModeChange, hideTabs = false, }) => {
     const { t } = useTranslation();
-    const [internalMode, setInternalMode] = useState('pretty');
+    const [internalMode, setInternalMode] = useState('raw');
     const mode = externalMode ?? internalMode;
     const setMode = (newMode) => {
         if (onModeChange) {
@@ -78,6 +78,10 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
             return String(data);
         }
     }, [data]);
+    const [showFullRaw, setShowFullRaw] = useState(false);
+    const RAW_LIMIT = 50000;
+    const isTruncated = rawText.length > RAW_LIMIT && !showFullRaw;
+    const displayRawText = isTruncated ? rawText.slice(0, RAW_LIMIT) : rawText;
     useEffect(() => {
         if (externalMode) {
             setInternalMode(externalMode);
@@ -148,7 +152,7 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
       <View style={contentWrapperStyle}>
         {mode === 'pretty' && (isEmpty ? (<View style={localStyles.emptyTable}>
               <Text style={localStyles.emptyTableText}>
-                {t('network.emptyResponse')}
+                {t('network.jsonViewer.emptyPayload')}
               </Text>
             </View>) : (wrap ? (fullHeight ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ flexGrow: 1 }}>
                 <View style={[styles.codeBlock, { width: '100%' }]}>{tree}</View>
@@ -163,12 +167,30 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth, wr
               </ScrollView>))))}
 
         {mode === 'raw' && (<ScrollView style={scrollStyle} contentContainerStyle={localStyles.rawContainer} showsVerticalScrollIndicator={true} nestedScrollEnabled={true}>
-            <HighlightText text={rawText} search={search} detectLinks={true} style={localStyles.rawPlainText} highlightStyle={{
+            <HighlightText text={displayRawText} search={search} detectLinks={rawText.length < 20000} style={localStyles.rawPlainText} selectable={true} highlightStyle={{
                 backgroundColor: AppColors.yellowHighlight,
                 color: AppColors.primaryBlack,
                 borderRadius: 3,
                 paddingHorizontal: 2,
             }}/>
+            {isTruncated && (<TouchableOpacity onPress={() => setShowFullRaw(true)} style={{
+                    marginTop: 10,
+                    backgroundColor: `${AppColors.brandPurple}15`,
+                    paddingVertical: 8,
+                    paddingHorizontal: 12,
+                    borderRadius: 6,
+                    alignItems: 'center',
+                    borderWidth: 1,
+                    borderColor: `${AppColors.brandPurple}30`,
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors.brandPurple,
+                }}>
+                  Showing first 50 KB ({Math.round(rawText.length / 1024)} KB total) · Tap to load full
+                </Text>
+              </TouchableOpacity>)}
           </ScrollView>)}
 
         {mode === 'table' && (fullHeight ? (<ScrollView style={scrollStyle}>

package/dist/esm/components/LogCard.js

@@ -1,10 +1,11 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, View, Pressable, Text, StyleSheet } from 'react-native';
+import { Alert, Animated, Linking, View, Pressable, Text, StyleSheet, } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
-import { getStatusColor, getDurationColor, getPath, getBaseUrl, formatDateTime, getSize, } from '../helpers';
+import { getStatusColor, getDurationColor, formatDateTime, getSize, } from '../helpers';
 import { CalendarIcon, ClockIcon, SizeIcon } from './NetworkIcons';
+import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
@@ -12,6 +13,27 @@ import { useTranslation } from '../i18n';
 const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
     const { t } = useTranslation();
     const methodColor = METHOD_COLORS[item.method] ?? METHOD_COLORS.ALL;
+    const handleOpenUrl = (e) => {
+        e?.stopPropagation?.();
+        Alert.alert(t('common.openInBrowser') || 'Open in Browser', `${t('common.openInBrowserPrompt') || 'Are you sure you want to open this URL in your external browser?'}\n\n${item.url}`, [
+            { text: t('common.cancel') || 'Cancel', style: 'cancel' },
+            {
+                text: t('common.open') || 'Open',
+                onPress: () => {
+                    Linking.canOpenURL(item.url)
+                        .then(supported => {
+                        if (supported) {
+                            Linking.openURL(item.url);
+                        }
+                        else {
+                            Linking.openURL(item.url).catch(() => { });
+                        }
+                    })
+                        .catch(() => { });
+                },
+            },
+        ]);
+    };
     const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
     const isLoading = item.status == null;
     const statusColor = getStatusColor(item.status);
@@ -37,10 +59,6 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             }).start();
         }
     }, [isNew]);
-    const path = getPath(item.url);
-    const baseUrl = getBaseUrl(item.url) || item.url;
-    const slug = path && path !== '/' ? path : item.url;
-    const showSlug = slug !== baseUrl && slug !== item.url;
     const triggeredAt = formatDateTime(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale onPress={onPress} style={[
@@ -51,7 +69,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             },
         ]}>
       <View style={styles.cardBody}>
-        {/* Row 1: Header (Checkbox, Serial, Method Badge, Base URL / Host with HTTPS, Status Pill) */}
+        {/* Row 1: Header (Checkbox, Serial, Method Badge, Client Tag, Status Pill) */}
         <View style={styles.cardHeaderRow}>
           <View style={styles.cardHeaderLeft}>
             <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
@@ -71,7 +89,122 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
               </Text>
             </View>
 
-            <HighlightText text={baseUrl || item.url} search={searchStr} style={styles.cardHostText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
+            {item.client && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: item.client === 'axios'
+                        ? `${AppColors.purple}14`
+                        : item.client === 'apollo' || item.client === 'graphql'
+                            ? `${AppColors.pink500}14`
+                            : item.client === 'xhr'
+                                ? `${AppColors.amber500}14`
+                                : `${AppColors.sky500}14`,
+                    borderColor: item.client === 'axios'
+                        ? `${AppColors.purple}30`
+                        : item.client === 'apollo' || item.client === 'graphql'
+                            ? `${AppColors.pink500}30`
+                            : item.client === 'xhr'
+                                ? `${AppColors.amber500}30`
+                                : `${AppColors.sky500}30`,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: item.client === 'axios'
+                        ? AppColors.purple
+                        : item.client === 'apollo' || item.client === 'graphql'
+                            ? AppColors.pink500
+                            : item.client === 'xhr'
+                                ? AppColors.amber700
+                                : AppColors.sky600,
+                },
+            ]}>
+                  {item.client.toUpperCase()}
+                </Text>
+              </View>)}
+
+            {/* Protocol / HTTPS Badge */}
+            <View style={[
+            styles.chip,
+            {
+                backgroundColor: item.url.toLowerCase().startsWith('https')
+                    ? '#ECFDF5'
+                    : '#FFFBEB',
+                borderColor: item.url.toLowerCase().startsWith('https')
+                    ? '#A7F3D0'
+                    : '#FDE68A',
+                paddingHorizontal: 4,
+                paddingVertical: 1,
+                borderRadius: 4,
+            },
+        ]}>
+              <Text style={[
+            styles.chipText,
+            {
+                fontFamily: AppFonts.interBold,
+                fontSize: 8,
+                color: item.url.toLowerCase().startsWith('https')
+                    ? '#059669'
+                    : '#D97706',
+            },
+        ]}>
+                {item.url.toLowerCase().startsWith('https') ? 'HTTPS' : 'HTTP'}
+              </Text>
+            </View>
+
+            {/* GraphQL Indicator */}
+            {(item.url.toLowerCase().includes('graphql') ||
+            item.client === 'apollo' ||
+            item.client === 'graphql') && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: '#FDF2F8',
+                    borderColor: '#FBCFE8',
+                    paddingHorizontal: 4,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8,
+                    color: '#DB2777',
+                },
+            ]}>
+                  GQL
+                </Text>
+              </View>)}
+
+            {/* In-Line Duration / Latency Pill */}
+            {item.duration != null && !isFailed && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: `${durationColor}12`,
+                    borderColor: `${durationColor}2E`,
+                    paddingHorizontal: 4.5,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                {
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 8.5,
+                    color: durationColor,
+                },
+            ]}>
+                  {item.duration}ms
+                </Text>
+              </View>)}
           </View>
 
           <View style={[
@@ -108,42 +241,42 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
           </View>
         </View>
 
-        {/* Row 2: Improved Slug Capsule Container */}
-        {showSlug && (<View style={styles.cardSlugBox}>
-            <View style={styles.slugLeft}>
-              <Text style={styles.slugTag}>PATH</Text>
-              <HighlightText text={slug} search={searchStr} style={styles.slugText} highlightStyle={styles.highlight} numberOfLines={1} ellipsizeMode="tail"/>
-            </View>
+        {/* Row 2: Full URL Capsule Container (Clickable with link prompt) */}
+        <View style={styles.cardSlugBox}>
+          <Pressable onPress={handleOpenUrl} style={styles.slugLeft} hitSlop={6}>
+            <Text style={styles.slugTag}>URL ↗</Text>
+            <HighlightText text={item.url} search={searchStr} style={[styles.slugText, { color: AppColors.skyBlue, textDecorationLine: 'underline' }]} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
+          </Pressable>
 
-            <View style={styles.slugRight}>
-              {isJson && (<View style={[
-                    styles.chip,
-                    {
-                        backgroundColor: `${AppColors.darkOrange}12`,
-                        borderColor: `${AppColors.darkOrange}28`,
-                    },
-                ]}>
-                  <Text style={[styles.chipText, { color: AppColors.darkOrange }]}>
-                    .json
-                  </Text>
-                </View>)}
+          <View style={styles.slugRight}>
+            {isJson && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: `${AppColors.darkOrange}12`,
+                    borderColor: `${AppColors.darkOrange}28`,
+                },
+            ]}>
+                <Text style={[styles.chipText, { color: AppColors.darkOrange }]}>
+                  .json
+                </Text>
+              </View>)}
 
-              {item.duplicateCount != null && item.duplicateCount > 1 && (<View style={[
-                    styles.chip,
-                    {
-                        backgroundColor: `${AppColors.purple}12`,
-                        borderColor: `${AppColors.purple}28`,
-                    },
-                ]}>
-                  <Text style={[
-                    styles.chipText,
-                    { color: AppColors.purple, fontWeight: '700' },
-                ]}>
-                    ×{item.duplicateCount}
-                  </Text>
-                </View>)}
-            </View>
-          </View>)}
+            {item.duplicateCount != null && item.duplicateCount > 1 && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: `${AppColors.purple}12`,
+                    borderColor: `${AppColors.purple}28`,
+                },
+            ]}>
+                <Text style={[
+                styles.chipText,
+                { color: AppColors.purple, fontWeight: '700' },
+            ]}>
+                  ×{item.duplicateCount}
+                </Text>
+              </View>)}
+          </View>
+        </View>
 
         {/* Row 3: Footer (Timestamp on Left, Response Size & Duration on Right) */}
         <View style={styles.cardFooterRow}>