From 2424a8b64eb5abb40e6e76c97f00ea9e693a115e Mon Sep 17 00:00:00 2001 From: Andrew Jiang Date: Wed, 18 Dec 2024 18:35:23 -0500 Subject: [PATCH] fixed --- packages/ui/app/src/analytics/index.tsx | 17 +++-------------- packages/ui/app/src/analytics/segment.tsx | 1 + packages/ui/app/src/atoms/analytics.ts | 16 ++++++++++++++++ packages/ui/app/src/atoms/index.ts | 1 + packages/ui/app/src/docs/NotFoundPage.tsx | 19 +++++++++++++++++++ packages/ui/app/src/index.ts | 5 +++-- packages/ui/docs-bundle/src/pages/404.tsx | 20 ++------------------ 7 files changed, 45 insertions(+), 34 deletions(-) create mode 100644 packages/ui/app/src/atoms/analytics.ts create mode 100644 packages/ui/app/src/docs/NotFoundPage.tsx diff --git a/packages/ui/app/src/analytics/index.tsx b/packages/ui/app/src/analytics/index.tsx index 9361358101..4321ab55ae 100644 --- a/packages/ui/app/src/analytics/index.tsx +++ b/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( - 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 && ( )} - {config.segment && } + {config.segment && } ); }); diff --git a/packages/ui/app/src/analytics/segment.tsx b/packages/ui/app/src/analytics/segment.tsx index 280b74f11e..babc181845 100644 --- a/packages/ui/app/src/analytics/segment.tsx +++ b/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) { diff --git a/packages/ui/app/src/atoms/analytics.ts b/packages/ui/app/src/atoms/analytics.ts new file mode 100644 index 0000000000..092ac7e1bc --- /dev/null +++ b/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( + DOCS_ATOM, + (docs) => docs.analyticsConfig ?? EMPTY_ANALYTICS_CONFIG, + isEqual, +); + +export function useAnalyticsConfig(): DocsV1Read.AnalyticsConfig { + return useAtomValue(ANALYTICS_CONFIG_ATOM); +} diff --git a/packages/ui/app/src/atoms/index.ts b/packages/ui/app/src/atoms/index.ts index feedd43abe..1d13953b33 100644 --- a/packages/ui/app/src/atoms/index.ts +++ b/packages/ui/app/src/atoms/index.ts @@ -1,3 +1,4 @@ +export * from "./analytics"; export * from "./announcement"; export * from "./apis"; export * from "./auth"; diff --git a/packages/ui/app/src/docs/NotFoundPage.tsx b/packages/ui/app/src/docs/NotFoundPage.tsx new file mode 100644 index 0000000000..743ecd38b6 --- /dev/null +++ b/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 ; +} diff --git a/packages/ui/app/src/index.ts b/packages/ui/app/src/index.ts index 687e7f1f25..aca4ef54a4 100644 --- a/packages/ui/app/src/index.ts +++ b/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"; diff --git a/packages/ui/docs-bundle/src/pages/404.tsx b/packages/ui/docs-bundle/src/pages/404.tsx index 5e7416f6a0..48bfdf7bc3 100644 --- a/packages/ui/docs-bundle/src/pages/404.tsx +++ b/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 ; -} +export default NotFoundPage;