react-native-inapp-inspector 1.1.25 → 1.1.27

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

@@ -0,0 +1,796 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const i18n_1 = require("../../i18n");
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const SegmentedTabs_1 = __importDefault(require("../SegmentedTabs"));
+const HighlightText_1 = __importDefault(require("../HighlightText"));
+const JsonViewer_1 = __importDefault(require("../JsonViewer"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const crashHandler_1 = require("../../customHooks/crashHandler");
+const helpers_1 = require("../../helpers");
+const NetworkIcons_1 = require("../NetworkIcons");
+const CrashDetail = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
+    const { selectedCrash } = (0, InspectorContext_1.useInspector)();
+    const [activeSubTab, setActiveSubTab] = (0, react_1.useState)('stack');
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const [stackFilter, setStackFilter] = (0, react_1.useState)('app');
+    const [copiedSuccess, setCopiedSuccess] = (0, react_1.useState)(false);
+    const [copiedFrameIndex, setCopiedFrameIndex] = (0, react_1.useState)(null);
+    if (!selectedCrash)
+        return null;
+    const stackFrames = (0, react_1.useMemo)(() => {
+        if (selectedCrash.parsedStack && selectedCrash.parsedStack.length > 0) {
+            return selectedCrash.parsedStack;
+        }
+        if (selectedCrash.stack) {
+            return (0, crashHandler_1.parseCrashStackTrace)(selectedCrash.stack);
+        }
+        return [];
+    }, [selectedCrash]);
+    // Strip keys holding explicit undefined values (e.g. componentStack) so the
+    // Raw JSON tab never renders a literal "undefined".
+    const rawCrashData = (0, react_1.useMemo)(() => {
+        try {
+            return JSON.parse(JSON.stringify(selectedCrash));
+        }
+        catch {
+            return selectedCrash;
+        }
+    }, [selectedCrash]);
+    const appStackFrames = (0, react_1.useMemo)(() => {
+        return stackFrames.filter(f => f.isAppCode);
+    }, [stackFrames]);
+    const displayedFrames = (0, react_1.useMemo)(() => {
+        if (stackFilter === 'app' && appStackFrames.length > 0) {
+            return appStackFrames;
+        }
+        return stackFrames;
+    }, [stackFilter, appStackFrames, stackFrames]);
+    const originFrame = (0, react_1.useMemo)(() => {
+        return appStackFrames[0] || stackFrames[0] || null;
+    }, [appStackFrames, stackFrames]);
+    const handleCopyReport = () => {
+        const report = (0, crashHandler_1.exportCrashReport)(selectedCrash);
+        (0, helpers_1.copyToClipboard)(report, 'Crash Report');
+        setCopiedSuccess(true);
+        setTimeout(() => setCopiedSuccess(false), 2000);
+    };
+    const handleCopyFrame = (frame, index) => {
+        const text = frame.raw || `${frame.method}@${frame.file}:${frame.lineNumber}:${frame.column}`;
+        (0, helpers_1.copyToClipboard)(text, 'Stack Frame');
+        setCopiedFrameIndex(index);
+        setTimeout(() => setCopiedFrameIndex(null), 1500);
+    };
+    const tabsConfig = [
+        {
+            key: 'stack',
+            label: t('crash.tabStack', { count: stackFrames.length }),
+            icon: (isActive) => (<NetworkIcons_1.StackTraceIcon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+        },
+        {
+            key: 'diagnostics',
+            label: t('crash.tabDiagnostics'),
+            icon: (isActive) => (<NetworkIcons_1.DiagnosticsIcon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+        },
+        {
+            key: 'breadcrumbs',
+            label: t('crash.tabTrail', { count: selectedCrash.breadcrumbs?.length || 0 }),
+            icon: (isActive) => (<NetworkIcons_1.TrailIcon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+        },
+        {
+            key: 'raw',
+            label: t('crash.tabRawJson'),
+            icon: (isActive) => (<NetworkIcons_1.RawJsonIcon size={12} color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayText}/>),
+        },
+    ];
+    return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+      {/* ─── Top Info Bar (Similar to NetworkDetail / LogDetail) ─── */}
+      <react_native_1.View style={{ paddingHorizontal: 8, paddingTop: 6 }}>
+        <react_native_1.View style={localStyles.infoBar}>
+          {/* Top Status Badges Row */}
+          <react_native_1.View style={localStyles.badgeRow}>
+            {/* Fatal / Non-fatal Pill */}
+            <react_native_1.View style={[
+            localStyles.pillBadge,
+            {
+                backgroundColor: selectedCrash.isFatal
+                    ? '#FEE2E2'
+                    : '#FEF3C7',
+                borderColor: selectedCrash.isFatal ? '#FCA5A5' : '#FCD34D',
+            },
+        ]}>
+              <react_native_1.View style={[
+            localStyles.statusDot,
+            {
+                backgroundColor: selectedCrash.isFatal
+                    ? '#DC2626'
+                    : '#D97706',
+            },
+        ]}/>
+              <react_native_1.Text style={[
+            localStyles.pillBadgeText,
+            {
+                color: selectedCrash.isFatal ? '#991B1B' : '#92400E',
+            },
+        ]}>
+                {selectedCrash.isFatal ? t('crash.fatalCrash') : t('crash.handledException')}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {/* Type Pill */}
+            <react_native_1.View style={[
+            localStyles.pillBadge,
+            {
+                backgroundColor: '#EDE9FE',
+                borderColor: '#C4B5FD',
+            },
+        ]}>
+              <react_native_1.Text style={[localStyles.pillBadgeText, { color: '#6D28D9' }]}>
+                {selectedCrash.type.toUpperCase()}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            <react_native_1.View style={{ flex: 1 }}/>
+
+            {/* Copy Report Action */}
+            <TouchableScale_1.default onPress={handleCopyReport} hitSlop={10} style={[
+            localStyles.actionButton,
+            copiedSuccess && { backgroundColor: '#ECFDF5', borderColor: '#6EE7B7' },
+        ]}>
+              {copiedSuccess ? (<NetworkIcons_1.CircleCheckIcon color="#059669" size={12}/>) : (<NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.purple} size={12}/>)}
+              <react_native_1.Text style={[
+            localStyles.actionButtonText,
+            copiedSuccess && { color: '#059669' },
+        ]}>
+                {copiedSuccess ? t('crash.copied') : t('crash.copyReport')}
+              </react_native_1.Text>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+
+          {/* Crash Title / Message */}
+          <react_native_1.Text style={localStyles.titleText}>
+            {selectedCrash.message}
+          </react_native_1.Text>
+
+          {/* Metadata Row */}
+          <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={localStyles.metaRow}>
+            {originFrame && (<react_native_1.View style={localStyles.metaChip}>
+                <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.grayText} size={11}/>
+                <react_native_1.Text style={localStyles.metaChipText} numberOfLines={2}>
+                  {originFrame.file}:{originFrame.lineNumber}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            <react_native_1.View style={localStyles.metaChip}>
+              <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayText} size={11}/>
+              <react_native_1.Text style={localStyles.metaChipText}>
+                {selectedCrash.timeStr || new Date(selectedCrash.timestamp).toLocaleTimeString()}
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {selectedCrash.deviceInfo?.platform && (<react_native_1.View style={localStyles.metaChip}>
+                {selectedCrash.deviceInfo.platform === 'ios' ? (<NetworkIcons_1.AppleIcon color={AppColors_1.AppColors.grayText} size={11}/>) : (<NetworkIcons_1.AndroidIcon color={AppColors_1.AppColors.grayText} size={11}/>)}
+                <react_native_1.Text style={localStyles.metaChipText}>
+                  {selectedCrash.deviceInfo.platform.toUpperCase()} {selectedCrash.deviceInfo.osVersion}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.ScrollView>
+        </react_native_1.View>
+      </react_native_1.View>
+
+      {/* ─── Segmented Sub Tabs ─── */}
+      <react_native_1.View style={{ paddingHorizontal: 8, paddingTop: 6, paddingBottom: 4 }}>
+        <SegmentedTabs_1.default tabs={tabsConfig} activeKey={activeSubTab} onChange={tab => setActiveSubTab(tab)}/>
+      </react_native_1.View>
+
+      {/* ─── Search Bar (for Stack & Raw tabs) ─── */}
+      {(activeSubTab === 'stack' || activeSubTab === 'raw') && (<react_native_1.View style={{ paddingHorizontal: 12, paddingBottom: 6 }}>
+          <react_native_1.View style={localStyles.searchContainer}>
+            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayText} size={14}/>
+            <react_native_1.TextInput style={localStyles.searchInput} placeholder={t('crash.searchDetailPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} autoCapitalize="none" autoCorrect={false}/>
+            {searchQuery.length > 0 && (<TouchableScale_1.default onPress={() => setSearchQuery('')} hitSlop={10}>
+                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayText} size={13}/>
+              </TouchableScale_1.default>)}
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      {/* ─── Tab Content ScrollView ─── */}
+      <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40, gap: 12 }}>
+        {/* 1. STACK TRACE TAB */}
+        {activeSubTab === 'stack' && (<react_native_1.View style={{ gap: 10 }}>
+            {/* Filter Chips (App Code vs All Frames) */}
+            <react_native_1.View style={localStyles.filterChipsRow}>
+              <TouchableScale_1.default onPress={() => setStackFilter('app')} style={[
+                localStyles.filterChip,
+                stackFilter === 'app' && localStyles.filterChipActive,
+            ]}>
+                <NetworkIcons_1.AppFramesIcon size={12} color={stackFilter === 'app'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={[
+                localStyles.filterChipText,
+                stackFilter === 'app' && localStyles.filterChipTextActive,
+            ]}>
+                  {t('crash.appFrames', { count: appStackFrames.length })}
+                </react_native_1.Text>
+              </TouchableScale_1.default>
+
+              <TouchableScale_1.default onPress={() => setStackFilter('all')} style={[
+                localStyles.filterChip,
+                stackFilter === 'all' && localStyles.filterChipActive,
+            ]}>
+                <NetworkIcons_1.AllFramesIcon size={12} color={stackFilter === 'all'
+                ? AppColors_1.AppColors.white
+                : AppColors_1.AppColors.purple}/>
+                <react_native_1.Text style={[
+                localStyles.filterChipText,
+                stackFilter === 'all' && localStyles.filterChipTextActive,
+            ]}>
+                  {t('crash.allFrames', { count: stackFrames.length })}
+                </react_native_1.Text>
+              </TouchableScale_1.default>
+            </react_native_1.View>
+
+            {/* Frames List */}
+            {displayedFrames.length > 0 ? (displayedFrames
+                .filter(frame => {
+                if (!searchQuery.trim())
+                    return true;
+                const q = searchQuery.toLowerCase();
+                return (frame.method.toLowerCase().includes(q) ||
+                    frame.file.toLowerCase().includes(q));
+            })
+                .map((frame, index) => {
+                const isOrigin = index === 0 && frame.isAppCode;
+                return (<react_native_1.View key={`frame_${index}`} style={[
+                        localStyles.frameCard,
+                        isOrigin && localStyles.originFrameCard,
+                    ]}>
+                      <react_native_1.View style={localStyles.frameCardHeader}>
+                        <react_native_1.View style={localStyles.frameIndexBadge}>
+                          <react_native_1.Text style={localStyles.frameIndexBadgeText}>
+                            #{index + 1}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <react_native_1.View style={[
+                        localStyles.frameTypeBadge,
+                        frame.isAppCode
+                            ? { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' }
+                            : { backgroundColor: '#F1F5F9', borderColor: '#E2E8F0' },
+                    ]}>
+                          <react_native_1.Text style={[
+                        localStyles.frameTypeBadgeText,
+                        frame.isAppCode
+                            ? { color: '#059669' }
+                            : { color: '#64748B' },
+                    ]}>
+                            {frame.isAppCode ? t('crash.frameApp') : t('crash.frameLib')}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+
+                        <react_native_1.Text style={localStyles.frameMethodText} numberOfLines={1}>
+                          <HighlightText_1.default text={frame.method || t('crash.anonymous')} highlight={searchQuery}/>
+                        </react_native_1.Text>
+
+                        <TouchableScale_1.default onPress={() => handleCopyFrame(frame, index)} hitSlop={8} style={localStyles.frameCopyBtn}>
+                          {copiedFrameIndex === index ? (<NetworkIcons_1.CircleCheckIcon color={AppColors_1.AppColors.greenColor} size={12}/>) : (<NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.grayText} size={12}/>)}
+                          <react_native_1.Text style={localStyles.frameCopyBtnText}>
+                            {copiedFrameIndex === index
+                        ? t('crash.frameCopied')
+                        : t('crash.frameCopy')}
+                          </react_native_1.Text>
+                        </TouchableScale_1.default>
+                      </react_native_1.View>
+
+                      <react_native_1.View style={localStyles.frameLocationRow}>
+                        <react_native_1.Text style={localStyles.frameFileText} numberOfLines={1}>
+                          <HighlightText_1.default text={frame.file} highlight={searchQuery}/>
+                        </react_native_1.Text>
+                        <react_native_1.Text style={localStyles.frameLineText}>
+                          :{frame.lineNumber}
+                          {frame.column ? `:${frame.column}` : ''}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+
+                      {frame.raw && (<react_native_1.Text style={localStyles.frameRawText} numberOfLines={2}>
+                          {frame.raw}
+                        </react_native_1.Text>)}
+                    </react_native_1.View>);
+            })) : (<react_native_1.View style={localStyles.emptyContainer}>
+                <react_native_1.Text style={localStyles.emptyText}>
+                  {selectedCrash.stack
+                    ? selectedCrash.stack
+                    : t('crash.noStackTrace')}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+
+            {selectedCrash.componentStack && (<react_native_1.View style={localStyles.sectionCard}>
+                <react_native_1.View style={localStyles.sectionCardHeader}>
+                  <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={14}/>
+                  <react_native_1.Text style={localStyles.sectionCardTitle}>
+                    {t('crash.componentHierarchy')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={localStyles.componentStackText}>
+                  {selectedCrash.componentStack}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>)}
+
+        {/* 2. DIAGNOSTICS TAB */}
+        {activeSubTab === 'diagnostics' && (<react_native_1.View style={{ gap: 12 }}>
+            {/* Device & OS Diagnostics Card */}
+            <react_native_1.View style={localStyles.sectionCard}>
+              <react_native_1.View style={localStyles.sectionCardHeader}>
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={14}/>
+                <react_native_1.Text style={localStyles.sectionCardTitle}>{t('crash.deviceEnvironment')}</react_native_1.Text>
+              </react_native_1.View>
+
+              <react_native_1.View style={localStyles.diagGrid}>
+                <react_native_1.View style={localStyles.diagItem}>
+                  <react_native_1.Text style={localStyles.diagLabel}>{t('crash.platform')}</react_native_1.Text>
+                  <react_native_1.Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.platform?.toUpperCase() || react_native_1.Platform.OS.toUpperCase()}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={localStyles.diagItem}>
+                  <react_native_1.Text style={localStyles.diagLabel}>{t('crash.osVersion')}</react_native_1.Text>
+                  <react_native_1.Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.osVersion || String(react_native_1.Platform.Version)}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={localStyles.diagItem}>
+                  <react_native_1.Text style={localStyles.diagLabel}>{t('crash.reactNative')}</react_native_1.Text>
+                  <react_native_1.Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.rnVersion || '0.74+'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={localStyles.diagItem}>
+                  <react_native_1.Text style={localStyles.diagLabel}>{t('crash.jsEngine')}</react_native_1.Text>
+                  <react_native_1.Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.isHermes ? t('crash.hermesEngine') : t('crash.jsc')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={localStyles.diagItem}>
+                  <react_native_1.Text style={localStyles.diagLabel}>{t('crash.architecture')}</react_native_1.Text>
+                  <react_native_1.Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.isFabric ? t('crash.fabricNewArch') : t('crash.paperLegacy')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={localStyles.diagItem}>
+                  <react_native_1.Text style={localStyles.diagLabel}>{t('crash.appState')}</react_native_1.Text>
+                  <react_native_1.Text style={localStyles.diagValue}>
+                    {selectedCrash.deviceInfo?.appState || 'active'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            {/* Memory Metrics Card */}
+            {selectedCrash.memoryInfo && (<react_native_1.View style={localStyles.sectionCard}>
+                <react_native_1.View style={localStyles.sectionCardHeader}>
+                  <NetworkIcons_1.LayersIcon color={AppColors_1.AppColors.purple} size={14}/>
+                  <react_native_1.Text style={localStyles.sectionCardTitle}>{t('crash.jsHeapMemory')}</react_native_1.Text>
+                </react_native_1.View>
+
+                <react_native_1.View style={localStyles.diagGrid}>
+                  <react_native_1.View style={localStyles.diagItem}>
+                    <react_native_1.Text style={localStyles.diagLabel}>{t('crash.usedHeap')}</react_native_1.Text>
+                    <react_native_1.Text style={localStyles.diagValue}>
+                      {selectedCrash.memoryInfo.usedJSHeapSize} MB
+                    </react_native_1.Text>
+                  </react_native_1.View>
+
+                  <react_native_1.View style={localStyles.diagItem}>
+                    <react_native_1.Text style={localStyles.diagLabel}>{t('crash.totalHeap')}</react_native_1.Text>
+                    <react_native_1.Text style={localStyles.diagValue}>
+                      {selectedCrash.memoryInfo.totalJSHeapSize} MB
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </react_native_1.View>)}
+          </react_native_1.View>)}
+
+        {/* 3. BREADCRUMBS TAB */}
+        {activeSubTab === 'breadcrumbs' && (<react_native_1.View style={{ gap: 10 }}>
+            {selectedCrash.breadcrumbs && selectedCrash.breadcrumbs.length > 0 ? (selectedCrash.breadcrumbs.map((b, idx) => (<react_native_1.View key={`crumb_${idx}`} style={localStyles.breadcrumbCard}>
+                  <react_native_1.View style={localStyles.breadcrumbHeader}>
+                    <react_native_1.View style={localStyles.breadcrumbTag}>
+                      <react_native_1.Text style={localStyles.breadcrumbTagText}>
+                        {b.type.toUpperCase()}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={localStyles.breadcrumbTime}>
+                      {new Date(b.timestamp).toLocaleTimeString()}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.Text style={localStyles.breadcrumbMessage}>{b.message}</react_native_1.Text>
+                  {b.data && (<react_native_1.View style={{ marginTop: 6 }}>
+                      <JsonViewer_1.default data={b.data} search="" wrap/>
+                    </react_native_1.View>)}
+                </react_native_1.View>))) : (<react_native_1.View style={localStyles.emptyContainer}>
+                <react_native_1.Text style={localStyles.emptyText}>
+                  {t('crash.noBreadcrumbs')}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>)}
+
+        {/* 4. RAW JSON TAB */}
+        {activeSubTab === 'raw' && (<react_native_1.View style={localStyles.rawContainer}>
+            <JsonViewer_1.default data={rawCrashData} search={searchQuery} wrap/>
+          </react_native_1.View>)}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+});
+exports.default = CrashDetail;
+const localStyles = react_native_1.StyleSheet.create({
+    infoBar: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 12,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.05,
+        shadowRadius: 3,
+        elevation: 2,
+        gap: 8,
+    },
+    badgeRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    pillBadge: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 12,
+        borderWidth: 1,
+        gap: 5,
+    },
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    pillBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        letterSpacing: 0.4,
+    },
+    actionButton: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        borderColor: `${AppColors_1.AppColors.purple}33`,
+        borderWidth: 1,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 8,
+    },
+    actionButtonText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.purple,
+    },
+    titleText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+        lineHeight: 19,
+    },
+    metaRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingVertical: 2,
+    },
+    metaChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 7,
+        paddingVertical: 3,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    metaChipText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayText,
+    },
+    searchContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        borderRadius: 8,
+        paddingHorizontal: 10,
+        height: 36,
+        gap: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        paddingVertical: 0,
+    },
+    filterChipsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    filterChip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 5,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 8,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    filterChipActive: {
+        backgroundColor: AppColors_1.AppColors.purple,
+        borderColor: AppColors_1.AppColors.purple,
+    },
+    filterChipText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+    },
+    filterChipTextActive: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.white,
+    },
+    frameCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 8,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 4,
+    },
+    originFrameCard: {
+        borderColor: '#6EE7B7',
+        backgroundColor: '#F0FDF4',
+    },
+    frameCardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    frameIndexBadge: {
+        minWidth: 24,
+        height: 18,
+        paddingHorizontal: 4,
+        borderRadius: 4,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    frameIndexBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.purple,
+    },
+    frameTypeBadge: {
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+    },
+    frameTypeBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 8.5,
+    },
+    frameMethodText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        flex: 1,
+    },
+    frameLocationRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    frameFileText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        flex: 1,
+    },
+    frameLineText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.purple,
+    },
+    frameCopyBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 5,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    frameCopyBtnText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.grayText,
+    },
+    frameRawText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+        backgroundColor: `${AppColors_1.AppColors.primaryBlack}06`,
+        borderRadius: 5,
+        paddingHorizontal: 7,
+        paddingVertical: 4,
+        overflow: 'hidden',
+    },
+    componentStackText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        lineHeight: 16,
+        color: AppColors_1.AppColors.grayText,
+        backgroundColor: `${AppColors_1.AppColors.primaryBlack}06`,
+        borderRadius: 6,
+        padding: 10,
+    },
+    sectionCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 10,
+    },
+    sectionCardHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingBottom: 6,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+    },
+    sectionCardTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    diagGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        rowGap: 8,
+        columnGap: 12,
+    },
+    diagItem: {
+        width: '47%',
+        gap: 2,
+    },
+    diagLabel: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    diagValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    breadcrumbCard: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 8,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 4,
+    },
+    breadcrumbHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    breadcrumbTag: {
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    breadcrumbTagText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors_1.AppColors.purple,
+    },
+    breadcrumbTime: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    breadcrumbMessage: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11.5,
+        color: AppColors_1.AppColors.primaryBlack,
+        marginTop: 2,
+    },
+    rawContainer: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 10,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    emptyContainer: {
+        padding: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    emptyText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayText,
+        textAlign: 'center',
+    },
+});