fixed

packages/ui/app/src/analytics/index.tsx

@@ -1,10 +1,6 @@
-import { DocsV1Read } from "@fern-api/fdr-sdk";
-import { isEqual } from "es-toolkit/predicate";
-import { useAtomValue } from "jotai";
-import { selectAtom } from "jotai/utils";
 import dynamic from "next/dynamic";
 import { ReactElement, memo } from "react";
-import { DOCS_ATOM, DOMAIN_ATOM, DocsProps, EMPTY_ANALYTICS_CONFIG } from "../atoms";
+import { useAnalyticsConfig } from "../atoms";
 
 declare global {
     interface Window {
@@ -35,15 +31,8 @@ const PlausibleScript = dynamic(() => import("./plausible").then((mod) => mod.de
 const PosthogScript = dynamic(() => import("./posthog").then((mod) => mod.default), { ssr: true });
 const SegmentScript = dynamic(() => import("./segment").then((mod) => mod.default), { ssr: true });
 
-const ANALYTICS_CONFIG_ATOM = selectAtom<DocsProps, DocsV1Read.AnalyticsConfig>(
-    DOCS_ATOM,
-    (docs) => docs.analyticsConfig ?? EMPTY_ANALYTICS_CONFIG,
-    isEqual,
-);
-
 export const CustomerAnalytics = memo(function CustomerAnalytics(): ReactElement | null {
-    const domain = useAtomValue(DOMAIN_ATOM);
-    const config = useAtomValue(ANALYTICS_CONFIG_ATOM);
+    const config = useAnalyticsConfig();
 
     return (
         <>
@@ -75,7 +64,7 @@ export const CustomerAnalytics = memo(function CustomerAnalytics(): ReactElement
             {config.posthog && (
                 <CustomerPosthogScript token={config.posthog.apiKey} api_host={config.posthog.endpoint} />
             )}
-            {config.segment && <SegmentScript apiKey={config.segment.writeKey} host={domain} />}
+            {config.segment && <SegmentScript apiKey={config.segment.writeKey} />}
         </>
     );
 });

packages/ui/app/src/analytics/segment.tsx

@@ -6,6 +6,7 @@ import { useSafeListenTrackEvents } from "./track";
 
 export default function SegmentScript(props: snippet.Options): ReactNode {
     const user = useFernUser();
+
     useEffect(() => {
         try {
             if (user && window.analytics) {

packages/ui/app/src/atoms/analytics.ts

@@ -0,0 +1,16 @@
+import { DocsV1Read } from "@fern-api/fdr-sdk";
+import { isEqual } from "es-toolkit/predicate";
+import { useAtomValue } from "jotai";
+import { selectAtom } from "jotai/utils";
+import { DOCS_ATOM, EMPTY_ANALYTICS_CONFIG } from "./docs";
+import { DocsProps } from "./types";
+
+const ANALYTICS_CONFIG_ATOM = selectAtom<DocsProps, DocsV1Read.AnalyticsConfig>(
+    DOCS_ATOM,
+    (docs) => docs.analyticsConfig ?? EMPTY_ANALYTICS_CONFIG,
+    isEqual,
+);
+
+export function useAnalyticsConfig(): DocsV1Read.AnalyticsConfig {
+    return useAtomValue(ANALYTICS_CONFIG_ATOM);
+}

packages/ui/app/src/atoms/index.ts

@@ -1,3 +1,4 @@
+export * from "./analytics";
 export * from "./announcement";
 export * from "./apis";
 export * from "./auth";

packages/ui/app/src/docs/NotFoundPage.tsx

@@ -0,0 +1,19 @@
+import Error from "next/error";
+import { ReactElement, useEffect } from "react";
+import { track } from "../analytics";
+
+/**
+ * This is required for Next.js to generate `_next/static/chunks/pages/404.js`
+ * Which helps prevent a client-side error to be thrown when navigating to a non-existent page
+ */
+
+// NOTE: do not add initial props (SSG or SSR) here or else it will break.
+// The middleware is unable to rewrite to the NextData page route, so it always returns {}.
+// If you use initial props, the middleware's response will probably cause a client-side error to be thrown.
+export function NotFoundPage(): ReactElement {
+    useEffect(() => {
+        track("not_found");
+    }, []);
+
+    return <Error statusCode={404} />;
+}

packages/ui/app/src/index.ts

@@ -1,7 +1,8 @@
-export { track } from "./analytics";
-export type { DocsProps, EMPTY_ANALYTICS_CONFIG, NavbarLink } from "./atoms";
+export { EMPTY_ANALYTICS_CONFIG } from "./atoms";
+export type { DocsProps, NavbarLink } from "./atoms";
 export * from "./docs/DocsPage";
 export * from "./docs/NextApp";
+export { NotFoundPage } from "./docs/NotFoundPage";
 export { getApiRouteSupplier } from "./hooks/useApiRoute";
 export * from "./mdx/types";
 export { Stream } from "./playground/Stream";

packages/ui/docs-bundle/src/pages/404.tsx

@@ -1,19 +1,3 @@
-import { track } from "@fern-ui/ui";
-import Error from "next/error";
-import { ReactElement, useEffect } from "react";
+import { NotFoundPage } from "@fern-ui/ui";
 
-/**
- * This is required for Next.js to generate `_next/static/chunks/pages/404.js`
- * Which helps prevent a client-side error to be thrown when navigating to a non-existent page
- */
-
-// NOTE: do not add initial props (SSG or SSR) here or else it will break.
-// The middleware is unable to rewrite to the NextData page route, so it always returns {}.
-// If you use initial props, the middleware's response will probably cause a client-side error to be thrown.
-export default function Page(): ReactElement {
-    useEffect(() => {
-        track("not_found");
-    });
-
-    return <Error statusCode={404} />;
-}
+export default NotFoundPage;