react-native-inapp-inspector 1.1.24 → 1.1.26

package/android/build.gradle

@@ -0,0 +1,36 @@
+buildscript {
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.0.2'
+    }
+}
+
+apply plugin: 'com.android.library'
+
+android {
+    compileSdkVersion 34
+
+    defaultConfig {
+        minSdkVersion 21
+        targetSdkVersion 34
+        versionCode 1
+        versionName "1.1.25"
+    }
+
+    lintOptions {
+        abortOnError false
+    }
+}
+
+repositories {
+    google()
+    mavenCentral()
+}
+
+dependencies {
+    //noinspection GradleDynamicVersion
+    implementation 'com.facebook.react:react-native:+'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,3 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.inappinspector">
+</manifest>

package/android/src/main/java/com/inappinspector/NetworkInspectorModule.java

@@ -0,0 +1,114 @@
+package com.inappinspector;
+
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.modules.core.DeviceEventManagerModule;
+
+import java.io.PrintWriter;
+import java.io.StringWriter;
+
+public class NetworkInspectorModule extends ReactContextBaseJavaModule {
+    private static final String MODULE_NAME = "NetworkInspectorModule";
+    private static final String TAG = "NetworkInspector";
+    private final ReactApplicationContext reactContext;
+    private Thread.UncaughtExceptionHandler defaultHandler;
+    private boolean isProtectionEnabled = false;
+
+    public NetworkInspectorModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.reactContext = reactContext;
+        setupNativeCrashProtection();
+    }
+
+    @NonNull
+    @Override
+    public String getName() {
+        return MODULE_NAME;
+    }
+
+    private void setupNativeCrashProtection() {
+        if (isProtectionEnabled) return;
+        isProtectionEnabled = true;
+
+        try {
+            defaultHandler = Thread.getDefaultUncaughtExceptionHandler();
+            Thread.setDefaultUncaughtExceptionHandler(new Thread.UncaughtExceptionHandler() {
+                @Override
+                public void uncaughtException(@NonNull Thread thread, @NonNull Throwable throwable) {
+                    try {
+                        StringWriter sw = new StringWriter();
+                        PrintWriter pw = new PrintWriter(sw);
+                        throwable.printStackTrace(pw);
+                        String stackTrace = sw.toString();
+                        String message = throwable.getMessage() != null ? throwable.getMessage() : throwable.toString();
+
+                        Log.e(TAG, "Intercepted Android Native Crash: " + message, throwable);
+
+                        sendCrashEventToJS(message, stackTrace, thread.getName());
+                    } catch (Exception e) {
+                        Log.e(TAG, "Failed to dispatch native crash event", e);
+                    }
+
+                    // Keep main looper processing to prevent instant process exit
+                    if (Looper.myLooper() != null) {
+                        while (true) {
+                            try {
+                                Looper.loop();
+                            } catch (Throwable inner) {
+                                Log.e(TAG, "Caught inner loop exception", inner);
+                            }
+                        }
+                    }
+                }
+            });
+        } catch (Exception e) {
+            Log.e(TAG, "Error installing uncaught exception handler", e);
+        }
+    }
+
+    private void sendCrashEventToJS(String message, String stackTrace, String threadName) {
+        try {
+            if (reactContext != null && reactContext.hasActiveReactInstance()) {
+                WritableMap params = Arguments.createMap();
+                params.putString("platform", "android");
+                params.putString("message", message);
+                params.putString("stack", stackTrace);
+                params.putString("thread", threadName);
+                params.putDouble("timestamp", System.currentTimeMillis());
+
+                reactContext
+                        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+                        .emit("onNativeCrash", params);
+            }
+        } catch (Exception e) {
+            Log.e(TAG, "Failed to emit onNativeCrash to JS", e);
+        }
+    }
+
+    @ReactMethod
+    public void enableNativeCrashProtection(Promise promise) {
+        setupNativeCrashProtection();
+        promise.resolve(true);
+    }
+
+    @ReactMethod
+    public void addListener(String eventName) {
+        // Required for RN built-in Event Emitter
+    }
+
+    @ReactMethod
+    public void removeListeners(double count) {
+        // Required for RN built-in Event Emitter
+    }
+}

