ResizeObserver loop completed with undelivered notifications

mdellanave83

Hi @allan ,
I tried the new 2.2.1 version which uses the ResizeObserver and I want to warn you about these errors I see in the console

With the previous version there are no errors.

allan

Can you link to a test case showing the error please? I encountered a few of these in the unit tests, but resolve that and haven't seen it happen in the browser. A link to a page showing the problem would be really helpful.

Allan

mdellanave83

I made some changes here https://codesandbox.io/p/sandbox/datatable-paging-issue-when-hidden-2f47h6

If you resize (the whole window or just the html preview) you'll see the errors in the debug console of the codesandbox

hope can help!
thank you @allan!

allan

What browser and version are you using? I've just tried Chrome 131.0.6778.69 and Firefox 132.0.2, but don't get the error on either.

I've tried navigating through the table, resizing the window and the preview frame, clicking the buttons above the table, but to no avail.

Allan

mdellanave83

uhm that's strange... I'm using chrome and I just updated to the latest version 132.0.6834.84

please take a look at the video here https://photos.app.goo.gl/ZCzkyxufjHNLztZPA

choc

I can confirm that this error occurs immediately after the update Chrome to 132.0.6834.84.

choc

I guess this is just due to the throttle in this line? But I think the default throttle time is reasonable, it may not be that simple, and the reason for this error could come from somewhere else.

I just tested on my site and when I resize the page slowly, this error does not appear.
But when I resize it quickly, it appears (this is also the case when I switch the developer mode F12). (P.S. I changed the throttle time to a shorter time, the default time is fine.)

But strangely, in the Codesandbox example, even a tiny resize triggers the error.

After removing the responsive part, the error is gone unless you resize the page so fast (P.S. switching developer mode F12 is fine)

So I guess the responsive part changes the layout width too fast and needs a throttle?

allan

Yup I see it in Chrome 132 in Windows as well.

I'll dig into it more tomorrow. The error means that the function that ResizeObserver is executing (i.e. my column calculations and alignment), is causing the container to be resized again. Even with the throttle in place so the callback doesn't immediately execute again that "error" will still happen.

It isn't really an error, I don't know why they decided to throw an async error rather than showing a warning in the console - perhaps that isn't relevant in some environments.

Its extremely frustrating ResizeObserver. I need to try and workout what is causing it to resize the container. Perhaps the height, which I'm not interested in. I'll look more into it. Thanks for the additional details both!

Allan

allan

I've committed a fix for this issue.

If you are interested, then this mini example shows what exactly is happening. In the callback the height of the DataTable container is being changed by the recalculation of the column widths (e.g. text might span multiple rows, or might no longer span multiple rows). In the test case I just set the height to something random.

That in turn causes the callback to be triggered again, but it is during the execution of the previous callback, thus an error is thrown (as I noted, it is really a warning, not an error, but it is thrown, so its an error...).

There is no way with ResizeObserver to tell it that we aren't interested in the height changes (a check can be made in the callback, but that doesn't stop the callback being executed). Seems like something that is lacking to me - I'd like to see ResizeObserver have an option to listen for height, width or both.

Interestingly, Chrome 131 doesn't throw the error. Chrome 132 does. Firefox 132 does not (I haven't tried other versions of Firefox). By the spec, I suspect Chrome 132 is correct, but it is very frustrating.

My fix in DataTables is to set the height of the container to be fixed during the column width calculations, then use a setTimeout(,0) to remove the set height.

Here is the updated Codesandbox with the nightly build of DataTables.

Allan

allan

Oh ffs - it is still happening. It is working in my local downloaded copy, but not on CSB. Damn!

allan

This is my change to work around the height changing issue - insert an empty div and listen on that instead.

Downloading the CodeSandBox example and running it locally has it working okay, but still getting the errors in CSB.

@mdellanave83 - If you using the nightly build, do you get errors in your own local build?

Allan

choc

The CSB you send above does not throw an error unless we resize it so rapidly (that's an extreme case, I drag the resize bar in the middle and drag so fast to the left and right to get the error to show).

@allan How about using requestAnimationFrame?

            requestAnimationFrame(() => {
              resize();
            });

See this Codesandbox

I modified it from the distributed DataTables 2.2.1 from cdn.

With this one change, I didn't see the error even when I resized so fast. But I'm not sure if that's the best way.

allan

Thanks for your interest in this! I did look into requestAnimationFrame, but for cases such as a table becoming visible, there is a noticeable flash of it being in its "unsized" state, before having it resize. I want to avoid that, which is part of why this has been so much more complicated than I thought it was going to be!

Allan