ResizeObserver loop limit exceeded

[MrZillaGold]

Describe the bug

We use the module on a fairly large site and embed a virtual scroll in one of the parts of the site using ReactDOM. When navigating between pages, we do not cause unmount between pages - because this process is difficult to follow on a large-level project that uses many technologies and react is not the main one.
Because of this, users often encounter an error: ResizeObserver loop limit exceeded

Looking for more information, I came across a hack that avoids this error, you need to wrap the ResizeObserver callback in an animationRequestFrame:

https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded/58701523#58701523
PolymerLabs/uni-virtualizer#112
nolimits4web/swiper#5441

How often does this bug happen?

Often

Screenshots or Videos

No response

Platform

• OC: any
• Browser: any

tanstack-virtual version

3.0.0-beta.54

TypeScript version

4.9.5

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[devcatalin]

I experience the same problem, using the 3.0.0-beta.54 version in a large React project, and this error appears sometimes. But, it's inconsistent and I was not able to reproduce it outside the project..

[piecyk]

I would recommended just to ignore this error, fixing it will not change anything, saying from experience as living with this in production few years now.

[MrZillaGold]

In our project, we can completely ignore this error in Sentry only because of this module, but then we will lose information about other errors of this kind in other parts of the site. I am aware that this error does not affect anything, but it still exists. The module has 1M monthly downloads, and someone will also encounter this and it seems logical to fix it so that there are no unnecessary issues 🤷‍♂️

[piecyk]

In our project, we can completely ignore this error in Sentry only because of this module, but then we will lose information about other errors of this kind in other parts of the site.

Hard to say how are you handling errors internally, but just ignore errors having message, not all errors

const knownErrors = [
  'ResizeObserver loop completed with undelivered notifications.',
  'ResizeObserver loop limit exceeded'
]

it seems logical to fix it so that there are no unnecessary issues 🤷‍♂️

Yeah, totally agree to fix it, but from my understanding we can't really. Patching it with requestAnimationFrame will not solve the underling issue.

[MrZillaGold]

In Safari this error is fatal and the component that uses the hook crashes. No longer looks like a minor error that can be ignored 🥲

[piecyk]

In Safari this error is fatal and the component that uses the hook crashes. No longer looks like a minor error that can be ignored 🥲

hmm, how so? Just tested Safari 16.2 (18614.3.7.1.5) got bunch of errors but nothing was affected 🤷‍♂️

[dcworldwide]

Is this error logged only in non-production builds?

[leonidkuznetsov18]

same error for me, is it can be fixed in future?

[tannerlinsley]

This error can be safely ignored. I wish there was a better answer.

[3instein]

it's causing the scroll to go way up