react-native-inapp-inspector 2.3.18 → 2.3.20

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

@@ -1,733 +1,199 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { Alert, FlatList, Platform, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
-import { useTranslation } from '../../i18n';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import AnimatedEntrance from '../AnimatedEntrance';
-import EndOfListFooter from '../EndOfListFooter';
-import FeatureUnderDevNotice from './FeatureUnderDevNotice';
-import HighlightText from '../HighlightText';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { clearCrashRecords, } from '../../customHooks/crashHandler';
-import CrashFilterModal, { DEFAULT_CRASH_FILTERS, isCrashFiltersDefault, } from './CrashFilterModal';
-import { SearchIcon, ClearIcon, TrashIcon, TerminalIcon, LayersIcon, ClockIcon, ShieldAlertIcon, FlameIcon, JsIcon, HourglassIcon, SkullIcon, LayoutIcon, ChipIcon, AppleIcon, AndroidIcon, RepeatIcon, CodeBracketsIcon, FilterIcon, } from '../NetworkIcons';
-const getRelativeTime = (timestamp) => {
-    const now = Date.now();
-    const diff = Math.max(0, now - timestamp);
-    const seconds = Math.floor(diff / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-    const days = Math.floor(hours / 24);
-    if (seconds < 60)
-        return `${seconds}s ago`;
-    if (minutes < 60)
-        return `${minutes}m ago`;
-    if (hours < 24)
-        return `${hours}h ago`;
-    return `${days}d ago`;
-};
-const CrashTab = React.memo(() => {
-    const { t } = useTranslation();
-    const { crashRecords, selectedCrash, setSelectedCrash } = useInspector();
-    const listRef = useRef(null);
-    const [searchQuery, setSearchQuery] = useState('');
-    const [filterType, setFilterType] = useState('all');
-    const [crashFilters, setCrashFilters] = useState(DEFAULT_CRASH_FILTERS);
-    const [isFilterModalOpen, setIsFilterModalOpen] = useState(false);
-    const [detailSubTab, setDetailSubTab] = useState('stack');
-    const stats = useMemo(() => {
-        const total = crashRecords.length;
-        let fatalCount = 0;
-        let jsCount = 0;
-        let promiseCount = 0;
-        let renderCount = 0;
-        let nativeCount = 0;
-        crashRecords.forEach(c => {
-            if (c.isFatal)
-                fatalCount++;
-            if (c.type === 'js')
-                jsCount++;
-            else if (c.type === 'promise')
-                promiseCount++;
-            else if (c.type === 'render')
-                renderCount++;
-            else if (c.type === 'native')
-                nativeCount++;
-        });
-        return { total, fatalCount, jsCount, promiseCount, renderCount, nativeCount };
-    }, [crashRecords]);
-    const filteredList = useMemo(() => {
-        let list = crashRecords.filter(item => {
-            if (filterType === 'fatal' && !item.isFatal)
-                return false;
-            if (filterType === 'js' && item.type !== 'js')
-                return false;
-            if (filterType === 'promise' && item.type !== 'promise')
-                return false;
-            if (filterType === 'render' && item.type !== 'render')
-                return false;
-            if (filterType === 'native' && item.type !== 'native')
-                return false;
-            if (crashFilters.types.size > 0 && !crashFilters.types.has('all')) {
-                const matches = (crashFilters.types.has('fatal') && item.isFatal) ||
-                    (crashFilters.types.has('js') && item.type === 'js') ||
-                    (crashFilters.types.has('promise') && item.type === 'promise') ||
-                    (crashFilters.types.has('render') && item.type === 'render') ||
-                    (crashFilters.types.has('native') && item.type === 'native');
-                if (!matches)
-                    return false;
-            }
-            if (crashFilters.timeWindow !== 'all') {
-                const now = Date.now();
-                const cutoff = crashFilters.timeWindow === '15m'
-                    ? now - 15 * 60 * 1000
-                    : crashFilters.timeWindow === '1h'
-                        ? now - 60 * 60 * 1000
-                        : crashFilters.timeWindow === '24h'
-                            ? now - 24 * 60 * 60 * 1000
-                            : now - 7 * 24 * 60 * 60 * 1000;
-                if (item.timestamp < cutoff)
-                    return false;
-            }
-            if (crashFilters.platform !== 'all') {
-                const platform = (item.deviceInfo?.platform || '').toLowerCase();
-                if (platform !== crashFilters.platform)
-                    return false;
-            }
-            if (crashFilters.engine !== 'all') {
-                const isHermes = item.deviceInfo?.isHermes;
-                if (crashFilters.engine === 'hermes' && isHermes !== true)
-                    return false;
-                if (crashFilters.engine === 'jsc' && (isHermes === true))
-                    return false;
-            }
-            if (searchQuery.trim().length > 0) {
-                const queryTokens = searchQuery.trim().toLowerCase().split(/\s+/).filter(Boolean);
-                const searchTarget = [
-                    item.message || '',
-                    item.name || '',
-                    item.stack || '',
-                    item.type || '',
-                    item.deviceInfo?.platform || '',
-                    ...(item.breadcrumbs || []).map(b => `${b.type || ''} ${b.message || ''}`),
-                ].join(' ').toLowerCase();
-                return queryTokens.every(token => searchTarget.includes(token));
-            }
-            return true;
-        });
-        if (crashFilters.sortBy === 'time_asc') {
-            list = [...list].sort((a, b) => a.timestamp - b.timestamp);
-        }
-        return list;
-    }, [crashRecords, filterType, searchQuery, crashFilters]);
-    const handleClearAll = () => {
-        Alert.alert(t('crash.clearTitle'), t('crash.clearMessage'), [
-            { text: t('crash.clearCancel'), style: 'cancel' },
-            {
-                text: t('crash.clearConfirm'),
-                style: 'destructive',
-                onPress: () => clearCrashRecords(),
-            },
-        ]);
-    };
-    const renderCard = useCallback(({ item, index }) => {
-        const isFatal = item.isFatal;
-        const typeLabel = item.type.toUpperCase();
-        const topFrame = item.parsedStack && item.parsedStack.length > 0
-            ? item.parsedStack.find(f => f.isAppCode) || item.parsedStack[0]
-            : null;
-        const typeBadgeBg = item.type === 'native'
-            ? `${AppColors.errorColor}22`
-            : item.type === 'render'
-                ? `${AppColors.purple}22`
-                : item.type === 'promise'
-                    ? `${AppColors.darkOrange}22`
-                    : `${AppColors.offerPurple}22`;
-        const typeBadgeColor = item.type === 'native'
-            ? AppColors.errorColor
-            : item.type === 'render'
-                ? AppColors.purple
-                : item.type === 'promise'
-                    ? AppColors.darkOrange
-                    : AppColors.offerPurple;
-        return (<AnimatedEntrance index={index} distance={8}>
-          <TouchableScale onPress={() => {
-                setSelectedCrash(item);
-            }} style={[
-                localStyles.cardContainer,
-                isFatal && localStyles.fatalCardBorder,
-            ]}>
+import Y,{useCallback as Z,useMemo as U,useRef as ee,useState as W}from"react";import{Alert as te,FlatList as Ce,Platform as Te,ScrollView as M,StyleSheet as be,Text as T,TextInput as Se,TouchableOpacity as Q,View as C}from"react-native";import{useTranslation as ke}from"../../i18n";import{useInspector as Ie}from"./InspectorContext";import A from"../TouchableScale";import Be from"../AnimatedEntrance";import Ve from"../EndOfListFooter";import Fe from"./FeatureUnderDevNotice";import Re from"../HighlightText";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{clearCrashRecords as ve}from"../../customHooks/crashHandler";import Pe,{DEFAULT_CRASH_FILTERS as _,isCrashFiltersDefault as P}from"./CrashFilterModal";import{SearchIcon as He,ClearIcon as Le,TrashIcon as We,TerminalIcon as $e,LayersIcon as Ae,ClockIcon as De,ShieldAlertIcon as Me,FlameIcon as Oe,JsIcon as Ne,HourglassIcon as Ee,SkullIcon as Je,LayoutIcon as Ue,ChipIcon as Qe,AppleIcon as _e,AndroidIcon as Ge,RepeatIcon as Ke,CodeBracketsIcon as Xe,FilterIcon as Ye}from"../NetworkIcons";const Ze=x=>{const V=Date.now(),O=Math.max(0,V-x),R=Math.floor(O/1e3),H=Math.floor(R/60),k=Math.floor(H/60),L=Math.floor(k/24);return R<60?`${R}s ago`:H<60?`${H}m ago`:k<24?`${k}h ago`:`${L}d ago`},et=Y.memo(()=>{const{t:x}=ke(),{crashRecords:V,selectedCrash:O,setSelectedCrash:R}=Ie(),H=ee(null),[k,L]=W(""),[B,N]=W("all"),[b,E]=W(_),[q,J]=W(!1),[tt,rt]=W("stack"),v=U(()=>{const r=V.length;let o=0,w=0,z=0,I=0,$=0;return V.forEach(F=>{F.isFatal&&o++,F.type==="js"?w++:F.type==="promise"?z++:F.type==="render"?I++:F.type==="native"&&$++}),{total:r,fatalCount:o,jsCount:w,promiseCount:z,renderCount:I,nativeCount:$}},[V]),D=U(()=>{let r=V.filter(o=>{if(B==="fatal"&&!o.isFatal||B==="js"&&o.type!=="js"||B==="promise"&&o.type!=="promise"||B==="render"&&o.type!=="render"||B==="native"&&o.type!=="native"||b.types.size>0&&!b.types.has("all")&&!(b.types.has("fatal")&&o.isFatal||b.types.has("js")&&o.type==="js"||b.types.has("promise")&&o.type==="promise"||b.types.has("render")&&o.type==="render"||b.types.has("native")&&o.type==="native"))return!1;if(b.timeWindow!=="all"){const w=Date.now(),z=b.timeWindow==="15m"?w-900*1e3:b.timeWindow==="1h"?w-3600*1e3:b.timeWindow==="24h"?w-1440*60*1e3:w-10080*60*1e3;if(o.timestamp<z)return!1}if(b.platform!=="all"&&(o.deviceInfo?.platform||"").toLowerCase()!==b.platform)return!1;if(b.engine!=="all"){const w=o.deviceInfo?.isHermes;if(b.engine==="hermes"&&w!==!0||b.engine==="jsc"&&w===!0)return!1}if(k.trim().length>0){const w=k.trim().toLowerCase().split(/\s+/).filter(Boolean),z=[o.message||"",o.name||"",o.stack||"",o.type||"",o.deviceInfo?.platform||"",...(o.breadcrumbs||[]).map(I=>`${I.type||""} ${I.message||""}`)].join(" ").toLowerCase();return w.every(I=>z.includes(I))}return!0});return b.sortBy==="time_asc"&&(r=[...r].sort((o,w)=>o.timestamp-w.timestamp)),r},[V,B,k,b]),G=()=>{te.alert(x("crash.clearTitle"),x("crash.clearMessage"),[{text:x("crash.clearCancel"),style:"cancel"},{text:x("crash.clearConfirm"),style:"destructive",onPress:()=>ve()}])},K=Z(({item:r,index:o})=>{const w=r.isFatal,z=r.type.toUpperCase(),I=r.parsedStack&&r.parsedStack.length>0?r.parsedStack.find(X=>X.isAppCode)||r.parsedStack[0]:null,$=r.type==="native"?`${e.errorColor}22`:r.type==="render"?`${e.purple}22`:r.type==="promise"?`${e.darkOrange}22`:`${e.offerPurple}22`,F=r.type==="native"?e.errorColor:r.type==="render"?e.purple:r.type==="promise"?e.darkOrange:e.offerPurple;return<Be index={o}distance={8}>
+          <A onPress={()=>{R(r)}}style={[t.cardContainer,w&&t.fatalCardBorder]}>
             
-            <View style={localStyles.cardHeader}>
-              <View style={localStyles.badgeRow}>
-                <View style={localStyles.sNoBadge}>
-                  <Text style={localStyles.sNoBadgeText}>#{index + 1}</Text>
-                </View>
-
-                {isFatal ? (<View style={localStyles.fatalBadge}>
-                    <FlameIcon size={10} color={AppColors.white}/>
-                    <Text style={localStyles.fatalBadgeText}>{t('crash.fatalBadge')}</Text>
-                  </View>) : (<View style={localStyles.caughtBadge}>
-                    <Text style={localStyles.caughtBadgeText}>{t('crash.handledBadge')}</Text>
-                  </View>)}
-
-                <View style={[
-                localStyles.typeBadge,
-                { backgroundColor: typeBadgeBg },
-            ]}>
-                  <Text style={[
-                localStyles.typeBadgeText,
-                { color: typeBadgeColor },
-            ]}>
-                    {typeLabel}
-                  </Text>
-                </View>
-              </View>
-
-              <View style={localStyles.timeRow}>
-                <ClockIcon size={11} color={AppColors.grayTextWeak}/>
-                <Text style={localStyles.timestampText}>
-                  {item.timeStr || new Date(item.timestamp).toLocaleTimeString()}
-                </Text>
-                <Text style={localStyles.relativeTimeText}>
-                  {getRelativeTime(item.timestamp)}
-                </Text>
-              </View>
-            </View>
+            <C style={t.cardHeader}>
+              <C style={t.badgeRow}>
+                <C style={t.sNoBadge}>
+                  <T style={t.sNoBadgeText}>#{o+1}</T>
+                </C>
+
+                {w?<C style={t.fatalBadge}>
+                    <Oe size={10}color={e.white}/>
+                    <T style={t.fatalBadgeText}>{x("crash.fatalBadge")}</T>
+                  </C>:<C style={t.caughtBadge}>
+                    <T style={t.caughtBadgeText}>{x("crash.handledBadge")}</T>
+                  </C>}
+
+                <C style={[t.typeBadge,{backgroundColor:$}]}>
+                  <T style={[t.typeBadgeText,{color:F}]}>
+                    {z}
+                  </T>
+                </C>
+              </C>
+
+              <C style={t.timeRow}>
+                <De size={11}color={e.grayTextWeak}/>
+                <T style={t.timestampText}>
+                  {r.timeStr||new Date(r.timestamp).toLocaleTimeString()}
+                </T>
+                <T style={t.relativeTimeText}>
+                  {Ze(r.timestamp)}
+                </T>
+              </C>
+            </C>
 
             
-            <View style={{ marginVertical: 6 }}>
-              <HighlightText text={item.message || t('crash.unknownException')} highlight={searchQuery} numberOfLines={3} style={localStyles.errorMessageText}/>
-            </View>
+            <C style={{marginVertical:6}}>
+              <Re text={r.message||x("crash.unknownException")}highlight={k}numberOfLines={3}style={t.errorMessageText}/>
+            </C>
 
             
-            {topFrame && (<View style={localStyles.locationRow}>
-                <TerminalIcon size={12} color={AppColors.grayTextWeak}/>
-                <Text numberOfLines={1} ellipsizeMode="middle" style={localStyles.locationText}>
-                  {topFrame.method !== '<anonymous>' ? `${topFrame.method} ` : ''}
-                  <Text style={{ color: AppColors.purple, fontFamily: AppFonts.interBold }}>
-                    {topFrame.file}:{topFrame.lineNumber}
-                  </Text>
-                </Text>
-              </View>)}
+            {I&&<C style={t.locationRow}>
+                <$e size={12}color={e.grayTextWeak}/>
+                <T numberOfLines={1}ellipsizeMode="middle"style={t.locationText}>
+                  {I.method!=="<anonymous>"?`${I.method} `:""}
+                  <T style={{color:e.purple,fontFamily:S.interBold}}>
+                    {I.file}:{I.lineNumber}
+                  </T>
+                </T>
+              </C>}
 
             
-            <View style={localStyles.cardFooter}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-                {item.deviceInfo && (<View style={localStyles.metaPill}>
-                    {item.deviceInfo.platform === 'ios' ? (<AppleIcon size={10} color={AppColors.grayText}/>) : item.deviceInfo.platform === 'android' ? (<AndroidIcon size={10} color={AppColors.grayText}/>) : null}
-                    <Text style={localStyles.metaPillText}>
-                      {item.deviceInfo.platform?.toUpperCase()}{' '}
-                      {item.deviceInfo.osVersion || ''}
-                    </Text>
-                  </View>)}
-                {item.deviceInfo && (<View style={localStyles.metaPill}>
-                    <Text style={localStyles.metaPillText}>
-                      {item.deviceInfo.isHermes ? 'Hermes' : 'JSC'}
-                    </Text>
-                  </View>)}
-                {item.parsedStack && item.parsedStack.length > 0 && (<View style={localStyles.metaPill}>
-                    <CodeBracketsIcon size={10} color={AppColors.grayText}/>
-                    <Text style={localStyles.metaPillText}>
-                      {item.parsedStack.length}
-                    </Text>
-                  </View>)}
-                {item.breadcrumbs && item.breadcrumbs.length > 0 && (<View style={localStyles.metaPill}>
-                    <RepeatIcon size={10} color={AppColors.grayText}/>
-                    <Text style={localStyles.metaPillText}>
-                      {item.breadcrumbs.length} trail
-                    </Text>
-                  </View>)}
-                {item.memoryInfo && (<View style={localStyles.metaPill}>
-                    <Text style={localStyles.metaPillText}>
-                      {item.memoryInfo.usedJSHeapSize} MB
-                    </Text>
-                  </View>)}
-              </View>
-            </View>
-          </TouchableScale>
-        </AnimatedEntrance>);
-    }, [searchQuery, setSelectedCrash]);
-    return (<View style={localStyles.container}>
-      {crashRecords.length > 0 && (<>
+            <C style={t.cardFooter}>
+              <C style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"}}>
+                {r.deviceInfo&&<C style={t.metaPill}>
+                    {r.deviceInfo.platform==="ios"?<_e size={10}color={e.grayText}/>:r.deviceInfo.platform==="android"?<Ge size={10}color={e.grayText}/>:null}
+                    <T style={t.metaPillText}>
+                      {r.deviceInfo.platform?.toUpperCase()}{" "}
+                      {r.deviceInfo.osVersion||""}
+                    </T>
+                  </C>}
+                {r.deviceInfo&&<C style={t.metaPill}>
+                    <T style={t.metaPillText}>
+                      {r.deviceInfo.isHermes?"Hermes":"JSC"}
+                    </T>
+                  </C>}
+                {r.parsedStack&&r.parsedStack.length>0&&<C style={t.metaPill}>
+                    <Xe size={10}color={e.grayText}/>
+                    <T style={t.metaPillText}>
+                      {r.parsedStack.length}
+                    </T>
+                  </C>}
+                {r.breadcrumbs&&r.breadcrumbs.length>0&&<C style={t.metaPill}>
+                    <Ke size={10}color={e.grayText}/>
+                    <T style={t.metaPillText}>
+                      {r.breadcrumbs.length} trail
+                    </T>
+                  </C>}
+                {r.memoryInfo&&<C style={t.metaPill}>
+                    <T style={t.metaPillText}>
+                      {r.memoryInfo.usedJSHeapSize} MB
+                    </T>
+                  </C>}
+              </C>
+            </C>
+          </A>
+        </Be>},[k,R]);return<C style={t.container}>
+      {V.length>0&&<>
           
-          <View style={localStyles.statsBar}>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.statsScrollContent}>
-              <View style={[localStyles.statChip, localStyles.statChipActive]}>
-                <Text style={localStyles.statChipValue}>{stats.total}</Text>
-                <Text style={localStyles.statChipLabel}>{t('crash.statCrashes')}</Text>
-              </View>
-
-              <View style={localStyles.statChip}>
-                <Text style={[localStyles.statChipValue, { color: AppColors.errorColor }]}>
-                  {stats.fatalCount}
-                </Text>
-                <Text style={localStyles.statChipLabel}>{t('crash.statFatal')}</Text>
-              </View>
-
-              <View style={localStyles.statChip}>
-                <Text style={[localStyles.statChipValue, { color: AppColors.offerPurple }]}>
-                  {stats.jsCount}
-                </Text>
-                <Text style={localStyles.statChipLabel}>{t('crash.statJsErrors')}</Text>
-              </View>
-
-              <View style={localStyles.statChip}>
-                <Text style={[localStyles.statChipValue, { color: AppColors.darkOrange }]}>
-                  {stats.promiseCount}
-                </Text>
-                <Text style={localStyles.statChipLabel}>{t('crash.statPromises')}</Text>
-              </View>
-
-              <View style={localStyles.statChip}>
-                <Text style={[localStyles.statChipValue, { color: AppColors.purple }]}>
-                  {stats.renderCount}
-                </Text>
-                <Text style={localStyles.statChipLabel}>{t('crash.statRender')}</Text>
-              </View>
-
-              <View style={localStyles.statChip}>
-                <Text style={[localStyles.statChipValue, { color: AppColors.skyBlue }]}>
-                  {stats.nativeCount}
-                </Text>
-                <Text style={localStyles.statChipLabel}>{t('crash.statNative')}</Text>
-              </View>
-            </ScrollView>
-          </View>
+          <C style={t.statsBar}>
+            <M horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.statsScrollContent}>
+              <C style={[t.statChip,t.statChipActive]}>
+                <T style={t.statChipValue}>{v.total}</T>
+                <T style={t.statChipLabel}>{x("crash.statCrashes")}</T>
+              </C>
+
+              <C style={t.statChip}>
+                <T style={[t.statChipValue,{color:e.errorColor}]}>
+                  {v.fatalCount}
+                </T>
+                <T style={t.statChipLabel}>{x("crash.statFatal")}</T>
+              </C>
+
+              <C style={t.statChip}>
+                <T style={[t.statChipValue,{color:e.offerPurple}]}>
+                  {v.jsCount}
+                </T>
+                <T style={t.statChipLabel}>{x("crash.statJsErrors")}</T>
+              </C>
+
+              <C style={t.statChip}>
+                <T style={[t.statChipValue,{color:e.darkOrange}]}>
+                  {v.promiseCount}
+                </T>
+                <T style={t.statChipLabel}>{x("crash.statPromises")}</T>
+              </C>
+
+              <C style={t.statChip}>
+                <T style={[t.statChipValue,{color:e.purple}]}>
+                  {v.renderCount}
+                </T>
+                <T style={t.statChipLabel}>{x("crash.statRender")}</T>
+              </C>
+
+              <C style={t.statChip}>
+                <T style={[t.statChipValue,{color:e.skyBlue}]}>
+                  {v.nativeCount}
+                </T>
+                <T style={t.statChipLabel}>{x("crash.statNative")}</T>
+              </C>
+            </M>
+          </C>
 
           
-          <View style={localStyles.controlsContainer}>
-            <View style={localStyles.searchRow}>
-              <View style={localStyles.searchInputWrapper}>
-                <SearchIcon color={AppColors.grayTextWeak} size={14}/>
-                <TextInput value={searchQuery} onChangeText={setSearchQuery} placeholder={t('crash.searchPlaceholder')} placeholderTextColor={AppColors.grayTextWeak} style={localStyles.searchInput} autoCapitalize="none" autoCorrect={false}/>
-                {searchQuery.length > 0 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                    <View style={{
-                    backgroundColor: `${AppColors.purple}20`,
-                    borderRadius: 10,
-                    paddingHorizontal: 6,
-                    paddingVertical: 1.5,
-                }}>
-                      <Text style={{
-                    color: AppColors.purple,
-                    fontSize: 9.5,
-                    fontFamily: AppFonts.interBold,
-                }}>
-                        {filteredList.length}
-                      </Text>
-                    </View>
-                    <TouchableOpacity onPress={() => setSearchQuery('')} hitSlop={8}>
-                      <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                    </TouchableOpacity>
-                  </View>)}
-              </View>
+          <C style={t.controlsContainer}>
+            <C style={t.searchRow}>
+              <C style={t.searchInputWrapper}>
+                <He color={e.grayTextWeak}size={14}/>
+                <Se value={k}onChangeText={L}placeholder={x("crash.searchPlaceholder")}placeholderTextColor={e.grayTextWeak}style={t.searchInput}autoCapitalize="none"autoCorrect={!1}/>
+                {k.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                    <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                      <T style={{color:e.purple,fontSize:9.5,fontFamily:S.interBold}}>
+                        {D.length}
+                      </T>
+                    </C>
+                    <Q onPress={()=>L("")}hitSlop={8}>
+                      <Le color={e.grayTextWeak}size={14}/>
+                    </Q>
+                  </C>}
+              </C>
 
               
-              <TouchableScale onPress={() => setIsFilterModalOpen(true)} style={[
-                localStyles.filterButton,
-                !isCrashFiltersDefault(crashFilters) && {
-                    borderColor: `${AppColors.brandPurple}60`,
-                    backgroundColor: `${AppColors.brandPurple}15`,
-                },
-            ]}>
-                <FilterIcon size={14} color={isCrashFiltersDefault(crashFilters)
-                ? AppColors.grayTextStrong
-                : AppColors.brandPurple}/>
-                {!isCrashFiltersDefault(crashFilters) && (<View style={{
-                    position: 'absolute',
-                    top: 2,
-                    right: 2,
-                    width: 7,
-                    height: 7,
-                    borderRadius: 3.5,
-                    backgroundColor: AppColors.darkOrange,
-                    borderWidth: 1,
-                    borderColor: AppColors.white,
-                }}/>)}
-              </TouchableScale>
+              <A onPress={()=>J(!0)}style={[t.filterButton,!P(b)&&{borderColor:`${e.brandPurple}60`,backgroundColor:`${e.brandPurple}15`}]}>
+                <Ye size={14}color={P(b)?e.grayTextStrong:e.brandPurple}/>
+                {!P(b)&&<C style={{position:"absolute",top:2,right:2,width:7,height:7,borderRadius:3.5,backgroundColor:e.darkOrange,borderWidth:1,borderColor:e.white}}/>}
+              </A>
 
               
-              <TouchableScale onPress={handleClearAll} style={localStyles.clearButton}>
-                <TrashIcon size={14} color={AppColors.errorColor}/>
-              </TouchableScale>
-            </View>
+              <A onPress={G}style={t.clearButton}>
+                <We size={14}color={e.errorColor}/>
+              </A>
+            </C>
 
-            <FeatureUnderDevNotice featureName="Crash & Exception Sentinel"/>
+            <Fe featureName="Crash & Exception Sentinel"/>
 
             
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.filterScrollContent}>
-              {[
-                { key: 'all', label: t('crash.filterAll'), Icon: LayersIcon },
-                { key: 'fatal', label: t('crash.filterFatal'), Icon: SkullIcon },
-                { key: 'js', label: t('crash.filterJsError'), Icon: JsIcon },
-                { key: 'promise', label: t('crash.filterPromise'), Icon: HourglassIcon },
-                { key: 'render', label: t('crash.filterRender'), Icon: LayoutIcon },
-                { key: 'native', label: t('crash.filterNative'), Icon: ChipIcon },
-            ].map(chip => {
-                const isActive = filterType === chip.key;
-                return (<TouchableOpacity key={chip.key} onPress={() => setFilterType(chip.key)} style={[
-                        localStyles.filterChip,
-                        isActive && localStyles.filterChipActive,
-                    ]}>
-                    <chip.Icon size={12} color={isActive ? AppColors.white : AppColors.grayTextStrong}/>
-                    <Text style={[
-                        localStyles.filterChipText,
-                        isActive && localStyles.filterChipTextActive,
-                    ]}>
-                      {chip.label}
-                    </Text>
-                  </TouchableOpacity>);
-            })}
-            </ScrollView>
-          </View>
-        </>)}
+            <M horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.filterScrollContent}>
+              {[{key:"all",label:x("crash.filterAll"),Icon:Ae},{key:"fatal",label:x("crash.filterFatal"),Icon:Je},{key:"js",label:x("crash.filterJsError"),Icon:Ne},{key:"promise",label:x("crash.filterPromise"),Icon:Ee},{key:"render",label:x("crash.filterRender"),Icon:Ue},{key:"native",label:x("crash.filterNative"),Icon:Qe}].map(r=>{const o=B===r.key;return<Q key={r.key}onPress={()=>N(r.key)}style={[t.filterChip,o&&t.filterChipActive]}>
+                    <r.Icon size={12}color={o?e.white:e.grayTextStrong}/>
+                    <T style={[t.filterChipText,o&&t.filterChipTextActive]}>
+                      {r.label}
+                    </T>
+                  </Q>})}
+            </M>
+          </C>
+        </>}
 
       
-      {filteredList.length === 0 ? (<ScrollView contentContainerStyle={localStyles.emptyContainer} showsVerticalScrollIndicator={false}>
-          <View style={localStyles.emptyIconCircle}>
-            <ShieldAlertIcon size={38} color={AppColors.greenColor}/>
-          </View>
-          <Text style={localStyles.emptyTitle}>
-            {searchQuery.length > 0
-                ? 'No matching crash entries'
-                : filterType !== 'all' || !isCrashFiltersDefault(crashFilters)
-                    ? 'No crashes match filters'
-                    : t('crash.emptyTitle')}
-          </Text>
-          <Text style={localStyles.emptySub}>
-            {searchQuery
-                ? `No crash entries matched "${searchQuery}"`
-                : filterType !== 'all' || !isCrashFiltersDefault(crashFilters)
-                    ? 'Try adjusting your filters or search keywords.'
-                    : t('crash.emptySubtitle')}
-          </Text>
-          {(searchQuery.length > 0 ||
-                filterType !== 'all' ||
-                !isCrashFiltersDefault(crashFilters)) && (<TouchableScale onPress={() => {
-                    setSearchQuery('');
-                    setFilterType('all');
-                    setCrashFilters(DEFAULT_CRASH_FILTERS);
-                }} style={{
-                    marginTop: 10,
-                    paddingHorizontal: 14,
-                    paddingVertical: 7,
-                    borderRadius: 8,
-                    backgroundColor: AppColors.purple,
-                }}>
-              <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11.5,
-                    color: AppColors.white,
-                }}>
+      {D.length===0?<M contentContainerStyle={t.emptyContainer}showsVerticalScrollIndicator={!1}>
+          <C style={t.emptyIconCircle}>
+            <Me size={38}color={e.greenColor}/>
+          </C>
+          <T style={t.emptyTitle}>
+            {k.length>0?"No matching crash entries":B!=="all"||!P(b)?"No crashes match filters":x("crash.emptyTitle")}
+          </T>
+          <T style={t.emptySub}>
+            {k?`No crash entries matched "${k}"`:B!=="all"||!P(b)?"Try adjusting your filters or search keywords.":x("crash.emptySubtitle")}
+          </T>
+          {(k.length>0||B!=="all"||!P(b))&&<A onPress={()=>{L(""),N("all"),E(_)}}style={{marginTop:10,paddingHorizontal:14,paddingVertical:7,borderRadius:8,backgroundColor:e.purple}}>
+              <T style={{fontFamily:S.interBold,fontSize:11.5,color:e.white}}>
                 Clear Search & Filters
-              </Text>
-            </TouchableScale>)}
-        </ScrollView>) : (<>
-          <FlatList ref={listRef} data={filteredList} keyExtractor={item => item.id} renderItem={renderCard} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} contentContainerStyle={localStyles.listContent} showsVerticalScrollIndicator={false} ListFooterComponent={<EndOfListFooter />}/>
-        </>)}
+              </T>
+            </A>}
+        </M>:<>
+          <Ce ref={H}data={D}keyExtractor={r=>r.id}renderItem={K}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={Te.OS==="android"}renderToHardwareTextureAndroid={!0}contentContainerStyle={t.listContent}showsVerticalScrollIndicator={!1}ListFooterComponent={<Ve/>}/>
+        </>}
 
       
-      <CrashFilterModal visible={isFilterModalOpen} onClose={() => setIsFilterModalOpen(false)} filters={crashFilters} onApply={setCrashFilters} searchQuery={searchQuery}/>
-    </View>);
-});
-export default CrashTab;
-const localStyles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors.grayBackground,
-    },
-    statsBar: {
-        backgroundColor: AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.grayBorderSecondary,
-        paddingVertical: 10,
-    },
-    statsScrollContent: {
-        paddingHorizontal: 16,
-        gap: 8,
-    },
-    statChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-        borderRadius: 8,
-        backgroundColor: AppColors.purpleShade50,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}14`,
-    },
-    statChipActive: {
-        backgroundColor: `${AppColors.purple}14`,
-        borderColor: `${AppColors.purple}33`,
-    },
-    statChipValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-    },
-    statChipLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayText,
-    },
-    controlsContainer: {
-        paddingHorizontal: 16,
-        paddingTop: 12,
-        paddingBottom: 6,
-        backgroundColor: AppColors.grayBackground,
-    },
-    searchRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    searchInputWrapper: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        borderRadius: 10,
-        paddingHorizontal: 10,
-        height: 38,
-        gap: 8,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 13,
-        color: AppColors.primaryBlack,
-        paddingVertical: 0,
-    },
-    clearButton: {
-        width: 38,
-        height: 38,
-        borderRadius: 10,
-        backgroundColor: `${AppColors.errorColor}14`,
-        borderWidth: 1,
-        borderColor: `${AppColors.errorColor}22`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    filterButton: {
-        width: 38,
-        height: 38,
-        borderRadius: 10,
-        backgroundColor: `${AppColors.brandPurple}0F`,
-        borderWidth: 1,
-        borderColor: `${AppColors.brandPurple}30`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    filterScrollContent: {
-        paddingVertical: 10,
-        gap: 6,
-    },
-    filterChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        paddingHorizontal: 12,
-        paddingVertical: 6,
-        borderRadius: 8,
-        backgroundColor: AppColors.primaryLight,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-    },
-    filterChipActive: {
-        backgroundColor: AppColors.purple,
-        borderColor: AppColors.purple,
-    },
-    filterChipText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.grayText,
-    },
-    filterChipTextActive: {
-        fontFamily: AppFonts.interBold,
-        color: AppColors.white,
-    },
-    listContent: {
-        paddingHorizontal: 16,
-        paddingTop: 4,
-        paddingBottom: 24,
-        gap: 10,
-    },
-    cardContainer: {
-        backgroundColor: AppColors.primaryLight,
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        padding: 14,
-        shadowColor: AppColors.shadowColorString,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.05,
-        shadowRadius: 3,
-        elevation: 2,
-    },
-    fatalCardBorder: {
-        borderColor: `${AppColors.errorColor}44`,
-    },
-    cardHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-    },
-    badgeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexShrink: 1,
-    },
-    sNoBadge: {
-        backgroundColor: AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors.grayBorderSecondary,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-    },
-    sNoBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.grayText,
-        letterSpacing: 0.3,
-    },
-    fatalBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.errorColor,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-    },
-    fatalBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.white,
-        letterSpacing: 0.5,
-    },
-    caughtBadge: {
-        backgroundColor: `${AppColors.greenColor}1F`,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-    },
-    caughtBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.greenColor,
-        letterSpacing: 0.5,
-    },
-    typeBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-    },
-    typeBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        letterSpacing: 0.5,
-    },
-    timeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        flexShrink: 1,
-    },
-    timestampText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    relativeTimeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 5,
-        paddingVertical: 1,
-        borderRadius: 4,
-        overflow: 'hidden',
-    },
-    errorMessageText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors.primaryBlack,
-        lineHeight: 18,
-    },
-    locationRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginTop: 2,
-        marginBottom: 6,
-        backgroundColor: AppColors.purpleShade50,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 6,
-    },
-    locationText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors.grayText,
-        flex: 1,
-    },
-    cardFooter: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 6,
-        paddingTop: 8,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-    },
-    metaPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.purpleShade50,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-    },
-    metaPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    emptyContainer: {
-        flexGrow: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: 32,
-        paddingBottom: 80,
-    },
-    emptyIconCircle: {
-        width: 72,
-        height: 72,
-        borderRadius: 36,
-        backgroundColor: `${AppColors.greenColor}1F`,
-        alignItems: 'center',
-        justifyContent: 'center',
-        marginBottom: 16,
-    },
-    emptyTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 17,
-        color: AppColors.primaryBlack,
-        marginBottom: 6,
-    },
-    emptySub: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 13,
-        color: AppColors.grayText,
-        textAlign: 'center',
-        lineHeight: 18,
-        maxWidth: 280,
-    },
-});
+      <Pe visible={q}onClose={()=>J(!1)}filters={b}onApply={E}searchQuery={k}/>
+    </C>});export default et;const t=be.create({container:{flex:1,backgroundColor:e.grayBackground},statsBar:{backgroundColor:e.primaryLight,borderBottomWidth:1,borderBottomColor:e.grayBorderSecondary,paddingVertical:10},statsScrollContent:{paddingHorizontal:16,gap:8},statChip:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:10,paddingVertical:5,borderRadius:8,backgroundColor:e.purpleShade50,borderWidth:1,borderColor:`${e.purple}14`},statChipActive:{backgroundColor:`${e.purple}14`,borderColor:`${e.purple}33`},statChipValue:{fontFamily:S.interBold,fontSize:13,color:e.primaryBlack},statChipLabel:{fontFamily:S.interMedium,fontSize:11,color:e.grayText},controlsContainer:{paddingHorizontal:16,paddingTop:12,paddingBottom:6,backgroundColor:e.grayBackground},searchRow:{flexDirection:"row",alignItems:"center",gap:8},searchInputWrapper:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:e.primaryLight,borderWidth:1,borderColor:e.grayBorderSecondary,borderRadius:10,paddingHorizontal:10,height:38,gap:8},searchInput:{flex:1,fontFamily:S.interRegular,fontSize:13,color:e.primaryBlack,paddingVertical:0},clearButton:{width:38,height:38,borderRadius:10,backgroundColor:`${e.errorColor}14`,borderWidth:1,borderColor:`${e.errorColor}22`,alignItems:"center",justifyContent:"center"},filterButton:{width:38,height:38,borderRadius:10,backgroundColor:`${e.brandPurple}0F`,borderWidth:1,borderColor:`${e.brandPurple}30`,alignItems:"center",justifyContent:"center"},filterScrollContent:{paddingVertical:10,gap:6},filterChip:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:12,paddingVertical:6,borderRadius:8,backgroundColor:e.primaryLight,borderWidth:1,borderColor:e.grayBorderSecondary},filterChipActive:{backgroundColor:e.purple,borderColor:e.purple},filterChipText:{fontFamily:S.interMedium,fontSize:12,color:e.grayText},filterChipTextActive:{fontFamily:S.interBold,color:e.white},listContent:{paddingHorizontal:16,paddingTop:4,paddingBottom:24,gap:10},cardContainer:{backgroundColor:e.primaryLight,borderRadius:12,borderWidth:1,borderColor:e.grayBorderSecondary,padding:14,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:3,elevation:2},fatalCardBorder:{borderColor:`${e.errorColor}44`},cardHeader:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},badgeRow:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},sNoBadge:{backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary,paddingHorizontal:6,paddingVertical:3,borderRadius:5},sNoBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:e.grayText,letterSpacing:.3},fatalBadge:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.errorColor,paddingHorizontal:6,paddingVertical:3,borderRadius:5},fatalBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:e.white,letterSpacing:.5},caughtBadge:{backgroundColor:`${e.greenColor}1F`,paddingHorizontal:6,paddingVertical:3,borderRadius:5},caughtBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:e.greenColor,letterSpacing:.5},typeBadge:{paddingHorizontal:6,paddingVertical:3,borderRadius:5},typeBadgeText:{fontFamily:S.interBold,fontSize:9.5,letterSpacing:.5},timeRow:{flexDirection:"row",alignItems:"center",gap:4,flexShrink:1},timestampText:{fontFamily:S.interRegular,fontSize:11,color:e.grayTextWeak},relativeTimeText:{fontFamily:S.interBold,fontSize:10,color:e.grayTextWeak,backgroundColor:e.grayBackground,paddingHorizontal:5,paddingVertical:1,borderRadius:4,overflow:"hidden"},errorMessageText:{fontFamily:S.interBold,fontSize:13.5,color:e.primaryBlack,lineHeight:18},locationRow:{flexDirection:"row",alignItems:"center",gap:6,marginTop:2,marginBottom:6,backgroundColor:e.purpleShade50,paddingHorizontal:8,paddingVertical:4,borderRadius:6},locationText:{fontFamily:S.interRegular,fontSize:11,color:e.grayText,flex:1},cardFooter:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:6,paddingTop:8,borderTopWidth:1,borderTopColor:e.dividerColor},metaPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.purpleShade50,paddingHorizontal:6,paddingVertical:2,borderRadius:4},metaPillText:{fontFamily:S.interMedium,fontSize:10,color:e.grayTextWeak},emptyContainer:{flexGrow:1,alignItems:"center",justifyContent:"center",padding:32,paddingBottom:80},emptyIconCircle:{width:72,height:72,borderRadius:36,backgroundColor:`${e.greenColor}1F`,alignItems:"center",justifyContent:"center",marginBottom:16},emptyTitle:{fontFamily:S.interBold,fontSize:17,color:e.primaryBlack,marginBottom:6},emptySub:{fontFamily:S.interRegular,fontSize:13,color:e.grayText,textAlign:"center",lineHeight:18,maxWidth:280}});