From e9c77beb5aca428eb9d0a748d38620e7d908c86b Mon Sep 17 00:00:00 2001
From: AngusMorton <angus.m.morton@gmail.com>
Date: Tue, 23 Jul 2024 20:07:22 +1000
Subject: [PATCH] Avoid undelivered notifications error

---
 .../src/helpers/browser_props.ts                 | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/libraries/browser-tracker-core/src/helpers/browser_props.ts b/libraries/browser-tracker-core/src/helpers/browser_props.ts
index 4a247550d..25cb27a6e 100644
--- a/libraries/browser-tracker-core/src/helpers/browser_props.ts
+++ b/libraries/browser-tracker-core/src/helpers/browser_props.ts
@@ -18,20 +18,26 @@ function useResizeObserver(): boolean {
 }
 
 let resizeObserverInitialized = false;
+let readBrowserPropertiesTask: number | null = null;
 function initializeResizeObserver() {
   if (resizeObserverInitialized) {
     return;
   }
-  if(!document || !document.body || !document.documentElement) {
+  if (!document || !document.body || !document.documentElement) {
     return;
   }
   resizeObserverInitialized = true;
 
-  const resizeObserver = new ResizeObserver((entries) => {
-    for (let entry of entries) {
-      if (entry.target === document.body || entry.target === document.documentElement) {
+  const resizeObserver = new ResizeObserver(() => {
+    if (!readBrowserPropertiesTask) {
+      // The browser property lookup causes a forced synchronous layout when offsets/sizes are
+      // queried. It's possible that the forced synchronous layout causes the ResizeObserver
+      // to be fired again, leading to an infinite loop and the "ResizeObserver loop completed
+      // with undelivered notifications" error.
+      readBrowserPropertiesTask = requestAnimationFrame(() => {
+        readBrowserPropertiesTask = null;
         cachedProperties = readBrowserProperties();
-      }
+      });
     }
   });
   resizeObserver.observe(document.body);