fix: rewrite 404 in middleware (#1664)

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

@@ -54,6 +54,9 @@ function ifCustomer(posthog: PostHog, run: (hog: PostHogWithCustomer) => void):
 
 export async function initializePosthog(api_host: string, customerConfig?: DocsV1Read.PostHogConfig): Promise<void> {
     const apiKey = process.env.NEXT_PUBLIC_POSTHOG_API_KEY?.trim() ?? "";
+    /**
+     * TODO: refactor this to use the posthog react provider
+     */
     const posthog = (await import("posthog-js")).default;
 
     if (posthog.__loaded) {

packages/ui/app/src/index.ts

@@ -1,3 +1,4 @@
+export { capturePosthogEvent } from "./analytics/posthog";
 export { type CustomerAnalytics } from "./analytics/types";
 export type { DocsProps } from "./atoms";
 export * from "./docs/DocsPage";

packages/ui/docs-bundle/src/middleware.ts

@@ -75,6 +75,21 @@ export const middleware: NextMiddleware = async (request) => {
 
     const pathname = extractNextDataPathname(request.nextUrl.pathname);
 
+    /**
+     * attempt to rewrite /404 and /_error data routes to the correct destination,
+     * otherwise nextjs will match to `__next_data_catchall`.
+     *
+     * this is important for `hardNavigate404` to work, because it relies on knowing that the destination is /404.json
+     */
+    if ((pathname === "/404" || pathname === "/_error") && request.nextUrl.pathname.includes("/_next/data/")) {
+        const buildId = getBuildId(request);
+        nextUrl.pathname = `/_next/data/${buildId}${pathname}.json`;
+        if (nextUrl.pathname === request.nextUrl.pathname) {
+            return NextResponse.next({ request: { headers } });
+        }
+        return NextResponse.rewrite(nextUrl, { request: { headers } });
+    }
+
     const fernToken = request.cookies.get(COOKIE_FERN_TOKEN);
     const authConfig = await getAuthEdgeConfig(xFernHost);
     let fernUser: FernUser | undefined;
@@ -159,7 +174,7 @@ export const config = {
          * - _next/image (image optimization files)
          * - favicon.ico (favicon file)
          */
-        "/((?!api/fern-docs|_next/static|_next/image|_next/data/:buildId/404.json|_next/data/:buildId/500.json|_vercel|favicon.ico).*)",
+        "/((?!api/fern-docs|_next/static|_next/image|_vercel|favicon.ico).*)",
     ],
 };
 

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

@@ -1,10 +1,15 @@
+import { capturePosthogEvent } from "@fern-ui/ui";
 import Error from "next/error";
-import { ReactElement } from "react";
+import { ReactElement, useEffect } from "react";
 
 /**
  * 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
  */
 export default function Page(): ReactElement {
+    useEffect(() => {
+        capturePosthogEvent("not_found");
+    });
+
     return <Error statusCode={404} />;
 }

packages/ui/docs-bundle/src/server/extractNextDataPathname.ts

@@ -7,6 +7,12 @@
  * In both cases, we want to extract `/learn/home`
  */
 export function extractNextDataPathname(pathname: string): string {
+    if (pathname.includes("/404.json")) {
+        return "/404";
+    } else if (pathname.includes("/_error.json")) {
+        return "/_error";
+    }
+
     return (
         removeIndex(
             pathname.match(/\/_next\/data\/.*\/_next\/data\/[^/]*(\/.*)\.json.json/)?.[1] ??