From 938dfcb18b0c5f716b55c6a094ea638294e72d1d Mon Sep 17 00:00:00 2001
From: Ben Alpert <balpert@fb.com>
Date: Sat, 4 Apr 2015 16:00:00 -0700
Subject: [PATCH] [POC] Better debugging stack traces

I had an idea: what if our stack traces looked more like this so you don't just have 30 frames inside React and then a top-level render call, which is the typical situation nowadays?

![image](https://cloud.githubusercontent.com/assets/6820/6995020/aacf7f9e-dae2-11e4-9959-d4914cae5123.png)

Turns out we can do this with a small hack. Each time we create an element, we store away a function that just calls its argument:

```js
var foo = React.createElementDebug(function element_Foo(x) { x(); }, Foo, ...);
```

then when we go to mount the component, we call this function with the mount code as argument so that it appears on the stack.

This is a little crazy and probably slow, but could make development nicer. You can't inspect the props (e.g., `a`, `b`, `c` here) but if we had the function capture those vars I think you could.
---
 examples/quadratic/example.js                | 18 ++++++++++++++++++
 src/browser/ui/React.js                      |  5 +++++
 src/classic/element/ReactElement.js          |  6 +++++-
 src/classic/element/ReactElementValidator.js |  6 ++++++
 src/core/ReactReconciler.js                  | 16 +++++++++++++++-
 vendor/fbtransform/transforms/react.js       | 13 ++++++++++++-
 6 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/examples/quadratic/example.js b/examples/quadratic/example.js
index 1be6a8a1cda..156427ae282 100644
--- a/examples/quadratic/example.js
+++ b/examples/quadratic/example.js
@@ -1,3 +1,20 @@
+var Foo = React.createClass({
+  render: function() {
+    debugger;
+    return <div>{this.props.children}</div>;
+  }
+});
+
+var Z = React.createClass({
+  render: function() {
+    return <Foo>
+      a: {this.props.a},
+      b: {this.props.b},
+      c: {this.props.c}
+    </Foo>;
+  }
+});
+
 var QuadraticCalculator = React.createClass({
   getInitialState: function() {
     return {
@@ -31,6 +48,7 @@ var QuadraticCalculator = React.createClass({
           <em>ax</em><sup>2</sup> + <em>bx</em> + <em>c</em> = 0
         </strong>
         <h4>Solve for <em>x</em>:</h4>
+        <Z a={a} b={b} c={c} />
         <p>
           <label>
             a: <input type="number" value={a} onChange={this.handleInputChange.bind(null, 'a')} />
diff --git a/src/browser/ui/React.js b/src/browser/ui/React.js
index ccead4fee02..098b786eab3 100644
--- a/src/browser/ui/React.js
+++ b/src/browser/ui/React.js
@@ -38,11 +38,15 @@ var warning = require('warning');
 ReactDefaultInjection.inject();
 
 var createElement = ReactElement.createElement;
+var createElementDebug = function(stackHelper, ...args) {
+  return ReactElement.createElement.apply(ReactElement, args);
+};
 var createFactory = ReactElement.createFactory;
 var cloneElement = ReactElement.cloneElement;
 
 if (__DEV__) {
   createElement = ReactElementValidator.createElement;
+  createElementDebug = ReactElementValidator.createElementDebug;
   createFactory = ReactElementValidator.createFactory;
   cloneElement = ReactElementValidator.cloneElement;
 }
@@ -61,6 +65,7 @@ var React = {
   PropTypes: ReactPropTypes,
   createClass: ReactClass.createClass,
   createElement: createElement,
+  createElementDebug: createElementDebug,
   cloneElement: cloneElement,
   createFactory: createFactory,
   createMixin: function(mixin) {
diff --git a/src/classic/element/ReactElement.js b/src/classic/element/ReactElement.js
index bfc18a0dabb..2fbd5361b12 100644
--- a/src/classic/element/ReactElement.js
+++ b/src/classic/element/ReactElement.js
@@ -108,7 +108,11 @@ var ReactElement = function(type, key, ref, owner, context, props) {
     // an external backing store so that we can freeze the whole object.
     // This can be replaced with a WeakMap once they are implemented in
     // commonly used development environments.
-    this._store = {props: props, originalProps: assign({}, props)};
+    this._store = {
+      props: props,
+      originalProps: assign({}, props),
+      stackHelper: null
+    };
 
     // To make comparing ReactElements easier for testing purposes, we make
     // the validation flag non-enumerable (where possible, which should
diff --git a/src/classic/element/ReactElementValidator.js b/src/classic/element/ReactElementValidator.js
index bb1f21066ad..477dac67a0a 100644
--- a/src/classic/element/ReactElementValidator.js
+++ b/src/classic/element/ReactElementValidator.js
@@ -423,6 +423,12 @@ var ReactElementValidator = {
     return element;
   },
 
+  createElementDebug: function(stackHelper, ...args) {
+    var element = ReactElementValidator.createElement.apply(null, args);
+    element._store.stackHelper = stackHelper;
+    return element;
+  },
+
   createFactory: function(type) {
     var validatedFactory = ReactElementValidator.createElement.bind(
       null,
diff --git a/src/core/ReactReconciler.js b/src/core/ReactReconciler.js
index 8911877d80e..51ba3ac7868 100644
--- a/src/core/ReactReconciler.js
+++ b/src/core/ReactReconciler.js
@@ -12,6 +12,7 @@
 'use strict';
 
 var ReactRef = require('ReactRef');
+var ReactElement = require('ReactElement');
 var ReactElementValidator = require('ReactElementValidator');
 
 /**
@@ -35,7 +36,20 @@ var ReactReconciler = {
    * @internal
    */
   mountComponent: function(internalInstance, rootID, transaction, context) {
-    var markup = internalInstance.mountComponent(rootID, transaction, context);
+    var markup;
+    if (__DEV__) {
+      var el = internalInstance._currentElement;
+      if (el._store && el._store.stackHelper) {
+        el._store.stackHelper(function() {
+          markup =
+            internalInstance.mountComponent(rootID, transaction, context);
+        });
+      } else {
+        markup = internalInstance.mountComponent(rootID, transaction, context);
+      }
+    } else {
+      markup = internalInstance.mountComponent(rootID, transaction, context);
+    }
     if (__DEV__) {
       ReactElementValidator.checkAndWarnForMutatedProps(
         internalInstance._currentElement
diff --git a/vendor/fbtransform/transforms/react.js b/vendor/fbtransform/transforms/react.js
index 8e93f278794..80f1d41deab 100644
--- a/vendor/fbtransform/transforms/react.js
+++ b/vendor/fbtransform/transforms/react.js
@@ -54,8 +54,19 @@ function visitReactTag(traverse, object, path, state) {
     throw new Error('Namespace tags are not supported. ReactJSX is not XML.');
   }
 
+  var name;
+  if (nameObject.type === Syntax.JSXIdentifier) {
+    name = nameObject.name;
+  } else {
+    name = state.g.source.slice(nameObject.range[0], nameObject.range[1])
+      .replace(/[^a-z0-9]+/gi, '_');
+  }
+
   // We assume that the React runtime is already in scope
-  utils.append('React.createElement(', state);
+  utils.append(
+    'React.createElementDebug(function element_' + name + '(x){x();},',
+    state
+  );
 
   if (nameObject.type === Syntax.JSXIdentifier && isTagName(nameObject.name)) {
     utils.append('"' + nameObject.name + '"', state);