react-native-windows 0.84.0-preview.9 → 0.85.0-preview.1

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -10,6 +10,7 @@
 
 import type {ExceptionData} from '../../Core/NativeExceptionsManager';
 import type {LogBoxLogData} from './LogBoxLog';
+import type {Stack} from './LogBoxSymbolication';
 
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import UTFSequence from '../../UTFSequence';
@@ -19,10 +20,7 @@ import ansiRegex from 'ansi-regex';
 const ANSI_REGEX = ansiRegex().source;
 
 const RE_TRANSFORM_ERROR = /^TransformError /;
-const RE_COMPONENT_STACK_LINE = /\n {4}(in|at) /;
-const RE_COMPONENT_STACK_LINE_GLOBAL = /\n {4}(in|at) /g;
-const RE_COMPONENT_STACK_LINE_OLD = / {4}in/;
-const RE_COMPONENT_STACK_LINE_NEW = / {4}at/;
+const RE_COMPONENT_STACK_LINE = /\n {4}at/;
 const RE_COMPONENT_STACK_LINE_STACK_FRAME = /@.*\n/;
 
 // "TransformError " (Optional) and either "SyntaxError: " or "ReferenceError: "
@@ -36,20 +34,6 @@ const RE_COMPONENT_STACK_LINE_STACK_FRAME = /@.*\n/;
 const RE_BABEL_TRANSFORM_ERROR_FORMAT =
   /^(?:TransformError )?(?:SyntaxError: |ReferenceError: )(.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/;
 
-// Capturing groups:
-// 1: component name
-// "at"
-// 2: file path including extension
-// 3: line number
-const RE_COMPONENT_STACK_WITH_SOURCE =
-  /(.*) \(at (.*\.(?:js|jsx|ts|tsx)):([\d]+)\)/;
-
-// Capturing groups:
-// 1: component name
-// "at"
-// 2: parent component name
-const RE_COMPONENT_STACK_NO_SOURCE = /(.*) \(created by .*\)/;
-
 // Capturing groups:
 // - non-capturing "TransformError " (optional)
 // - non-capturing Error message
@@ -93,21 +77,12 @@ const RE_BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
   'm',
 );
 
-export function hasComponentStack(args: $ReadOnlyArray<unknown>): boolean {
-  for (const arg of args) {
-    if (typeof arg === 'string' && isComponentStack(arg)) {
-      return true;
-    }
-  }
-  return false;
-}
-
 export type ExtendedExceptionData = ExceptionData & {
   isComponentError: boolean,
   ...
 };
 export type Category = string;
