Block duplicate Posthog page reports

src/components/layout/posthog-page-view.tsx

@@ -5,6 +5,8 @@ import { usePathname, useSearchParams } from 'next/navigation';
 import { usePostHog } from 'posthog-js/react';
 import { useEffect } from 'react';
 
+let lastUrl: string | undefined = undefined;
+
 export default function PostHogPageView(): null {
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -13,17 +15,25 @@ export default function PostHogPageView(): null {
   const { resolvedTheme } = useTheme();
 
   useEffect(() => {
-    if (pathname && posthog) {
-      let url = window.origin + pathname;
-      if (searchParams.toString()) {
-        url = url + `?${searchParams.toString()}`;
-      }
-      posthog.capture('$pageview', {
-        $current_url: url,
-        theme: resolvedTheme
-      });
+    if (!pathname) return;
+
+    if (!posthog) return;
+
+    let url = window.origin + pathname;
+    if (searchParams.toString()) {
+      url = url + `?${searchParams.toString()}`;
     }
-  }, [pathname, searchParams, posthog]);
+
+    // This can trigger with re-renders etc - so we actively block
+    // duplicate reports for the same URL.
+    if (url === lastUrl) return;
+    else lastUrl = url;
+
+    posthog.capture('$pageview', {
+      $current_url: url,
+      theme: resolvedTheme
+    });
+  }, [pathname, searchParams, posthog, resolvedTheme]);
 
   return null;
 }