Fix Component Stacks for IE and Native Classes in Safari (#18575)

* Add more edge cases to fixture

Also adjust some expectations. I think the column should ideally be 1 but varies.
The Example row is one line off because it throws on the hook but should ideally be the component.
Similarly class components with constructors may have the line in the constructor.

* Account for the construct call taking a stack frame

We do this by first searching for the first different frame, then find
the same frames and then find the first different frame again.

* Throw controls

Otherwise they don't get a stack frame associated with them in IE.

* Protect against generating stacks failing

Errors while generating stacks will bubble to the root. Since this technique
is a bit sketchy, we should probably protect against it.

* Don't construct the thing that throws

Instead, we pass the prototype as the "this". It's new every time anyway.

fixtures/stacks/BabelClasses.js

@@ -0,0 +1,17 @@
+// Compile this with Babel.
+// babel --config-file ./babel.config.json BabelClasses.js --out-file BabelClasses-compiled.js --source-maps
+
+class BabelClass extends React.Component {
+  render() {
+    return this.props.children;
+  }
+}
+
+class BabelClassWithFields extends React.Component {
+  // These compile to defineProperty which can break some interception techniques.
+  props;
+  state = {};
+  render() {
+    return this.props.children;
+  }
+}

fixtures/stacks/Component.js → fixtures/stacks/Components.js

@@ -18,3 +18,13 @@ class NativeClass extends React.Component {
     return this.props.children;
   }
 }
+
+class FrozenClass extends React.Component {
+  constructor() {
+    super();
+  }
+  render() {
+    return this.props.children;
+  }
+}
+Object.freeze(FrozenClass.prototype);

fixtures/stacks/Example.js

@@ -44,12 +44,20 @@ function Example() {
           NativeClass,
           null,
           x(
-            BabelClass,
+            FrozenClass,
             null,
             x(
-              React.Suspense,
+              BabelClass,
               null,
-              x('div', null, x(Component, null, x(Throw)))
+              x(
+                BabelClassWithFields,
+                null,
+                x(
+                  React.Suspense,
+                  null,
+                  x('div', null, x(Component, null, x(Throw)))
+                )
+              )
             )
           )
         )

fixtures/stacks/babel.config.json

@@ -1,5 +1,6 @@
 {
   "plugins": [
+    ["@babel/plugin-proposal-class-properties", {"loose": false}],
     ["@babel/plugin-transform-classes", {"loose": true}]
   ]
 }

fixtures/stacks/index.html

@@ -27,25 +27,26 @@
     </div>
     <script src="../../build/node_modules/react/umd/react.production.min.js"></script>
     <script src="../../build/node_modules/react-dom/umd/react-dom.production.min.js"></script>
-    <script src="./Component.js"></script>
-    <script src="./BabelClass-compiled.js"></script>
+    <script src="./Components.js"></script>
+    <script src="./BabelClasses-compiled.js"></script>
     <script src="./Example.js"></script>
     <script>
       const container = document.getElementById("container");
       ReactDOM.render(React.createElement(Example), container);
     </script>
     <h3>The above stack should look something like this:</h3>
     <pre>
-
     at Lazy
-    at Component (/stacks/Component.js:7:50)
+    at Component (/stacks/Component.js:7:1)
     at div
     at Suspense
+    at BabelClassWithFields (/stacks/BabelClasses-compiled.js:31:31)
     at BabelClass (/stacks/BabelClass-compiled.js:13:29)
+    at FrozenClass (/stacks/Components.js:22:1)
     at NativeClass (/stacks/Component.js:16:1)
     at SuspenseList
-    at Custom Name (/stacks/Component.js:11:23)
+    at Custom Name (/stacks/Component.js:11:1)
     at ErrorBoundary (/stacks/Example.js:5:1)
-    at Example (/stacks/Example.js:33:21)</pre>
+    at Example (/stacks/Example.js:32:1)</pre>
   </body>
 </html>

packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js

@@ -2440,13 +2440,11 @@ describe('ReactErrorBoundaries', () => {
     );
   });
 
