Include component stack in invariants

[gaearon]

IIRC we didn't include it because it was DEV-only. But it's not anymore.
Maybe let's start including it?

Errors are often more prominent than warnings, and it would be great to have this info in both.

[Ethan-Arrowood]

I handled a similar issue #11208 before. Could I try this one? I'll try to find what these 'invariants' are.

[Ethan-Arrowood]

Sections of code like this?

[Ethan-Arrowood]

https://github.com/facebook/react/blob/7d27851bf4aa8129276614b62edf9ade4aaa4cbd/packages/react-dom/src/client/ReactDOM.js#L657-L710

Using the code from my previous issue:

var {getCurrentFiberStackAddendum} = require('ReactDebugCurrentFiber');
invariant(
    isValidContainer(container),
    'Target container is not a DOM element.%s',
    getCurrentFiberStackAddendum() || ''
);

Would I also want to add the getCurrentFiberStackAddendum() || '' to the warnings on lines 691 & 699?

[gaearon]

This is top level rendering so component stack wouldn't be useful there (you're not inside a component). I was thinking about these:

https://github.com/facebook/react/blob/7d27851bf4aa8129276614b62edf9ade4aaa4cbd/packages/react-reconciler/src/ReactChildFiber.js#L162-L164

https://github.com/facebook/react/blob/7d27851bf4aa8129276614b62edf9ade4aaa4cbd/packages/react-reconciler/src/ReactFiber.js#L342-L346

[Ethan-Arrowood]

Okay sweet. I'm down to implement the component stack in each of these. What other files should I implement this change in? Is there an easy way to determine which are inside a component? Should I implement the component stack in every invariant call in these files?

[gaearon]

Is there an easy way to determine which are inside a component?

Look at what the message says. Look at examples of this invariant in tests. See if it's something that happens inside a component or not.

[Ethan-Arrowood]

Gotcha. I noticed some invariants already have the component stack on the __DEV__ addendum (Lines 157 and 168):
https://github.com/facebook/react/blob/7d27851bf4aa8129276614b62edf9ade4aaa4cbd/packages/react-reconciler/src/ReactChildFiber.js#L153-L171

Should I remove it from the __DEV__ and put it directly on the invariant:

invariant(
      false,
      'Objects are not valid as a React child (found: %s).%s.%s',
      Object.prototype.toString.call(newChild) === '[object Object]'
        ? 'object with keys {' + Object.keys(newChild).join(', ') + '}'
        : newChild,
      addendum,
      getCurrentFiberStackAddendum() || '',
 );

[gaearon]

Should I remove it from the DEV and put it directly on the invariant:

That sounds reasonable.

[bl00mber]

Currently getCurrentFiberStackInDev() is DEV-only 😯
Is this issue still relevant?

[sophiebits]

We already log the component stack to the console along with an error (see discussion on #18315). So I don't think there is any action required now. (@gaearon lmk if I'm missing something)