[POC] Better debugging stack traces

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')} />

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) {

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

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,

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

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);