From e70ecaefc32bc6ce86a88f2a44c310cdcda89ac4 Mon Sep 17 00:00:00 2001
From: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com>
Date: Tue, 25 Oct 2022 13:37:37 -0400
Subject: [PATCH] docs(nxdev): create custom event for 404s (#12813)

---
 nx-dev/nx-dev/pages/404.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/nx-dev/nx-dev/pages/404.tsx b/nx-dev/nx-dev/pages/404.tsx
index 33481f20a7..7eb243d04e 100644
--- a/nx-dev/nx-dev/pages/404.tsx
+++ b/nx-dev/nx-dev/pages/404.tsx
@@ -1,8 +1,19 @@
+import { sendCustomEvent } from '@nrwl/nx-dev/feature-analytics';
 import { Footer, Header } from '@nrwl/nx-dev/ui-common';
 import { NextSeo } from 'next-seo';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
 
 export function FourOhFour(): JSX.Element {
+  const router = useRouter();
+  useEffect(() => {
+    const handleRouteChange = (url: URL) =>
+      sendCustomEvent('custom_page_hit', '404', url.toString());
+    router.events.on('routeChangeStart', (url) => handleRouteChange(url));
+    return () => router.events.off('routeChangeStart', handleRouteChange);
+  }, [router]);
+
   return (
     <>
       <NextSeo title="Page not found" noindex={true} />
@@ -47,7 +58,7 @@ export function FourOhFour(): JSX.Element {
           </article>
         </div>
       </main>
-      <Footer useDarkBackground={false} />
+      <Footer />
     </>
   );
 }