From 3b4da9b95b75f3d421124283d39eddcd4b8df87a Mon Sep 17 00:00:00 2001 From: Khairul Azhar Kasmiran Date: Sat, 29 Apr 2023 18:03:19 +0800 Subject: [PATCH 1/6] Fix "ResizeObserver loop limit exceeded" error on Chrome --- src/components/shared/WithSize.js | 12 +++++++++--- src/types/globals/Window.js | 1 + 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/shared/WithSize.js b/src/components/shared/WithSize.js index bef02144c1..6c7e0ff64b 100644 --- a/src/components/shared/WithSize.js +++ b/src/components/shared/WithSize.js @@ -47,6 +47,7 @@ export function withSize< _dirtySize: DOMRectReadOnly | null = null; state = { width: 0, height: 0 }; _container: HTMLElement | null; + _animationFrameId: AnimationFrameID | null = null; componentDidMount() { const container = findDOMNode(this); // eslint-disable-line react/no-find-dom-node @@ -93,6 +94,9 @@ export function withSize< if (container) { getResizeObserverWrapper().unsubscribe(container, this._resizeListener); } + if (this._animationFrameId) { + window.cancelAnimationFrame(this._animationFrameId); + } window.removeEventListener( 'visibilitychange', @@ -102,9 +106,11 @@ export function withSize< } _updateSize(container: HTMLElement, contentRect: DOMRectReadOnly) { - this.setState({ - width: contentRect.width, - height: contentRect.height, + this._animationFrameId = window.requestAnimationFrame(() => { + this.setState({ + width: contentRect.width, + height: contentRect.height, + }); }); } diff --git a/src/types/globals/Window.js b/src/types/globals/Window.js index 4bcf114f41..73cf87fdd3 100644 --- a/src/types/globals/Window.js +++ b/src/types/globals/Window.js @@ -70,6 +70,7 @@ declare class Window { fetch: typeof fetch; requestIdleCallback: typeof requestIdleCallback; requestAnimationFrame: typeof requestAnimationFrame; + cancelAnimationFrame: typeof cancelAnimationFrame; devicePixelRatio: number; // The indexedDB is marked as optional, as we should handle the test environment // where this is not available. It can lead to hard to debug promise failure From acd6e2aa788c4ed0bf4a0899ccec09a86a665f1c Mon Sep 17 00:00:00 2001 From: Khairul Azhar Kasmiran Date: Sat, 29 Apr 2023 18:25:01 +0800 Subject: [PATCH 2/6] Fix TrackMemory 2d canvas draw snapshot --- .../__snapshots__/TrackMemory.test.js.snap | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/test/components/__snapshots__/TrackMemory.test.js.snap b/src/test/components/__snapshots__/TrackMemory.test.js.snap index 8fb25c4096..cd5111f052 100644 --- a/src/test/components/__snapshots__/TrackMemory.test.js.snap +++ b/src/test/components/__snapshots__/TrackMemory.test.js.snap @@ -73,6 +73,23 @@ exports[`TrackMemory has a tooltip that matches the snapshot for counts equallin exports[`TrackMemory matches the 2d canvas draw snapshot 1`] = ` Array [ + Array [ + "clearRect", + 0, + 0, + 80, + 10, + ], + Array [ + "scale", + 1, + 1, + ], + Array [ + "scale", + 1, + 1, + ], Array [ "clearRect", 0, @@ -156,23 +173,6 @@ Array [ Array [ "fill", ], - Array [ - "clearRect", - 0, - 0, - 80, - 10, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "scale", - 1, - 1, - ], ] `; From ba10962faf1f5b11821d708bddffef0c9f16533d Mon Sep 17 00:00:00 2001 From: Khairul Azhar Kasmiran Date: Wed, 3 May 2023 19:13:18 +0800 Subject: [PATCH 3/6] Revert "Fix TrackMemory 2d canvas draw snapshot" This reverts commit acd6e2aa788c4ed0bf4a0899ccec09a86a665f1c. --- .../__snapshots__/TrackMemory.test.js.snap | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/src/test/components/__snapshots__/TrackMemory.test.js.snap b/src/test/components/__snapshots__/TrackMemory.test.js.snap index cd5111f052..8fb25c4096 100644 --- a/src/test/components/__snapshots__/TrackMemory.test.js.snap +++ b/src/test/components/__snapshots__/TrackMemory.test.js.snap @@ -73,23 +73,6 @@ exports[`TrackMemory has a tooltip that matches the snapshot for counts equallin exports[`TrackMemory matches the 2d canvas draw snapshot 1`] = ` Array [ - Array [ - "clearRect", - 0, - 0, - 80, - 10, - ], - Array [ - "scale", - 1, - 1, - ], - Array [ - "scale", - 1, - 1, - ], Array [ "clearRect", 0, @@ -173,6 +156,23 @@ Array [ Array [ "fill", ], + Array [ + "clearRect", + 0, + 0, + 80, + 10, + ], + Array [ + "scale", + 1, + 1, + ], + Array [ + "scale", + 1, + 1, + ], ] `; From 2929030f3acbfac83d4b82b1972834b5e05d73b4 Mon Sep 17 00:00:00 2001 From: Khairul Azhar Kasmiran Date: Wed, 3 May 2023 19:14:00 +0800 Subject: [PATCH 4/6] Revert "Fix "ResizeObserver loop limit exceeded" error on Chrome" This reverts commit 3b4da9b95b75f3d421124283d39eddcd4b8df87a. --- src/components/shared/WithSize.js | 12 +++--------- src/types/globals/Window.js | 1 - 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/components/shared/WithSize.js b/src/components/shared/WithSize.js index 6c7e0ff64b..bef02144c1 100644 --- a/src/components/shared/WithSize.js +++ b/src/components/shared/WithSize.js @@ -47,7 +47,6 @@ export function withSize< _dirtySize: DOMRectReadOnly | null = null; state = { width: 0, height: 0 }; _container: HTMLElement | null; - _animationFrameId: AnimationFrameID | null = null; componentDidMount() { const container = findDOMNode(this); // eslint-disable-line react/no-find-dom-node @@ -94,9 +93,6 @@ export function withSize< if (container) { getResizeObserverWrapper().unsubscribe(container, this._resizeListener); } - if (this._animationFrameId) { - window.cancelAnimationFrame(this._animationFrameId); - } window.removeEventListener( 'visibilitychange', @@ -106,11 +102,9 @@ export function withSize< } _updateSize(container: HTMLElement, contentRect: DOMRectReadOnly) { - this._animationFrameId = window.requestAnimationFrame(() => { - this.setState({ - width: contentRect.width, - height: contentRect.height, - }); + this.setState({ + width: contentRect.width, + height: contentRect.height, }); } diff --git a/src/types/globals/Window.js b/src/types/globals/Window.js index 73cf87fdd3..4bcf114f41 100644 --- a/src/types/globals/Window.js +++ b/src/types/globals/Window.js @@ -70,7 +70,6 @@ declare class Window { fetch: typeof fetch; requestIdleCallback: typeof requestIdleCallback; requestAnimationFrame: typeof requestAnimationFrame; - cancelAnimationFrame: typeof cancelAnimationFrame; devicePixelRatio: number; // The indexedDB is marked as optional, as we should handle the test environment // where this is not available. It can lead to hard to debug promise failure From 8b7e5a738128ba1bb7bcd3b921010e5734f88690 Mon Sep 17 00:00:00 2001 From: Khairul Azhar Kasmiran Date: Wed, 3 May 2023 20:44:08 +0800 Subject: [PATCH 5/6] Disable `webpack-dev-server` client overlay --- server.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/server.js b/server.js index 9d86574256..9983f705fb 100644 --- a/server.js +++ b/server.js @@ -63,6 +63,9 @@ const serverConfig = { `, }, static: false, + client: { + overlay: false, + }, }; // Allow a local file to override various options. From 8aa590326e4d67807448629c4d70f6df0596aaf6 Mon Sep 17 00:00:00 2001 From: Julien Wajsberg Date: Thu, 4 May 2023 16:18:23 +0200 Subject: [PATCH 6/6] Add a comment explaining why we disable the overlay --- server.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/server.js b/server.js index 9983f705fb..dd2ba4240c 100644 --- a/server.js +++ b/server.js @@ -64,6 +64,10 @@ const serverConfig = { }, static: false, client: { + // See https://github.com/firefox-devtools/profiler/pull/4598#issuecomment-1529260852 + // for the root cause of an error happening at load time. For this reason we + // disable the webpack overlay. We may be able to revisit after moving to + // the React 18 new API. overlay: false, }, };