-export type CodeFrame = $ReadOnly<{
+export type CodeFrame = Readonly<{
   content: string,
   location: ?{
     row: number,
@@ -121,22 +96,19 @@ export type CodeFrame = $ReadOnly<{
   // it is not integrated into the LogBox UI.
   collapse?: boolean,
 }>;
-export type Message = $ReadOnly<{
+export type Message = Readonly<{
   content: string,
-  substitutions: $ReadOnlyArray<
-    $ReadOnly<{
+  substitutions: ReadonlyArray<
+    Readonly<{
       length: number,
       offset: number,
     }>,
   >,
 }>;
 
-export type ComponentStack = $ReadOnlyArray<CodeFrame>;
-export type ComponentStackType = 'legacy' | 'stack';
-
 const SUBSTITUTION = UTFSequence.BOM + '%s';
 
-export function parseInterpolation(args: $ReadOnlyArray<unknown>): $ReadOnly<{
+export function parseInterpolation(args: ReadonlyArray<unknown>): Readonly<{
   category: Category,
   message: Message,
 }> {
@@ -212,75 +184,21 @@ export function parseInterpolation(args: $ReadOnlyArray<unknown>): $ReadOnly<{
 }
 
 function isComponentStack(consoleArgument: string) {
-  const isOldComponentStackFormat =
-    RE_COMPONENT_STACK_LINE_OLD.test(consoleArgument);
-  const isNewComponentStackFormat =
-    RE_COMPONENT_STACK_LINE_NEW.test(consoleArgument);
-  const isNewJSCComponentStackFormat =
-    RE_COMPONENT_STACK_LINE_STACK_FRAME.test(consoleArgument);
-
+  // Component stacks are formatted as call stack frames:
+  // - Hermes format: "    at Component (/path/to/file.js:1:2)"
+  // - JSC format: "Component@/path/to/file.js:1:2"
   return (
-    isOldComponentStackFormat ||
-    isNewComponentStackFormat ||
-    isNewJSCComponentStackFormat
+    RE_COMPONENT_STACK_LINE.test(consoleArgument) ||
+    RE_COMPONENT_STACK_LINE_STACK_FRAME.test(consoleArgument)
   );
 }
 
 export function parseComponentStack(message: string): {
-  type: ComponentStackType,
-  stack: ComponentStack,
+  stack: Stack,
 } {
-  // In newer versions of React, the component stack is formatted as a call stack frame.
-  // First try to parse the component stack as a call stack frame, and if that doesn't
-  // work then we'll fallback to the old custom component stack format parsing.
   const stack = parseErrorStack(message);
-  if (stack && stack.length > 0) {
-    return {
-      type: 'stack',
-      stack: stack.map(frame => ({
-        content: frame.methodName,
-        collapse: frame.collapse || false,
-        fileName: frame.file == null ? 'unknown' : frame.file,
-        location: {
-          column: frame.column == null ? -1 : frame.column,
-          row: frame.lineNumber == null ? -1 : frame.lineNumber,
-        },
-      })),
-    };
-  }
-  const legacyStack = message
-    .split(RE_COMPONENT_STACK_LINE_GLOBAL)
-    .map(s => {
-      if (!s) {
-        return null;
-      }
-      const match = s.match(RE_COMPONENT_STACK_WITH_SOURCE);
-      if (match) {
-        let [content, fileName, row] = match.slice(1);
-        return {
-          content,
-          fileName,
-          location: {column: -1, row: parseInt(row, 10)},
-        };
-      }
-
-      // In some cases, the component stack doesn't have a source.
-      const matchWithoutSource = s.match(RE_COMPONENT_STACK_NO_SOURCE);
-      if (matchWithoutSource) {
-        return {
-          content: matchWithoutSource[1],
-          fileName: '',
-          location: null,
-        };
-      }
-
-      return null;
-    })
-    .filter(Boolean);
-
   return {
-    type: 'legacy',
-    stack: legacyStack,
+    stack: stack ?? [],
   };
 }
 
@@ -300,7 +218,6 @@ export function parseLogBoxException(
       type: 'Metro Error',
       stack: [],
       isComponentError: false,
-      componentStackType: 'legacy',
       componentStack: [],
       codeFrame: {
         fileName,
@@ -329,7 +246,6 @@ export function parseLogBoxException(
       level: 'syntax',
       stack: [],
       isComponentError: false,
-      componentStackType: 'legacy',
       componentStack: [],
       codeFrame: {
         fileName,
@@ -360,7 +276,6 @@ export function parseLogBoxException(
         level: 'syntax',
         stack: [],
         isComponentError: false,
-        componentStackType: 'legacy',
         componentStack: [],
         codeFrame: {
           fileName,
@@ -382,7 +297,6 @@ export function parseLogBoxException(
       level: 'syntax',
       stack: error.stack,
       isComponentError: error.isComponentError,
-      componentStackType: 'legacy',
       componentStack: [],
       message: {
         content: message,
@@ -396,12 +310,11 @@ export function parseLogBoxException(
   const componentStack = error.componentStack;
   if (error.isFatal || error.isComponentError) {
     if (componentStack != null) {
-      const {type, stack} = parseComponentStack(componentStack);
+      const {stack} = parseComponentStack(componentStack);
       return {
         level: 'fatal',
         stack: error.stack,
         isComponentError: error.isComponentError,
-        componentStackType: type,
         componentStack: stack,
         extraData: error.extraData,
         ...parseInterpolation([message]),
@@ -411,7 +324,6 @@ export function parseLogBoxException(
         level: 'fatal',
         stack: error.stack,
         isComponentError: error.isComponentError,
-        componentStackType: 'legacy',
         componentStack: [],
         extraData: error.extraData,
         ...parseInterpolation([message]),
@@ -421,12 +333,11 @@ export function parseLogBoxException(
 
   if (componentStack != null) {
     // It is possible that console errors have a componentStack.
-    const {type, stack} = parseComponentStack(componentStack);
+    const {stack} = parseComponentStack(componentStack);
     return {
       level: 'error',
       stack: error.stack,
       isComponentError: error.isComponentError,
-      componentStackType: type,
       componentStack: stack,
       extraData: error.extraData,
       ...parseInterpolation([message]),
@@ -456,16 +367,14 @@ export function withoutANSIColorStyles(message: unknown): unknown {
   );
 }
 
-export function parseLogBoxLog(args: $ReadOnlyArray<unknown>): {
-  componentStack: ComponentStack,
-  componentStackType: ComponentStackType,
+export function parseLogBoxLog(args: ReadonlyArray<unknown>): {
+  componentStack: Stack,
   category: Category,
   message: Message,
 } {
   const message = withoutANSIColorStyles(args[0]);
   let argsWithoutComponentStack: Array<unknown> = [];
-  let componentStack: ComponentStack = [];
-  let componentStackType = 'legacy';
+  let componentStack: Stack = [];
 
   // Extract component stack from warnings like "Some warning%s".
   if (
@@ -477,9 +386,8 @@ export function parseLogBoxLog(args: $ReadOnlyArray<unknown>): {
     if (typeof lastArg === 'string' && isComponentStack(lastArg)) {
       argsWithoutComponentStack = args.slice(0, -1);
       argsWithoutComponentStack[0] = message.slice(0, -2);
-      const {type, stack} = parseComponentStack(lastArg);
+      const {stack} = parseComponentStack(lastArg);
       componentStack = stack;
-      componentStackType = type;
     }
   }
 
@@ -497,9 +405,8 @@ export function parseLogBoxLog(args: $ReadOnlyArray<unknown>): {
           argsWithoutComponentStack.push(arg.slice(0, messageEndIndex));
         }
 
-        const {type, stack} = parseComponentStack(arg);
+        const {stack} = parseComponentStack(arg);
         componentStack = stack;
-        componentStackType = type;
       } else {
         argsWithoutComponentStack.push(arg);
       }
@@ -509,8 +416,5 @@ export function parseLogBoxLog(args: $ReadOnlyArray<unknown>): {
   return {
     ...parseInterpolation(argsWithoutComponentStack),
     componentStack,
-    /* $FlowFixMe[incompatible-type] Natural Inference rollout. See
-     * https://fburl.com/workplace/6291gfvu */
-    componentStackType,
   };
 }

package/Libraries/LogBox/LogBox.js

@@ -9,12 +9,41 @@
  */
 
 import type {IgnorePattern, LogData} from './Data/LogBoxData';
+import type {Stack} from './Data/LogBoxSymbolication';
 import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 
+import toExtendedError from '../../src/private/utilities/toExtendedError';
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
 import * as React from 'react';
 
+// TODO: Remove support for LegacyComponentStackFrame in a future version.
+// This is kept for backward compatibility with external callers of LogBox.addLog.
+function convertLegacyComponentStack(componentStack: Stack): Stack {
+  if (componentStack.length === 0) {
+    return [];
+  }
+  // Detect legacy format by checking for 'content' property
+  const firstFrame = componentStack[0];
+  if (
+    firstFrame != null &&
+    typeof firstFrame === 'object' &&
+    // $FlowExpectedError[prop-missing]
+    typeof firstFrame.content === 'string'
+  ) {
+    // Convert from legacy ComponentStack to Stack format
+    return (componentStack: $FlowFixMe).map(frame => ({
+      methodName: frame.content,
+      lineNumber: frame.location.row,
+      column: frame.location.column,
+      file: frame.fileName,
+      collapse: frame.collapse ?? false,
+    }));
+  }
+  // Already in the new Stack format
+  return componentStack;
+}
+
 export type {LogData, ExtendedExceptionData, IgnorePattern};
 
 let LogBox;
@@ -23,7 +52,7 @@ interface ILogBox {
   install(): void;
   uninstall(): void;
   isInstalled(): boolean;
-  ignoreLogs($ReadOnlyArray<IgnorePattern>): void;
+  ignoreLogs(ReadonlyArray<IgnorePattern>): void;
   ignoreAllLogs(value?: boolean): void;
   clearAllLogs(): void;
   addLog(log: LogData): void;
@@ -117,7 +146,7 @@ if (__DEV__) {
     /**
      * Silence any logs that match the given strings or regexes.
      */
-    ignoreLogs(patterns: $ReadOnlyArray<IgnorePattern>): void {
+    ignoreLogs(patterns: ReadonlyArray<IgnorePattern>): void {
       LogBoxData.addIgnorePatterns(patterns);
     },
 
@@ -136,7 +165,10 @@ if (__DEV__) {
 
     addLog(log: LogData): void {
       if (isLogBoxInstalled) {
-        LogBoxData.addLog(log);
+        LogBoxData.addLog({
+          ...log,
+          componentStack: convertLegacyComponentStack(log.componentStack),
+        });
       }
     },
 
@@ -147,11 +179,7 @@ if (__DEV__) {
           let format = args[0];
           if (typeof format === 'string') {
             const filterResult =
-              require('../LogBox/Data/LogBoxData').checkWarningFilter(
-                // For legacy reasons, we strip the warning prefix from the message.
-                // Can remove this once we remove the warning module altogether.
-                format.replace(/^Warning: /, ''),
-              );
+              require('../LogBox/Data/LogBoxData').checkWarningFilter(format);
             if (filterResult.monitorEvent !== 'warning_unhandled') {
               if (filterResult.suppressCompletely) {
                 return;
@@ -169,7 +197,6 @@ if (__DEV__) {
           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) &&
@@ -180,7 +207,6 @@ if (__DEV__) {
             if (ownerStack != null && ownerStack.length > 0) {
               const parsedComponentStack = parseComponentStack(ownerStack);
               componentStack = parsedComponentStack.stack;
-              componentStackType = parsedComponentStack.type;
             }
           }
           if (!LogBoxData.isMessageIgnored(message.content)) {
@@ -189,11 +215,10 @@ if (__DEV__) {
               category,
               message,
               componentStack,
-              componentStackType,
             });
           }
-        } catch (err) {
-          LogBoxData.reportLogBoxError(err);
+        } catch (err: unknown) {
+          LogBoxData.reportLogBoxError(toExtendedError(err));
         }
       }
     },
@@ -224,8 +249,7 @@ if (__DEV__) {
 
     try {
       if (!isRCTLogAdviceWarning(...args)) {
-        const {category, message, componentStack, componentStackType} =
-          parseLogBoxLog(args);
+        const {category, message, componentStack} = parseLogBoxLog(args);
 
         if (!LogBoxData.isMessageIgnored(message.content)) {
           LogBoxData.addLog({
@@ -233,12 +257,11 @@ if (__DEV__) {
             category,
             message,
             componentStack,
-            componentStackType,
           });
         }
       }
-    } catch (err) {
-      LogBoxData.reportLogBoxError(err);
+    } catch (err: unknown) {
+      LogBoxData.reportLogBoxError(toExtendedError(err));
     }
   };
 } else {
@@ -255,7 +278,7 @@ if (__DEV__) {
       return false;
     },
 
-    ignoreLogs(patterns: $ReadOnlyArray<IgnorePattern>): void {
+    ignoreLogs(patterns: ReadonlyArray<IgnorePattern>): void {
       // Do nothing.
     },
 

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -16,8 +16,8 @@ import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
-  logs: $ReadOnlyArray<LogBoxLog>,
+type Props = Readonly<{
+  logs: ReadonlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
 }>;

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -16,8 +16,8 @@ import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
-  logs: $ReadOnlyArray<LogBoxLog>,
+type Props = Readonly<{
+  logs: ReadonlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
 }>;

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -19,9 +19,9 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxButton(
   id?: string,
-  backgroundColor: $ReadOnly<{
+  backgroundColor: Readonly<{
     default: string,
     pressed: string,
   }>,
@@ -29,14 +29,12 @@ type Props = $ReadOnly<{
   hitSlop?: ?EdgeInsetsProp,
   onPress?: ?(event: GestureResponderEvent) => void,
   style?: ViewStyleProp,
-}>;
-
-function LogBoxButton(props: Props): React.Node {
+) {
   const [pressed, setPressed] = useState(false);
 
-  let backgroundColor = props.backgroundColor;
-  if (!backgroundColor) {
-    backgroundColor = {
+  let resolvedBackgroundColor = backgroundColor;
+  if (!resolvedBackgroundColor) {
+    resolvedBackgroundColor = {
       default: LogBoxStyle.getBackgroundColor(0.95),
       pressed: LogBoxStyle.getBackgroundColor(0.6),
     };
@@ -44,25 +42,25 @@ function LogBoxButton(props: Props): React.Node {
 
   const content = (
     <View
-      id={props.id}
+      id={id}
       style={StyleSheet.compose(
         {
           backgroundColor: pressed
-            ? backgroundColor.pressed
-            : backgroundColor.default,
+            ? resolvedBackgroundColor.pressed
+            : resolvedBackgroundColor.default,
         },
-        props.style,
+        style,
       )}>
-      {props.children}
+      {children}
     </View>
   );
 
-  return props.onPress == null ? (
+  return onPress == null ? (
     content
   ) : (
     <TouchableWithoutFeedback
-      hitSlop={props.hitSlop}
-      onPress={props.onPress}
+      hitSlop={hitSlop}
+      onPress={onPress}
       onPressIn={() => setPressed(true)}
       onPressOut={() => setPressed(false)}>
       {content}

package/Libraries/LogBox/UI/LogBoxInspector.js

@@ -20,11 +20,11 @@ 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>,
+  logs: ReadonlyArray<LogBoxLog>,
   selectedIndex: number,
   fatalType?: ?LogLevel,
 }>;

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -23,12 +23,7 @@ import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
-  componentCodeFrame: ?CodeFrame,
-  codeFrame: ?CodeFrame,
-}>;
-
-function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
+component CodeFrameDisplay(codeFrame: CodeFrame) {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -77,8 +72,10 @@ function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   );
 }
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const {codeFrame, componentCodeFrame} = props;
+component LogBoxInspectorCodeFrame(
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+) {
   let sources = [];
   if (codeFrame != null) {
     sources.push(codeFrame);
@@ -103,7 +100,7 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   );
 }
 
-function AppInfo() {
+component AppInfo() {
   const appInfo = LogBoxData.getAppInfo();
   if (appInfo == null) {
     return null;

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.windows.js

@@ -23,12 +23,7 @@ import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
-  componentCodeFrame: ?CodeFrame,
-  codeFrame: ?CodeFrame,
-}>;
-
-function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
+component CodeFrameDisplay(codeFrame: CodeFrame) {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -77,8 +72,10 @@ function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   );
 }
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const {codeFrame, componentCodeFrame} = props;
+component LogBoxInspectorCodeFrame(
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+) {
   let sources = [];
   if (codeFrame != null) {
     sources.push(codeFrame);
@@ -103,7 +100,7 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   );
 }
 
-function AppInfo() {
+component AppInfo() {
   const appInfo = LogBoxData.getAppInfo();
   if (appInfo == null) {
     return null;

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -17,7 +17,7 @@ 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,

package/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js

@@ -16,7 +16,7 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type ButtonProps = $ReadOnly<{
+type ButtonProps = Readonly<{
   id: string,
   onPress: () => void,
   text: string,

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -20,7 +20,7 @@ import LogBoxInspectorHeaderButton from './LogBoxInspectorHeaderButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
   total: number,

package/Libraries/LogBox/UI/LogBoxInspectorHeader.windows.js

@@ -20,7 +20,7 @@ import LogBoxInspectorHeaderButton from './LogBoxInspectorHeaderButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   onSelectIndex: (selectedIndex: number) => void,
   selectedIndex: number,
   total: number,

package/Libraries/LogBox/UI/LogBoxInspectorHeaderButton.js

@@ -38,7 +38,7 @@ const backgroundForLevel = (level: LogLevel) =>
   })[level];
 
 export default function LogBoxInspectorHeaderButton(
-  props: $ReadOnly<{
+  props: Readonly<{
     id: string,
     disabled: boolean,
     image: ImageSource,