@office-iss/react-native-win32 0.0.0-canary.28 → 0.0.0-canary.281

package/Libraries/Core/Devtools/parseErrorStack.js

@@ -1,11 +1,11 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
  *
  * @format
- * @flow
+ * @flow strict
  */
 
 'use strict';
@@ -15,23 +15,14 @@ import type {HermesParsedStack} from './parseHermesStack';
 
 const parseHermesStack = require('./parseHermesStack');
 
-export type ExtendedError = Error & {
-  jsEngine?: string,
-  preventSymbolication?: boolean,
-  componentStack?: string,
-  forceRedbox?: boolean,
-  isComponentError?: boolean,
-  ...
-};
-
 function convertHermesStack(stack: HermesParsedStack): Array<StackFrame> {
-  const frames = [];
+  const frames: Array<StackFrame> = [];
   for (const entry of stack.entries) {
     if (entry.type !== 'FRAME') {
       continue;
     }
     const {location, functionName} = entry;
-    if (location.type === 'NATIVE') {
+    if (location.type === 'NATIVE' || location.type === 'INTERNAL_BYTECODE') {
       continue;
     }
     frames.push({
@@ -47,22 +38,22 @@ function convertHermesStack(stack: HermesParsedStack): Array<StackFrame> {
   return frames;
 }
 
-function parseErrorStack(e: ExtendedError): Array<StackFrame> {
-  if (!e || !e.stack) {
+function parseErrorStack(errorStack?: string): Array<StackFrame> {
+  if (errorStack == null) {
     return [];
   }
 
   const stacktraceParser = require('stacktrace-parser');
-  const stack = Array.isArray(e.stack)
-    ? e.stack
+  const parsedStack = Array.isArray(errorStack)
+    ? errorStack
     : global.HermesInternal
-    ? convertHermesStack(parseHermesStack(e.stack))
-    : stacktraceParser.parse(e.stack).map(frame => ({
-        ...frame,
-        column: frame.column != null ? frame.column - 1 : null,
-      }));
+      ? convertHermesStack(parseHermesStack(errorStack))
+      : stacktraceParser.parse(errorStack).map((frame): StackFrame => ({
+          ...frame,
+          column: frame.column != null ? frame.column - 1 : null,
+        }));
 
-  return stack;
+  return parsedStack;
 }
 
 module.exports = parseErrorStack;

package/Libraries/Core/Devtools/parseHermesStack.js

@@ -1,55 +1,63 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
  *
  * @format
- * @flow strict-local
+ * @flow strict
  */
 
 'use strict';
 
-type HermesStackLocationNative = {|
-  +type: 'NATIVE',
-|};
+type HermesStackLocationNative = $ReadOnly<{
+  type: 'NATIVE',
+}>;
 
-type HermesStackLocationSource = {|
-  +type: 'SOURCE',
-  +sourceUrl: string,
-  +line1Based: number,
-  +column1Based: number,
-|};
+type HermesStackLocationSource = $ReadOnly<{
+  type: 'SOURCE',
+  sourceUrl: string,
+  line1Based: number,
+  column1Based: number,
+}>;
 
-type HermesStackLocationBytecode = {|
-  +type: 'BYTECODE',
-  +sourceUrl: string,
-  +line1Based: number,
-  +virtualOffset0Based: number,
-|};
+type HermesStackLocationInternalBytecode = $ReadOnly<{
+  type: 'INTERNAL_BYTECODE',
+  sourceUrl: string,
+  line1Based: number,
+  virtualOffset0Based: number,
+}>;
+
+type HermesStackLocationBytecode = $ReadOnly<{
+  type: 'BYTECODE',
+  sourceUrl: string,
+  line1Based: number,
+  virtualOffset0Based: number,
+}>;
 
 type HermesStackLocation =
   | HermesStackLocationNative
   | HermesStackLocationSource
+  | HermesStackLocationInternalBytecode
   | HermesStackLocationBytecode;
 
-type HermesStackEntryFrame = {|
-  +type: 'FRAME',
-  +location: HermesStackLocation,
-  +functionName: string,
-|};
+type HermesStackEntryFrame = $ReadOnly<{
+  type: 'FRAME',
+  location: HermesStackLocation,
+  functionName: string,
+}>;
 
-type HermesStackEntrySkipped = {|
-  +type: 'SKIPPED',
-  +count: number,
-|};
+type HermesStackEntrySkipped = $ReadOnly<{
+  type: 'SKIPPED',
+  count: number,
+}>;
 
 type HermesStackEntry = HermesStackEntryFrame | HermesStackEntrySkipped;
 
-export type HermesParsedStack = {|
-  +message: string,
-  +entries: $ReadOnlyArray<HermesStackEntry>,
-|};
+export type HermesParsedStack = $ReadOnly<{
+  message: string,
+  entries: $ReadOnlyArray<HermesStackEntry>,
+}>;
 
 // Capturing groups:
 // 1. function name
@@ -58,11 +66,18 @@ export type HermesParsedStack = {|
 // 4. source URL (filename)
 // 5. line number (1 based)
 // 6. column number (1 based) or virtual offset (0 based)
-const RE_FRAME = /^ {4}at (.+?)(?: \((native)\)?| \((address at )?(.+?):(\d+):(\d+)\))$/;
+const RE_FRAME =
+  /^ {4}at (.+?)(?: \((native)\)?| \((address at )?(.*?):(\d+):(\d+)\))$/;
 
 // Capturing groups:
 // 1. count of skipped frames
 const RE_SKIPPED = /^ {4}... skipping (\d+) frames$/;
+const RE_COMPONENT_NO_STACK = /^ {4}at .*$/;
+
+function isInternalBytecodeSourceUrl(sourceUrl: string): boolean {
+  // See https://github.com/facebook/hermes/blob/3332fa020cae0bab751f648db7c94e1d687eeec7/lib/VM/Runtime.cpp#L1100
+  return sourceUrl === 'InternalBytecode.js';
+}
 
 function parseLine(line: string): ?HermesStackEntry {
   const asFrame = line.match(RE_FRAME);
@@ -74,18 +89,25 @@ function parseLine(line: string): ?HermesStackEntry {
         asFrame[2] === 'native'
           ? {type: 'NATIVE'}
           : asFrame[3] === 'address at '
-          ? {
-              type: 'BYTECODE',
-              sourceUrl: asFrame[4],
-              line1Based: Number.parseInt(asFrame[5], 10),
-              virtualOffset0Based: Number.parseInt(asFrame[6], 10),
-            }
-          : {
-              type: 'SOURCE',
-              sourceUrl: asFrame[4],
-              line1Based: Number.parseInt(asFrame[5], 10),
-              column1Based: Number.parseInt(asFrame[6], 10),
-            },
+            ? isInternalBytecodeSourceUrl(asFrame[4])
+              ? {
+                  type: 'INTERNAL_BYTECODE',
+                  sourceUrl: asFrame[4],
+                  line1Based: Number.parseInt(asFrame[5], 10),
+                  virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+                }
+              : {
+                  type: 'BYTECODE',
+                  sourceUrl: asFrame[4],
+                  line1Based: Number.parseInt(asFrame[5], 10),
+                  virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+                }
+            : {
+                type: 'SOURCE',
+                sourceUrl: asFrame[4],
+                line1Based: Number.parseInt(asFrame[5], 10),
+                column1Based: Number.parseInt(asFrame[6], 10),
+              },
     };
   }
   const asSkipped = line.match(RE_SKIPPED);
@@ -99,7 +121,7 @@ function parseLine(line: string): ?HermesStackEntry {
 
 module.exports = function parseHermesStack(stack: string): HermesParsedStack {
   const lines = stack.split(/\n/);
-  let entries = [];
+  let entries: Array<HermesStackEntryFrame | HermesStackEntrySkipped> = [];
   let lastMessageLine = -1;
   for (let i = 0; i < lines.length; ++i) {
     const line = lines[i];
@@ -111,6 +133,11 @@ module.exports = function parseHermesStack(stack: string): HermesParsedStack {
       entries.push(entry);
       continue;
     }
+    if (RE_COMPONENT_NO_STACK.test(line)) {
+      // Skip component stacks without source location.
+      // TODO: This will not be displayed, not sure how to handle it.
+      continue;
+    }
     // No match - we're still in the message
     lastMessageLine = i;
     entries = [];

package/Libraries/Core/Devtools/symbolicateStackTrace.js

@@ -1,25 +1,20 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
  *
  * @format
- * @flow
+ * @flow strict
  */
 
 'use strict';
 
-const getDevServer = require('./getDevServer');
-
-import NativeSourceCode from '../../NativeModules/specs/NativeSourceCode';
-
-// Avoid requiring fetch on load of this module; see symbolicateStackTrace
-let fetch;
-
 import type {StackFrame} from '../NativeExceptionsManager';
 
-export type CodeFrame = $ReadOnly<{|
+const getDevServer = require('./getDevServer');
+
+export type CodeFrame = $ReadOnly<{
   content: string,
   location: ?{
     row: number,
@@ -27,67 +22,27 @@ export type CodeFrame = $ReadOnly<{|
     ...
   },
   fileName: string,
-|}>;
+}>;
 
-export type SymbolicatedStackTrace = $ReadOnly<{|
+export type SymbolicatedStackTrace = $ReadOnly<{
   stack: Array<StackFrame>,
   codeFrame: ?CodeFrame,
-|}>;
-
-function isSourcedFromDisk(sourcePath: string): boolean {
-  return !/^http/.test(sourcePath) && /[\\/]/.test(sourcePath);
-}
+}>;
 
 async function symbolicateStackTrace(
   stack: Array<StackFrame>,
+  extraData?: mixed,
 ): Promise<SymbolicatedStackTrace> {
-  // RN currently lazy loads whatwg-fetch using a custom fetch module, which,
-  // when called for the first time, requires and re-exports 'whatwg-fetch'.
-  // However, when a dependency of the project tries to require whatwg-fetch
-  // either directly or indirectly, whatwg-fetch is required before
-  // RN can lazy load whatwg-fetch. As whatwg-fetch checks
-  // for a fetch polyfill before loading, it will in turn try to load
-  // RN's fetch module, which immediately tries to import whatwg-fetch AGAIN.
-  // This causes a circular require which results in RN's fetch module
-  // exporting fetch as 'undefined'.
-  // The fix below postpones trying to load fetch until the first call to symbolicateStackTrace.
-  // At that time, we will have either global.fetch (whatwg-fetch) or RN's fetch.
-  if (!fetch) {
-    fetch = global.fetch || require('../../Network/fetch').fetch;
-  }
-
   const devServer = getDevServer();
   if (!devServer.bundleLoadedFromServer) {
-    throw new Error('Bundle was not loaded from the packager');
-  }
-
-  let stackCopy = stack;
-
-  const {scriptURL} = NativeSourceCode.getConstants();
-  if (scriptURL) {
-    let foundInternalSource: boolean = false;
-    stackCopy = stack.map((frame: StackFrame) => {
-      if (frame.file == null) {
-        return frame;
-      }
-
-      // If the sources exist on disk rather than appearing to come from the packager,
-      // replace the location with the packager URL until we reach an internal source
-      // which does not have a path (no slashes), indicating a switch from within
-      // the application to a surrounding debugging environment.
-      if (!foundInternalSource && isSourcedFromDisk(frame.file)) {
-        // Copy frame into new object and replace 'file' property
-        return {...frame, file: scriptURL};
-      }
-
-      foundInternalSource = true;
-      return frame;
-    });
+    throw new Error('Bundle was not loaded from Metro.');
   }
 
+  // Lazy-load `fetch` until the first symbolication call to avoid circular requires.
+  const fetch = global.fetch ?? require('../../Network/fetch');
   const response = await fetch(devServer.url + 'symbolicate', {
     method: 'POST',
-    body: JSON.stringify({stack: stackCopy}),
+    body: JSON.stringify({stack, extraData}),
   });
   return await response.json();
 }

package/Libraries/Core/ExceptionsManager.js

@@ -1,17 +1,16 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
  *
  * @format
- * @flow strict-local
+ * @flow strict
  */
 
 'use strict';
 
-import type {ExtendedError} from './Devtools/parseErrorStack';
-import * as LogBoxData from '../LogBox/Data/LogBoxData';
+import type {ExtendedError} from './ExtendedError';
 import type {ExceptionData} from './NativeExceptionsManager';
 
 class SyntheticError extends Error {
@@ -23,6 +22,12 @@ type ExceptionDecorator = ExceptionData => ExceptionData;
 let userExceptionDecorator: ?ExceptionDecorator;
 let inUserExceptionDecorator = false;
 
+// This string is used to decorate an ExtendedError with extra data in select usecases.
+// Note that data passed using this method should be strictly contained,
+// as data that's not serializable/too large may cause issues with passing the error to the native code.
+// TODO(T204185517): We should use a Symbol for this, but jsi through jsc doesn't support it yet.
+const decoratedExtraDataKey = 'RN$ErrorExtraDataKey';
+
 /**
  * Allows the app to add information to the exception report before it is sent
  * to native. This API is not final.
@@ -57,93 +62,79 @@ function reportException(
   isFatal: boolean,
   reportToConsole: boolean, // only true when coming from handleException; the error has not yet been logged
 ) {
-  const NativeExceptionsManager = require('./NativeExceptionsManager').default;
-  if (NativeExceptionsManager) {
-    const parseErrorStack = require('./Devtools/parseErrorStack');
-    const stack = parseErrorStack(e);
-    const currentExceptionID = ++exceptionID;
-    const originalMessage = e.message || '';
-    let message = originalMessage;
-    if (e.componentStack != null) {
-      message += `\n\nThis error is located at:${e.componentStack}`;
-    }
-    const namePrefix = e.name == null || e.name === '' ? '' : `${e.name}: `;
-
-    if (!message.startsWith(namePrefix)) {
-      message = namePrefix + message;
-    }
-
-    message =
-      e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
-
-    const isHandledByLogBox = e.forceRedbox !== true;
-
-    const data = preprocessException({
-      message,
-      originalMessage: message === originalMessage ? null : originalMessage,
-      name: e.name == null || e.name === '' ? null : e.name,
-      componentStack:
-        typeof e.componentStack === 'string' ? e.componentStack : null,
-      stack,
-      id: currentExceptionID,
-      isFatal,
-      extraData: {
-        jsEngine: e.jsEngine,
-        rawStack: e.stack,
+  const parseErrorStack = require('./Devtools/parseErrorStack');
+  const stack = parseErrorStack(e?.stack);
+  const currentExceptionID = ++exceptionID;
+  const originalMessage = e.message || '';
+  let message = originalMessage;
+  if (e.componentStack != null) {
+    message += `\n\nThis error is located at:${e.componentStack}`;
+  }
+  const namePrefix = e.name == null || e.name === '' ? '' : `${e.name}: `;
 
-        // Hack to hide native redboxes when in the LogBox experiment.
-        // This is intentionally untyped and stuffed here, because it is temporary.
-        suppressRedBox: isHandledByLogBox,
-      },
-    });
+  if (!message.startsWith(namePrefix)) {
+    message = namePrefix + message;
+  }
 
-    if (reportToConsole) {
-      // we feed back into console.error, to make sure any methods that are
-      // monkey patched on top of console.error are called when coming from
-      // handleException
-      console.error(data.message);
-    }
+  message =
+    e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
 
-    if (isHandledByLogBox) {
-      LogBoxData.addException({
-        ...data,
-        isComponentError: !!e.isComponentError,
-      });
-    }
+  // $FlowFixMe[unclear-type]
+  const extraData: Object = {
+    // $FlowFixMe[incompatible-use] we can't define a type with a Symbol-keyed field in flow
+    ...e[decoratedExtraDataKey],
+    jsEngine: e.jsEngine,
+    rawStack: e.stack,
+  };
+  if (e.cause != null && typeof e.cause === 'object') {
+    extraData.stackSymbols = e.cause.stackSymbols;
+    extraData.stackReturnAddresses = e.cause.stackReturnAddresses;
+    extraData.stackElements = e.cause.stackElements;
+  }
 
-    NativeExceptionsManager.reportException(data);
+  const data = preprocessException({
+    message,
+    originalMessage: message === originalMessage ? null : originalMessage,
+    name: e.name == null || e.name === '' ? null : e.name,
+    componentStack:
+      typeof e.componentStack === 'string' ? e.componentStack : null,
+    stack,
+    id: currentExceptionID,
+    isFatal,
+    extraData,
+  });
 
-    if (__DEV__) {
-      if (e.preventSymbolication === true) {
-        return;
-      }
-      const symbolicateStackTrace = require('./Devtools/symbolicateStackTrace');
-      symbolicateStackTrace(stack)
-        .then(({stack: prettyStack}) => {
-          if (prettyStack) {
-            NativeExceptionsManager.updateExceptionMessage(
-              data.message,
-              prettyStack,
-              currentExceptionID,
-            );
-          } else {
-            throw new Error('The stack is null');
-          }
-        })
-        .catch(error => {
-          console.log('Unable to symbolicate stack trace: ' + error.message);
-        });
-    }
-  } else if (reportToConsole) {
+  if (reportToConsole) {
     // we feed back into console.error, to make sure any methods that are
     // monkey patched on top of console.error are called when coming from
     // handleException
-    console.error(e);
+    console.error(data.message);
+  }
+
+  if (__DEV__) {
+    const LogBox = require('../LogBox/LogBox').default;
+    LogBox.addException({
+      ...data,
+      isComponentError: !!e.isComponentError,
+    });
+  } else if (isFatal || e.type !== 'warn') {
+    const NativeExceptionsManager =
+      require('./NativeExceptionsManager').default;
+    if (NativeExceptionsManager) {
+      if (isFatal) {
+        if (global.RN$hasHandledFatalException?.()) {
+          return;
+        }
+        global.RN$notifyOfFatalException?.();
+      }
+      NativeExceptionsManager.reportException(data);
+    }
   }
 }
 
-declare var console: typeof console & {
-  _errorOriginal: typeof console.error,
+declare var console: {
+  error: (...data: $ReadOnlyArray<mixed>) => void,
+  _errorOriginal: (...data: $ReadOnlyArray<mixed>) => void,
   reportErrorsAsExceptions: boolean,
   ...
 };
@@ -156,31 +147,43 @@ let inExceptionHandler = false;
  * Logs exceptions to the (native) console and displays them
  */
 function handleException(e: mixed, isFatal: boolean) {
-  let error: Error;
-  if (e instanceof Error) {
-    error = e;
-  } else {
-    // Workaround for reporting errors caused by `throw 'some string'`
-    // Unfortunately there is no way to figure out the stacktrace in this
-    // case, so if you ended up here trying to trace an error, look for
-    // `throw '<error message>'` somewhere in your codebase.
-    error = new SyntheticError(e);
-  }
-  try {
-    inExceptionHandler = true;
-    reportException(error, isFatal, /*reportToConsole*/ true);
-  } finally {
-    inExceptionHandler = false;
+  // TODO(T196834299): We should really use a c++ turbomodule for this
+  const reportToConsole = true;
+  if (
+    !global.RN$handleException ||
+    !global.RN$handleException(e, isFatal, reportToConsole)
+  ) {
+    let error: Error;
+    if (e instanceof Error) {
+      error = e;
+    } else {
+      // Workaround for reporting errors caused by `throw 'some string'`
+      // Unfortunately there is no way to figure out the stacktrace in this
+      // case, so if you ended up here trying to trace an error, look for
+      // `throw '<error message>'` somewhere in your codebase.
+      error = new SyntheticError(e);
+    }
+    try {
+      inExceptionHandler = true;
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+       * parameters */
+      // $FlowFixMe[incompatible-call]
+      reportException(error, isFatal, reportToConsole);
+    } finally {
+      inExceptionHandler = false;
+    }
   }
 }
 
-function reactConsoleErrorHandler() {
+/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
+ * LTI update could not be added via codemod */
+function reactConsoleErrorHandler(...args) {
   // bubble up to any original handlers
-  console._errorOriginal.apply(console, arguments);
+  console._errorOriginal(...args);
   if (!console.reportErrorsAsExceptions) {
     return;
   }
-  if (inExceptionHandler) {
+  if (inExceptionHandler || global.RN$inExceptionHandler?.()) {
     // The fundamental trick here is that are multiple entry point to logging errors:
     // (see D19743075 for more background)
     //
@@ -205,37 +208,49 @@ function reactConsoleErrorHandler() {
     // Throwing an uncaught exception:
     // 1. exception thrown
     // 2. picked up by handleException
-    // 3. should be send to console.error (not console._errorOriginal, as DevTools might have patched _later_ and it needs to send it to Metro)
+    // 3. should be sent to console.error (not console._errorOriginal, as DevTools might have patched _later_ and it needs to send it to Metro)
     // 4. that _might_ bubble again to the `reactConsoleErrorHandle` defined here
     //    -> should not handle exception _again_, to avoid looping / showing twice (this code branch)
     // 5. should still bubble up to original console (which might either be console.log, or the DevTools handler in case that one patched _earlier_)
     return;
   }
 
-  if (arguments[0] && arguments[0].stack) {
+  let error;
+
+  const firstArg = args[0];
+  if (firstArg?.stack) {
     // reportException will console.error this with high enough fidelity.
-    reportException(
-      arguments[0],
-      /* isFatal */ false,
-      /*reportToConsole*/ false,
-    );
+    error = firstArg;
   } else {
     const stringifySafe = require('../Utilities/stringifySafe').default;
-    const str = Array.prototype.map
-      .call(arguments, value =>
-        typeof value === 'string' ? value : stringifySafe(value),
-      )
-      .join(' ');
-
-    if (str.slice(0, 9) === 'Warning: ') {
+    if (typeof firstArg === 'string' && firstArg.startsWith('Warning: ')) {
       // React warnings use console.error so that a stack trace is shown, but
       // we don't (currently) want these to show a redbox
       // (Note: Logic duplicated in polyfills/console.js.)
       return;
     }
-    const error: ExtendedError = new SyntheticError(str);
+    const message = args
+      .map(arg => (typeof arg === 'string' ? arg : stringifySafe(arg)))
+      .join(' ');
+
+    error = new SyntheticError(message);
     error.name = 'console.error';
-    reportException(error, /* isFatal */ false, /*reportToConsole*/ false);
+  }
+
+  const isFatal = false;
+  const reportToConsole = false;
+  if (
+    !global.RN$handleException ||
+    !global.RN$handleException(error, isFatal, reportToConsole)
+  ) {
+    reportException(
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for this
+       * parameters */
+      // $FlowFixMe[incompatible-call]
+      error,
+      isFatal,
+      reportToConsole,
+    );
   }
 }
 
@@ -259,6 +274,7 @@ function installConsoleErrorReporter() {
 }
 
 module.exports = {
+  decoratedExtraDataKey,
   handleException,
   installConsoleErrorReporter,
   SyntheticError,