react-native: console.log commands are not shown their code line locations

This is fixed by https://github.com/facebook/react-native/pull/26883

That diff will revert this back to showing “YellowBox.js”:

This will stay the case until Chrome exposes a way for us to ignore our wrapping frame (see here).

Until then, if you want to see the true frame, you can blackbox YellowBox.js (or any script) and Chrome will know to skip that frame:

Note: The regexes to use are /YellowBox\.js$ and /setUpDeveloperTools\.js$

Note: Notice that App.js is referenced here instead of YellowBox.js

You can read more about Chrome Blackboxing here

I also use Chrome Debugger tools, It feels simpler… if this decision can be discussed, count my vote for allowing to see logs like before without having to install React DevTools.

This is fixed by #26883

Thanks for the support, like @acoutts said this fixed the issue. We waiting for merge.

Closing the issue for fixed, have a great day you all, bugless coding ! 🍺

Sorry for my ignorance, but how do you apply the patch? Well for now I just manually changed the file.

Manually modify the react native core file in node_modules as per the commit here: https://github.com/facebook/react-native/pull/26883/commits/77acfd74b6324c651e814c4a1e032471952dfce2

This is fixed by #26883

I just applied this patch and chrome console logs work again for me and it’s showing the correct files/ line numbers as before.

I’m not sure why and how it’s happening but it would be more better to work like other version.

My takeaway from this is that the current default is probably not working out very well for folks, so I’ll change it (off instead of on). Sorry for the inconvenience.

You should be able to disable it in the general settings.

React component authors have often requested a way to log warnings that include the React “component stack”. DevTools now provides an option to automatically append this information to warnings (console.warn) and errors (console.error). It can be disabled in the general settings panel:

I was tracking logs on Google Chrome Debugger, not React Devtools, so there is no way to disable such as you mention it. But anyway, like @acoutts said when I try to devtools I got incompatible errors.

I’m getting the same result in my console with the newer versions of RN.

The fix was merged, we went with a strategy that was a bit better than the original patch tested above so please check it out and let me know if you have any questions https://github.com/facebook/react-native/commit/42ac240bceb104474494c6007df0089baec00f7a

I think there’s a misunderstanding.

Could it be that console.logs are being eaten by the thing that sends them to Metro? So then it wouldn’t be React DevTools-related at all.

In that case ideally the fix would be to somehow detect if we’re in a “rich console” environment like Chrome or not. When we are, don’t hijack console to send logs to Metro.

A possible way to detect that could be to check whether console methods are native or RN polyfill. Maybe by toString-ing them. Or by checking for some Chrome specific property on console. Need to make sure the fix doesn’t give a false positive for Hermes.

Thanks @bvaughn. I think most of the confusion comes from most people not using react devtools but just using Chrome (the thing that opens by default when you enable debugging).

0.61.3 - Still shows setUpDeveloperTools.js:73 … I was with the idea that the fix was already merged for this release, did I miss something?

It will be merged when it’s ready. Likely next week.

Checking whether console is native or not and skipping the Metro logging setup makes sense to me. Do you wanna send a PR for that?

Follow up clarification question for @ezranbayantemur @ledzep9012 etc: Why was the “before” behavior of showing YellowBox.js (already a React Native console override) preferable to the new location of showing the DevTools backend? Neither is the original place the error/warning was logged.

This is probably due to the way we wrap console methods to add React component stacks. I’m not sure whether Chrome exposes a way to manipulate the call site attribution for logs. cc @bvaughn

@motiz88 It does not, although I did open a discussion issue about this type of thing: https://github.com/whatwg/console/issues/163

It got a little attention initially but seems to have fizzled 😞

I’m not sure why and how it’s happening but it would be more better to work like other version.

@ezranbayantemur @motiz88 This is a React DevTools v4 feature, so it would be expected to impact RN v61+.

You should be able to disable it in the general settings.

React component authors have often requested a way to log warnings that include the React “component stack”. DevTools now provides an option to automatically append this information to warnings (console.warn) and errors (console.error).

It can be disabled in the general settings panel: