eject notfound comp. and track instances of 404 (#2454)

src/theme/NotFound/Content/index.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import type {Props} from '@theme/NotFound/Content';
+import Heading from '@theme/Heading';
+
+declare const Statsig: {
+  instance: () => {
+    logEvent: (eventName: string, value: string) => void;
+  };
+};
+
+export default function NotFoundContent({className}: Props): JSX.Element {
+  useEffect(() => {
+    console.log("NotFoundWrapper useEffect is running"); // Add this line
+    try {
+      Statsig.instance().logEvent('PageNotFound', window.location.href);
+      console.log("Successfully logged PageNotFound event");
+    } catch (error) {
+      console.error("Error logging PageNotFound event:", error);
+    }
+  }, []);
+  return (
+    <main className={clsx('container margin-vert--xl', className)}>
+      <div className="row">
+        <div className="col col--6 col--offset-3">
+          <Heading as="h1" className="hero__title">
+            <Translate
+              id="theme.NotFound.title"
+              description="The title of the 404 page">
+              Page Not Found
+            </Translate>
+          </Heading>
+          <p>
+            <Translate
+              id="theme.NotFound.p1"
+              description="The first paragraph of the 404 page">
+              We could not find what you were looking for.
+            </Translate>
+          </p>
+          <p>
+            <Translate
+              id="theme.NotFound.p2"
+              description="The 2nd paragraph of the 404 page">
+              Please contact the owner of the site that linked you to the
+              original URL and let them know their link is broken.
+            </Translate>
+          </p>
+        </div>
+      </div>
+    </main>
+  );
+}

src/theme/NotFound/index.tsx

@@ -1,14 +1,21 @@
-import React, { useEffect } from 'react';
-import NotFound from '@theme-original/NotFound';
-import type NotFoundType from '@theme/NotFound';
-import type {WrapperProps} from '@docusaurus/types';
+import React from 'react';
+import {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import NotFoundContent from '@theme/NotFound/Content';
 
-type Props = WrapperProps<typeof NotFoundType>;
-
-export default function NotFoundWrapper(props: Props): JSX.Element {
+export default function Index(): JSX.Element {
+
+  const title = translate({
+    id: 'theme.NotFound.title',
+    message: 'Page Not Found',
+  });
   return (
     <>
-      <NotFound {...props} />
+      <PageMetadata title={title} />
+      <Layout>
+        <NotFoundContent />
+      </Layout>
     </>
   );
 }