fix(telemetry): attach global click handlers via effect in app

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/*");

client/src/telemetry/glean-context.tsx

@@ -146,24 +146,29 @@ 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;
 }
 
 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");