react-native-windows 0.74.12 → 0.75.0-preview.2

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -13,6 +13,7 @@ import type {
   Category,
   CodeFrame,
   ComponentStack,
+  ComponentStackType,
   Message,
 } from './parseLogBoxLog';
 
@@ -22,23 +23,58 @@ type SymbolicationStatus = 'NONE' | 'PENDING' | 'COMPLETE' | 'FAILED';
 
 export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax';
 
-export type LogBoxLogData = $ReadOnly<{|
+// TODO: once component stacks are fully supported, we can refactor
+// ComponentStack to just be Stack and remove these conversions fns.
+function convertComponentStateToStack(componentStack: ComponentStack): Stack {
+  return componentStack.map(frame => ({
+    column: frame?.location?.column,
+    file: frame.fileName,
+    lineNumber: frame?.location?.row,
+    methodName: frame.content,
+    collapse: false,
+  }));
+}
+
+function convertStackToComponentStack(stack: Stack): ComponentStack {
+  const componentStack = [];
+  for (let i = 0; i < stack.length; i++) {
+    const frame = stack[i];
+    // NOTE: Skip stack frames missing location.
+    if (frame.lineNumber != null && frame.column != null) {
+      componentStack.push({
+        fileName: frame?.file || '',
+        location: {
+          row: frame.lineNumber,
+          column: frame.column,
+        },
+        content: frame.methodName,
+        collapse: false,
+      });
+    }
+  }
+  return componentStack;
+}
+
+export type LogBoxLogData = $ReadOnly<{
   level: LogLevel,
   type?: ?string,
   message: Message,
   stack: Stack,
   category: string,
+  componentStackType?: ComponentStackType,
   componentStack: ComponentStack,
   codeFrame?: ?CodeFrame,
   isComponentError: boolean,
   extraData?: mixed,
-|}>;
+  onNotificationPress?: ?() => void,
+}>;
 
 class LogBoxLog {
   message: Message;
   type: ?string;
   category: Category;
   componentStack: ComponentStack;
+  componentStackType: ComponentStackType;
   stack: Stack;
   count: number;
   level: LogLevel;
@@ -54,6 +90,20 @@ class LogBoxLog {
     stack: null,
     status: 'NONE',
   };
+  symbolicatedComponentStack:
+    | $ReadOnly<{|error: null, componentStack: null, status: 'NONE'|}>
+    | $ReadOnly<{|error: null, componentStack: null, status: 'PENDING'|}>
+    | $ReadOnly<{|
+        error: null,
+        componentStack: ComponentStack,
+        status: 'COMPLETE',
+      |}>
+    | $ReadOnly<{|error: Error, componentStack: null, status: 'FAILED'|}> = {
+    error: null,
+    componentStack: null,
+    status: 'NONE',
+  };
+  onNotificationPress: ?() => void;
 
   constructor(data: LogBoxLogData) {
     this.level = data.level;
@@ -62,10 +112,12 @@ class LogBoxLog {
     this.stack = data.stack;
     this.category = data.category;
     this.componentStack = data.componentStack;
+    this.componentStackType = data.componentStackType || 'legacy';
     this.codeFrame = data.codeFrame;
     this.isComponentError = data.isComponentError;
     this.extraData = data.extraData;
     this.count = 1;
+    this.onNotificationPress = data.onNotificationPress;
   }
 
   incrementCount(): void {
@@ -78,6 +130,15 @@ class LogBoxLog {
       : this.stack;
   }
 
+  getAvailableComponentStack(): ComponentStack {
+    if (this.componentStackType === 'legacy') {
+      return this.componentStack;
+    }
+    return this.symbolicatedComponentStack.status === 'COMPLETE'
+      ? this.symbolicatedComponentStack.componentStack
+      : this.componentStack;
+  }
+
   retrySymbolicate(callback?: (status: SymbolicationStatus) => void): void {
     if (this.symbolicated.status !== 'COMPLETE') {
       LogBoxSymbolication.deleteStack(this.stack);
@@ -102,6 +163,25 @@ class LogBoxLog {
           this.updateStatus(error, null, null, callback);
         },
       );
+      if (this.componentStack != null && this.componentStackType === 'stack') {
+        this.updateComponentStackStatus(null, null, null, callback);
+        const componentStackFrames = convertComponentStateToStack(
+          this.componentStack,
+        );
+        LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
+          data => {
+            this.updateComponentStackStatus(
+              null,
+              convertStackToComponentStack(data.stack),
+              null,
+              callback,
+            );
+          },
+          error => {
+            this.updateComponentStackStatus(error, null, null, callback);
+          },
+        );
+      }
     }
   }
 
@@ -140,6 +220,38 @@ class LogBoxLog {
       callback(this.symbolicated.status);
     }
   }
