ResizeObserver loop limit exceeded in useScrollShadows

[oleksapro]

Description

Recently we added in application APM and noticed some errors in console, one of them is "ResizeObserver loop limit exceeded". My suggestion the reason them of could be ResizeObserver in useScrollShadows.

Steps to Reproduce

1. Open Kibana

Actual result

You might found thousand errors ResizeObserver loop limit exceeded

Expected result

There are not any "ResizeObserver loop limit exceeded" errors.

Example of fix link

• UUI version: 4.7.1

[AlekseyManetov]

Hi, your link on app is't open, could you please create codesanbox with example of your code with error, that we can be able to debug it?

Update: I opened app and didn't see any errors about ResizeObserver

Also useScrollShadows hook used only be VirtualList component, do you have any virtual list on this page?

[oleksapro]

Actually it is just monitoring admin panel, where we can see errors from people.epam.com. Unfortunately browsers do not show the error in console, but we still have them in monitoring tools like Elastic APM, Sentra, Cypress.

I don't think this error is big deal, because it is not break application, I suppose we will filter them in monitoring for now, but if you have capacity it would be great to investigate it.

[AlekseyManetov]

But now we can't reproduce this bug, on our demos with VirtualList component we don't have such error. I will recommend you to find where does this error appear in people.epam.com and create the new issue with real use case and full error stack-trace. Or it will be really great if you can create codesandbox where we can catch this error, it will helps us to debug it.

[oleksapro]

Hi @AlekseyManetov I'm back with updates on the issue.

I've found out how to catch the error.

1. Open demo page with table
2. Add event listener in Console

   window.addEventListener('error', e => {
       console.log(e);
   });

3. Scroll down several screens
4. Click checkbox
5. Scroll up via keyboard Home button or manually.

See video: resize-object-observer-limit.webm

I've faced the issue after update to latest version of CRA with webpack 5. Overlay catches error and add splash screen:

It is not a critical problem, as I see we can use workaround to hide overlay screen for this error. But it is just hide the issue. It would be great if you pay your attention.

Possible workaround:

// https://stackoverflow.com/questions/75774800/how-to-stop-resizeobserver-loop-limit-exceeded-error-from-appearing-in-react-a
    window.addEventListener('error', e => {
        if (e.message === 'ResizeObserver loop limit exceeded') {
            const resizeObserverErrDiv = document.getElementById(
                'webpack-dev-server-client-overlay-div'
            );
            const resizeObserverErr = document.getElementById(
                'webpack-dev-server-client-overlay'
            );
            if (resizeObserverErr) {
                resizeObserverErr.setAttribute('style', 'display: none');
            }
            if (resizeObserverErrDiv) {
                resizeObserverErrDiv.setAttribute('style', 'display: none');
            }
        }
    });

[cpoftea]

But now we can't reproduce this bug, on our demos with VirtualList component we don't have such error. I will recommend you to find where does this error appear in people.epam.com and create the new issue with real use case and full error stack-trace. Or it will be really great if you can create codesandbox where we can catch this error, it will helps us to debug it.

It may be that somewhere in UUI this error is suppressed with catch, but it still reaches window event listeners globally since it's runtime error

[AlekseyManetov]

I still can't catch this error even by your steps above, but we already faced with the same error and made a fix in this PR - #1311, i hope it will fixed this case too. I will also add the same fix for one more ResizeObserver in our code