[LogBox] Parse bundling errors from Metro Dev Server and avoid symbolicating them

packages/react-native/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -290,7 +290,68 @@ export function parseLogBoxException(
   const message =
     error.originalMessage != null ? error.originalMessage : 'Unknown';
 
-  const metroInternalError = message.match(RE_METRO_ERROR_FORMAT);
+  const bundlingError = parseBundlingErrorFromMessage(message);
+  if (bundlingError) {
+    return bundlingError;
+  }
+
+  const componentStack = error.componentStack;
+  if (error.isFatal || error.isComponentError) {
+    if (componentStack != null) {
+      const {type, stack} = parseComponentStack(componentStack);
+      return {
+        level: 'fatal',
+        stack: error.stack,
+        isComponentError: error.isComponentError,
+        componentStackType: type,
+        componentStack: stack,
+        extraData: error.extraData,
+        ...parseInterpolation([message]),
+      };
+    } else {
+      return {
+        level: 'fatal',
+        stack: error.stack,
+        isComponentError: error.isComponentError,
+        componentStackType: 'legacy',
+        componentStack: [],
+        extraData: error.extraData,
+        ...parseInterpolation([message]),
+      };
+    }
+  }
+
+  if (componentStack != null) {
+    // It is possible that console errors have a componentStack.
+    const {type, stack} = parseComponentStack(componentStack);
+    return {
+      level: 'error',
+      stack: error.stack,
+      isComponentError: error.isComponentError,
+      componentStackType: type,
+      componentStack: stack,
+      extraData: error.extraData,
+      ...parseInterpolation([message]),
+    };
+  }
+
+  // Most `console.error` calls won't have a componentStack. We parse them like
+  // regular logs which have the component stack buried in the message.
+  return {
+    level: 'error',
+    stack: error.stack,
+    isComponentError: error.isComponentError,
+    extraData: error.extraData,
+    ...parseLogBoxLog([message]),
+  };
+}
+
+export function parseBundlingErrorFromMessage(message?: string, extraData?: Object): LogBoxLogData | null {
+  if (!message || typeof message !== 'string') {
+    return null;
+  }
+
+    const metroInternalError = message.match(RE_METRO_ERROR_FORMAT);
   if (metroInternalError) {
     const [content, fileName, row, column, codeFrame] =
       metroInternalError.slice(1);
@@ -315,7 +376,7 @@ export function parseLogBoxException(
         substitutions: [],
       },
       category: `${fileName}-${row}-${column}`,
-      extraData: error.extraData,
+      extraData,
     };
   }
 
@@ -344,7 +405,7 @@ export function parseLogBoxException(
         substitutions: [],
       },
       category: `${fileName}-${row}-${column}`,
-      extraData: error.extraData,
+      extraData,
     };
   }
 
@@ -372,7 +433,7 @@ export function parseLogBoxException(
           substitutions: [],
         },
         category: `${fileName}-${1}-${1}`,
-        extraData: error.extraData,
+        extraData,
       };
     }
   }
@@ -389,59 +450,11 @@ export function parseLogBoxException(
         substitutions: [],
       },
       category: message,
-      extraData: error.extraData,
-    };
-  }
-
-  const componentStack = error.componentStack;
-  if (error.isFatal || error.isComponentError) {
-    if (componentStack != null) {
-      const {type, stack} = parseComponentStack(componentStack);
-      return {
-        level: 'fatal',
-        stack: error.stack,
-        isComponentError: error.isComponentError,
-        componentStackType: type,
-        componentStack: stack,
-        extraData: error.extraData,
-        ...parseInterpolation([message]),
-      };
-    } else {
-      return {
-        level: 'fatal',
-        stack: error.stack,
-        isComponentError: error.isComponentError,
-        componentStackType: 'legacy',
-        componentStack: [],
-        extraData: error.extraData,
-        ...parseInterpolation([message]),
-      };
-    }
-  }
-
-  if (componentStack != null) {
-    // It is possible that console errors have a componentStack.
-    const {type, stack} = parseComponentStack(componentStack);
-    return {
-      level: 'error',
-      stack: error.stack,
-      isComponentError: error.isComponentError,
-      componentStackType: type,
-      componentStack: stack,
-      extraData: error.extraData,
-      ...parseInterpolation([message]),
+      extraData,
     };
   }
 
-  // Most `console.error` calls won't have a componentStack. We parse them like
-  // regular logs which have the component stack buried in the message.
-  return {
-    level: 'error',
-    stack: error.stack,
-    isComponentError: error.isComponentError,
-    extraData: error.extraData,
-    ...parseLogBoxLog([message]),
-  };
+  return null;
 }
 
 export function withoutANSIColorStyles(message: mixed): mixed {

packages/react-native/Libraries/LogBox/LogBox.js

@@ -39,6 +39,7 @@ if (__DEV__) {
   const {
     parseLogBoxLog,
     parseComponentStack,
+    parseBundlingErrorFromMessage,
   } = require('./Data/parseLogBoxLog');
 
   let originalConsoleWarn;
@@ -166,6 +167,20 @@ if (__DEV__) {
             }
           }
 
+          // Ensure bundling errors are parsed before anything else.
+          // This ensures bundling errors are not symbolicated
+          // (symbolication would fail since the bundle & source map won't be created)
+          const bundlingError = parseBundlingErrorFromMessage(
+            // If args[0] is a string use it directly, otherwise try to extract message property
+            typeof args[0] === 'string'
+              ? args[0]
+              : typeof args[0]?.message === 'string'
+                ? args[0].message
+                : undefined)
+          if (bundlingError) {
+            return LogBoxData.addLog(bundlingError);
+          }
+
           const result = parseLogBoxLog(args);
           const category = result.category;
           const message = result.message;