ResizeObserver loop limit exceeded
When using the chart components in a dashboard environment it often throws the ResizeObserver loop limit exceeded
error.
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:
- Ignore the error by catching it
- 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