Reduce Noise in Run Analytics Events

src/components/Editor/Project/ScratchContainer.jsx

@@ -4,6 +4,10 @@ import { ClickScrollPlugin, OverlayScrollbars } from "overlayscrollbars";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { applyScratchProjectIdentifierUpdate } from "../../../redux/EditorSlice";
 import { runStartedEvent } from "../../../events/WebComponentCustomEvents";
+import {
+  cancelPendingRunEventDebounce,
+  scheduleRunEventCycle,
+} from "../../WebComponentProject/runEventCodeSnapshot";
 import {
   subscribeToScratchProjectIdentifierUpdates,
   postMessageToScratchIframe,
@@ -45,6 +49,8 @@ export default function ScratchContainer() {
     nonce: null,
     hadAccessToken: false,
   });
+  const projectIdentifierRef = useRef(projectIdentifier);
+  projectIdentifierRef.current = projectIdentifier;
 
   useEffect(() => {
     return subscribeToScratchProjectIdentifierUpdates(
@@ -74,12 +80,22 @@ export default function ScratchContainer() {
       if (event.origin !== allowedOrigin) return;
       if (event.data?.type !== "scratch-gui-project-run-started") return;
 
-      document.dispatchEvent(runStartedEvent({}));
+      scheduleRunEventCycle(
+        projectIdentifierRef.current,
+        null,
+        { bypassSnapshot: true },
+        {
+          onRunStarted: () => {
+            document.dispatchEvent(runStartedEvent({}));
+          },
+        },
+      );
     };
 
     window.addEventListener("message", handleScratchRunStarted);
     return () => {
       window.removeEventListener("message", handleScratchRunStarted);
+      cancelPendingRunEventDebounce();
     };
   }, []);
 

src/components/Editor/Project/ScratchContainer.test.js

@@ -7,6 +7,7 @@ import * as scratchIframeUtils from "../../../utils/scratchIframe";
 import webComponentStore from "../../../redux/stores/WebComponentStore";
 import { setUser } from "../../../redux/WebComponentAuthSlice";
 import { resetStore } from "../../../redux/RootSlice";
+import { resetRunEventCodeSnapshot } from "../../WebComponentProject/runEventCodeSnapshot";
 
 jest.mock("../../../utils/scratchIframe", () => ({
   ...jest.requireActual("../../../utils/scratchIframe"),
@@ -51,14 +52,17 @@ describe("ScratchContainer", () => {
     scratchApiEndpoint: "https://api.example.com/v1",
   };
 
-  const buildStore = ({ authReducer } = {}) =>
+  const buildStore = ({ authReducer, editorOverrides } = {}) =>
     configureStore({
       reducer: {
         editor: EditorReducer,
         ...(authReducer ? { auth: authReducer } : {}),
       },
       preloadedState: {
-        editor: defaultEditorState,
+        editor: {
+          ...defaultEditorState,
+          ...editorOverrides,
+        },
       },
     });
 
@@ -174,14 +178,23 @@ describe("ScratchContainer", () => {
     let runStartedHandler;
 
     beforeEach(() => {
+      jest.useFakeTimers();
+      resetRunEventCodeSnapshot();
       runStartedHandler = jest.fn();
       document.addEventListener("editor-runStarted", runStartedHandler);
     });
 
     afterEach(() => {
+      jest.useRealTimers();
       document.removeEventListener("editor-runStarted", runStartedHandler);
     });
 
+    const flushScratchRunDebounce = () => {
+      act(() => {
+        jest.advanceTimersByTime(250);
+      });
+    };
+
     test("dispatches editor-runStarted when scratch-gui-project-run-started is received", () => {
       renderScratchContainer();
 
@@ -191,6 +204,8 @@ describe("ScratchContainer", () => {
         });
       });
 
+      flushScratchRunDebounce();
+
       expect(runStartedHandler).toHaveBeenCalledTimes(1);
       expect(runStartedHandler.mock.calls[0][0].detail).toEqual({});
     });
@@ -211,6 +226,157 @@ describe("ScratchContainer", () => {
 
       expect(runStartedHandler).not.toHaveBeenCalled();
     });
+
+    test("does not dispatch editor-runStarted when unmounted before debounce fires", () => {
+      const store = buildStore();
+      const { unmount } = render(
+        <Provider store={store}>
+          <ScratchContainer />
+        </Provider>,
+      );
+
+      act(() => {
+        dispatchMessage({ type: "scratch-gui-project-run-started" });
+      });
+
+      unmount();
+      flushScratchRunDebounce();
+
+      expect(runStartedHandler).not.toHaveBeenCalled();
+    });
+
+    test("dispatches editor-runStarted when project identifier changes during debounce", () => {
+      const store = buildStore();
+      const view = render(
+        <Provider store={store}>
+          <ScratchContainer />
+        </Provider>,
+      );
+
+      act(() => {
+        dispatchMessage({ type: "scratch-gui-project-run-started" });
+      });
+
+      const updatedStore = buildStore({
+        editorOverrides: {
+          project: {
+            identifier: "project-456",
+            project_type: "code_editor_scratch",
+          },
+          scratchIframeProjectIdentifier: "project-456",
+        },
+      });
+
+      view.rerender(
+        <Provider store={updatedStore}>
+          <ScratchContainer />
+        </Provider>,
+      );
+
+      flushScratchRunDebounce();
+
+      expect(runStartedHandler).toHaveBeenCalledTimes(1);
+    });
+
+    test("collapses rapid scratch runs into one debounced dispatch", () => {
+      renderScratchContainer();
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      expect(runStartedHandler).toHaveBeenCalledTimes(0);
+
+      flushScratchRunDebounce();
+
+      expect(runStartedHandler).toHaveBeenCalledTimes(1);
+    });
+
+    test("allows separate scratch bursts after debounce quiet period", () => {
+      renderScratchContainer();
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      flushScratchRunDebounce();
+
+      act(() => {
+        jest.advanceTimersByTime(250);
+      });
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      flushScratchRunDebounce();
+
+      expect(runStartedHandler).toHaveBeenCalledTimes(2);
+    });
+
+    test("collapses rapid read-only scratch runs into one debounced dispatch", () => {
+      renderScratchContainer(
+        buildStore({ editorOverrides: { readOnly: true } }),
+      );
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      expect(runStartedHandler).toHaveBeenCalledTimes(0);
+
+      flushScratchRunDebounce();
+
+      expect(runStartedHandler).toHaveBeenCalledTimes(1);
+    });
+
+    test("allows read-only scratch runs after the debounce window", () => {
+      renderScratchContainer(
+        buildStore({ editorOverrides: { readOnly: true } }),
+      );
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      flushScratchRunDebounce();
+
+      act(() => {
+        jest.advanceTimersByTime(250);
+      });
+
+      act(() => {
+        dispatchMessage({
+          type: "scratch-gui-project-run-started",
+        });
+      });
+
+      flushScratchRunDebounce();
+
+      expect(runStartedHandler).toHaveBeenCalledTimes(2);
+    });
   });
 
   test("updates the parent project identifier without reloading the iframe project_id", () => {

src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx

@@ -88,10 +88,9 @@ function HtmlRunner() {
   const [runningFile, setRunningFile] = useState(previewFile);
   const previewFileRef = useRef(previewFile);
 
-  const showModal = () => {
+  const showModal = useCallback(() => {
     dispatch(showErrorModal());
-    eventListener();
-  };
+  }, [dispatch]);
 
   const {
     externalLink,
@@ -100,34 +99,48 @@ function HtmlRunner() {
     handleExternalLinkError,
   } = useExternalLinkState(showModal);
 
-  const eventListener = () => {
-    window.addEventListener("message", (event) => {
-      if (event.data?.type === MSG_HTML_PREVIEW_EVENT) {
-        if (event.data?.msg === "ERROR: External link") {
-          handleExternalLinkError(showModal);
-        } else if (event.data?.msg === "Allowed external link") {
-          handleAllowedExternalLink(event.data.payload.linkTo);
-        } else if (event.data?.msg === "RELOAD") {
-          const nextPreviewFile = `${event.data.payload.linkTo}.html`;
-          setExternalLink(null);
-
-          if (nextPreviewFile === previewFileRef.current) {
-            reloadAfterPreviewChange.current = false;
-            dispatch(triggerCodeRun());
-          } else {
-            reloadAfterPreviewChange.current = true;
-            setPreviewFile(nextPreviewFile);
-          }
+  const handleAllowedExternalLinkRef = useRef(handleAllowedExternalLink);
+  const handleExternalLinkErrorRef = useRef(handleExternalLinkError);
+  handleAllowedExternalLinkRef.current = handleAllowedExternalLink;
+  handleExternalLinkErrorRef.current = handleExternalLinkError;
+
+  useEffect(() => {
+    const handleIframeMessage = (event) => {
+      const { data } = event;
+
+      if (data?.type === MSG_HTML_PREVIEW_READY) {
+        setRendererReady(true);
+        return;
+      }
+
+      if (data?.type !== MSG_HTML_PREVIEW_EVENT) {
+        return;
+      }
+
+      if (data.msg === "ERROR: External link") {
+        handleExternalLinkErrorRef.current();
+      } else if (data.msg === "Allowed external link") {
+        handleAllowedExternalLinkRef.current(data.payload.linkTo);
+      } else if (data.msg === "RELOAD") {
+        const nextPreviewFile = `${data.payload.linkTo}.html`;
+        setExternalLink(null);
+
+        if (nextPreviewFile === previewFileRef.current) {
+          reloadAfterPreviewChange.current = false;
+          dispatch(triggerCodeRun());
+        } else {
+          reloadAfterPreviewChange.current = true;
+          setPreviewFile(nextPreviewFile);
         }
       }
-    });
-  };
+    };
 
-  useEffect(() => {
-    eventListener();
+    window.addEventListener("message", handleIframeMessage);
     dispatch(loadingRunner("html"));
     dispatch(setLoadedRunner("html"));
-  }, []);
+
+    return () => window.removeEventListener("message", handleIframeMessage);
+  }, [dispatch, setExternalLink]);
 
   let timeout;
 
@@ -172,21 +185,6 @@ function HtmlRunner() {
     }
   }, [runningFile]);
 
-  useEffect(() => {
-    window.addEventListener("message", listener);
-    return () => window.removeEventListener("message", listener);
-  });
-
-  const listener = useCallback(
-    (event) => {
-      const message = event.data;
-      if (message?.type === MSG_HTML_PREVIEW_READY) {
-        setRendererReady(true);
-      }
-    },
-    [setRendererReady],
-  );
-
   const runCode = () => {
     setRunningFile(previewFile);