package/android/src/main/java/com/inappinspector/NetworkInspectorPackage.java

@@ -0,0 +1,28 @@
+package com.inappinspector;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class NetworkInspectorPackage implements ReactPackage {
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new NetworkInspectorModule(reactContext));
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -53,6 +53,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
     const userPropCount = event.userProperties
         ? Object.keys(event.userProperties).length
         : 0;
+    const catKey = (0, helpers_1.getEventCategory)(event.name);
+    const tagColors = (0, helpers_1.getCategoryColors)(catKey);
     // Flash animation for newly logged events
     const flashOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(isNew ? 1 : 0)).current;
     (0, react_1.useEffect)(() => {
@@ -65,20 +67,29 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
         }
     }, [isNew]);
     const showGap = msSincePrev != null && msSincePrev >= 2000;
+    const categoryLabel = catKey === 'page_view'
+        ? t('analytics.pageViewCategory')
+        : catKey === 'ecommerce'
+            ? t('analytics.ecommerceCategory')
+            : catKey === 'system'
+                ? t('analytics.systemCategory')
+                : t('analytics.customCategory');
     return (<react_native_1.View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<react_native_1.View style={cardStyles.gapContainer}>
+          <react_native_1.View style={cardStyles.gapLine}/>
           <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {(0, helpers_1.formatGap)(msSincePrev)}
+            +{(0, helpers_1.formatGap)(msSincePrev)}
           </react_native_1.Text>
+          <react_native_1.View style={cardStyles.gapLine}/>
         </react_native_1.View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
       <TouchableScale_1.default onPress={onPress} style={[
             cardStyles.modernCard,
             {
-                backgroundColor: AppColors_1.AppColors.primaryLight,
-                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                borderLeftWidth: 3.5,
+                borderLeftColor: tagColors.text,
             },
         ]}>
         <react_native_1.Animated.View style={[
@@ -92,37 +103,32 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             },
         ]}/>
 
-        {/* Top Row: Event Name & Timestamp */}
+        {/* Top Row: Icon Badge, Event Name, Category Badge & Timestamp */}
         <react_native_1.View style={cardStyles.cardHeader}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 7, flex: 1 }}>
+            {/* Category Icon Badge */}
             <react_native_1.View style={[
-            cardStyles.nameBadge,
-            { backgroundColor: `${color}1A`, borderColor: `${color}30` },
+            cardStyles.iconBadge,
+            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
         ]}>
-              <HighlightText_1.default text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
+              {catKey === 'ecommerce' ? (<NetworkIcons_1.CartIcon color={tagColors.text} size={12}/>) : catKey === 'page_view' ? (<NetworkIcons_1.GlobeIcon color={tagColors.text} size={12}/>) : catKey === 'system' ? (<NetworkIcons_1.BoltIcon color={tagColors.text} size={12}/>) : (<NetworkIcons_1.SparkleIcon color={tagColors.text} size={12}/>)}
             </react_native_1.View>
 
-            {(() => {
-            const catKey = (0, helpers_1.getEventCategory)(event.name);
-            const tagColors = (0, helpers_1.getCategoryColors)(catKey);
-            const categoryLabel = catKey === 'page_view'
-                ? t('analytics.pageViewCategory')
-                : catKey === 'ecommerce'
-                    ? t('analytics.ecommerceCategory')
-                    : catKey === 'system'
-                        ? t('analytics.systemCategory')
-                        : t('analytics.customCategory');
-            return (<react_native_1.View style={[
-                    cardStyles.categoryBadge,
-                    { backgroundColor: tagColors.bg, borderColor: tagColors.border },
-                ]}>
-                  <react_native_1.Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
-                    {categoryLabel}
-                  </react_native_1.Text>
-                </react_native_1.View>);
-        })()}
+            {/* Event Name */}
+            <HighlightText_1.default text={event.name} search={searchStr} style={[cardStyles.eventName, { color: AppColors_1.AppColors.primaryBlack }]} highlightStyle={cardStyles.highlight} numberOfLines={1}/>
+
+            {/* Category Pill Tag */}
+            <react_native_1.View style={[
+            cardStyles.categoryBadge,
+            { backgroundColor: tagColors.bg, borderColor: tagColors.border },
+        ]}>
+              <react_native_1.Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
+                {categoryLabel}
+              </react_native_1.Text>
+            </react_native_1.View>
 