+
+  updateComponentStackStatus(
+    error: ?Error,
+    componentStack: ?ComponentStack,
+    codeFrame: ?CodeFrame,
+    callback?: (status: SymbolicationStatus) => void,
+  ): void {
+    const lastStatus = this.symbolicatedComponentStack.status;
+    if (error != null) {
+      this.symbolicatedComponentStack = {
+        error,
+        componentStack: null,
+        status: 'FAILED',
+      };
+    } else if (componentStack != null) {
+      this.symbolicatedComponentStack = {
+        error: null,
+        componentStack,
+        status: 'COMPLETE',
+      };
+    } else {
+      this.symbolicatedComponentStack = {
+        error: null,
+        componentStack: null,
+        status: 'PENDING',
+      };
+    }
+
+    if (callback && lastStatus !== this.symbolicatedComponentStack.status) {
+      callback(this.symbolicatedComponentStack.status);
+    }
+  }
 }
 
 export default LogBoxLog;

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -18,11 +18,62 @@ import ansiRegex from 'ansi-regex';
 
 const ANSI_REGEX = ansiRegex().source;
 
-const BABEL_TRANSFORM_ERROR_FORMAT =
+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_STACK_FRAME = /@.*\n/;
+
+// "TransformError " (Optional) and either "SyntaxError: " or "ReferenceError: "
+// Capturing groups:
+// 1: error message
+// 2: file path
+// 3: line number
+// 4: column number
+// \n\n
+// 5: code frame
+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
+// 1: file path
+// 2: file name
+// 3: error message
+// 4: code frame, which includes code snippet indicators or terminal escape sequences for formatting.
+const RE_BABEL_CODE_FRAME_ERROR_FORMAT =
+  // eslint-disable-next-line no-control-regex
+  /^(?:TransformError )?(?:.*):? (?:.*?)(\/.*): ([\s\S]+?)\n([ >]{2}[\d\s]+ \|[\s\S]+|\u{001b}[\s\S]+)/u;
+
+// Capturing groups:
+// - non-capturing "InternalError Metro has encountered an error:"
+// 1: error title
+// 2: error message
+// 3: file path
+// 4: line number
+// 5: column number
+// 6: code frame, which includes code snippet indicators or terminal escape sequences for formatting.
+const RE_METRO_ERROR_FORMAT =
+  /^(?:InternalError Metro has encountered an error:) (.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/u;
+
 // https://github.com/babel/babel/blob/33dbb85e9e9fe36915273080ecc42aee62ed0ade/packages/babel-code-frame/src/index.ts#L183-L184
-const BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
+const RE_BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
   [
     // Beginning of a line (per 'm' flag)
     '^',
@@ -42,12 +93,14 @@ const BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
   'm',
 );
 
-const BABEL_CODE_FRAME_ERROR_FORMAT =
-  // eslint-disable-next-line no-control-regex
-  /^(?:TransformError )?(?:.*):? (?:.*?)(\/.*): ([\s\S]+?)\n([ >]{2}[\d\s]+ \|[\s\S]+|\u{001b}[\s\S]+)/u;
-
-const METRO_ERROR_FORMAT =
-  /^(?:InternalError Metro has encountered an error:) (.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/u;
+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,
@@ -79,6 +132,7 @@ export type Message = $ReadOnly<{|
 |}>;
 
 export type ComponentStack = $ReadOnlyArray<CodeFrame>;
+export type ComponentStackType = 'legacy' | 'stack';
 
 const SUBSTITUTION = UTFSequence.BOM + '%s';
 
@@ -158,9 +212,12 @@ export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{|
 }
 
 function isComponentStack(consoleArgument: string) {
-  const isOldComponentStackFormat = / {4}in/.test(consoleArgument);
-  const isNewComponentStackFormat = / {4}at/.test(consoleArgument);
-  const isNewJSCComponentStackFormat = /@.*\n/.test(consoleArgument);
+  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);
 
   return (
     isOldComponentStackFormat ||
@@ -169,42 +226,62 @@ function isComponentStack(consoleArgument: string) {
   );
 }
 
-export function parseComponentStack(message: string): ComponentStack {
+export function parseComponentStack(message: string): {
+  type: ComponentStackType,
+  stack: ComponentStack,
+} {
   // 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 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,
-      },
-    }));
+    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,
+        },
+      })),
+    };
   }
-
-  return message
-    .split(/\n {4}in /g)
+  const legacyStack = message
+    .split(RE_COMPONENT_STACK_LINE_GLOBAL)
     .map(s => {
       if (!s) {
         return null;
       }
-      const match = s.match(/(.*) \(at (.*\.(?:js|jsx|ts|tsx)):([\d]+)\)/);
-      if (!match) {
-        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)},
+        };
       }
 
