Use Metro support for auto-collapsing internal stack frames (facebook…

…#25839)

Summary:
Pull Request resolved: facebook#25839

Changes `ExceptionsManager` to respect the `collapse` field in each symbolicated stack frame returned from Metro, in preference to the client-side regex. This is ultimately driven by a Metro config option (now also set in the RN new project template). Note that the client-side regex is intentionally ignored for any frame where `collapse` is present ( = all of them if using the latest Metro).

Also updates the client-side regex to match the new renderer paths.

This is part of a redesign of work done originally in facebook#24662; we will eventually remove the client-side regex from RN.

Reviewed By: cpojer

Differential Revision: D16500277

fbshipit-source-id: 557f93129d334b719200dc8603cc2345ffb45102

Libraries/Core/ExceptionsManager.js

@@ -12,9 +12,12 @@
 
 import type {ExtendedError} from './Devtools/parseErrorStack';
 
+// NOTE: Deprecated in favor of driving this from the symbolication endpoint
+// instead.
+// See Metro config option `symbolicator.customizeFrame`.
 const INTERNAL_CALLSITES_REGEX = new RegExp(
   [
-    '/Libraries/Renderer/oss/ReactNativeRenderer-dev\\.js$',
+    '/Libraries/Renderer/implementations/.+\\.js$',
     '/Libraries/BatchedBridge/MessageQueue\\.js$',
   ].join('|'),
 );
@@ -50,11 +53,15 @@ function reportException(e: ExtendedError, isFatal: boolean) {
       symbolicateStackTrace(stack)
         .then(prettyStack => {
           if (prettyStack) {
-            const stackWithoutInternalCallsites = prettyStack.filter(
-              frame =>
+            const stackWithoutInternalCallsites = prettyStack.filter(frame => {
+              if (typeof frame.collapse === 'boolean') {
+                return !frame.collapse;
+              }
+              return (
                 frame.file &&
-                frame.file.match(INTERNAL_CALLSITES_REGEX) === null,
-            );
+                frame.file.match(INTERNAL_CALLSITES_REGEX) === null
+              );
+            });
             NativeExceptionsManager.updateExceptionMessage(
               message,
               stackWithoutInternalCallsites,

Libraries/Core/NativeExceptionsManager.js

@@ -18,6 +18,7 @@ export type StackFrame = {|
   file: string,
   lineNumber: number,
   methodName: string,
+  collapse?: boolean,
 |};
 
 export type ExceptionData = {

Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec.h

@@ -912,6 +912,7 @@ namespace JS {
       NSString *file() const;
       double lineNumber() const;
       NSString *methodName() const;
+      folly::Optional<bool> collapse() const;
 
       StackFrame(NSDictionary *const v) : _v(v) {}
     private:
@@ -2649,6 +2650,11 @@ inline NSString *JS::NativeExceptionsManager::StackFrame::methodName() const
   id const p = _v[@"methodName"];
   return RCTBridgingToString(p);
 }
+inline folly::Optional<bool> JS::NativeExceptionsManager::StackFrame::collapse() const
+{
+  id const p = _v[@"collapse"];
+  return RCTBridgingToOptionalBool(p);
+}
 
 inline NSString *JS::NativeExceptionsManager::ExceptionData::message() const
 {

template/metro.config.js

@@ -5,7 +5,22 @@
  * @format
  */
 
+const INTERNAL_CALLSITES_REGEX = new RegExp(
+  [
+    '/Libraries/Renderer/implementations/.+\\.js$',
+    '/Libraries/BatchedBridge/MessageQueue\\.js$',
+  ].join('|'),
+);
+
 module.exports = {
+  symbolicator: {
+    customizeFrame: frame => {
+      const collapse = Boolean(
+        frame.file && INTERNAL_CALLSITES_REGEX.test(frame.file),
+      );
+      return {collapse};
+    },
+  },
   transformer: {
     getTransformOptions: async () => ({
       transform: {