react-idle-timer: Web Worker Timers is not working as expected.
Bug information
Affected Module
Version: 5.0.0
Describe the bug
I followed the Integrated Prompting example, and already applied the Web Worker Timers. It works well when I have only a few tabs, however, when I open multiple tabs (11 or more), the timer starts to be frozen and doesn’t count down. In some cases during my test, it still counts down when I opened 11 or more, but most of the time it will be frozen.
To Reproduce
Steps to reproduce the behavior:
Please check my codesandbox and my youtube’s unlisted video here to see my steps to reproduce the bug.
Expected behavior
The timer should count down and sync across tabs regardless of the number of tabs.
Screenshots
Please check my youtube’s unlisted video here to see my steps to reproduce the bug.
System Information (please complete the following information)
OS: macOS Monterey 12.3.1Device: MacbookBrowser Vendor: Google ChromeBrowser Version: Version 100.0.4896.127 (Official Build) (x86_64)
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Reactions: 2
- Comments: 27 (16 by maintainers)
Commits related to this issue
- 🐞 Randomize tokens to prevent collision. #247 — committed to SupremeTechnopriest/react-idle-timer by SupremeTechnopriest 2 years ago
- 🐞 Fix event leak when cross tab is enabled. #247 — committed to SupremeTechnopriest/react-idle-timer by SupremeTechnopriest 2 years ago
@SupremeTechnopriest I ran into this problem today while trying out the package. Similar behavior to what was reported above where I would get over a certain number of tabs then CPU would spike and idle timeouts became unpredictable. I did notice that closing the last tab I opened typically fixed the problem.
When the CPU was spiking I did a profile and it seemed to be doing many calls to the message handler here. I edited the code locally to
console.log()the message and it would repeat theACTIVEaction over and over in an infinite loop.I believe the problem may be with how the tokens are generated. If you open enough tabs eventually you end up with two tabs that have the same token. Sometimes I see this as low as 7 tabs or as high as 12. When the message handler tries to handle the incoming message and does checks like this one it triggers an infinite message loop between the two tabs with the same token. Closing one of the tabs makes the loop stop.
If I change the code locally to use a different mechanism to create tokens (something like
Math.random() * 99999, as a quick test) then I no longer see the problem even with 15+ tabs open.Hopefully this is the same root cause that others are reporting. I’d be happy to test out any fix or help commit something, but unsure of the requirements you may have for the token generation.
Thank you for the bug fixes!!
I tried it out and no longer see the issues I saw before so I believe the fix works. I’ll keep an eye on it as we continue to add it to our application.
Sorry for the delay on this one and thanks again to @dstanich for your detailed debugging. The profile definitely pointed me in the right direction. Turns out the token was only half the problem. The other half was an event leak that could get pretty nasty in certain edge cases. I changed the token generation to use
Math.randomso we should not have any collisions in the future. I added a test that simulates 100 tabs and makes sure there are no collisions.If you could give
5.4.0a test and let me know if that resolves the issue for you I would appreciate it. If you are able to recreate the issue on the new version, please reopen this issue.@dstanich thats some damn fine debugging sir. I will push a patch tonight and see if it helps. Will keep you posted.