-      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,
+  };
 }
 
 export function parseLogBoxException(
@@ -213,7 +290,7 @@ export function parseLogBoxException(
   const message =
     error.originalMessage != null ? error.originalMessage : 'Unknown';
 
-  const metroInternalError = message.match(METRO_ERROR_FORMAT);
+  const metroInternalError = message.match(RE_METRO_ERROR_FORMAT);
   if (metroInternalError) {
     const [content, fileName, row, column, codeFrame] =
       metroInternalError.slice(1);
@@ -223,6 +300,7 @@ export function parseLogBoxException(
       type: 'Metro Error',
       stack: [],
       isComponentError: false,
+      componentStackType: 'legacy',
       componentStack: [],
       codeFrame: {
         fileName,
@@ -241,7 +319,7 @@ export function parseLogBoxException(
     };
   }
 
-  const babelTransformError = message.match(BABEL_TRANSFORM_ERROR_FORMAT);
+  const babelTransformError = message.match(RE_BABEL_TRANSFORM_ERROR_FORMAT);
   if (babelTransformError) {
     // Transform errors are thrown from inside the Babel transformer.
     const [fileName, content, row, column, codeFrame] =
@@ -251,6 +329,7 @@ export function parseLogBoxException(
       level: 'syntax',
       stack: [],
       isComponentError: false,
+      componentStackType: 'legacy',
       componentStack: [],
       codeFrame: {
         fileName,
@@ -271,8 +350,8 @@ export function parseLogBoxException(
 
   // Perform a cheap match first before trying to parse the full message, which
   // can get expensive for arbitrary input.
-  if (BABEL_CODE_FRAME_MARKER_PATTERN.test(message)) {
-    const babelCodeFrameError = message.match(BABEL_CODE_FRAME_ERROR_FORMAT);
+  if (RE_BABEL_CODE_FRAME_MARKER_PATTERN.test(message)) {
+    const babelCodeFrameError = message.match(RE_BABEL_CODE_FRAME_ERROR_FORMAT);
 
     if (babelCodeFrameError) {
       // Codeframe errors are thrown from any use of buildCodeFrameError.
@@ -281,6 +360,7 @@ export function parseLogBoxException(
         level: 'syntax',
         stack: [],
         isComponentError: false,
+        componentStackType: 'legacy',
         componentStack: [],
         codeFrame: {
           fileName,
@@ -297,11 +377,12 @@ export function parseLogBoxException(
     }
   }
 
-  if (message.match(/^TransformError /)) {
+  if (message.match(RE_TRANSFORM_ERROR)) {
     return {
       level: 'syntax',
       stack: error.stack,
       isComponentError: error.isComponentError,
+      componentStackType: 'legacy',
       componentStack: [],
       message: {
         content: message,
@@ -314,24 +395,39 @@ export function parseLogBoxException(
 
   const componentStack = error.componentStack;
   if (error.isFatal || error.isComponentError) {
-    return {
-      level: 'fatal',
-      stack: error.stack,
-      isComponentError: error.isComponentError,
-      componentStack:
-        componentStack != null ? parseComponentStack(componentStack) : [],
-      extraData: error.extraData,
-      ...parseInterpolation([message]),
-    };
+    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,
-      componentStack: parseComponentStack(componentStack),
+      componentStackType: type,
+      componentStack: stack,
       extraData: error.extraData,
       ...parseInterpolation([message]),
     };
@@ -348,14 +444,28 @@ 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';
 
   // Extract component stack from warnings like "Some warning%s".
   if (
@@ -367,16 +477,18 @@ export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
     if (typeof lastArg === 'string' && isComponentStack(lastArg)) {
       argsWithoutComponentStack = args.slice(0, -1);
       argsWithoutComponentStack[0] = message.slice(0, -2);
-      componentStack = parseComponentStack(lastArg);
+      const {type, stack} = parseComponentStack(lastArg);
+      componentStack = stack;
+      componentStackType = type;
     }
   }
 
-  if (componentStack.length === 0) {
+  if (componentStack.length === 0 && argsWithoutComponentStack.length === 0) {
     // Try finding the component stack elsewhere.
     for (const arg of args) {
       if (typeof arg === 'string' && isComponentStack(arg)) {
         // Strip out any messages before the component stack.
-        let messageEndIndex = arg.search(/\n {4}(in|at) /);
+        let messageEndIndex = arg.search(RE_COMPONENT_STACK_LINE);
         if (messageEndIndex < 0) {
           // Handle JSC component stacks.
           messageEndIndex = arg.search(/\n/);
@@ -385,7 +497,9 @@ export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
           argsWithoutComponentStack.push(arg.slice(0, messageEndIndex));
         }
 
-        componentStack = parseComponentStack(arg);
+        const {type, stack} = parseComponentStack(arg);
+        componentStack = stack;
+        componentStackType = type;
       } else {
         argsWithoutComponentStack.push(arg);
       }
@@ -395,5 +509,6 @@ export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
   return {
     ...parseInterpolation(argsWithoutComponentStack),
     componentStack,
+    componentStackType,
   };
 }

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.