react: Console log shows the wrong destination file
in my browser console, log info go wrong, it should show real console.log file and correct line info, but now it always show “react_devtools_backend.js: 4049”, link to source code show warning: "Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
- Move data fetching code or side effects to componentDidUpdate.
- If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://fb.me/react-derived-state
- Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run
npx react-codemod rename-unsafe-lifecyclesin your project source folder. Please update the following components: %s" when i disable react developer tools, it goes correctly. but it goes wrong in 4.18.0 react developer tools. and my colleagues’ chrome with react developer tools 4.17.0 is right
Note from maintainers: https://github.com/facebook/react/issues/22257#issuecomment-916174962 is a workaround until this is fixed in React DevTools
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 3
- Comments: 34 (10 by maintainers)
Hey @gaearon, we seem to also be getting this issue on regular console logs (sourcemaps mapping to react_devtools_backend.js:4049). When the react devtools extension is disabled, sourcemaps show correctly. Webpack devtool is set to ‘eval-source-map’. This seems to have happened quite recently as I don’t recall seeing this before. Let me know if you need me to provide any other info.
Left: incognito with react devtools disabled, Right: with react devtools enabled
Yes, we understand why the issue is annoying and will look into some way to resolve it.
As a temporary workaround for folks affected by this, you might try adding the
react_devtools_backend.jsscript to the browser’s “ignore list”:Chiming in here to confirm that this reported behavior is intentional– although I understand the confusion or annoyance. 😦
The “problem”
As of the version 18 release, DevTools always overrides the native console to either dim or suppress
StrictModedouble logging. (Before it only did it if you enabled a feature like component stacks.) DevTools also now overridesconsole.log(for double logging) so it’s more noticeable. (Before it only overrodeconsole.errorandconsole.warn– to add component stacks.)The major unfortunate drawback of this overriding is that it changes the location shown by the browser’s console as reported in this issue. I requested better tooling support from browsers a couple of years ago because of this, but there hasn’t been any action unfortunately: https://github.com/whatwg/console/issues/163
There is a related tc39 proposal but I don’t think it has made any progress since then.
A possible solution
One possible change we could look into making on the DevTools side to improve this default experience is to only patch console methods during
StrictModedouble render. (Even if other features like component stacks are enabled, we wouldn’t have to override theconsole.logmethod.)Right now the way this works is that DevTools eagerly patches the console APIs, and asks React to check if
StrictModeis active to know if it should also dim or suppress. Perhaps we could change this so that React called a DevTools API instead to notify when double rendering started, and then DevTools could only patchconsole.logduring a double render.cc @lunaruan
I’ve found a workaround using
console.infoinstead ofconsole.log. I hope that’s helpfulThe solution described above: https://github.com/facebook/react/issues/22257#issuecomment-915250655
Was released yesterday with DevTools version 4.19.0: https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md#4190-september-29-2021
I find it really ironic that the very same people who created this amazing library, and then also make the underlying functionality which drive hooks, can’t wrap the browser console and not lose the stack trace.
Perhaps, just don’t wrap the console at all, or find a library that does it and use it instead?
In Chrome, a workaround would be adding the script that overrides the console to the “ignore list” (right-click on the script in dev-tools and add to ignore list).
It has some drawbacks, because “ignore list” does a little more than just that, but it works nicely for me for now.
4.19.0 is finally through review which unblocks 4.19.1 from being submitted. (Not sure how long it will take them to approve it.) I’m on PTO today b’c it’s my birthday but I’ve asked if someone else on the team would submit it.
No. I have no insight into Chrome’s review process.
@guncha Your comment is missing some important context:
StrictModedouble console logging has long been controversial (see #21783). Overriding the console to dim or hide the second logged message (#22030) is the best compromise we’ve been able to come up with.still happens in version
4.22.0@bvaughn that’s understandable, no worries. Thanks for your hard work, React Dev Tools is an invaluable tool ❤️
Any ETA for 4.19. (or 4.19.1.) landing to the Chrome web store?
@JuraJuki If there were updates on this issue, they would be… on this issue. Please refrain from comments like this — they create notification noise for other people and don’t bring the conversation forward.
There’s ongoing work on this. When it’s done we’ll close the issue.
I can confirm: it seems that every
console.somethingis captured by the extension.