Add component stacks to (almost) all warnings #17586
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 1569cad:
|
gaearon
force-pushed
the
stacks-everywhere
branch
from
16b5120
to
1569cad
Compare
Details of bundled changes.Comparing: 12c0004...1569cad react
react-dom
react-noop-renderer
react-reconciler
react-art
react-test-renderer
react-cache
react-native-renderer
create-subscription
ReactDOM: size: 0.0%, gzip: 0.0% React: size: 0.0%, gzip: 0.0% Size changes (stable) |
Details of bundled changes.Comparing: 12c0004...1569cad react
react-dom
react-test-renderer
react-native-renderer
react-interactions
react-noop-renderer
react-art
react-cache
react-reconciler
create-subscription
ReactDOM: size: 0.0%, gzip: 🔺+0.1% React: size: 0.0%, gzip: 🔺+0.1% Size changes (experimental) |
|
There's a very minor bundle size for non-React-using entry points increase due to more code paths pulling in the glue code that's only used in DEV. I'll fix that in a follow up that does this at the build time level. |
bvaughn
approved these changes
Dec 12, 2019
Closed
NMinhNguyen
referenced
this pull request
in enzymejs/react-shallow-renderer
Jan 29, 2020
Merged
This was referenced Mar 6, 2020
This was referenced Sep 25, 2024
This was referenced Sep 28, 2024
This was referenced Sep 29, 2024
This was referenced Oct 4, 2024
This was referenced Oct 5, 2024
This was referenced Oct 12, 2024
This was referenced Oct 25, 2024
This was referenced Oct 26, 2024
This was referenced Oct 27, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
As the title says. This adds component stacks to all warnings except the ones where a package doesn't have peer or dep on React (such as
react-is). Concretely, we switch over fromwarningWithoutStacktowarning, and fromlowPriorityWarningWithoutStacktolowPriorityWarning, wherever possible. Tests are adjusted accordingly.There are three reasons for this.
console.errorandconsole.warnin the source code, and having a Babel plugin call the wrapper with extra logic. So it's inconvenient to have this distinction.What if the stack is misleading or not concrete enough? For example, maybe we have a better stack we want to pass. We do the same thing DevTools does in that case. If the last argument already looks like a component stack, we don't append an extra one.
Notably, this adds component stacks to SSR hydration mismatch warnings. They can still sometimes be misleading but it's better than nothing.
Some tests still have
{withoutStack: true}. This is not because we can't emit them, but because in those particular tests we're just not inside of a tree. So we're keeping the assertion mechanism for that to avoid regressions.In a follow-up, I will codemod to
console.error/console.warncalls and a Babel plugin for the wrappers. This will also allow us to choose the right version of the wrapper depending on whether a package depends on React or not.