react-native-inapp-inspector 1.1.26 → 1.1.28

package/dist/esm/components/ErrorBoundary.js

@@ -1,42 +1,74 @@
-import { Component } from 'react';
-import { StyleSheet } from 'react-native';
+import React, { Component } from 'react';
+import { StyleSheet, Text, View, ScrollView, TouchableOpacity, SafeAreaView, } from 'react-native';
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { copyToClipboard } from '../helpers';
+import { t } from '../i18n';
+import { WarningTriangleIcon, CopyIcon, RefreshCcwIcon, ClearIcon, CircleAlertIcon, } from './NetworkIcons';
 import { handleInterceptedCrash } from '../customHooks/crashHandler';
 import { CrashType } from '../types/enums';
 function parseStackTrace(stack) {
     if (!stack)
-        return null;
+        return { rootFrame: null, frames: [] };
     const lines = stack.split('\n');
+    const frames = [];
     for (const line of lines) {
         if (line.includes('ErrorBoundary') ||
             line.includes('getDerivedStateFromError') ||
-            line.includes('componentDidCatch')) {
+            line.includes('componentDidCatch') ||
+            line.includes('handleInterceptedCrash')) {
             continue;
         }
-        // Matching ios format: method@url:line:col
-        const iosMatch = line.match(/^([^@]+)@(.*):(\d+):(\d+)$/);
+        // iOS format: method@url:line:col
+        const iosMatch = line.match(/^([^@]*)@(.*):(\d+):(\d+)$/);
         if (iosMatch) {
-            const [, method, file, lineNum, colNum] = iosMatch;
-            const cleanFile = file.split('?')[0].split('/').pop() || file;
-            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+            const [, method, fullPath, lineNum, colNum] = iosMatch;
+            const cleanFile = fullPath.split('?')[0].split('/').pop() || fullPath;
+            const isProject = !fullPath.includes('node_modules') && !fullPath.includes('Libraries/Core');
+            frames.push({
+                method: method.trim() || 'anonymous',
+                file: cleanFile,
+                fullPath: fullPath.split('?')[0],
+                line: lineNum,
+                column: colNum,
+                isProjectFile: isProject,
+            });
+            continue;
         }
-        // Matching android format: at method (url:line:col) or at url:line:col
+        // Android format: at method (url:line:col) or at url:line:col
         const androidMatch = line.match(/^\s*at\s+(.+)\s+\((.+):(\d+):(\d+)\)$/);
         if (androidMatch) {
-            const [, method, file, lineNum, colNum] = androidMatch;
-            const cleanFile = file.split('?')[0].split('/').pop() || file;
-            return { method: method.trim(), file: cleanFile, line: lineNum, column: colNum };
+            const [, method, fullPath, lineNum, colNum] = androidMatch;
+            const cleanFile = fullPath.split('?')[0].split('/').pop() || fullPath;
+            const isProject = !fullPath.includes('node_modules') && !fullPath.includes('Libraries/Core');
+            frames.push({
+                method: method.trim(),
+                file: cleanFile,
+                fullPath: fullPath.split('?')[0],
+                line: lineNum,
+                column: colNum,
+                isProjectFile: isProject,
+            });
+            continue;
         }
         const androidMatchSimple = line.match(/^\s*at\s+(.+):(\d+):(\d+)$/);
         if (androidMatchSimple) {
-            const [, file, lineNum, colNum] = androidMatchSimple;
-            const cleanFile = file.split('?')[0].split('/').pop() || file;
-            return { method: 'anonymous', file: cleanFile, line: lineNum, column: colNum };
+            const [, fullPath, lineNum, colNum] = androidMatchSimple;
+            const cleanFile = fullPath.split('?')[0].split('/').pop() || fullPath;
+            const isProject = !fullPath.includes('node_modules') && !fullPath.includes('Libraries/Core');
+            frames.push({
+                method: 'anonymous',
+                file: cleanFile,
+                fullPath: fullPath.split('?')[0],
+                line: lineNum,
+                column: colNum,
+                isProjectFile: isProject,
+            });
         }
     }
-    return null;
+    // Find topmost project frame, or fallback to first frame
+    const rootFrame = frames.find(f => f.isProjectFile) || frames[0] || null;
+    return { rootFrame, frames };
 }
 export class ErrorBoundary extends Component {
     constructor() {
@@ -54,14 +86,19 @@ export class ErrorBoundary extends Component {
         this.handleCopyTrace = () => {
             const error = this.state.error;
             if (error) {
-                const isNativeCrash = error.message.includes('Native') || error.message.includes('native') || error.message.includes('Swift') || error.message.includes('Java');
-                const parsed = error.stack ? parseStackTrace(error.stack) : null;
-                const detailStr = `Crash Source: ${isNativeCrash ? 'Native Crash' : 'JavaScript Crash'}
+                const { rootFrame } = parseStackTrace(error.stack || '');
+                const detailStr = `─────────────────────────────────────────────────────────────
+IN-APP INSPECTOR • INTERCEPTED CRASH REPORT
+─────────────────────────────────────────────────────────────
+Error: ${error.name || 'Error'}
 Message: ${error.message}
-${parsed ? `Method: ${parsed.method}\nFile: ${parsed.file}\nLine: ${parsed.line}:${parsed.column}` : ''}
+${rootFrame ? `Location: ${rootFrame.file}:${rootFrame.line}:${rootFrame.column}\nMethod: ${rootFrame.method}\nPath: ${rootFrame.fullPath}` : ''}
+Timestamp: ${new Date().toISOString()}
+
 Stack Trace:
-${error.stack}`;
-                copyToClipboard(detailStr, 'Crash traceback');
+${error.stack || 'No stack trace available'}
+─────────────────────────────────────────────────────────────`;
+                copyToClipboard(detailStr, t('errors.errorReport'));
             }
         };
     }
@@ -70,132 +107,492 @@ ${error.stack}`;
     }
     componentDidCatch(error, errorInfo) {
         try {
-            const stack = error?.stack || errorInfo?.componentStack;
+            const stack = error?.stack || errorInfo?.componentStack || '';
             handleInterceptedCrash(error, stack, false, CrashType.Render, errorInfo?.componentStack);
         }
         catch { }
     }
     render() {
-        if (this.state.hasError) {
-            return null;
+        const { hasError, error } = this.state;
+        if (!hasError || !error) {
+            return this.props.children;
         }
-        return this.props.children;
+        const { rootFrame, frames } = parseStackTrace(error.stack || '');
+        const errorType = error.name || t('errors.title');
+        const isSyntaxOrType = errorType.includes('Syntax') ||
+            errorType.includes('Type') ||
+            errorType.includes('Reference');
+        // ─── Inline Fallback View ─────────────────────────────────────────────
+        if (this.props.fallbackType === 'inline') {
+            return (<View style={styles.inlineContainer}>
+          <View style={styles.inlineHeader}>
+            <WarningTriangleIcon color={AppColors.red600} size={18}/>
+            <View style={{ flex: 1 }}>
+              <Text style={styles.inlineTitle} numberOfLines={1}>
+                {errorType}: {error.message}
+              </Text>
+              {rootFrame && (<Text style={styles.inlineLoc} numberOfLines={1}>
+                  {rootFrame.file}:{rootFrame.line} ({rootFrame.method})
+                </Text>)}
+            </View>
+          </View>
+          <View style={styles.inlineActions}>
+            <TouchableOpacity onPress={this.handleReset} style={styles.inlineBtn} activeOpacity={0.7}>
+              <RefreshCcwIcon size={12} color={AppColors.white}/>
+              <Text style={styles.inlineBtnText}>{t('errors.retry')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity onPress={this.handleCopyTrace} style={styles.inlineCopyBtn} activeOpacity={0.7}>
+              <CopyIcon size={12} color={AppColors.redErrorText}/>
+              <Text style={styles.inlineCopyBtnText}>{t('errors.copy')}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>);
+        }
+        // ─── Full-Screen Custom Native Recovery Modal ─────────────────────────
+        return (<SafeAreaView style={styles.safeArea}>
+        <View style={styles.container}>
+          {/* Header Banner */}
+          <View style={styles.header}>
+            <View style={styles.iconGlowWrap}>
+              <WarningTriangleIcon color={AppColors.red500} size={28}/>
+            </View>
+            <View style={{ flex: 1 }}>
+              <View style={styles.badgeRow}>
+                <View style={styles.crashBadge}>
+                  <Text style={styles.crashBadgeText}>
+                    {isSyntaxOrType ? `JS ${errorType.toUpperCase()}` : t('errors.crashIntercepted')}
+                  </Text>
+                </View>
+                <View style={styles.shieldBadge}>
+                  <Text style={styles.shieldBadgeText}>{t('errors.protected')}</Text>
+                </View>
+              </View>
+              <Text style={styles.title}>{t('errors.rootCauseTitle')}</Text>
+              <Text style={styles.subtitle}>{t('errors.rootCauseSubtitle')}</Text>
+            </View>
+            {this.props.onClose && (<TouchableOpacity onPress={this.props.onClose} style={styles.closeIconBtn} activeOpacity={0.7}>
+                <ClearIcon size={16} color={AppColors.slate400}/>
+              </TouchableOpacity>)}
+          </View>
+
+          <ScrollView style={styles.scrollArea} contentContainerStyle={styles.scrollContent} showsVerticalScrollIndicator={false}>
+            {/* Error Message Box */}
+            <View style={styles.errorBox}>
+              <View style={styles.errorBoxHeader}>
+                <CircleAlertIcon size={14} color={AppColors.red500}/>
+                <Text style={styles.errorBoxTitle}>{errorType}</Text>
+              </View>
+              <Text style={styles.errorMessage}>{error.message}</Text>
+            </View>
+
+            {/* Root Cause Location Card */}
+            {rootFrame && (<View style={styles.locationCard}>
+                <Text style={styles.cardHeaderTitle}>{t('errors.exactLocation')}</Text>
+                <View style={styles.locRow}>
+                  <Text style={styles.locLabel}>{t('errors.file')}</Text>
+                  <Text style={styles.locValFile} numberOfLines={1}>
+                    {rootFrame.file}
+                  </Text>
+                </View>
+                <View style={styles.locRow}>
+                  <Text style={styles.locLabel}>{t('errors.lineCol')}</Text>
+                  <Text style={styles.locValNum}>
+                    {t('errors.lineColVal', { line: rootFrame.line, col: rootFrame.column })}
+                  </Text>
+                </View>
+                <View style={styles.locRow}>
+                  <Text style={styles.locLabel}>{t('errors.function')}</Text>
+                  <Text style={styles.locValMethod}>{rootFrame.method}()</Text>
+                </View>
+                {rootFrame.fullPath ? (<Text style={styles.fullPathText} numberOfLines={2}>
+                    {rootFrame.fullPath}
+                  </Text>) : null}
+              </View>)}
+
+            {/* Formatted Stack Frames */}
+            <View style={styles.stackCard}>
+              <View style={styles.stackCardHeader}>
+                <Text style={styles.cardHeaderTitle}>{t('errors.callStack')}</Text>
+                <Text style={styles.frameCountText}>
+                  {t('errors.framesCount', { count: frames.length })}
+                </Text>
+              </View>
+
+              {frames.slice(0, 8).map((frame, idx) => (<View key={idx} style={[
+                    styles.frameItem,
+                    frame.isProjectFile && styles.frameItemProject,
+                ]}>
+                  <View style={styles.frameNumBadge}>
+                    <Text style={[
+                    styles.frameNumText,
+                    frame.isProjectFile && { color: AppColors.sky400 },
+                ]}>
+                      #{idx + 1}
+                    </Text>
+                  </View>
+                  <View style={{ flex: 1 }}>
+                    <Text style={[
+                    styles.frameMethod,
+                    frame.isProjectFile && styles.frameMethodProject,
+                ]} numberOfLines={1}>
+                      {frame.method}
+                    </Text>
+                    <Text style={styles.frameLoc} numberOfLines={1}>
+                      {frame.file}:{frame.line}:{frame.column}
+                    </Text>
+                  </View>
+                  {frame.isProjectFile && (<View style={styles.appTag}>
+                      <Text style={styles.appTagText}>{t('errors.appTag')}</Text>
+                    </View>)}
+                </View>))}
+            </View>
+          </ScrollView>
+
+          {/* Action Buttons Footer */}
+          <View style={styles.footer}>
+            <TouchableOpacity onPress={this.handleReset} style={styles.retryBtn} activeOpacity={0.8}>
+              <RefreshCcwIcon size={16} color={AppColors.white}/>
+              <Text style={styles.retryBtnText}>{t('errors.tryAgainRecover')}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity onPress={this.handleCopyTrace} style={styles.copyBtn} activeOpacity={0.8}>
+              <CopyIcon size={16} color={AppColors.slate900}/>
+              <Text style={styles.copyBtnText}>{t('errors.copyDiagnostics')}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </SafeAreaView>);
     }
 }
-const monoFont = AppFonts.interRegular;
 const styles = StyleSheet.create({
+    safeArea: {
+        flex: 1,
+        backgroundColor: AppColors.slate850,
+    },
     container: {
         flex: 1,
-        backgroundColor: `${AppColors.black}4D`,
-        justifyContent: 'center',
+        backgroundColor: AppColors.slate850,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        paddingHorizontal: 16,
+        paddingTop: 14,
+        paddingBottom: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.slate800,
+        gap: 12,
+    },
+    iconGlowWrap: {
+        width: 44,
+        height: 44,
+        borderRadius: 12,
+        backgroundColor: `${AppColors.red500}26`,
+        borderWidth: 1,
+        borderColor: `${AppColors.red500}59`,
         alignItems: 'center',
-        padding: 16,
+        justifyContent: 'center',
+        marginTop: 2,
     },
-    card: {
-        width: '100%',
-        maxWidth: 400,
-        backgroundColor: AppColors.white,
-        borderRadius: 16,
-        padding: 20,
+    badgeRow: {
+        flexDirection: 'row',
         alignItems: 'center',
-        shadowColor: AppColors.black,
-        shadowOffset: { width: 0, height: 4 },
-        shadowOpacity: 0.1,
-        shadowRadius: 12,
-        elevation: 8,
+        gap: 6,
+        marginBottom: 4,
+    },
+    crashBadge: {
+        backgroundColor: `${AppColors.red500}33`,
+        paddingHorizontal: 7,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: `${AppColors.red500}66`,
+    },
+    crashBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors.red500,
+        letterSpacing: 0.5,
+    },
+    shieldBadge: {
+        backgroundColor: `${AppColors.emerald500}26`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: `${AppColors.emerald500}4D`,
+    },
+    shieldBadgeText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 9,
+        color: AppColors.emerald500,
+        letterSpacing: 0.5,
     },
     title: {
-        fontFamily: AppFonts.interBold || 'System',
-        fontSize: 18,
-        color: AppColors.slate900,
-        marginBottom: 8,
-        textAlign: 'center',
+        fontFamily: AppFonts.interBold,
+        fontSize: 16,
+        color: AppColors.white,
+        letterSpacing: -0.2,
     },
     subtitle: {
-        fontFamily: AppFonts.interRegular || 'System',
-        fontSize: 12,
-        color: AppColors.slate500,
-        lineHeight: 18,
-        textAlign: 'center',
-        marginBottom: 16,
-    },
-    scroll: {
-        width: '100%',
-        maxHeight: 180,
-        backgroundColor: AppColors.slate50,
+        fontFamily: AppFonts.interRegular,
+        fontSize: 11,
+        color: AppColors.slate400,
+        marginTop: 1,
+    },
+    closeIconBtn: {
+        padding: 6,
         borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.slate200,
-        padding: 10,
-        marginBottom: 20,
+        backgroundColor: AppColors.slate800,
+    },
+    scrollArea: {
+        flex: 1,
     },
     scrollContent: {
-        paddingBottom: 10,
+        padding: 16,
+        gap: 12,
     },
-    code: {
-        fontFamily: monoFont,
-        fontSize: 11,
-        color: AppColors.rose600,
+    errorBox: {
+        backgroundColor: `${AppColors.red500}1A`,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: `${AppColors.red500}40`,
+        padding: 14,
+        gap: 6,
     },
-    btnRow: {
+    errorBoxHeader: {
         flexDirection: 'row',
-        gap: 12,
-        width: '100%',
+        alignItems: 'center',
+        gap: 6,
+    },
+    errorBoxTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.red500,
+        letterSpacing: 0.3,
+    },
+    errorMessage: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 13.5,
+        color: AppColors.red100,
+        lineHeight: 19,
+    },
+    locationCard: {
+        backgroundColor: AppColors.slate800,
+        borderRadius: 12,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors.slate700,
+        gap: 8,
     },
-    resetBtn: {
+    cardHeaderTitle: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors.slate400,
+        letterSpacing: 0.8,
+    },
+    locRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    locLabel: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors.slate400,
+        minWidth: 80,
+    },
+    locValFile: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors.sky400,
         flex: 1,
-        backgroundColor: AppColors.purple,
-        height: 40,
+        textAlign: 'right',
+    },
+    locValNum: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.white,
+    },
+    locValMethod: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors.purple400,
+    },
+    fullPathText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.slate500,
+        marginTop: 2,
+        paddingTop: 6,
+        borderTopWidth: 1,
+        borderTopColor: AppColors.slate700,
+    },
+    stackCard: {
+        backgroundColor: AppColors.slate800,
+        borderRadius: 12,
+        padding: 14,
+        borderWidth: 1,
+        borderColor: AppColors.slate700,
+        gap: 8,
+    },
+    stackCardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    frameCountText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors.slate400,
+    },
+    frameItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors.slate850,
+        padding: 10,
         borderRadius: 8,
-        justifyContent: 'center',
+        gap: 10,
+        borderWidth: 1,
+        borderColor: AppColors.slate800,
+    },
+    frameItemProject: {
+        borderColor: `${AppColors.sky400}4D`,
+        backgroundColor: `${AppColors.sky400}0D`,
+    },
+    frameNumBadge: {
+        width: 24,
         alignItems: 'center',
     },
-    resetBtnText: {
-        fontFamily: AppFonts.interBold || 'System',
+    frameNumText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors.slate500,
+    },
+    frameMethod: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11.5,
+        color: AppColors.slate200,
+    },
+    frameMethodProject: {
+        color: AppColors.white,
+    },
+    frameLoc: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 10,
+        color: AppColors.slate400,
+        marginTop: 1,
+    },
+    appTag: {
+        backgroundColor: `${AppColors.sky400}33`,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    appTagText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 8.5,
+        color: AppColors.sky400,
+    },
+    footer: {
+        flexDirection: 'row',
+        padding: 14,
+        backgroundColor: AppColors.slate800,
+        borderTopWidth: 1,
+        borderTopColor: AppColors.slate700,
+        gap: 10,
+    },
+    retryBtn: {
+        flex: 1.2,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        backgroundColor: AppColors.purple,
+        height: 44,
+        borderRadius: 10,
+    },
+    retryBtnText: {
+        fontFamily: AppFonts.interBold,
         fontSize: 13,
         color: AppColors.white,
     },
-    closeBtn: {
+    copyBtn: {
         flex: 1,
-        backgroundColor: AppColors.slate100,
-        borderWidth: 1,
-        borderColor: AppColors.slate200,
-        height: 40,
-        borderRadius: 8,
-        justifyContent: 'center',
+        flexDirection: 'row',
         alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        backgroundColor: AppColors.slate100,
+        height: 44,
+        borderRadius: 10,
     },
-    closeBtnText: {
-        fontFamily: AppFonts.interBold || 'System',
+    copyBtnText: {
+        fontFamily: AppFonts.interBold,
         fontSize: 13,
-        color: AppColors.slate600,
+        color: AppColors.slate900,
     },
     inlineContainer: {
-        padding: 8,
-        backgroundColor: AppColors.roseBg,
+        padding: 12,
+        backgroundColor: AppColors.red50,
         borderWidth: 1,
         borderColor: AppColors.errorBorder,
-        borderRadius: 8,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
+        borderRadius: 10,
         margin: 8,
+        gap: 10,
+    },
+    inlineHeader: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: 10,
     },
     inlineTitle: {
-        fontFamily: AppFonts.interBold || 'System',
-        fontSize: 11,
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.red600,
+    },
+    inlineLoc: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10.5,
         color: AppColors.redErrorText,
+        marginTop: 2,
     },
-    inlineResetBtn: {
-        backgroundColor: AppColors.redErrorText,
+    inlineActions: {
+        flexDirection: 'row',
+        gap: 8,
+        justifyContent: 'flex-end',
+    },
+    inlineBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors.red600,
         paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 4,
+        paddingVertical: 5,
+        borderRadius: 6,
     },
-    inlineResetText: {
-        fontFamily: AppFonts.interBold || 'System',
-        fontSize: 10,
+    inlineBtnText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 11,
         color: AppColors.white,
     },
+    inlineCopyBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors.red100,
+        borderWidth: 1,
+        borderColor: AppColors.errorBorder,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+    },
+    inlineCopyBtnText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.redErrorText,
+    },
 });
 export default ErrorBoundary;