ag-grid: ResizeObserver loop limit exceeded

As an update I believe I have a fix that will avoid these errors being thrown without losing any of the improvements removing the debouncing of resizes gave us.

It is currently undergoing testing and review.

As an FYI I am looking into this issue.

I still think the best compromise would be requestAnimationFrame.

const resizeObserver = new ResizeObserver(entries => {
   window.requestAnimationFrame(() => {
    doSomething(); // Code here...
   });
});

This would solve 2 issues:

• Scrolling would continue to be smooth/fast (like in 29.3.4).
• ResizeObserver loop limit exceeded error would be suppressed.

We are seeing the same thing regularly since updating to v29.3.x. Thanks @Elysiome for the pointer above - looking at the history of the file, I would bet that this is the change that has started triggering the error for us:

https://github.com/ag-grid/ag-grid/commit/c30b2e4f2118fc6a647987dcc1b289b196db0c00

It happens very regularly but not 100% of the time, and seems easier to reproduce in react dev mode, both of which lead me to think there is a variable timing component. That checks out in my mind with a change like the above, where a debounce was removed as of 29.3.

As an alternative there is also the following gridOption that will disable the use of ResizeObserver and instead uses a polyfill that periodically checks the grid width and height.

If you set this to true then this will avoid the above errors.

https://www.ag-grid.com/javascript-data-grid/grid-options/#reference-miscellaneous-suppressBrowserResizeObserver

suppressBrowserResizeObserver: true

I still think the best compromise would be requestAnimationFrame.

@Elysiome unfortunately this is not an option as there are a number of features that depend on this being synchronous. Instead we would be aiming to locate the root cause and apply a fix there instead.

My users also encounter this error in some cases, but I couldn’t say exactly which ones. I only know that it happens when resizing the grid.

This error is a very common error that can be safely ignored (see https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded).

But… It would be nice to suppress it directly in the AG Grid code. This can be done easily by wrapping the observer callback in requestAnimationFrame() (see https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded).

Before:

const resizeObserver = new ResizeObserver(entries => {
 doSomething(); // Code here...
});

After:

const resizeObserver = new ResizeObserver(entries => {
   window.requestAnimationFrame(() => {
    doSomething(); // Code here...
   });
});

This piece of code should be fixed:

https://github.com/ag-grid/ag-grid/blob/37c1a493642df6f8df406562e7c3bdaa692ef081/grid-community-modules/core/src/ts/misc/resizeObserverService.ts#L17

Got same error with react + ant design + ag-grid version 29.3.0, 29.3.3 and 29.3.4, happens more frequently when open antd modal that contains a grid, it works fine with 29.2.0

Glad this is getting fixed! It’s not limited to react. I’m seeing this error all over in my Angular unit tests when running 29.3.5.

@StephenCooper

The workaround worked for me. +1 on locating “the root cause and apply a fix there instead.”

For the provided reproduction I believe a workaround will be to apply the following property.

alwaysShowHorizontalScroll: true

I would be interested to know if applying these flags resolve the issues in your applications? There is also a corresponding vertical scroll bar flag but I believe it is the horizontal scrollbar that is responsible for the resize observer loop.

While using the FirstDataRenderedEvent, facing same error (version used 30.0.2)