improve logging

Author: abvthecity

packages/fern-docs/bundle/src/components/PageHeader.tsx

@@ -11,6 +11,7 @@ import { FernBreadcrumbs } from "./FernBreadcrumbs";
 import { FernLink } from "./FernLink";
 
 export function PageHeader({
+  slug,
   serialize,
   breadcrumb,
   title,
@@ -20,6 +21,7 @@ export function PageHeader({
   subtitle,
   children,
 }: {
+  slug: string;
   serialize: MdxSerializer;
   breadcrumb: readonly FernNavigation.BreadcrumbItem[];
   title: string;
@@ -41,12 +43,16 @@ export function PageHeader({
       <WithAction action={action}>
         {titleHref == null ? (
           <h1 className="fern-page-heading hyphens-auto text-balance break-words">
-            <MdxServerComponent serialize={serialize} mdx={title} />
+            <MdxServerComponent serialize={serialize} mdx={title} slug={slug} />
           </h1>
         ) : (
           <FernLink href={titleHref} scroll={true}>
             <h1 className="fern-page-heading hyphens-auto text-balance break-words">
-              <MdxServerComponent serialize={serialize} mdx={title} />
+              <MdxServerComponent
+                serialize={serialize}
+                mdx={title}
+                slug={slug}
+              />
             </h1>
           </FernLink>
         )}
@@ -55,7 +61,11 @@ export function PageHeader({
       {subtitle && (
         <div className="prose-p:text-(color:--grayscale-a11) mt-2 hyphens-auto break-words leading-7">
           <React.Suspense fallback={subtitle}>
-            <MdxServerComponent serialize={serialize} mdx={subtitle} />
+            <MdxServerComponent
+              serialize={serialize}
+              mdx={subtitle}
+              slug={slug}
+            />
           </React.Suspense>
         </div>
       )}

packages/fern-docs/bundle/src/components/api-reference/endpoints/EndpointContent.tsx

@@ -56,6 +56,7 @@ export async function EndpointContent({
                 />
               )
             }
+            slug={node.slug}
           >
             <EndpointUrlWithPlaygroundBaseUrl
               endpoint={endpoint}

packages/fern-docs/bundle/src/components/api-reference/webhooks/WebhookContent.tsx

@@ -52,6 +52,7 @@ export async function WebhookContent({
           breadcrumb={breadcrumb}
           title={node.title}
           action={action}
+          slug={node.slug}
         />
       }
       aside={webhookExample}

packages/fern-docs/bundle/src/components/api-reference/websockets/WebSocket.tsx

@@ -12,11 +12,11 @@ import { AvailabilityBadge } from "@fern-docs/components/badges";
 import { PageHeader } from "@/components/PageHeader";
 import { FooterLayout } from "@/components/layouts/FooterLayout";
 import { ReferenceLayout } from "@/components/layouts/ReferenceLayout";
+import { PlaygroundButton } from "@/components/playground/PlaygroundButton";
 import { PlaygroundKeyboardTrigger } from "@/components/playground/PlaygroundKeyboardTrigger";
 import { MdxServerComponentProseSuspense } from "@/mdx/components/server-component";
 import { MdxSerializer } from "@/server/mdx-serializer";
 
-import { PlaygroundButton } from "@/components/playground/PlaygroundButton";
 import { PlaygroundButtonTray } from "../../playground/PlaygroundButtonTray";
 import { EndpointSection } from "../endpoints/EndpointSection";
 import { EndpointUrlWithPlaygroundBaseUrl } from "../endpoints/EndpointUrlWithPlaygroundBaseUrl";
@@ -97,8 +97,9 @@ export async function WebSocketContent({
             )
           }
           action={action}
+          slug={node.slug}
         >
-          <EndpointUrlWithPlaygroundBaseUrl 
+          <EndpointUrlWithPlaygroundBaseUrl
             endpoint={channel}
             className="hidden lg:flex"
           />
@@ -147,12 +148,12 @@ export async function WebSocketContent({
                         strokeWidth={1.5}
                       />
                     </span>
-                    </span>
-                    {node != null && (
-                        <>
-                          <PlaygroundButton state={node} className="md:hidden" />
-                        </>
-                      )}
+                  </span>
+                  {node != null && (
+                    <>
+                      <PlaygroundButton state={node} className="md:hidden" />
+                    </>
+                  )}
                 </span>
               }
               slug={node.slug}

packages/fern-docs/bundle/src/components/changelog/ChangelogEntryPage.tsx

@@ -55,6 +55,7 @@ export default function ChangelogEntryPage({
         </ChangelogContentLayout>
       </HideBuiltWithFern>
       <FooterLayoutWithEditThisPageUrl
+        slug={node.slug}
         pageId={node.pageId}
         loader={loader}
         serialize={serialize}
@@ -68,17 +69,20 @@ async function FooterLayoutWithEditThisPageUrl({
   pageId,
   loader,
   serialize,
+  slug,
   bottomNavigation,
 }: {
   pageId: string;
   loader: DocsLoader;
   serialize: MdxSerializer;
+  slug: string;
   bottomNavigation: React.ReactNode;
 }) {
   // all this does is get the edit this page url from the mdx frontmatter, but hopefully the mdx was already serialized and cached
   const page = await loader.getPage(pageId);
   const mdx = await serialize(page.markdown, {
     filename: page.filename,
+    slug,
   });
   const editThisPageUrl =
     mdx?.frontmatter?.["edit-this-page-url"] ?? page.editThisPageUrl;

packages/fern-docs/bundle/src/components/changelog/ChangelogPage.tsx

@@ -114,7 +114,7 @@ export async function ChangelogPageOverview({
       : undefined;
   const mdx = await serialize(page?.markdown, {
     filename: page?.filename,
-    url: `https://${loader.domain}/${node.slug}`,
+    slug: node.slug,
   });
 
   return (
@@ -125,6 +125,7 @@ export async function ChangelogPageOverview({
         titleHref={addLeadingSlash(node.slug)}
         subtitle={mdx?.frontmatter?.subtitle ?? mdx?.frontmatter?.excerpt}
         breadcrumb={breadcrumb}
+        slug={node.slug}
       />
       <Markdown mdx={mdx} fallback={page?.markdown} />
     </>
@@ -143,11 +144,12 @@ export async function ChangelogPageEntry({
   const page = await loader.getPage(node.pageId);
   const mdx = await serialize(page.markdown, {
     filename: page.filename,
-    url: `https://${loader.domain}/${node.slug}`,
+    slug: node.slug,
   });
 
   const title = await serialize(mdx?.frontmatter?.title, {
-    url: `https://${loader.domain}/${node.slug}`,
+    filename: page.filename,
+    slug: node.slug,
   });
 
   return (

packages/fern-docs/bundle/src/components/layouts/LayoutEvaluator.tsx

@@ -34,7 +34,7 @@ export async function LayoutEvaluator({
   const mdx = await serialize(markdown, {
     filename,
     toc: true,
-    url: `https://${loader.domain}/${slug}`,
+    slug,
   });
 
   const exports = getMDXExport(mdx);
@@ -60,6 +60,7 @@ export async function LayoutEvaluator({
         ) : undefined
       }
       bottomNavigation={bottomNavigation}
+      slug={slug}
     >
       <MdxContent mdx={mdx} fallback={markdown} />
     </LayoutEvaluatorContent>

packages/fern-docs/bundle/src/components/layouts/LayoutEvaluatorContent.tsx

@@ -30,6 +30,7 @@ export async function LayoutEvaluatorContent({
   children,
   aside,
   bottomNavigation,
+  slug,
 }: {
   serialize: MdxSerializer;
   frontmatter?: Partial<FernDocs.Frontmatter>;
@@ -40,6 +41,7 @@ export async function LayoutEvaluatorContent({
   children: React.ReactNode;
   aside?: React.ReactNode;
   bottomNavigation?: React.ReactNode;
+  slug: string;
 }) {
   let layout = frontmatter?.layout ?? "guide";
 
@@ -53,6 +55,7 @@ export async function LayoutEvaluatorContent({
       title={title}
       subtitle={subtitle}
       breadcrumb={breadcrumb}
+      slug={slug}
     />
   );
 

packages/fern-docs/bundle/src/components/shared-page.tsx

@@ -297,6 +297,8 @@ async function getNeighbor(
     const page = await loader.getPage(pageId);
     const mdx = await serialize(page.markdown, {
       filename: page.filename,
+      slug: node.slug,
+      toc: true, // this is probably already cached with toc: true
     });
     const excerpt = mdx?.frontmatter?.subtitle ?? mdx?.frontmatter?.excerpt;
     return {

packages/fern-docs/bundle/src/mdx/components/server-component.tsx

@@ -12,17 +12,20 @@ export async function MdxServerComponent({
   serialize,
   mdx,
   filename,
+  slug,
 }: {
   serialize: MdxSerializer;
   mdx: string | null | undefined;
   filename?: string;
+  slug?: string;
 }) {
   if (!mdx) {
     return null;
   }
 
   const parsed_mdx = await serialize(mdx, {
     filename,
+    slug,
   });
 
   return <MdxContent mdx={parsed_mdx} fallback={mdx} />;
@@ -34,13 +37,15 @@ export function MdxServerComponentProse({
   size,
   className,
   filename,
+  slug,
   fallback,
 }: {
   serialize: MdxSerializer;
   mdx: string | null | undefined;
   size?: "xs" | "sm" | "base" | "lg";
   className?: string;
   filename?: string;
+  slug?: string;
   fallback?: React.ReactNode;
 }) {
   if (!mdx) {
@@ -53,7 +58,12 @@ export function MdxServerComponentProse({
 
   return (
     <Prose size={size} className={className}>
-      <MdxServerComponent mdx={mdx} serialize={serialize} filename={filename} />
+      <MdxServerComponent
+        mdx={mdx}
+        serialize={serialize}
+        filename={filename}
+        slug={slug}
+      />
     </Prose>
   );
 }
@@ -65,12 +75,14 @@ export function MdxServerComponentProseSuspense({
   className,
   fallback,
   filename,
+  slug,
 }: {
   serialize: MdxSerializer;
   mdx: string | null | undefined;
   size?: "xs" | "sm" | "base" | "lg";
   className?: string;
   filename?: string;
+  slug?: string;
   fallback?: React.ReactNode;
 }) {
   return (
@@ -95,6 +107,7 @@ export function MdxServerComponentProseSuspense({
           className={className}
           fallback={fallback}
           filename={filename}
+          slug={slug}
         />
       </React.Suspense>
     </ErrorBoundary>

packages/fern-docs/bundle/src/server/mdx-serializer.ts

@@ -26,9 +26,9 @@ export type MdxSerializerOptions = {
    */
   scope?: Record<string, unknown>;
   /**
-   * The URL of the page being serialized.
+   * The slug of the page being serialized.
    */
-  url?: string;
+  slug?: string;
 };
 
 export type MdxSerializer = (
@@ -66,7 +66,7 @@ export function createCachedMdxSerializer(
 
     // this lets us key on just
     const cachedSerializer = unstable_cache(
-      async ({ filename, toc, scope, url }: MdxSerializerOptions) => {
+      async ({ filename, toc, scope, slug }: MdxSerializerOptions) => {
         const authState = await loader.getAuthState();
 
         try {
@@ -84,7 +84,7 @@ export function createCachedMdxSerializer(
           console.error("Error serializing mdx", error);
 
           postToEngineeringNotifs(
-            `:rotating_light: [${domain}] \`Serialize MDX\` encountered an error: \`${String(error)}\` (url: \`${url ?? "unknown"}\``,
+            `:rotating_light: [${domain}] \`Serialize MDX\` encountered an error: \`${String(error)}\` (url: \`https://${domain}/${slug ?? "UNKNOWN"}\`)`,
             {
               message: content,
               mrkdwn: true,