BUG: [Sentry] ResizeObserver loop completed with undelivered notifications.

[bobbykolev]

Describe the bug Unhandled error caught by Sentry. https://alkemio.sentry.io/issues/3906639631/

It's a high-volume error (more of a warning) with minimal user impact.

To Reproduce Although it's part of the most sessions, it's hard to be reproduced with steps.

Expected behavior No such errors.

Additional context There are many MUI components that are changing heights, scrolling and observing presence on the page. The error is hard to track and with a minimal direct impact on the UX. Having that in mind, I'd suggest to keep track of it but as a warning. Fixing would be nice-to-have.

Areas that will be affected Observable components?

Describe the bug There's a high volume bug (highest ATM) reported by Sentry - ResizeObserver loop completed with undelivered notifications. I was able to see the error as part of my session (in Sentry) but there was no indication in the browser - No user affection.

To Reproduce Steps to reproduce the behavior:

There are no concrete steps, just browsing the application and the error pops in Sentry. Sometimes after navigation, other times around graphQL calls.

Expected behavior Reducing its count and/or filtering it in Sentry.

Desktop (please complete the following information):

• OS: [Windows]
• Browser [Edge]

Additional context Link to the error in Sentry: ResizeObserver loop completed with undelivered notifications.

Areas that will be affected Scroll listeners should be revised.

[bobbykolev]

Here's a relevant thread with the exact issue caused by textarea in MUI: https://github.com/mui/material-ui/issues/43718

Note that the issue is hard to reproduce locally.

[ccanos]

This is happening a lot but there are no fixed steps to reproduce it. If we agree on just hide/silence these errors the estimation could be 3/5. If we really want to get to the bottom of this, there's a lot of uncertainty and we don't think it's worth to invest the time at the moment. Could be a 13+

[bobbykolev]

Sentry has an article related to this error: https://sentry.io/answers/react-resizeobserver-loop-completed-with-undelivered-notifications/

As we don't use Observer directly, I'd suggest muting these errors. It's not ideal but if these errors are not affecting the user experience and we don't have a solution for fixing them, it's better to eliminate the noise so we can see the volume of more important reports in Sentry.

Suggested solution:

Sentry.init({ ... ignoreErrors: ['ResizeObserver loop limit exceeded'] })

@ccanos , @techsmyth let me know your thoughts.

p.s. I saw that the error is sent to Sentry with the first batch of logs. There is no indication in the console nor anything visible in the UI (or in the UX). https://o919031.ingest.sentry.io/api/5862875/envelope/?sentry_key=5f033987cb1d4a5a81f18690bf4ab61b&sentry_version=7&sentry_client=sentry.javascript.react%2F7.69.0

...{"timestamp":1722526637.459,"category":"sentry.event","event_id":"02428eae606243f4af04eea4cb806f1b","level":"error","message":"ResizeObserver loop completed with undelivered notifications."},...