Analyze root cause of resize observer loop sentry errors

[techsmyth]

Description

As a user I want a performant application

Acceptance criteria

• Analyze resize observer loop error sources, and fix if easy

Spike: half a day

Private Zenhub Image

Additional Context

Screen shots / UX designs / data that are relevant.

[me-andre]

ResizeObserver is a built-in Browser API that allows to attach multiple handlers to element resize events. When the handlers (listener callbacks) are too heavy or there are too many of them so they can't complete during an animation frame, some of the handlers are skipped and the exception is thrown. This doesn't break the application from running normally except that there may be a glitch because some element has incorrect position or size for a moment. Since the handlers are run in "another tick" than the app code, no code gets interrupted because of an error.
The errors are not easy to reproduce: they may happen either on specific machines or just under heavy load - I checked specifically the pages where they occurred and didn't get them a single time.

It is most likely caused by some Material UI components, so it makes sense to update the npm to the latest version and see if the situation gets improved.

We also leverage ResizeObserver by means of react-resize-detector. I checked the usages and found nothing suspicious, but we can investigate it further.

In order not to pollute error tracker tools with those, we can either set up some ignore rules inside those tools or write a custom window"error" event handler.

[techsmyth]

Happening a lot on https://alkem.io/t3d/challenges/3dinwinnen/opportunities/inwinnenuit2dplat-3712/dashboard