react-native-inapp-inspector 1.1.24 → 1.1.26

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ActivityIndicator, Modal, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
+import { ActivityIndicator, Modal, Platform, Pressable, StatusBar, StyleSheet, Text, View, } from 'react-native';
 import { useInspector } from './InspectorContext';
 import ErrorBoundary from '../ErrorBoundary';
 import FabLauncher from './FabLauncher';
@@ -15,12 +15,14 @@ import ReduxTab from './ReduxTab';
 import ReduxDetail from './ReduxDetail';
 import BundleTab from './BundleTab';
 import PerformanceTab from './PerformanceTab';
+import CrashTab from './CrashTab';
+import CrashDetail from './CrashDetail';
 import SettingsPanel from './SettingsPanel';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
 import NavigationTracker from './NavigationTracker';
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = useInspector();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = useInspector();
     // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
     const [mountedTabs, setMountedTabs] = useState({
         [activeTab]: true,
@@ -35,9 +37,10 @@ const MainScreen = () => {
     const isDetailActive = (activeTab === 'apis' && selected != null) ||
         (activeTab === 'analytics' && selectedEvent != null) ||
         (activeTab === 'logs' && selectedLog != null) ||
-        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null));
+        (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
+        (activeTab === 'crash' && selectedCrash != null);
     return (<>
-      {isEnabled && <FabLauncher />}
+      {(Platform.OS === 'ios' || Platform.OS === 'android') && isEnabled && <FabLauncher />}
       <Modal visible={visible} animationType={modalAnimationType} transparent>
       {visible && (<ErrorBoundary onClose={closeModal}>
           <View style={styles.modalBackdrop}>
@@ -53,7 +56,7 @@ const MainScreen = () => {
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
               {!isDetailActive && settingsPage === null ? (<TabBar />) : null}
 
-              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : null) : (<>
+              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail />) : activeTab === 'redux' ? (<ReduxDetail />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail />) : null) : (<>
                     <View style={{
                     flex: 1,
                     display: activeTab === 'apis' ? 'flex' : 'none',
@@ -90,6 +93,12 @@ const MainScreen = () => {
                 }}>
                       {mountedTabs.performance && <PerformanceTab />}
                     </View>
+                    <View style={{
+                    flex: 1,
+                    display: activeTab === 'crash' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.crash && <CrashTab />}
+                    </View>
                   </>)) : (<View style={styles.empty}>
                   <ActivityIndicator size="large" color={AppColors.purple}/>
                   <Text style={[styles.emptySub, { marginTop: 12 }]}>

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useTranslation } from '../../i18n';
 import { Image, Linking, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
 import { animateNextLayout, useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import SegmentedTabs from '../SegmentedTabs';
@@ -17,7 +16,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { METHOD_COLORS } from '../../constants';
 import { getStatusColor, getSize, formatDateTime, getFetchCommand, getCurlCommand, } from '../../helpers';
-import { FailIcon, GlobeIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, } from '../NetworkIcons';
+import { FailIcon, StatusIcon, HeadersIcon, RequestIcon, ResponseIcon, DownloadIcon, ClearIcon, SizeIcon, ExternalLinkIcon, ClockIcon, } from '../NetworkIcons';
 const NetworkDetail = React.memo(() => {
     const { t } = useTranslation();
     const { selected, detailDisplayUrl, apiDetailActiveTab, setApiDetailActiveTab, detailSearch, setDetailSearch, reqExpanded, setReqExpanded, resExpanded, setResExpanded, showReqDiff, setShowReqDiff, showResDiff, setShowResDiff, prevRequestData, prevResponseData, logRouteMapRef, } = useInspector();
@@ -73,70 +72,122 @@ const NetworkDetail = React.memo(() => {
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 8,
+                    gap: 6,
+                    flexWrap: 'wrap',
+                    flex: 1,
                 }}>
+                    {/* Method Chip */}
                     <View style={[
                     styles.methodBadge,
                     {
                         backgroundColor: METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL,
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 7,
                     },
                 ]}>
                       <Text style={[
                     styles.methodBadgeText,
                     {
                         color: AppColors.white,
+                        fontSize: 10.5,
                     },
                 ]}>
                         {selected.method}
                       </Text>
                     </View>
 
+                    {/* Status Pill */}
                     {selected.status != null && (<View style={[
                         styles.chip,
                         {
                             backgroundColor: selected.status === 0
-                                ? `${AppColors.errorColor}15`
-                                : `${getStatusColor(selected.status)}15`,
+                                ? `${AppColors.errorColor}18`
+                                : `${getStatusColor(selected.status)}18`,
                             borderColor: selected.status === 0
                                 ? `${AppColors.errorColor}40`
                                 : `${getStatusColor(selected.status)}40`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
                         },
                     ]}>
-                        {selected.status === 0 ? (<FailIcon size={8} color={AppColors.errorColor}/>) : (<Svg width={6} height={6} viewBox="0 0 10 10" fill="none">
-                            <Circle cx="5" cy="5" r="5" fill={getStatusColor(selected.status)}/>
-                          </Svg>)}
+                        {selected.status === 0 ? (<FailIcon size={8} color={AppColors.errorColor}/>) : (<View style={{
+                            width: 6,
+                            height: 6,
+                            borderRadius: 3,
+                            backgroundColor: getStatusColor(selected.status),
+                        }}/>)}
                         <Text style={[
                         styles.chipText,
                         {
                             color: selected.status === 0
                                 ? AppColors.errorColor
                                 : getStatusColor(selected.status),
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
                         },
                     ]}>
                           {selected.status === 0
                         ? 'Failed'
-                        : String(selected.status)}
+                        : `${selected.status} ${selected.status === 200 ? 'OK' : ''}`}
                         </Text>
                       </View>)}
 
+                    {/* Duration Pill */}
                     {selected.duration != null && (<View style={[
                         styles.chip,
                         {
-                            backgroundColor: `${AppColors.purple}14`,
-                            borderColor: `${AppColors.purple}2E`,
+                            backgroundColor: `${AppColors.brandPurple}14`,
+                            borderColor: `${AppColors.brandPurple}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
                         },
                     ]}>
+                        <ClockIcon color={AppColors.brandPurple} size={10}/>
                         <Text style={[
                         styles.chipText,
-                        { color: AppColors.purple },
+                        {
+                            color: AppColors.brandPurple,
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
                     ]}>
                           {selected.duration}ms
                         </Text>
                       </View>)}
+
+                    {/* Size Pill */}
+                    {selected.response != null && (<View style={[
+                        styles.chip,
+                        {
+                            backgroundColor: `${AppColors.sky600}14`,
+                            borderColor: `${AppColors.sky600}30`,
+                            paddingHorizontal: 7,
+                            paddingVertical: 3.5,
+                            borderRadius: 7,
+                            gap: 4,
+                        },
+                    ]}>
+                        <SizeIcon color={AppColors.sky600} size={10}/>
+                        <Text style={[
+                        styles.chipText,
+                        {
+                            color: AppColors.sky600,
+                            fontFamily: AppFonts.interBold,
+                            fontSize: 10.5,
+                        },
+                    ]}>
+                          {getSize(selected.response)}
+                        </Text>
+                      </View>)}
                   </View>
+
                   <View style={styles.detailInfoRight}>
-                    <TouchableScale style={styles.iconSquareBtn} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
-                      <GlobeIcon color={AppColors.grayTextWeak} size={14}/>
+                    <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={() => Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                      <ExternalLinkIcon color={AppColors.sky600} size={14}/>
                     </TouchableScale>
                     <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
                     <CopyButton value={getCurlCommand(selected)} label="cURL" iconType="terminal"/>
@@ -144,67 +195,99 @@ const NetworkDetail = React.memo(() => {
                   </View>
                 </View>
 
+                {/* Full Live URL Analysis Card */}
                 <Pressable style={{
                     backgroundColor: AppColors.grayBackground,
                     borderRadius: 10,
                     borderWidth: 1,
                     borderColor: AppColors.dividerColor,
                     padding: 10,
-                    marginTop: 6,
+                    marginTop: 8,
+                    gap: 6,
                 }} onPress={() => Linking.openURL(detailDisplayUrl)}>
                   <View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
                     justifyContent: 'space-between',
-                    marginBottom: 2,
                 }}>
-                    <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 10,
-                    color: AppColors.grayTextWeak,
-                    flex: 1,
-                }} numberOfLines={1}>
-                      {schemeStr ? (<>
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+                      {schemeStr ? (<View style={{
+                        backgroundColor: schemeStr.startsWith('https')
+                            ? `${AppColors.green600}18`
+                            : `${AppColors.amber500}18`,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
+                        borderRadius: 4,
+                    }}>
                           <Text style={{
-                        color: AppColors.slate400,
-                        fontFamily: AppFonts.interRegular,
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 9,
+                        color: schemeStr.startsWith('https')
+                            ? AppColors.green600
+                            : AppColors.amber500,
                     }}>
-                            {schemeStr}
+                            {schemeStr.replace('://', '').toUpperCase()}
                           </Text>
-                          {hostStr}
-                        </>) : (hostStr || 'API Endpoint')}
-                    </Text>
-                    {queryStr ? (<View style={{
+                        </View>) : null}
+
+                      <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 10,
+                    color: AppColors.grayTextWeak,
+                    letterSpacing: 0.4,
+                    textTransform: 'uppercase',
+                }}>
+                        ENDPOINT URL ↗
+                      </Text>
+                    </View>
+
+                    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+                      {queryStr ? (<View style={{
                         backgroundColor: `${AppColors.purple}14`,
-                        paddingHorizontal: 5,
-                        paddingVertical: 1,
+                        paddingHorizontal: 6,
+                        paddingVertical: 2,
                         borderRadius: 4,
                     }}>
-                        <Text style={{
+                          <Text style={{
                         fontFamily: AppFonts.interBold,
                         fontSize: 8.5,
                         color: AppColors.purple,
                     }}>
-                          {t('network.queryParams')}
+                            {t('network.queryParams')}
+                          </Text>
+                        </View>) : null}
+
+                      <View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 3,
+                    backgroundColor: `${AppColors.sky600}14`,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                    borderRadius: 4,
+                }}>
+                        <ExternalLinkIcon color={AppColors.sky600} size={10}/>
+                        <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors.sky600,
+                }}>
+                          Open ↗
                         </Text>
-                      </View>) : null}
+                      </View>
+                    </View>
                   </View>
+
+                  {/* Full Clickable Hyperlink */}
                   <Text selectable={true} style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 12,
-                    color: AppColors.primaryBlack,
-                    marginTop: 2,
-                }} numberOfLines={2}>
-                    {pathStr}
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 12.5,
+                    color: AppColors.skyBlue,
+                    textDecorationLine: 'underline',
+                    lineHeight: 18,
+                }}>
+                    {detailDisplayUrl}
                   </Text>
-                  {queryStr ? (<Text selectable={true} style={{
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 10,
-                        color: AppColors.grayTextWeak,
-                        marginTop: 4,
-                    }} numberOfLines={1}>
-                      {queryStr}
-                    </Text>) : null}
                 </Pressable>
               </>);
         })()}

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

@@ -9,6 +9,7 @@ import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { getRuntimeDiagnostics } from '../../helpers';
 import { SearchIcon, CircleXIcon, PerformanceIcon, BoltIcon, LightbulbIcon, WarningTriangleIcon, MapIcon, AtomIcon, BrainIcon, GlobeIcon, } from '../NetworkIcons';
+import { INITIAL_EVENTS, subscribePerformanceEvents, logPerformanceEvent, clearPerformanceEvents, } from '../../customHooks/performanceTracker';
 const PerformanceTab = React.memo(() => {
     const { t } = useTranslation();
     // ─── Real-Time FPS Tracking ────────────────────────────────────────────────
@@ -34,10 +35,16 @@ const PerformanceTab = React.memo(() => {
     const [fpsHistory, setFpsHistory] = useState([
         60, 59, 60, 60, 58, 60, 59, 60, 60, 60, 57, 60, 59, 60, 60, 58, 60, 60, 59, 60,
     ]);
-    // Performance Log Events
-    const [events, setEvents] = useState([]);
+    // Performance Log Events (Initialized with benchmark & diagnostics events)
+    const [events, setEvents] = useState(INITIAL_EVENTS);
     const [filterCategory, setFilterCategory] = useState('ALL');
     const [search, setSearch] = useState('');
+    useEffect(() => {
+        const unsub = subscribePerformanceEvents(liveEvents => {
+            setEvents(liveEvents);
+        });
+        return unsub;
+    }, []);
     // ─── Live Frame Measurement Loop (1-Second Batch Interval) ────────────────
     const lastFrameTimeRef = useRef(Date.now());
     const rafIdRef = useRef(null);
@@ -81,9 +88,7 @@ const PerformanceTab = React.memo(() => {
                 // Trigger log if noticeable frame drop
                 if (measuredFps < 50) {
                     const durationStr = (1000 / measuredFps).toFixed(1);
-                    const newEvent = {
-                        id: `drop-${Date.now()}`,
-                        timestamp: Date.now(),
+                    logPerformanceEvent({
                         type: 'fps_drop',
                         category: 'render',
                         fps: measuredFps,
@@ -97,8 +102,7 @@ const PerformanceTab = React.memo(() => {
                         },
                         advice: t('performance.liveFpsDipAdvice'),
                         severity: measuredFps < 30 ? 'critical' : 'warning',
-                    };
-                    setEvents(prev => [newEvent, ...prev.slice(0, 49)]);
+                    });
                 }
                 frameCount = 0;
                 maxLagInSecond = 0;
@@ -208,7 +212,7 @@ const PerformanceTab = React.memo(() => {
         };
     }, [avgFps, jsLagMs]);
     const clearEvents = () => {
-        setEvents([]);
+        clearPerformanceEvents();
     };
     return (<View style={perfStyles.container}>
       {/* Search & Live Control Header */}
@@ -253,9 +257,9 @@ const PerformanceTab = React.memo(() => {
         </View>
       </View>
 
-      {/* Filter Tabs */}
+      {/* ─── Frozen Interactive Filter Tabs Under Search Component ─── */}
       <View style={perfStyles.filterRow}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6, paddingHorizontal: 12, paddingVertical: 4 }}>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={perfStyles.filterScrollContent}>
           {[
             { key: 'ALL', label: t('performance.allLogs'), Icon: BoltIcon, count: events.length },
             {
@@ -652,6 +656,12 @@ const perfStyles = StyleSheet.create({
         backgroundColor: AppColors.white,
         borderBottomWidth: 1,
         borderBottomColor: AppColors.dividerColor,
+        paddingVertical: 5,
+    },
+    filterScrollContent: {
+        gap: 6,
+        paddingHorizontal: 12,
+        paddingVertical: 2,
     },
     filterPill: {
         flexDirection: 'row',

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

@@ -12,9 +12,10 @@ import { isPersistentStorageAvailable } from '../../helpers/settingsStore';
 import { clearNetworkLogs } from '../../customHooks/networkLogger';
 import { clearConsoleLogs } from '../../customHooks/consoleLogger';
 import { clearAnalyticsEvents } from '../../customHooks/analyticsLogger';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, WhiteBackNavigation, PackageIcon, ReduxIcon, PerformanceIcon, } from '../NetworkIcons';
+import { clearCrashRecords, } from '../../customHooks/crashHandler';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, SettingsIcon, SunIcon, MoonIcon, ScreenIcon, MotionIcon, LayersIcon, EyeIcon, CheckIcon, TrashIcon, WhiteBackNavigation, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, ShieldAlertIcon, } from '../NetworkIcons';
 const SettingsPanel = () => {
-    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, } = useInspector();
+    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;
     if (settingsPage === 'main') {
@@ -25,6 +26,7 @@ const SettingsPanel = () => {
             { key: 'redux', label: 'Redux', icon: 'redux' },
             { key: 'bundle', label: 'Bundle', icon: 'bundle' },
             { key: 'performance', label: 'Performance', icon: 'performance' },
+            { key: 'crash', label: 'Crash', icon: 'crash' },
         ];
         return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
         {/* Settings Header with back button */}
@@ -235,6 +237,9 @@ const SettingsPanel = () => {
                         {tab.icon === 'performance' && (<PerformanceIcon color={isLocked
                                 ? AppColors.grayTextWeak
                                 : AppColors.purple} size={11}/>)}
+                        {tab.icon === 'crash' && (<CrashIcon color={isLocked
+                                ? AppColors.grayTextWeak
+                                : AppColors.purple} size={11}/>)}
                       </View>
                       {/* Label + Required badge */}
                       <Text style={{
@@ -674,6 +679,7 @@ const SettingsPanel = () => {
                             {tab.icon === 'redux' && (<ReduxIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
                             {tab.icon === 'bundle' && (<PackageIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
                             {tab.icon === 'performance' && (<PerformanceIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
+                            {tab.icon === 'crash' && (<CrashIcon color={isActive ? AppColors.white : AppColors.purple} size={11}/>)}
                           </View>
                           <Text style={{
                             fontFamily: AppFonts.interBold,
@@ -1392,6 +1398,89 @@ const SettingsPanel = () => {
         </View>
       </ScrollView>);
     }
+    else if (settingsPage === 'crash') {
+        title = 'Crash Settings';
+        icon = <CrashIcon color={AppColors.white} size={16}/>;
+        rightInfo = `Total: ${crashRecords?.length || 0}`;
+        content = (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <View style={{
+                backgroundColor: AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <LayersIcon color={AppColors.purple} size={16}/>,
+                label: 'Max Crash Logs',
+                description: 'How many crash records to preserve in history',
+                picker: {
+                    options: [25, 50, 100, 200],
+                    selectedValue: maxCrashLogs || 100,
+                    onSelect: val => setMaxCrashLogs(val),
+                },
+            })}
+          <View style={{ height: 1, backgroundColor: AppColors.dividerColor }}/>
+          {renderSettingRow({
+                icon: <ShieldAlertIcon color={AppColors.greenColor} size={16}/>,
+                label: 'Global Crash Guard',
+                description: 'Intercepts native, JS, and render errors directly',
+                isLast: true,
+                right: (<View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors.greenColor}1F`,
+                    }}>
+                <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors.greenColor,
+                    }}>
+                  PROTECTED
+                </Text>
+              </View>),
+            })}
+        </View>
+
+        <View style={{
+                backgroundColor: AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <TrashIcon color={AppColors.errorColor} size={16}/>,
+                label: 'Clear Crash History',
+                description: `${crashRecords?.length || 0} crash logs stored`,
+                isLast: true,
+                onPress: () => {
+                    clearCrashRecords();
+                    Alert.alert('Success', 'Crash logs cleared.');
+                },
+                right: (<View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors.errorColor}33`,
+                    }}>
+                <Text style={{
+                        fontFamily: AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors.errorColor,
+                    }}>
+                  Clear
+                </Text>
+              </View>),
+            })}
+        </View>
+      </ScrollView>);
+    }
     return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
       <LinearGradient colors={[AppColors.purple, AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles.headerGradient}>
         <View style={{ paddingTop: headerTopPadding, width: '100%' }}>

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

@@ -4,9 +4,9 @@ import { useInspector } from './InspectorContext';
 import TouchableScale from '../TouchableScale';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, } from '../NetworkIcons';
+import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
 const TabBar = React.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, lastReadApisCount, lastReadLogsCount, unreadPulseAnim, } = useInspector();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = useInspector();
     return (<View style={styles.tabBarContainer}>
       <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
@@ -46,18 +46,28 @@ const TabBar = React.memo(() => {
                 count: 0,
                 icon: 'performance',
             },
+            {
+                key: 'crash',
+                label: 'Crash',
+                count: crashRecords?.length || 0,
+                icon: 'crash',
+            },
         ]
             .filter(tab => tabVisibility?.[tab.key])
             .map(tab => {
             const isActive = activeTab === tab.key;
             const iconColor = isActive
                 ? AppColors.white
-                : AppColors.grayText;
+                : tab.key === 'crash' && tab.count > 0
+                    ? AppColors.errorColor
+                    : AppColors.grayText;
             const countLabel = tab.count > 9 ? '9+' : String(tab.count);
             const hasUnreadApis = activeTab !== 'apis' &&
                 logs.length > lastReadApisCount;
             const hasUnreadLogs = activeTab !== 'logs' &&
                 consoleLogs.length > lastReadLogsCount;
+            const hasUnreadCrashes = activeTab !== 'crash' &&
+                (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
             return (<TouchableScale key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
                     styles.contentTabButton,
                     isActive && styles.contentTabButtonActive,
@@ -73,6 +83,7 @@ const TabBar = React.memo(() => {
                   {tab.icon === 'redux' && (<ReduxIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<PerformanceIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<CrashIcon color={iconColor} size={14}/>)}
                   <Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles.contentTabButtonText,
                     isActive &&
@@ -82,7 +93,8 @@ const TabBar = React.memo(() => {
                     {tab.count > 0 ? `(${countLabel})` : ''}
                   </Text>
                   {((tab.key === 'apis' && hasUnreadApis) ||
-                    (tab.key === 'logs' && hasUnreadLogs)) && (<Animated.View style={{
+                    (tab.key === 'logs' && hasUnreadLogs) ||
+                    (tab.key === 'crash' && hasUnreadCrashes)) && (<Animated.View style={{
                         width: 6,
                         height: 6,
                         borderRadius: 3,

package/dist/esm/components/NetworkIcons.d.ts

@@ -62,6 +62,7 @@ export declare const ForwardChevronIcon: ({ color, size, }: any) => React.JSX.El
 export declare const BundleIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const LiveStateIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const TimelineIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RefreshCcwIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const StorageIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MetadataIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ReduxIcon: ({ color, size, }: any) => React.JSX.Element;
@@ -78,3 +79,27 @@ export declare const BrainIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TextAaIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const CartIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const MoneyIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const ExternalLinkIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PackageBoxIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const GitHubIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LinkChainIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AppleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AndroidIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CodeBracketsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FlameIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const HourglassIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const PinIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RepeatIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TargetGoalIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const UserCheckIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CrashIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ShieldAlertIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SkullIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ChipIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const LayoutIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const StackTraceIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DiagnosticsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TrailIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RawJsonIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AppFramesIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const AllFramesIcon: ({ color, size, }: any) => React.JSX.Element;