Show component stack in PropTypes warnings #6771

Merged
merged 1 commit into from May 15, 2016

Projects

None yet

4 participants

@spicyj
Member
spicyj commented May 14, 2016 edited

image

This works pretty well, even if you don't have source info compiled in – it falls back to annotating with owner info. The weirdest thing I noticed is that if A renders <section><B /></section> and B renders <div><C /></div> and C gives a warning, then the stack will be

in C (created by B)
in B (created by A)
in section (created by A)
in A

and makes no mention of the div that should live between B and C: it can't, because that element hasn't been created yet. I think this probably won't be too confusing in practice but I wonder if there's something we can do to make it clearer.

cc @facebook/react-core

@spicyj
Member
spicyj commented May 14, 2016

I had to track the stack because we don't know the parent hierarchy until the children are fully mounted. I wonder if we can change that.

@facebook-github-bot

@spicyj updated the pull request.

@gaearon
Member
gaearon commented May 14, 2016

Can we add onSetParent and pass the parent debugID down to the children as they are being mounted? It would never change so not too much of a hassle.

I think we should try harder to avoid relying on the stack again because this can become hard to rip out later.

@gaearon
Member
gaearon commented May 14, 2016

I think we don’t even need to pass it to the children as long as we set it right away after instantiating them but before recursing.

@spicyj
Member
spicyj commented May 14, 2016

Yes, that works out nicely. How do you like this?

@ghost
ghost commented May 14, 2016

@spicyj updated the pull request.

@gaearon
Member
gaearon commented May 14, 2016

👍

@gaearon gaearon and 1 other commented on an outdated diff May 14, 2016
src/isomorphic/devtools/ReactComponentTreeDevtool.js
@@ -78,10 +79,11 @@ var ReactComponentTreeDevtool = {
'Expected onMountComponent() to fire for the child ' +
'before its parent includes it in onSetChildren().'
);
-
- if (prevChildIDs.indexOf(nextChildID) === -1) {
- nextChild.parentID = id;
- }
+ nextChild.parentID = id;
+ // TODO: invariant(nextChild.parentID === id) makes sense but doesn't
@gaearon
gaearon May 14, 2016 Member

Can we add an invariant for the cases where we their parentId is not missing? It being missing is just a subset of cases, is it not? I mean something like invariant(nextChild.parentID == null || nextChild.parentID === id)

@spicyj
spicyj May 15, 2016 Member

Yup, done.

@spicyj spicyj merged commit 378c879 into facebook:master May 15, 2016

1 check was pending

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
@ghost
ghost commented May 15, 2016

@spicyj updated the pull request.

@zpao zpao added the semver-minor label May 16, 2016
@zpao zpao added this to the 15.y.0 milestone May 16, 2016
@zpao zpao modified the milestone: 15.y.0, 15-next Jun 1, 2016
@zpao zpao added a commit to zpao/react that referenced this pull request Jun 8, 2016
@spicyj @zpao spicyj + zpao Show component stack in PropTypes warnings (#6771)
(cherry picked from commit 378c879)
7bf9a10
@zpao zpao added a commit that referenced this pull request Jun 14, 2016
@spicyj @zpao spicyj + zpao Show component stack in PropTypes warnings (#6771)
(cherry picked from commit 378c879)
442d78a
@zpao zpao modified the milestone: 15-next, 15.2.0 Jun 14, 2016
@troydemonbreun troydemonbreun referenced this pull request Jul 5, 2016
@zpao zpao Changelog for 15.2.0
(cherry picked from commit 74c29b3 and  bc1d59e)
23cfe03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment