search

pimterry / loglevel

:ledger: Minimal lightweight logging for JavaScript, adding reliable log level methods to wrap any available console.log methods
MIT License
2.6k stars 158 forks source link

loglevel print duplicate log in React component #171

Closed rsi-yhe closed 2 years ago

rsi-yhe commented 2 years ago

Screen Shot 2021-10-08 at 11 57 03 AM Hi, I try to use loglevel in React, and seeing it print duplicate lines. The project is freshly created with create-react-app and I just added two lines of loglevel.log and console.log in the App.tsx. As you can see in chrome console, console.log printed one time and loglevel.log printed twice. I'm not sure if this is expected or I'm doing it wrong. Couldn't find any similar topic by just googling.

pimterry commented 2 years ago

I'm not aware of anything that could cause this. It's hard to debug this in more depth without a repro though. Can you share a playground or similar where I can test this behaviour myself?

rsi-yhe commented 2 years ago

https://codesandbox.io/s/empty-sun-5loi1?file=/src/App.js I put two logs inside App.js and you can see console have 2 output from loglevel Screen Shot 2021-10-12 at 9 41 20 AM

pimterry commented 2 years ago

I can reproduce this, in codesandbox but also locally by exporting that same demo.

Testing it manually with a debugger, in fact it's the console.log that's wrong here - that App() method really is called twice.

It turns out that in React v17 a recent feature hides the output of console.log during a new second rendering pass. That hides the console.log output, but not loglevel's output, which holds a reference to console.log from beforehand.

More detail available in https://github.com/facebook/react/issues/21783. This was fixed (moving the logic to React itself into React devtools, and showing the output but greyed out) in https://github.com/facebook/react/pull/22030, but it sounds like that will only be included in React v18, not v17.

I'm going to close this - loglevel is working correctly, this is a React issue.

gaearon commented 2 years ago

React 18 is out, and double logs are no longer suppressed by default. (But they're slightly dimmed if you have DevTools installed.)

See https://github.com/facebook/react/issues/21783#issuecomment-1083412766.

pimterry commented 2 years ago

Great, thanks for the update @gaearon!