-            {event.count !== undefined ? (<react_native_1.View style={[
+            {/* Duplicate Multiplier */}
+            {event.count !== undefined && event.count > 0 ? (<react_native_1.View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
                     backgroundColor: AppColors_1.AppColors.grayBackground,
@@ -134,16 +140,20 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 event.count === 1 && { color: AppColors_1.AppColors.grayTextStrong },
             ]}>
                   {event.count}×
-                  {event.count > 1 ? ` ${t('analytics.duplicate')}` : ''}
                 </react_native_1.Text>
               </react_native_1.View>) : null}
           </react_native_1.View>
-          <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {(0, helpers_1.formatTime)(event.timestamp)}
-          </react_native_1.Text>
+
+          {/* Timestamp */}
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 3 }}>
+            <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
+            <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
+              {(0, helpers_1.formatTime)(event.timestamp)}
+            </react_native_1.Text>
+          </react_native_1.View>
         </react_native_1.View>
 
-        {/* Bottom Row: Metadata Chips & Sparkline */}
+        {/* Bottom Row: Metadata Chips (Screen, Params, Value) */}
         <react_native_1.View style={cardStyles.cardBody}>
           <react_native_1.View style={cardStyles.chipsRow}>
             {(() => {
@@ -160,12 +170,12 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             return (<react_native_1.View style={[
                     cardStyles.chip,
                     {
-                        backgroundColor: AppColors_1.AppColors.grayBackground,
-                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                        backgroundColor: `${AppColors_1.AppColors.amber500}12`,
+                        borderColor: `${AppColors_1.AppColors.amber500}2E`,
                     },
                 ]}>
-                  <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
-                  <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
+                  <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: AppColors_1.AppColors.amber500 }]}/>
+                  <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.amber700, fontFamily: AppFonts_1.AppFonts.interBold }]} numberOfLines={1}>
                     {screenNameStr}
                   </react_native_1.Text>
                 </react_native_1.View>);
@@ -186,11 +196,11 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             {userPropCount > 0 && (<react_native_1.View style={[
                 cardStyles.chip,
                 {
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    backgroundColor: `${AppColors_1.AppColors.brandPurple}10`,
+                    borderColor: `${AppColors_1.AppColors.brandPurple}25`,
                 },
             ]}>
-                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
+                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.brandPurple, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                   ★ {userPropCount} {t('analytics.props')}
                 </react_native_1.Text>
               </react_native_1.View>)}
@@ -205,7 +215,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                             borderColor: AppColors_1.AppColors.amberBorder,
                         },
                     ]}>
-                    <NetworkIcons_1.CartIcon color={AppColors_1.AppColors.amber700} size={12}/>
+                    <NetworkIcons_1.CartIcon color={AppColors_1.AppColors.amber700} size={11}/>
                     <react_native_1.Text style={[
                         cardStyles.chipText,
                         {
@@ -227,18 +237,18 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             const val = event.params?.value ?? event.params?.price;
             const currency = event.params?.currency ?? '';
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
-            if (isPrimitive) {
-                const currencyStr = typeof currency === 'string' || typeof currency === 'number'
-                    ? String(currency)
+            if (val != null && isPrimitive && String(val).trim() !== '') {
+                const currencyStr = typeof currency === 'string' && currency.trim() !== ''
+                    ? currency.toUpperCase()
                     : '';
                 return (<react_native_1.View style={[
                         cardStyles.chip,
                         {
-                            backgroundColor: AppColors_1.AppColors.emeraldBg,
-                            borderColor: AppColors_1.AppColors.emeraldBorder,
+                            backgroundColor: `${AppColors_1.AppColors.emerald500}15`,
+                            borderColor: `${AppColors_1.AppColors.emerald500}35`,
                         },
                     ]}>
-                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={12}/>
+                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={11}/>
                     <react_native_1.Text style={[
                         cardStyles.chipText,
                         {
@@ -260,52 +270,63 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
 // ─── Styles ───────────────────────────────────────────────────────────────────
 const cardStyles = react_native_1.StyleSheet.create({
     container: {
-        paddingHorizontal: 12,
+        paddingHorizontal: 10,
         paddingVertical: 3,
     },
     gapContainer: {
+        flexDirection: 'row',
         alignItems: 'center',
-        marginVertical: 4,
+        justifyContent: 'center',
+        marginVertical: 6,
+        gap: 8,
+    },
+    gapLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: `${AppColors_1.AppColors.dividerColor}`,
     },
     gapText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
         color: AppColors_1.AppColors.grayTextWeak,
         letterSpacing: 0.5,
     },
     modernCard: {
         backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 8,
+        borderRadius: 10,
         borderWidth: 1,
         borderColor: AppColors_1.AppColors.dividerColor,
-        padding: 8,
+        padding: 10,
         shadowColor: AppColors_1.AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
         elevation: 1,
         overflow: 'hidden',
+        gap: 8,
     },
     cardHeader: {
         flexDirection: 'row',
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginBottom: 6,
     },
-    nameBadge: {
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
+    iconBadge: {
+        width: 22,
+        height: 22,
         borderRadius: 6,
         borderWidth: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     eventName: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12,
-        letterSpacing: 0.2,
+        fontSize: 13,
+        letterSpacing: 0.1,
+        color: AppColors_1.AppColors.primaryBlack,
     },
     timestamp: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 11,
+        fontSize: 10,
         color: AppColors_1.AppColors.grayTextWeak,
     },
     highlight: {
@@ -315,25 +336,24 @@ const cardStyles = react_native_1.StyleSheet.create({
     },
     cardBody: {
         flexDirection: 'row',
-        alignItems: 'flex-end',
+        alignItems: 'center',
         justifyContent: 'space-between',
     },
     chipsRow: {
         flexDirection: 'row',
         alignItems: 'center',
         flexWrap: 'wrap',
-        gap: 8,
+        gap: 6,
         flex: 1,
     },
     chip: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        borderRadius: 4,
+        paddingHorizontal: 6,
+        paddingVertical: 2.5,
+        borderRadius: 5,
         borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        gap: 3.5,
     },
     chipText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
@@ -341,17 +361,16 @@ const cardStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayText,
     },
     screenDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        marginRight: 4,
+        width: 5,
+        height: 5,
+        borderRadius: 2.5,
     },
     duplicateBadge: {
         backgroundColor: AppColors_1.AppColors.roseBg,
         borderColor: AppColors_1.AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
-        paddingVertical: 2,
+        paddingVertical: 1.5,
         borderRadius: 4,
     },
     duplicateText: {
@@ -359,31 +378,18 @@ const cardStyles = react_native_1.StyleSheet.create({
         fontSize: 9,
         color: AppColors_1.AppColors.rose600,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
     },
     categoryBadge: {
         borderWidth: 1,
         paddingHorizontal: 5,
-        paddingVertical: 2,
+        paddingVertical: 1.5,
         borderRadius: 4,
     },
     categoryText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9,
+        fontSize: 8.5,
         textTransform: 'uppercase',
-        letterSpacing: 0.5,
-    },
-    miniGraphWrapper: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        height: 18,
-        gap: 2,
-        marginLeft: 12,
-    },
-    miniGraphBar: {
-        width: 4,
-        borderRadius: 2,
-        opacity: 0.7,
+        letterSpacing: 0.4,
     },
 });
 exports.default = AnalyticsEventCard;

package/dist/commonjs/components/ConsoleLogCard.js

@@ -23,36 +23,57 @@ const getLogMessageWithBadges = (message, searchStr, textStyle, highlightStyle,
         const fullPrefix = match[1];
         const remainingText = message.substring(fullPrefix.length);
         const tags = fullPrefix.match(/\[[^\]]+\]/g) || [];
-        const getTagColor = (tag) => {
-            const cleanTag = tag
-                .replace(/[\[\]]/g, '')
-                .trim()
-                .toUpperCase();
-            if (cleanTag === 'API')
-                return AppColors_1.AppColors.sky600;
-            if (cleanTag === 'TEST')
-                return AppColors_1.AppColors.green600;
-            if (cleanTag === 'APP')
-                return AppColors_1.AppColors.indigo600;
-            if (cleanTag === 'WARN')
-                return AppColors_1.AppColors.darkOrange || AppColors_1.AppColors.lightOrange;
-            if (cleanTag === 'ERROR')
-                return AppColors_1.AppColors.errorColor;
-            return AppColors_1.AppColors.slate600;
+        const getTagDecorator = (tag) => {
+            const clean = tag.replace(/[\[\]]/g, '').trim().toUpperCase();
+            if (clean === 'AXIOS') {
+                return { color: '#059669', icon: '⚡', label: 'AXIOS' };
+            }
+            if (clean === 'API' || clean === 'FETCH' || clean === 'HTTP' || clean === 'NETWORK') {
+                return { color: '#0284C7', icon: '🌐', label: clean };
+            }
+            if (clean === 'SAMPLE' || clean === 'BATCH') {
+                return { color: '#4F46E5', icon: '🎲', label: clean };
+            }
+            if (clean === 'REDUX' || clean === 'STORE' || clean === 'STATE') {
+                return { color: '#7C3AED', icon: '⚛️', label: clean };
+            }
+            if (clean === 'ANALYTICS' || clean === 'FIREBASE' || clean === 'GA4' || clean === 'GA') {
+                return { color: '#0D9488', icon: '📊', label: clean };
+            }
+            if (clean === 'AUTH' || clean === 'TOKEN' || clean === 'SESSION') {
+                return { color: '#D97706', icon: '🔑', label: clean };
+            }
+            if (clean === 'APP') {
+                return { color: '#4F46E5', icon: '📱', label: 'APP' };
+            }
+            if (clean === 'TEST') {
+                return { color: '#10B981', icon: '🧪', label: 'TEST' };
+            }
+            if (clean === 'WARN' || clean === 'WARNING') {
+                return { color: '#D97706', icon: '⚠️', label: 'WARN' };
+            }
+            if (clean === 'ERROR' || clean === 'CRASH' || clean === 'BUG') {
+                return { color: '#DC2626', icon: '💥', label: 'ERROR' };
+            }
+            if (clean === 'PERF' || clean === 'RENDER') {
+                return { color: '#8B5CF6', icon: '⚡', label: clean };
+            }
+            return { color: AppColors_1.AppColors.slate600, icon: '🏷️', label: clean };
         };
         return (<react_native_1.View style={{ flexDirection: 'column', gap: 6 }}>
-        <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 4 }}>
+        <react_native_1.View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 5 }}>
           {tags.map((tag, i) => {
-                const color = getTagColor(tag);
+                const dec = getTagDecorator(tag);
                 return (<react_native_1.View key={i} style={[
                         styles.prefixTag,
                         {
-                            backgroundColor: `${color}15`,
-                            borderColor: `${color}35`,
+                            backgroundColor: `${dec.color}15`,
+                            borderColor: `${dec.color}35`,
                         },
                     ]}>
-                <react_native_1.Text style={[styles.prefixTagText, { color }]}>
-                  {tag.replace(/[\[\]]/g, '')}
+                <react_native_1.Text style={{ fontSize: 9.5 }}>{dec.icon}</react_native_1.Text>
+                <react_native_1.Text style={[styles.prefixTagText, { color: dec.color }]}>
+                  {dec.label}
                 </react_native_1.Text>
               </react_native_1.View>);
             })}
@@ -416,9 +437,12 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 9,
     },
     prefixTag: {
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-        borderRadius: 4,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3.5,
+        paddingHorizontal: 6.5,
+        paddingVertical: 2,
+        borderRadius: 5,
         borderWidth: 1,
     },
     prefixTagText: {

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

@@ -6,6 +6,6 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private handleReset;
     private handleCopyTrace;
-    render(): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>> | React.JSX.Element;
+    render(): React.ReactNode;
 }
 export default ErrorBoundary;