-  it('should catch errors from errors in the throw phase from errors', () => {
+  it('should protect errors from errors in the stack generation', () => {
     const container = document.createElement('div');
 
     const evilError = {
-      get message() {
-        throw new Error('gotta catch em all');
-      },
+      message: 'gotta catch em all',
       get stack() {
         throw new Error('gotta catch em all');
       },

packages/react-reconciler/src/ReactFiberComponentStack.js

@@ -59,11 +59,15 @@ function describeFiber(fiber: Fiber): string {
 }
 
 export function getStackByFiberInDevAndProd(workInProgress: Fiber): string {
-  let info = '';
-  let node = workInProgress;
-  do {
-    info += describeFiber(node);
-    node = node.return;
-  } while (node);
-  return info;
+  try {
+    let info = '';
+    let node = workInProgress;
+    do {
+      info += describeFiber(node);
+      node = node.return;
+    } while (node);
+    return info;
+  } catch (x) {
+    return '\nError generating stack: ' + x.message + '\n' + x.stack;
+  }
 }

packages/shared/ReactComponentStackFrame.js

@@ -36,10 +36,12 @@ export function describeBuiltInComponentFrame(
   if (enableComponentStackLocations) {
     if (prefix === undefined) {
       // Extract the VM specific prefix used by each line.
-      const match = Error()
-        .stack.trim()
-        .match(/\n( *(at )?)/);
-      prefix = (match && match[1]) || '';
+      try {
+        throw Error();
+      } catch (x) {
+        const match = x.stack.trim().match(/\n( *(at )?)/);
+        prefix = (match && match[1]) || '';
+      }
     }
     // We use the prefix to ensure our stacks line up with native stack frames.
     return '\n' + prefix + name;
@@ -75,7 +77,7 @@ export function describeNativeComponentFrame(
     }
   }
 
-  const control = Error();
+  let control;
 
   reentry = true;
   let previousDispatcher;
@@ -90,7 +92,9 @@ export function describeNativeComponentFrame(
     // This should throw.
     if (construct) {
       // Something should be setting the props in the constructor.
-      const Fake = function() {};
+      const Fake = function() {
+        throw Error();
+      };
       // $FlowFixMe
       Object.defineProperty(Fake.prototype, 'props', {
         set: function() {
@@ -100,16 +104,33 @@ export function describeNativeComponentFrame(
         },
       });
       if (typeof Reflect === 'object' && Reflect.construct) {
+        // We construct a different control for this case to include any extra
+        // frames added by the construct call.
+        try {
+          Reflect.construct(Fake, []);
+        } catch (x) {
+          control = x;
+        }
         Reflect.construct(fn, [], Fake);
       } else {
-        fn.call(new Fake());
+        try {
+          Fake.call();
+        } catch (x) {
+          control = x;
+        }
+        fn.call(Fake.prototype);
       }
     } else {
+      try {
+        throw Error();
+      } catch (x) {
+        control = x;
+      }
       fn();
     }
   } catch (sample) {
     // This is inlined manually because closure doesn't do it for us.
-    if (sample && typeof sample.stack === 'string') {
+    if (sample && control && typeof sample.stack === 'string') {
       // This extracts the first frame from the sample that isn't also in the control.
       // Skipping one frame that we assume is the frame that calls the two.
       const sampleLines = sample.stack.split('\n');
@@ -127,24 +148,33 @@ export function describeNativeComponentFrame(
       }
       for (; s >= 1 && c >= 0; s--, c--) {
         // Next we find the first one that isn't the same which should be the
-        // frame that called our sample function.
+        // frame that called our sample function and the control.
         if (sampleLines[s] !== controlLines[c]) {
           // In V8, the first line is describing the message but other VMs don't.
           // If we're about to return the first line, and the control is also on the same
           // line, that's a pretty good indicator that our sample threw at same line as
           // the control. I.e. before we entered the sample frame. So we ignore this result.
           // This can happen if you passed a class to function component, or non-function.
           if (s !== 1 || c !== 1) {
-            // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
-            const frame = '\n' + sampleLines[s - 1].replace(' at new ', ' at ');
-            if (__DEV__) {
-              if (typeof fn === 'function') {
-                componentFrameCache.set(fn, frame);
+            do {
+              s--;
+              c--;
+              // We may still have similar intermediate frames from the construct call.
+              // The next one that isn't the same should be our match though.
+              if (c < 0 || sampleLines[s] !== controlLines[c]) {
+                // V8 adds a "new" prefix for native classes. Let's remove it to make it prettier.
+                const frame = '\n' + sampleLines[s].replace(' at new ', ' at ');
+                if (__DEV__) {
+                  if (typeof fn === 'function') {
+                    componentFrameCache.set(fn, frame);
+                  }
+                }
+                // Return the line we found.
+                return frame;
               }
-            }
-            // Return the line we found.
-            return frame;
+            } while (s >= 1 && c >= 0);
           }
+          break;
         }
       }
     }