ResizeObserver loop limit exceeded

Questions
, ,
1

Hey Everyone,

I my project i have RUM logger enabled which is capturing the errors in browser.

I have my project in which i am using login to call some function when engine/scene is resized.

`

constructor(scene: Scene) {
    this.scene = scene;

    eventManager?.addEventListener(EventType.DRAG, this.onDrag);
    eventManager?.addEventListener(EventType.ZOOM_INTO_AREA, this.onZoomIntoArea);
    const engine = this.scene.getEngine();
    this.canvasResizedObserver = engine.onResizeObservable.add(this.onCanvasResized);
}

`

callback body:
`

private onCanvasResized = (eventData: Engine, eventState: EventState): void => {
    // console.log('canvas resized', eventData, eventState);
    if (this.camera.orthoRight) {
      // adjust top and bottom ortho values based on new aspect ratio
      const size = this.getClientSize();
      const aspect = size.height / size.width;
      const newHalfCanvasHeightMeters = this.camera.orthoRight * aspect;
      this.camera.orthoBottom = -newHalfCanvasHeightMeters;
      this.camera.orthoTop = newHalfCanvasHeightMeters;
    }`

I notice error with message is getting logged, and this is very frequent count. Did anyone know about it why it appears and what could be the potential solution for this ?

message:

ResizeObserver loop limit exceeded

2

I pushed your full request to chatGPT, hope he is telling you not a story about purple unicorns… :slight_smile:

GPT:
The error message “ResizeObserver loop limit exceeded” occurs when the ResizeObserver API detects an infinite loop in its observation. This happens when a resize event triggers a change in the size of the element being observed, which then triggers another resize event, and so on. The browser has a limit to the number of times this can occur, which is typically around 10-15 times, after which the error is thrown.

In your code, the onCanvasResized function is being called every time the canvas is resized, which can trigger the ResizeObserver loop limit exceeded error if the function contains code that modifies the size of the canvas or triggers a resize event.

To solve this issue, you can try debouncing the onCanvasResized function, which means that the function will only be called after a certain period of time has elapsed since the last resize event. This can be achieved using a library like Lodash, which provides a debounce function that can be used to wrap the onCanvasResized function. For example:

kotlinCopy code

import { debounce } from 'lodash';

// ...

this.canvasResizedObserver = engine.onResizeObservable.add(
  debounce(this.onCanvasResized, 500)
);

In the above code, the onCanvasResized function will be debounced by 500 milliseconds, which means that it will only be called once every 500 milliseconds even if multiple resize events are triggered during that time.

Alternatively, you can also try using the one method instead of the add method when subscribing to the onResizeObservable. The one method ensures that the callback is only executed once and then automatically unsubscribes from the observable. For example:

kotlinCopy code

this.canvasResizedObserver = engine.onResizeObservable.one(this.onCanvasResized);

This approach is useful if you only need to execute the callback function once after the canvas is resized.

3

The shared code does not resize :frowning: so it is probably within the engine itself.

@amoebageek can you share a repro ?

4

@sebavan i am having the application in the private repo, but i can expose the methods and class file for you. Let me know which file you want to look into it.

5

That will be hard to find without an actual running repro…

However, it would seem it is not directly related to Babylon (there’s no “resizeObserver” or “ResizeObserver” occurrences in Babylon code):