Skip to content

ResizeObserver loop limit exceeded

When using the chart components in a dashboard environment it often throws the ResizeObserver loop limit exceeded error.

image

This appears to be because our chart component makes use of our ResizeObserver directive and there are too many resizing events for one observer to handle within a single frame.

Removing the responsive property resolves these errors.

The solutions that maintain responsiveness floating around online for this error are:

  1. Ignore the error by catching it
  2. Wrap the observer in an animation frame:
observer = new ResizeObserver(entries => {
      window.requestAnimationFrame(() => {
        entries.forEach(event => {
          event.target.glResizeHandler(event);
        });
      });
    });

The latter solution has the issue that it will delay any resize animations by at least one frame which may cause a janky experience.

Edited by Robert Hunt