From cda2ecd1edd3ce2fbca8e59f67c2b0a452dd9fb0 Mon Sep 17 00:00:00 2001
From: Claas Augner <caugner@mozilla.com>
Date: Tue, 3 Dec 2024 15:33:28 +0100
Subject: [PATCH] fix(telemetry): attach global click handlers via effect in
 app

---
 client/src/app.tsx                     |  6 +++++-
 client/src/telemetry/glean-context.tsx | 27 +++++++++++++++-----------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/client/src/app.tsx b/client/src/app.tsx
index ff38d1aafa04..7880c4e8ecd6 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -26,7 +26,10 @@ import { Community } from "./community";
 import { ContributorSpotlight } from "./contributor-spotlight";
 import { useIsServer, usePing } from "./hooks";
 
-import { useGleanPage } from "./telemetry/glean-context";
+import {
+  useGlobalGleanClickHandlers,
+  useGleanPage,
+} from "./telemetry/glean-context";
 import { MainContentContainer } from "./ui/atoms/page-content";
 import { Loading } from "./ui/atoms/loading";
 import { Advertising } from "./advertising";
@@ -142,6 +145,7 @@ export function App(appProps: HydrationData) {
 
   usePing();
   useGleanPage(pageNotFound, appProps.doc);
+  useGlobalGleanClickHandlers();
   useScrollDepthMeasurement();
 
   const localeMatch = useMatch("/:locale/*");
diff --git a/client/src/telemetry/glean-context.tsx b/client/src/telemetry/glean-context.tsx
index 6f94b89f0a6d..eadb56ff8a17 100644
--- a/client/src/telemetry/glean-context.tsx
+++ b/client/src/telemetry/glean-context.tsx
@@ -146,17 +146,6 @@ function glean(): GleanAnalytics {
       pings.action.submit();
     },
   };
-  const gleanClick = (source: string) => {
-    gleanContext.click({
-      source,
-      subscriptionType: "",
-    });
-  };
-  window?.addEventListener("click", (ev) => {
-    handleLinkClick(ev, gleanClick);
-    handleButtonClick(ev, gleanClick);
-    handleSidebarClick(ev, gleanClick);
-  });
 
   return gleanContext;
 }
@@ -164,6 +153,22 @@ function glean(): GleanAnalytics {
 const gleanAnalytics = glean();
 const GleanContext = React.createContext(gleanAnalytics);
 
+export function useGlobalGleanClickHandlers() {
+  const gleanClick = useGleanClick();
+
+  useEffect(() => {
+    const handler = (ev) => {
+      handleLinkClick(ev, gleanClick);
+      handleButtonClick(ev, gleanClick);
+      handleSidebarClick(ev, gleanClick);
+    };
+
+    window.addEventListener("click", handler);
+
+    return () => window.removeEventListener("click", handler);
+  });
+}
+
 function handleButtonClick(ev: MouseEvent, click: (source: string) => void) {
   const target = ev.composedPath()?.[0] || ev.target;
   const button = (target as HTMLElement | null)?.closest("button");