@office-iss/react-native-win32 0.0.0-canary.256 → 0.0.0-canary.258

package/Libraries/LogBox/Data/LogBoxData.js

@@ -8,30 +8,32 @@
  * @format
  */
 
-('use strict');
-
 import type {ExtendedError} from '../../Core/ExtendedError';
 import type {LogLevel} from './LogBoxLog';
 import type {
   Category,
   ComponentStack,
+  ComponentStackType,
   ExtendedExceptionData,
   Message,
 } from './parseLogBoxLog';
 
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
+import NativeDevSettings from '../../NativeModules/specs/NativeDevSettings';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
 import LogBoxLog from './LogBoxLog';
 import {parseLogBoxException} from './parseLogBoxLog';
 import * as React from 'react';
+
 export type LogBoxLogs = Set<LogBoxLog>;
-export type LogData = $ReadOnly<{|
+export type LogData = $ReadOnly<{
   level: LogLevel,
   message: Message,
   category: Category,
   componentStack: ComponentStack,
+  componentStackType: ComponentStackType | null,
   stack?: string,
-|}>;
+}>;
 
 export type Observer = (
   $ReadOnly<{|
@@ -72,6 +74,7 @@ let logs: LogBoxLogs = new Set();
 let updateTimeout: $FlowFixMe | null = null;
 let _isDisabled = false;
 let _selectedIndex = -1;
+let hasShownFuseboxWarningsMigrationMessage = false;
 
 let warningFilter: WarningFilter = function (format) {
   return {
@@ -193,6 +196,11 @@ function appendNewLog(newLog: LogBoxLog) {
 }
 
 export function addLog(log: LogData): void {
+  if (log.level === 'warn' && global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
+    // Under Fusebox, don't report warnings to LogBox.
+    showFuseboxWarningsMigrationMessageOnce();
+    return;
+  }
   const errorForStackTrace = new Error();
 
   // Parsing logs are expensive so we schedule this
@@ -209,6 +217,7 @@ export function addLog(log: LogData): void {
           stack,
           category: log.category,
           componentStack: log.componentStack,
+          componentStackType: log.componentStackType || 'legacy',
         }),
       );
     } catch (error) {
@@ -453,3 +462,29 @@ export function withSubscription(
 
   return LogBoxStateSubscription;
 }
+
+function showFuseboxWarningsMigrationMessageOnce() {
+  if (hasShownFuseboxWarningsMigrationMessage) {
+    return;
+  }
+  hasShownFuseboxWarningsMigrationMessage = true;
+  appendNewLog(
+    new LogBoxLog({
+      level: 'warn',
+      message: {
+        content: 'Open debugger to view warnings.',
+        substitutions: [],
+      },
+      isComponentError: false,
+      stack: [],
+      category: 'fusebox-warnings-migration',
+      componentStack: [],
+      onNotificationPress: () => {
+        if (NativeDevSettings.openDebugger) {
+          NativeDevSettings.openDebugger();
+        }
+        clearWarnings();
+      },
+    }),
+  );
+}

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -55,7 +55,7 @@ function convertStackToComponentStack(stack: Stack): ComponentStack {
   return componentStack;
 }
 
-export type LogBoxLogData = $ReadOnly<{|
+export type LogBoxLogData = $ReadOnly<{
   level: LogLevel,
   type?: ?string,
   message: Message,
@@ -66,7 +66,8 @@ export type LogBoxLogData = $ReadOnly<{|
   codeFrame?: ?CodeFrame,
   isComponentError: boolean,
   extraData?: mixed,
-|}>;
+  onNotificationPress?: ?() => void,
+}>;
 
 class LogBoxLog {
   message: Message;
@@ -102,6 +103,7 @@ class LogBoxLog {
     componentStack: null,
     status: 'NONE',
   };
+  onNotificationPress: ?() => void;
 
   constructor(data: LogBoxLogData) {
     this.level = data.level;
@@ -115,6 +117,7 @@ class LogBoxLog {
     this.isComponentError = data.isComponentError;
     this.extraData = data.extraData;
     this.count = 1;
+    this.onNotificationPress = data.onNotificationPress;
   }
 
   incrementCount(): void {

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -93,6 +93,15 @@ const RE_BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
   'm',
 );
 
+export function hasComponentStack(args: $ReadOnlyArray<mixed>): boolean {
+  for (const arg of args) {
+    if (typeof arg === 'string' && isComponentStack(arg)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 export type ExtendedExceptionData = ExceptionData & {
   isComponentError: boolean,
   ...
@@ -435,13 +444,25 @@ export function parseLogBoxException(
   };
 }
 
+export function withoutANSIColorStyles(message: mixed): mixed {
+  if (typeof message !== 'string') {
+    return message;
+  }
+
+  return message.replace(
+    // eslint-disable-next-line no-control-regex
+    /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,
+    '',
+  );
+}
+
 export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,
   category: Category,
   message: Message,
 |} {
-  const message = args[0];
+  const message = withoutANSIColorStyles(args[0]);
   let argsWithoutComponentStack: Array<mixed> = [];
   let componentStack: ComponentStack = [];
   let componentStackType = 'legacy';

package/Libraries/LogBox/LogBox.js

@@ -13,6 +13,7 @@ import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
+import {hasComponentStack} from './Data/parseLogBoxLog';
 
 export type {LogData, ExtendedExceptionData, IgnorePattern};
 
@@ -150,7 +151,8 @@ if (__DEV__) {
 
     try {
       if (!isRCTLogAdviceWarning(...args)) {
-        const {category, message, componentStack} = parseLogBoxLog(args);
+        const {category, message, componentStack, componentStackType} =
+          parseLogBoxLog(args);
 
         if (!LogBoxData.isMessageIgnored(message.content)) {
           LogBoxData.addLog({
@@ -158,6 +160,7 @@ if (__DEV__) {
             category,
             message,
             componentStack,
+            componentStackType,
           });
         }
       }
@@ -176,12 +179,20 @@ if (__DEV__) {
     }
 
     try {
-      if (!isWarningModuleWarning(...args)) {
-        // Only show LogBox for the 'warning' module, otherwise pass through.
+      if (!isWarningModuleWarning(...args) && !hasComponentStack(args)) {
+        // Only show LogBox for the 'warning' module, or React errors with
+        // component stacks, otherwise pass the error through.u
+        //
         // 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);
@@ -190,20 +201,25 @@ if (__DEV__) {
 
       const format = args[0].replace('Warning: ', '');
       const filterResult = LogBoxData.checkWarningFilter(format);
-      if (filterResult.suppressCompletely) {
-        return;
-      }
-
       let level = 'error';
-      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.
+      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} = parseLogBoxLog(args);
+      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.
@@ -216,6 +232,7 @@ if (__DEV__) {
           category,
           message,
           componentStack,
+          componentStackType,
         });
       }
     } catch (err) {

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -36,6 +36,10 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
   };
 
   function openLog(log: LogBoxLog) {
+    if (log.onNotificationPress) {
+      log.onNotificationPress();
+      return;
+    }
     let index = logs.length - 1;
 
     // Stop at zero because if we don't find any log, we'll open the first log.

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -9,40 +9,37 @@
  */
 
 import Keyboard from '../../Components/Keyboard/Keyboard';
-import ScrollView from '../../Components/ScrollView/ScrollView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxData from '../Data/LogBoxData';
 import LogBoxLog, {type LogLevel} from '../Data/LogBoxLog';
-import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
+import LogBoxInspectorBody from './LogBoxInspectorBody';
 import LogBoxInspectorFooter from './LogBoxInspectorFooter';
 import LogBoxInspectorHeader from './LogBoxInspectorHeader';
-import LogBoxInspectorMessageHeader from './LogBoxInspectorMessageHeader';
-import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
-import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
+import {useEffect} from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   onDismiss: () => void,
   onChangeSelectedIndex: (index: number) => void,
   onMinimize: () => void,
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedIndex: number,
   fatalType?: ?LogLevel,
-|}>;
+}>;
 
-function LogBoxInspector(props: Props): React.Node {
+export default function LogBoxInspector(props: Props): React.Node {
   const {logs, selectedIndex} = props;
   let log = logs[selectedIndex];
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (log) {
       LogBoxData.symbolicateLogNow(log);
     }
   }, [log]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // Optimistically symbolicate the last and next logs.
     if (logs.length > 1) {
       const selected = selectedIndex;
@@ -54,7 +51,7 @@ function LogBoxInspector(props: Props): React.Node {
     }
   }, [logs, selectedIndex]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     Keyboard.dismiss();
   }, []);
 
@@ -84,68 +81,9 @@ function LogBoxInspector(props: Props): React.Node {
   );
 }
 
-const headerTitleMap = {
-  warn: 'Console Warning',
-  error: 'Console Error',
-  fatal: 'Uncaught Error',
-  syntax: 'Syntax Error',
-  component: 'Render Error',
-};
-
-function LogBoxInspectorBody(props: {log: LogBoxLog, onRetry: () => void}) {
-  const [collapsed, setCollapsed] = React.useState(true);
-
-  React.useEffect(() => {
-    setCollapsed(true);
-  }, [props.log]);
-
-  const headerTitle =
-    props.log.type ??
-    headerTitleMap[props.log.isComponentError ? 'component' : props.log.level];
-
-  if (collapsed) {
-    return (
-      <>
-        <LogBoxInspectorMessageHeader
-          collapsed={collapsed}
-          onPress={() => setCollapsed(!collapsed)}
-          message={props.log.message}
-          level={props.log.level}
-          title={headerTitle}
-        />
-        <ScrollView style={styles.scrollBody}>
-          <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
-          <LogBoxInspectorReactFrames log={props.log} />
-          <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
-        </ScrollView>
-      </>
-    );
-  }
-  return (
-    <ScrollView style={styles.scrollBody}>
-      <LogBoxInspectorMessageHeader
-        collapsed={collapsed}
-        onPress={() => setCollapsed(!collapsed)}
-        message={props.log.message}
-        level={props.log.level}
-        title={headerTitle}
-      />
-      <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
-      <LogBoxInspectorReactFrames log={props.log} />
-      <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
-    </ScrollView>
-  );
-}
-
 const styles = StyleSheet.create({
   root: {
     flex: 1,
     backgroundColor: LogBoxStyle.getTextColor(),
   },
-  scrollBody: {
-    backgroundColor: LogBoxStyle.getBackgroundColor(0.9),
-    flex: 1,
-  },
 });
-
-export default LogBoxInspector;

package/Libraries/LogBox/UI/LogBoxInspectorBody.js

@@ -0,0 +1,87 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import LogBoxLog from '../Data/LogBoxLog';
+import LogBoxInspectorCodeFrame from './LogBoxInspectorCodeFrame';
+import LogBoxInspectorMessageHeader from './LogBoxInspectorMessageHeader';
+import LogBoxInspectorReactFrames from './LogBoxInspectorReactFrames';
+import LogBoxInspectorStackFrames from './LogBoxInspectorStackFrames';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+import {useEffect, useState} from 'react';
+
+const headerTitleMap = {
+  warn: 'Console Warning',
+  error: 'Console Error',
+  fatal: 'Uncaught Error',
+  syntax: 'Syntax Error',
+  component: 'Render Error',
+};
+
+export default function LogBoxInspectorBody(props: {
+  log: LogBoxLog,
+  onRetry: () => void,
+}): React.Node {
+  const [collapsed, setCollapsed] = useState(true);
+
+  useEffect(() => {
+    setCollapsed(true);
+  }, [props.log]);
+
+  const headerTitle =
+    props.log.type ??
+    headerTitleMap[props.log.isComponentError ? 'component' : props.log.level];
+
+  if (collapsed) {
+    return (
+      <>
+        <LogBoxInspectorMessageHeader
+          collapsed={collapsed}
+          onPress={() => setCollapsed(!collapsed)}
+          message={props.log.message}
+          level={props.log.level}
+          title={headerTitle}
+        />
+        <ScrollView style={styles.scrollBody}>
+          <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+          <LogBoxInspectorReactFrames log={props.log} />
+          <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+        </ScrollView>
+      </>
+    );
+  }
+  return (
+    <ScrollView style={styles.scrollBody}>
+      <LogBoxInspectorMessageHeader
+        collapsed={collapsed}
+        onPress={() => setCollapsed(!collapsed)}
+        message={props.log.message}
+        level={props.log.level}
+        title={headerTitle}
+      />
+      <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+      <LogBoxInspectorReactFrames log={props.log} />
+      <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: LogBoxStyle.getTextColor(),
+  },
+  scrollBody: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(0.9),
+    flex: 1,
+  },
+});

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -10,21 +10,20 @@
 
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorFooterButton from './LogBoxInspectorFooterButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   onDismiss: () => void,
   onMinimize: () => void,
   level?: ?LogLevel,
-|}>;
+}>;
 
-function LogBoxInspectorFooter(props: Props): React.Node {
+export default function LogBoxInspectorFooter(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
       <View style={styles.root}>
@@ -39,34 +38,12 @@ function LogBoxInspectorFooter(props: Props): React.Node {
 
   return (
     <View style={styles.root}>
-      <FooterButton text="Dismiss" onPress={props.onDismiss} />
-      <FooterButton text="Minimize" onPress={props.onMinimize} />
+      <LogBoxInspectorFooterButton text="Dismiss" onPress={props.onDismiss} />
+      <LogBoxInspectorFooterButton text="Minimize" onPress={props.onMinimize} />
     </View>
   );
 }
 
-type ButtonProps = $ReadOnly<{|
-  onPress: () => void,
-  text: string,
-|}>;
-
-function FooterButton(props: ButtonProps): React.Node {
-  return (
-    <SafeAreaView style={styles.button}>
-      <LogBoxButton
-        backgroundColor={{
-          default: 'transparent',
-          pressed: LogBoxStyle.getBackgroundDarkColor(),
-        }}
-        onPress={props.onPress}>
-        <View style={styles.buttonContent}>
-          <Text style={styles.buttonLabel}>{props.text}</Text>
-        </View>
-      </LogBoxButton>
-    </SafeAreaView>
-  );
-}
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -79,17 +56,6 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
   },
-  buttonContent: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  buttonLabel: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',
@@ -102,5 +68,3 @@ const styles = StyleSheet.create({
     color: LogBoxStyle.getTextColor(0.6),
   },
 });
-
-export default LogBoxInspectorFooter;

package/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type ButtonProps = $ReadOnly<{
+  onPress: () => void,
+  text: string,
+}>;
+
+export default function LogBoxInspectorFooterButton(
+  props: ButtonProps,
+): React.Node {
+  return (
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+  },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+});