Remove console.error patch

Summary:
## Overview
This is the final boss of the new owner stacks feature. With owner stacks, we don't need to parse message strings to find the component stack for logbox. Instead, we can access the component stack directly with `captureOwnerStack`.

This means we don't need to install the LogBox console.error patch and can greatly simplify the process of handling errors and make it more reliable.

To do this, we rely only on adding LogBox to the ExceptionManager:
- `reactConsoleErrorHandler` -> `LogBox.addConsoleLog`
- `reportException` -> `LogBox.addException`

[General][Fixed] - Remove LogBox patch, de-duplicating errors

## Benefits
As a side effect, this removes a lot of duplicate errors. For example, currently if a component throws, you get 2 errors:

 {F1974436906} 

After this, there's just the one you expect:

 {F1974436908} 

## Followups
After this lands and doesn't need reverted for some reason, we can delete a ton of code from logbox for finding and detecting stacks from errors.

Differential Revision: D68380668

Author: rickhanlonii

packages/react-native/Libraries/Core/ExceptionsManager.js

@@ -12,6 +12,7 @@
 
 import type {ExtendedError} from './ExtendedError';
 import type {ExceptionData} from './NativeExceptionsManager';
+import {captureOwnerStack} from 'react';
 
 class SyntheticError extends Error {
   name: string = '';
@@ -112,11 +113,16 @@ function reportException(
   }
 
   if (__DEV__) {
-    const LogBox = require('../LogBox/LogBox').default;
-    LogBox.addException({
-      ...data,
-      isComponentError: !!e.isComponentError,
-    });
+    // reportToConsole is only true when coming from handleException,
+    // and the error has not yet been logged. If it's false, then it was
+    // reported to LogBox in reactConsoleErrorHandler, and we don't need to.
+    if (reportToConsole) {
+      const LogBox = require('../LogBox/LogBox').default;
+      LogBox.addException({
+        ...data,
+        isComponentError: !!e.isComponentError,
+      });
+    }
   } else if (isFatal || e.type !== 'warn') {
     const NativeExceptionsManager =
       require('./NativeExceptionsManager').default;
@@ -243,6 +249,13 @@ function reactConsoleErrorHandler(...args) {
     !global.RN$handleException ||
     !global.RN$handleException(error, isFatal, reportToConsole)
   ) {
+    if (__DEV__) {
+      // If we're not reporting to the console in reportException,
+      // we need to report it as a console.error here.
+      if (!reportToConsole) {
+        require('../LogBox/LogBox').default.addConsoleLog('error', ...args);
+      }
+    }
     reportException(
       /* $FlowFixMe[class-object-subtyping] added when improving typing for this
        * parameters */

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

@@ -13,7 +13,6 @@ import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
-import {hasComponentStack} from './Data/parseLogBoxLog';
 import * as React from 'react';
 
 export type {LogData, ExtendedExceptionData, IgnorePattern};
@@ -28,6 +27,7 @@ interface ILogBox {
   ignoreAllLogs(?boolean): void;
   clearAllLogs(): void;
   addLog(log: LogData): void;
+  addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>): void;
   addException(error: ExtendedExceptionData): void;
 }
 
@@ -36,11 +36,12 @@ interface ILogBox {
  */
 if (__DEV__) {
   const LogBoxData = require('./Data/LogBoxData');
-  const {parseLogBoxLog, parseInterpolation} = require('./Data/parseLogBoxLog');
+  const {
+    parseLogBoxLog,
+    parseComponentStack,
+  } = require('./Data/parseLogBoxLog');
 
-  let originalConsoleError;
   let originalConsoleWarn;
-  let consoleErrorImpl;
   let consoleWarnImpl: (...args: Array<mixed>) => void;
 
   let isLogBoxInstalled: boolean = false;
@@ -70,22 +71,20 @@ if (__DEV__) {
       // IMPORTANT: we only overwrite `console.error` and `console.warn` once.
       // When we uninstall we keep the same reference and only change its
       // internal implementation
-      const isFirstInstall = originalConsoleError == null;
+      const isFirstInstall = originalConsoleWarn == null;
       if (isFirstInstall) {
-        originalConsoleError = console.error.bind(console);
+        // We only patch warning for legacy reasons.
+        // This will be removed in the future, once warnings
+        // are fully moved to fusebox. Error handling is done
+        // via the ExceptionManager.
         originalConsoleWarn = console.warn.bind(console);
 
-        // $FlowExpectedError[cannot-write]
-        console.error = (...args) => {
-          consoleErrorImpl(...args);
-        };
         // $FlowExpectedError[cannot-write]
         console.warn = (...args) => {
           consoleWarnImpl(...args);
         };
       }
 
-      consoleErrorImpl = registerError;
       consoleWarnImpl = registerWarning;
 
       if (Platform.isTesting) {
@@ -108,7 +107,6 @@ if (__DEV__) {
       // decorated again after installing LogBox. E.g.:
       // Before uninstalling: original > LogBox > OtherErrorHandler
       // After uninstalling:  original > LogBox (noop) > OtherErrorHandler
-      consoleErrorImpl = originalConsoleError;
       consoleWarnImpl = originalConsoleWarn;
     },
 
@@ -134,6 +132,56 @@ if (__DEV__) {
       }
     },
 
+    addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>) {
+      let filteredLevel: 'warn' | 'error' | 'fatal' = level;
+      try {
+        let format = args[0];
+        if (typeof format === 'string') {
+          const filterResult =
+            require('../LogBox/Data/LogBoxData').checkWarningFilter(format);
+          if (filterResult.monitorEvent !== 'warning_unhandled') {
+            if (filterResult.suppressCompletely) {
+              return;
+            }
+
+            if (filterResult.suppressDialog_LEGACY === true) {
+              filteredLevel = 'warn';
+            } else if (filterResult.forceDialogImmediately === true) {
+              filteredLevel = 'fatal'; // Do not downgrade. These are real bugs with same severity as throws.
+            }
+          }
+        }
+
+        const result = parseLogBoxLog(args);
+        const category = result.category;
+        const message = result.message;
+        let componentStackType = result.componentStackType;
+        let componentStack = result.componentStack;
+        if (
+          (!componentStack || componentStack.length === 0) &&
+          // $FlowExpectedError[prop-missing]
+          React.captureOwnerStack
+        ) {
+          const ownerStack = React.captureOwnerStack();
+          const parsedComponentStack = parseComponentStack(ownerStack);
+          componentStack = parsedComponentStack.stack;
+          componentStackType = parsedComponentStack.type;
+        }
+
+        if (!LogBoxData.isMessageIgnored(message.content)) {
+          LogBoxData.addLog({
+            level: filteredLevel,
+            category,
+            message,
+            componentStack,
+            componentStackType,
+          });
+        }
+      } catch (err) {
+        LogBoxData.reportLogBoxError(err);
+      }
+    },
+
     addException,
   };
 
@@ -149,14 +197,9 @@ if (__DEV__) {
     return typeof args[0] === 'string' && args[0].startsWith('(ADVICE)');
   };
 
-  const isWarningModuleWarning = (...args: Array<mixed>) => {
-    return typeof args[0] === 'string' && args[0].startsWith('Warning: ');
-  };
-
   const registerWarning = (...args: Array<mixed>): void => {
     // Let warnings within LogBox itself fall through.
     if (LogBoxData.isLogBoxErrorMessage(String(args[0]))) {
-      originalConsoleError(...args);
       return;
     } else {
       // Be sure to pass LogBox warnings through.
@@ -182,89 +225,6 @@ if (__DEV__) {
       LogBoxData.reportLogBoxError(err);
     }
   };
-
-  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
-   * LTI update could not be added via codemod */
-  const registerError = (...args): void => {
-    // Let errors within LogBox itself fall through.
-    if (LogBoxData.isLogBoxErrorMessage(args[0])) {
-      originalConsoleError(...args);
-      return;
-    }
-
-    try {
-      let stack;
-      // $FlowFixMe[prop-missing] Not added to flow types yet.
-      if (!hasComponentStack(args) && React.captureOwnerStack != null) {
-        stack = React.captureOwnerStack();
-        if (!hasComponentStack(args)) {
-          console.log('hit');
-          if (stack !== '') {
-            args[0] = args[0] += '%s';
-            args.push(stack);
-          }
-        }
-      }
-      if (!isWarningModuleWarning(...args) && !hasComponentStack(args)) {
-        // Only show LogBox for the 'warning' module, or React errors with
-        // component stacks, otherwise pass the error through.
-        //
-        // By passing through, this will get picked up by the React console override,
-        // potentially adding the component stack. React then passes it back to the
-        // React Native ExceptionsManager, which reports it to LogBox as an error.
-        //
-        // Ideally, we refactor all RN error handling so that LogBox patching
-        // errors is not necessary, and they are reported the same as a framework.
-        // The blocker to this is that the ExceptionManager console.error override
-        // strigifys all of the args before passing it through to LogBox, which
-        // would lose all of the interpolation information.
-        //
-        // The 'warning' module needs to be handled here because React internally calls
-        // `console.error('Warning: ')` with the component stack already included.
-        originalConsoleError(...args);
-        return;
-      }
-
-      let format = args[0].replace('Warning: ', '');
-      const filterResult = LogBoxData.checkWarningFilter(format);
-      let level = 'error';
-      if (filterResult.monitorEvent !== 'warning_unhandled') {
-        if (filterResult.suppressCompletely) {
-          return;
-        }
-
-        if (filterResult.suppressDialog_LEGACY === true) {
-          level = 'warn';
-        } else if (filterResult.forceDialogImmediately === true) {
-          level = 'fatal'; // Do not downgrade. These are real bugs with same severity as throws.
-        }
-      }
-
-      // Unfortunately, we need to add the Warning: prefix back for downstream dependencies.
-      // Downstream, we check for this prefix to know that LogBox already handled it, so
-      // it doesn't get reported back to LogBox. It's an absolute mess.
-      args[0] = `Warning: ${filterResult.finalFormat}`;
-      const {category, message, componentStack, componentStackType} =
-        parseLogBoxLog(args);
-
-      // Interpolate the message so they are formatted for adb and other CLIs.
-      // This is different than the message.content above because it includes component stacks.
-      const interpolated = parseInterpolation(args);
-      originalConsoleError(interpolated.message.content);
-
-      if (!LogBoxData.isMessageIgnored(message.content)) {
-        LogBoxData.addLog({
-          level,
-          category,
-          message,
-          componentStack,
-          componentStackType,
-        });
-      }
-    } catch (err) {
-      LogBoxData.reportLogBoxError(err);
-    }
-  };
 } else {
   LogBox = {
     install(): void {
@@ -295,6 +255,10 @@ if (__DEV__) {
       // Do nothing.
     },
 
+    addConsoleLog(level: 'warn' | 'error', ...args: Array<mixed>): void {
+      // Do nothing.
+    },
+
     addException(error: ExtendedExceptionData): void {
       // Do nothing.
     },