Adds the current stack addendum to warnings if element type is not valid

[briandeheus]

Implements #7856

[facebook-github-bot]

Thank you for your pull request. As you may know, we require contributors to sign our Contributor License Agreement, and we don't seem to have you on file and listed as active anymore. In order for us to review and merge your code, please email [email protected] with your details so we can update your status.

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[gaearon]

@spicyj Can you help me understand in which cases we need to pass topElement here, and why it is necessary in some cases?

[briandeheus]

I've tried passing on ReactCurrentOwner.current but that doesn't work since it's a ReactInstance but it expects a ReactElement. Is there any way I can get ReactElement from the ReactInstance? 🤔

[gaearon]

I’m actually not sure what it’s doing so I don’t know if it’s necessary.

[gaearon]

But for the reference, instance._currentElement is the element.

[sophiebits]

1. If a debug ID for a mounted/mounting component is available, use that and the stack will be generated by the parent hierarchy.
2. If no debug ID is available (ex: a key/proptypes warning during element creation), we have to rely on the current owner for stack info. We look up the current owner (which is mounted/mounting) and then crawl its parents.
3. The current owner is generally the parent of what we think of as the "current" component/element. So we can also pass the current element (generally the one being constructed) and that gets printed on top.

I think in my ideal world here, we would display in [unknown] (at file.js:123) when we have the location info (based on the element being constructed – this code can probably be reordered to call ReactElement.createElement first) and leave that line off and just show the parent if we don't (since in [unknown] is useless and we won't have any better display name since it isn't a string/function type).

[ghost]

@gaearon this looks great. Was just curious how ReactComponentTreeHook works. Thanks for replying!

[briandeheus]

Let me know if something needs changing and I'll gladly edit my PR.

[gaearon]

@briandeheus

Have you addressed this comment?

I think in my ideal world here, we would display in [unknown](at file.js:123) when we have the location info (based on the element being constructed – this code can probably be reordered to call ReactElement.createElement first) and leave that line off and just show the parent if we don't (since in [unknown] is useless and we won't have any better display name since it isn't a string/function type).

[briandeheus]

I'll get on it. 👍

[n3tr]

What if we reorder to call ReactElement.createElement first and pass element to getCurrentStackAddendum(element) to get stack addendum.

The output will be something like:

    in Unknown (at example.js:6)
    in Button (at example.js:12)
    in DangerButton (at example.js:25)
    in div (at example.js:24)
    in ExampleApplication (at example.js:35)

Is it good enough?

just curious about testing, the output contains line number of caller and it might be changed when edit test file. How can I test it?

-Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
-    in Unknown (at ReactElementValidator-test.js:530)
+Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). 
+    in Unknown (at ReactElementValidator-test.js:537)

edited: got it - use regex

I'm new to react code base and would like to learn, Thanks. 😃

[gaearon]

@briandeheus Would you like to finish this?

[n3tr]

Is someone still working on this?

would you mind if I create separated PR (#8495) to working on it?

[sophiebits]

Closing in favor of #8495.