From cea29d83f999769ff0712215f47fe66adc3ebba0 Mon Sep 17 00:00:00 2001
From: Adam Wootton <adam@taplytics.com>
Date: Wed, 18 Sep 2024 16:25:40 -0400
Subject: [PATCH] fix: debounce iframe updates and limit size of stored events
 (#959)

---
 .../src/initializeDevCycleDebugger.ts         | 26 ++++++++++++++++++-
 tsconfig.base.json                            |  6 ++---
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/lib/web-debugger/src/initializeDevCycleDebugger.ts b/lib/web-debugger/src/initializeDevCycleDebugger.ts
index abf98d94e..ea3091d79 100644
--- a/lib/web-debugger/src/initializeDevCycleDebugger.ts
+++ b/lib/web-debugger/src/initializeDevCycleDebugger.ts
@@ -52,6 +52,7 @@ class IframeManager {
     position: string
     debugLogs: boolean
     client: DevCycleClient | NextClient
+    private debouncedUpdateIframeData: () => void
 
     constructor(
         client: DevCycleClient | NextClient,
@@ -68,6 +69,22 @@ class IframeManager {
         this.debugLogs = debugLogs
         this.mainIframe = document.createElement('iframe')
         this.buttonIframe = document.createElement('iframe')
+        this.debouncedUpdateIframeData = this.debounce(() => {
+            this._updateIframeData()
+        }, 300)
+    }
+
+    private debounce(func: () => void, delay: number) {
+        let timeoutId: NodeJS.Timeout | null = null
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId)
+            }
+            timeoutId = setTimeout(() => {
+                func()
+                timeoutId = null
+            }, delay)
+        }
     }
 
     createIframesWhenReady() {
@@ -79,7 +96,7 @@ class IframeManager {
         })
     }
 
-    updateIframeData() {
+    private _updateIframeData() {
         clientData.current.config = this.client.config
         clientData.current.user = this.client.user
         this.synchronizeIframeUrl()
@@ -99,9 +116,16 @@ class IframeManager {
         )
     }
 
+    updateIframeData() {
+        this.debouncedUpdateIframeData()
+    }
+
     setupSubscriptions() {
         const addEvent = (event: any) => {
             clientData.current.liveEvents.unshift(event)
+            if (clientData.current.liveEvents.length > 200) {
+                clientData.current.liveEvents.pop()
+            }
         }
 
         const onConfigUpdated = () => {
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 4b7cae0d2..23b1f1bbf 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -35,9 +35,9 @@
             "@devcycle/js-cloud-server-sdk": [
                 "sdk/js-cloud-server/src/index.ts"
             ],
-            "@devcycle/nextjs-sdk": ["sdk/nextjs/src/index.ts"],
-            "@devcycle/nextjs-sdk/pages": ["sdk/nextjs/src/pages.ts"],
-            "@devcycle/nextjs-sdk/server": ["sdk/nextjs/src/server.ts"],
+            "@devcycle/nextjs-sdk": ["sdk/nextjs/index.ts"],
+            "@devcycle/nextjs-sdk/pages": ["sdk/nextjs/pages.ts"],
+            "@devcycle/nextjs-sdk/server": ["sdk/nextjs/server.ts"],
             "@devcycle/nodejs-server-sdk": ["sdk/nodejs/src/index.ts"],
             "@devcycle/nodejs-server-sdk/openfeature-strategy": [
                 "sdk/nodejs/openfeature-strategy.ts"