react-native-inapp-inspector 1.1.25 → 1.1.26

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

@@ -50,7 +50,7 @@ const constants_2 = require("../../constants");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const InspectorHeader = react_1.default.memo(() => {
-    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, } = (0, InspectorContext_1.useInspector)();
+    const { modalHeightPercent, appIcon, selected, setSelected, selectedEvent, setSelectedEvent, selectedLog, setSelectedLog, selectedReduxSlice, setSelectedReduxSlice, selectedReduxAction, setSelectedReduxAction, reduxState, reduxLastActionMap, showHeaderInfo, setShowHeaderInfo, updateAvailable, latestNpmVersion, clearAnim, activePulseAnim, unreadPulseAnim, runClearAllWithAnimation, setSettingsPage, closeModal, detailTitle, activeTab, environment, selectedCrash, setSelectedCrash, } = (0, InspectorContext_1.useInspector)();
     const envConfig = (0, react_1.useMemo)(() => {
         const rawEnv = (environment || (__DEV__ ? 'DEV' : 'PROD')).trim();
         const clean = rawEnv.toUpperCase();
@@ -89,7 +89,8 @@ const InspectorHeader = react_1.default.memo(() => {
     const isDetailView = (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);
     const isAnySelected = isDetailView;
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     return (<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} style={styles_1.default.headerGradient}>
@@ -100,8 +101,9 @@ const InspectorHeader = react_1.default.memo(() => {
             {
                 flexDirection: 'row',
                 alignItems: 'center',
-                gap: 16,
-                flex: !isDetailView ? 5 : 1,
+                gap: 12,
+                flex: !isDetailView ? 1 : 0,
+                minWidth: 0,
             },
         ]}>
             <TouchableScale_1.default onPress={() => {
@@ -111,6 +113,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 setSelectedLog(null);
                 setSelectedReduxSlice(null);
                 setSelectedReduxAction(null);
+                setSelectedCrash(null);
             });
         }} hitSlop={15} style={[
             {
@@ -524,18 +527,58 @@ const InspectorHeader = react_1.default.memo(() => {
                       {selectedReduxAction.timestamp || 'Dispatched'}
                     </react_native_1.Text>
                   </react_native_1.View>
+                </react_native_1.View>) : activeTab === 'crash' && selectedCrash != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#D97706',
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selectedCrash.isFatal ? 'FATAL' : selectedCrash.type.toUpperCase()}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedCrash.name || selectedCrash.message}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    {
+                        backgroundColor: selectedCrash.isFatal
+                            ? '#DC2626'
+                            : '#F59E0B',
+                    },
+                ]}/>
+                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+                    </react_native_1.Text>
+                    {selectedCrash.deviceInfo?.platform && (<>
+                        <react_native_1.Text style={[styles_1.default.headerSubTitle, { opacity: 0.6 }]}>•</react_native_1.Text>
+                        <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                          {selectedCrash.deviceInfo.platform.toUpperCase()}
+                        </react_native_1.Text>
+                      </>)}
+                  </react_native_1.View>
                 </react_native_1.View>) : null}
             </react_native_1.View>)}
 
           <react_native_1.View style={[
             styles_1.default.headerRight,
-            !isAnySelected && {
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
                 flexShrink: 0,
-                minWidth: 116,
+                gap: 8,
             },
         ]}>
             {!isAnySelected && (<TouchableScale_1.default onPress={() => {
-                react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics and Redux timeline. Continue?', [
+                react_native_1.Alert.alert('Clear Everything', 'This clears all tabs — APIs, Logs, Analytics, Redux timeline and Crash history. Continue?', [
                     { text: 'Cancel', style: 'cancel' },
                     {
                         text: 'Clear All',
@@ -543,13 +586,7 @@ const InspectorHeader = react_1.default.memo(() => {
                         style: 'destructive',
                     },
                 ]);
-            }} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors_1.AppColors.white}26`,
-                },
-            ]}>
+            }} hitSlop={15} style={styles_1.default.closeButtonSquare}>
                 <react_native_1.Animated.View style={{
                 transform: [
                     {
@@ -570,15 +607,7 @@ const InspectorHeader = react_1.default.memo(() => {
                 </react_native_1.Animated.View>
               </TouchableScale_1.default>)}
 
-            {selected == null &&
-            selectedEvent == null &&
-            selectedLog == null && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={[
-                styles_1.default.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: `${AppColors_1.AppColors.white}26`,
-                },
-            ]}>
+            {!isAnySelected && (<TouchableScale_1.default onPress={() => setSettingsPage('main')} hitSlop={15} style={styles_1.default.closeButtonSquare}>
                 <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={16}/>
               </TouchableScale_1.default>)}
 

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

@@ -300,7 +300,8 @@ const LogDetail = react_1.default.memo(() => {
             fontSize: 13,
             color: AppColors_1.AppColors.primaryBlack,
             lineHeight: 18,
-        }} numberOfLines={1}>
+            flexShrink: 1,
+        }}>
                 {originFrame?.functionName && originFrame.functionName !== '<anonymous>'
             ? `${originFrame.functionName}()`
             : originFrame?.fileName || t('console.consoleLog')}
@@ -315,11 +316,11 @@ const LogDetail = react_1.default.memo(() => {
                     paddingVertical: 2,
                 },
             ]}>
-                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3, flexWrap: 'wrap', flexShrink: 1 }}>
                     <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
                     <react_native_1.Text style={[
                 styles_1.default.metaChipText,
-                { color: AppColors_1.AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts_1.AppFonts.interBold },
+                { color: AppColors_1.AppColors.brandPurple, fontSize: 10, fontFamily: AppFonts_1.AppFonts.interBold, flexShrink: 1 },
             ]}>
                       {originFrame.fileName}
                       {originFrame.lineNumber ? `:${originFrame.lineNumber}` : ''}

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

@@ -53,12 +53,14 @@ const ReduxTab_1 = __importDefault(require("./ReduxTab"));
 const ReduxDetail_1 = __importDefault(require("./ReduxDetail"));
 const BundleTab_1 = __importDefault(require("./BundleTab"));
 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 styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NavigationTracker_1 = __importDefault(require("./NavigationTracker"));
 const MainScreen = () => {
-    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
+    const { visible, modalAnimationType, closeModal, modalHeightPercent, selected, selectedEvent, selectedLog, selectedReduxSlice, selectedReduxAction, selectedCrash, settingsPage, activeTab, isReady, isEnabled, hasNavigationContext, setNavState, } = (0, InspectorContext_1.useInspector)();
     // Lazy-mount each tab on first visit and cache it in memory for 0ms instantaneous switching
     const [mountedTabs, setMountedTabs] = (0, react_1.useState)({
         [activeTab]: true,
@@ -73,7 +75,8 @@ 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 (<>
       {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') && isEnabled && <FabLauncher_1.default />}
       <react_native_1.Modal visible={visible} animationType={modalAnimationType} transparent>
@@ -91,7 +94,7 @@ const MainScreen = () => {
               {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
               {!isDetailActive && settingsPage === null ? (<TabBar_1.default />) : null}
 
-              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : null) : (<>
+              {isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail_1.default />) : null) : (<>
                     <react_native_1.View style={{
                     flex: 1,
                     display: activeTab === 'apis' ? 'flex' : 'none',
@@ -128,6 +131,12 @@ const MainScreen = () => {
                 }}>
                       {mountedTabs.performance && <PerformanceTab_1.default />}
                     </react_native_1.View>
+                    <react_native_1.View style={{
+                    flex: 1,
+                    display: activeTab === 'crash' ? 'flex' : 'none',
+                }}>
+                      {mountedTabs.crash && <CrashTab_1.default />}
+                    </react_native_1.View>
                   </>)) : (<react_native_1.View style={styles_1.default.empty}>
                   <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
                   <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>

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

@@ -50,9 +50,10 @@ const settingsStore_1 = require("../../helpers/settingsStore");
 const networkLogger_1 = require("../../customHooks/networkLogger");
 const consoleLogger_1 = require("../../customHooks/consoleLogger");
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
+const crashHandler_1 = require("../../customHooks/crashHandler");
 const NetworkIcons_1 = require("../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, } = (0, InspectorContext_1.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, } = (0, InspectorContext_1.useInspector)();
     const isPersistent = (0, settingsStore_1.isPersistentStorageAvailable)();
     const headerTopPadding = react_native_1.Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
     if (settingsPage === 'main') {
@@ -63,6 +64,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 (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
         {/* Settings Header with back button */}
@@ -273,6 +275,9 @@ const SettingsPanel = () => {
                         {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isLocked
                                 ? AppColors_1.AppColors.grayTextWeak
                                 : AppColors_1.AppColors.purple} size={11}/>)}
+                        {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isLocked
+                                ? AppColors_1.AppColors.grayTextWeak
+                                : AppColors_1.AppColors.purple} size={11}/>)}
                       </react_native_1.View>
                       {/* Label + Required badge */}
                       <react_native_1.Text style={{
@@ -712,6 +717,7 @@ const SettingsPanel = () => {
                             {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                             {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
+                            {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.purple} size={11}/>)}
                           </react_native_1.View>
                           <react_native_1.Text style={{
                             fontFamily: AppFonts_1.AppFonts.interBold,
@@ -1430,6 +1436,89 @@ const SettingsPanel = () => {
         </react_native_1.View>
       </react_native_1.ScrollView>);
     }
+    else if (settingsPage === 'crash') {
+        title = 'Crash Settings';
+        icon = <NetworkIcons_1.CrashIcon color={AppColors_1.AppColors.white} size={16}/>;
+        rightInfo = `Total: ${crashRecords?.length || 0}`;
+        content = (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16 }}>
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                padding: 16,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                gap: 4,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.LayersIcon color={AppColors_1.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),
+                },
+            })}
+          <react_native_1.View style={{ height: 1, backgroundColor: AppColors_1.AppColors.dividerColor }}/>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.ShieldAlertIcon color={AppColors_1.AppColors.greenColor} size={16}/>,
+                label: 'Global Crash Guard',
+                description: 'Intercepts native, JS, and render errors directly',
+                isLast: true,
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 8,
+                        paddingVertical: 4,
+                        borderRadius: 6,
+                        backgroundColor: `${AppColors_1.AppColors.greenColor}1F`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 10,
+                        color: AppColors_1.AppColors.greenColor,
+                    }}>
+                  PROTECTED
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+
+        <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderRadius: 12,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                padding: 16,
+                marginTop: 12,
+            }}>
+          {renderSettingRow({
+                icon: <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={16}/>,
+                label: 'Clear Crash History',
+                description: `${crashRecords?.length || 0} crash logs stored`,
+                isLast: true,
+                onPress: () => {
+                    (0, crashHandler_1.clearCrashRecords)();
+                    react_native_1.Alert.alert('Success', 'Crash logs cleared.');
+                },
+                right: (<react_native_1.View style={{
+                        paddingHorizontal: 10,
+                        paddingVertical: 5,
+                        borderRadius: 7,
+                        backgroundColor: `${AppColors_1.AppColors.errorColor}14`,
+                        borderWidth: 1,
+                        borderColor: `${AppColors_1.AppColors.errorColor}33`,
+                    }}>
+                <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 11,
+                        color: AppColors_1.AppColors.errorColor,
+                    }}>
+                  Clear
+                </react_native_1.Text>
+              </react_native_1.View>),
+            })}
+        </react_native_1.View>
+      </react_native_1.ScrollView>);
+    }
     return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
       <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.brandPurple]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={styles_1.default.headerGradient}>
         <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>

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

@@ -11,7 +11,7 @@ const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const NetworkIcons_1 = require("../NetworkIcons");
 const TabBar = react_1.default.memo(() => {
-    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, lastReadApisCount, lastReadLogsCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
+    const { activeTab, switchActiveTab, tabVisibility, logs, consoleLogs, analyticsEvents, crashRecords, lastReadApisCount, lastReadLogsCount, lastReadCrashesCount, unreadPulseAnim, } = (0, InspectorContext_1.useInspector)();
     return (<react_native_1.View style={styles_1.default.tabBarContainer}>
       <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
         {[
@@ -51,18 +51,28 @@ const TabBar = react_1.default.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_1.AppColors.white
-                : AppColors_1.AppColors.grayText;
+                : tab.key === 'crash' && tab.count > 0
+                    ? AppColors_1.AppColors.errorColor
+                    : AppColors_1.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_1.default key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
                     styles_1.default.contentTabButton,
                     isActive && styles_1.default.contentTabButtonActive,
@@ -78,6 +88,7 @@ const TabBar = react_1.default.memo(() => {
                   {tab.icon === 'redux' && (<NetworkIcons_1.ReduxIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'bundle' && (<NetworkIcons_1.PackageIcon color={iconColor} size={14}/>)}
                   {tab.icon === 'performance' && (<NetworkIcons_1.PerformanceIcon color={iconColor} size={14}/>)}
+                  {tab.icon === 'crash' && (<NetworkIcons_1.CrashIcon color={iconColor} size={14}/>)}
                   <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={[
                     styles_1.default.contentTabButtonText,
                     isActive &&
@@ -87,7 +98,8 @@ const TabBar = react_1.default.memo(() => {
                     {tab.count > 0 ? `(${countLabel})` : ''}
                   </react_native_1.Text>
                   {((tab.key === 'apis' && hasUnreadApis) ||
-                    (tab.key === 'logs' && hasUnreadLogs)) && (<react_native_1.Animated.View style={{
+                    (tab.key === 'logs' && hasUnreadLogs) ||
+                    (tab.key === 'crash' && hasUnreadCrashes)) && (<react_native_1.Animated.View style={{
                         width: 6,
                         height: 6,
                         borderRadius: 3,

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

@@ -92,3 +92,14 @@ 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;

package/dist/commonjs/components/NetworkIcons.js

@@ -37,7 +37,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
-exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
+exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
+exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -691,3 +692,97 @@ const UserCheckIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14,
     </react_native_svg_1.default>);
 };
 exports.UserCheckIcon = UserCheckIcon;
+const CrashIcon = ({ color = AppColors_1.AppColors.errorColor, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {/* Bug / Crash Hybrid Icon */}
+      <react_native_svg_1.Path d="M12 2v3M4.93 4.93l2.12 2.12M19.07 4.93l-2.12 2.12M9 10h6M8 14h8M9 18h6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M12 8a6 6 0 0 1 6 6v3a6 6 0 0 1-12 0v-3a6 6 0 0 1 6-6z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M3 13h3M18 13h3M4 19l2.5-1.5M20 19l-2.5-1.5M4 9l2.5 1.5M20 9l-2.5 1.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CrashIcon = CrashIcon;
+const ShieldAlertIcon = ({ color = AppColors_1.AppColors.errorColor, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Line x1="12" y1="8" x2="12" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="12" cy="16" r="1" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.ShieldAlertIcon = ShieldAlertIcon;
+const SkullIcon = ({ color = AppColors_1.AppColors.errorColor, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Circle cx="9" cy="11" r="1.6" fill={color}/>
+      <react_native_svg_1.Circle cx="15" cy="11" r="1.6" fill={color}/>
+      <react_native_svg_1.Path d="M8 16c1.2 1 3.2 1.2 4 1.2.8 0 2.8-.2 4-1.2" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="12" y1="16" x2="12" y2="18" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.SkullIcon = SkullIcon;
+const ChipIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Rect x="7" y="7" width="10" height="10" rx="2" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Rect x="10" y="10" width="4" height="4" fill={color}/>
+      <react_native_svg_1.Line x1="9" y1="3" x2="9" y2="7" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="15" y1="3" x2="15" y2="7" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="9" y1="17" x2="9" y2="21" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="15" y1="17" x2="15" y2="21" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="3" y1="9" x2="7" y2="9" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="3" y1="15" x2="7" y2="15" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="17" y1="9" x2="21" y2="9" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="17" y1="15" x2="21" y2="15" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ChipIcon = ChipIcon;
+const LayoutIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Rect x="3" y="3" width="18" height="18" rx="2" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Line x1="3" y1="9" x2="21" y2="9" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Line x1="9" y1="9" x2="9" y2="21" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Rect x="12" y="12" width="6" height="6" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.LayoutIcon = LayoutIcon;
+const StackTraceIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 6h16M4 10h11M4 14h16M4 18h9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M7.5 12.5 4 14l3.5 1.5" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.StackTraceIcon = StackTraceIcon;
+const DiagnosticsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M3 12h3l2-5 3 9 2-6 1.5 2H21" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Line x1="4" y1="19" x2="20" y2="19" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.DiagnosticsIcon = DiagnosticsIcon;
+const TrailIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="5" cy="18" r="2" fill={color}/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="2" fill={color}/>
+      <react_native_svg_1.Circle cx="19" cy="6" r="2" fill={color}/>
+      <react_native_svg_1.Path d="M6.5 16.5 10.5 13.5M13.5 10.5 17.5 7.5" stroke={color} strokeWidth="1.6" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.TrailIcon = TrailIcon;
+const RawJsonIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M8 3c-2 1-3 2.5-3 5 0 2-1 3.5-2 4 1 .5 2 2 2 4 0 2.5 1 4 3 5M16 3c2 1 3 2.5 3 5 0 2 1 3.5 2 4-1 .5-2 2-2 4 0 2.5-1 4-3 5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.RawJsonIcon = RawJsonIcon;
+const AppFramesIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 6h16M4 10h11M4 14h16M4 18h9" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M18 12.5l2 2 3-3.5" stroke="#059669" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.AppFramesIcon = AppFramesIcon;
+const AllFramesIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 4h16M4 8h16M4 12h16M4 16h16M4 20h10" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Rect x="16" y="16" width="4" height="4" rx="1" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.AllFramesIcon = AllFramesIcon;

package/dist/commonjs/components/SegmentedTabs.js

@@ -45,7 +45,8 @@ const SegmentedTabs = react_1.default.memo(({ tabs, activeKey, onChange, style }
                 },
             ]}>
           {tab.icon ? tab.icon(isActive) : null}
-          <react_native_1.Text style={{
+          <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
+                flexShrink: 1,
                 fontFamily: AppFonts_1.AppFonts.interBold,
                 fontSize: 10.5,
                 color: isActive

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.25";
+export declare const LIB_VERSION = "1.1.26";

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 = '1.1.25';
+exports.LIB_VERSION = '1.1.26';