Fix Component Stacks for IE and Native Classes in Safari

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/shared/ReactComponentStackFrame.js

@@ -75,7 +75,7 @@ export function describeNativeComponentFrame(
     }
   }
 
-  const control = Error();
+  let control;
 
   reentry = true;
   let previousDispatcher;
@@ -90,7 +90,9 @@ export function describeNativeComponentFrame(
     // This should throw.
     if (construct) {
       // Something should be setting the props in the constructor.
-      const Fake = function() {};
+      const Fake = function() {
+        return Error();
+      };
       // $FlowFixMe
       Object.defineProperty(Fake.prototype, 'props', {
         set: function() {
@@ -100,16 +102,21 @@ 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.
+        control = Reflect.construct(Fake, []);
         Reflect.construct(fn, [], Fake);
       } else {
+        control = Error();
         fn.call(new Fake());
       }
     } else {
+      control = Error();
       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 +134,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;
         }
       }
     }