-
Notifications
You must be signed in to change notification settings - Fork 38.4k
Description
Hello,
We have embedded the monaco-editor (version 0.38.0) in our Angular application, and we are frequently seeing the error "ResizeObserver loop limit exceeded" when we enable option automaticLayout.
It does not happen always and depends on the CSS of elements around it.
The error originates from the ResizeObserver which is used within elementSizeObserver.ts. I think it will happen when code that gets executed from the handler results in the resize getting triggered again.
By itself, it seems to be quite harmless, but in our particular setup it can cause some cypress tests to fail.
There are ways to work around that as well, but I believe we could avoid this error entirely if we would wrap the handler in requestAnimationFrame(). That would ensure us that the callback will never be called more than once within a single animation frame, and should suffice to avoid the "loop limit exceeded".
e.g.
public startObserving(): void {
if (!this._resizeObserver && this._referenceDomElement) {
this._resizeObserver = new ResizeObserver((entries) => {
requestAnimationFrame(() => {
if (entries && entries[0] && entries[0].contentRect) {
this.observe({ width: entries[0].contentRect.width, height: entries[0].contentRect.height });
} else {
this.observe();
}
});
});
this._resizeObserver.observe(this._referenceDomElement);
}
}
We have tried this out by patching the monaco-editor package for our application and this confirms that the "loop limit exceeded" error disappears while the automaticLayout functionality keeps working as expected.
I could open a small PR if we think this makes sense? Any thoughts?