Pass client trace metadata to client in pages router (#69620)

vercel · Sep 10, 2024 · 47072bf · 47072bf
1 parent 3113d80
commit 47072bf
Show file tree

Hide file tree

Showing 16 changed files with 361 additions and 157 deletions.
diff --git a/packages/next/src/pages/_document.tsx b/packages/next/src/pages/_document.tsx
@@ -22,6 +22,8 @@ import {
 import type { HtmlProps } from '../shared/lib/html-context.shared-runtime'
 import { encodeURIPath } from '../shared/lib/encode-uri-path'
 import type { DeepReadonly } from '../shared/lib/deep-readonly'
+import { getTracer } from '../server/lib/trace/tracer'
+import { getTracedMetadata } from '../server/lib/trace/utils'
 
 export type { DocumentContext, DocumentInitialProps, DocumentProps }
 
@@ -758,6 +760,17 @@ export class Head extends React.Component<HeadProps> {
       assetPrefix
     )
 
+    const tracingMetadata = getTracedMetadata(
+      getTracer().getTracePropagationData(),
+      this.context.experimentalClientTraceMetadata
+    )
+
+    const traceMetaTags = (tracingMetadata || []).map(
+      ({ key, value }, index) => (
+        <meta key={`next-trace-data-${index}`} name={key} content={value} />
+      )
+    )
+
     return (
       <head {...getHeadHTMLProps(this.props)}>
         {this.context.isDevelopment && (
@@ -882,6 +895,7 @@ export class Head extends React.Component<HeadProps> {
               // (by default, style-loader injects at the bottom of <head />)
               <noscript id="__next_css__DO_NOT_USE__" />
             )}
+            {traceMetaTags}
             {styles || null}
           </>
         )}

diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
@@ -86,10 +86,7 @@ import { appendMutableCookies } from '../web/spec-extension/adapters/request-coo
 import { createServerInsertedHTML } from './server-inserted-html'
 import { getRequiredScripts } from './required-scripts'
 import { addPathPrefix } from '../../shared/lib/router/utils/add-path-prefix'
-import {
-  getTracedMetadata,
-  makeGetServerInsertedHTML,
-} from './make-get-server-inserted-html'
+import { makeGetServerInsertedHTML } from './make-get-server-inserted-html'
 import { walkTreeWithFlightRouterState } from './walk-tree-with-flight-router-state'
 import { createComponentTree } from './create-component-tree'
 import { getAssetQueryString } from './get-asset-query-string'
@@ -156,6 +153,7 @@ import {
   type PrerenderStore,
 } from './prerender-async-storage.external'
 import { CacheSignal } from './cache-signal'
+import { getTracedMetadata } from '../lib/trace/utils'
 
 export type GetDynamicParamFromSegment = (
   // [slug] / [[slug]] / [...slug]

diff --git a/packages/next/src/server/app-render/make-get-server-inserted-html.tsx b/packages/next/src/server/app-render/make-get-server-inserted-html.tsx
@@ -11,14 +11,6 @@ import { RedirectStatusCode } from '../../client/components/redirect-status-code
 import { addPathPrefix } from '../../shared/lib/router/utils/add-path-prefix'
 import type { ClientTraceDataEntry } from '../lib/trace/tracer'
 
-export function getTracedMetadata(
-  traceData: ClientTraceDataEntry[],
-  clientTraceMetadata: string[] | undefined
-): ClientTraceDataEntry[] | undefined {
-  if (!clientTraceMetadata) return undefined
-  return traceData.filter(({ key }) => clientTraceMetadata.includes(key))
-}
-
 export function makeGetServerInsertedHTML({
   polyfills,
   renderServerInsertedHTML,

diff --git a/packages/next/src/server/lib/trace/utils.ts b/packages/next/src/server/lib/trace/utils.ts
@@ -0,0 +1,13 @@
+import type { ClientTraceDataEntry } from './tracer'
+
+/**
+ * Takes OpenTelemetry client trace data and the `clientTraceMetadata` option configured in the Next.js config (currently
+ * experimental) and returns a filtered/allowed list of client trace data entries.
+ */
+export function getTracedMetadata(
+  traceData: ClientTraceDataEntry[],
+  clientTraceMetadata: string[] | undefined
+): ClientTraceDataEntry[] | undefined {
+  if (!clientTraceMetadata) return undefined
+  return traceData.filter(({ key }) => clientTraceMetadata.includes(key))
+}
diff --git a/packages/next/src/server/render.tsx b/packages/next/src/server/render.tsx
@@ -285,6 +285,9 @@ export type RenderOptsPartial = {
   isExperimentalCompile?: boolean
   isPrefetch?: boolean
   swrDelta?: SwrDelta
+  experimental: {
+    clientTraceMetadata?: string[]
+  }
 }
 
 export type RenderOpts = LoadComponentsReturnType<PagesModule> &
@@ -1493,6 +1496,8 @@ export async function renderToHTMLImpl(
     runtime: globalRuntime,
     largePageDataBytes: renderOpts.largePageDataBytes,
     nextFontManifest: renderOpts.nextFontManifest,
+    experimentalClientTraceMetadata:
+      renderOpts.experimental.clientTraceMetadata,
   }
 
   const document = (

diff --git a/packages/next/src/shared/lib/html-context.shared-runtime.ts b/packages/next/src/shared/lib/html-context.shared-runtime.ts
@@ -45,6 +45,7 @@ export type HtmlProps = {
   hasConcurrentFeatures?: boolean
   largePageDataBytes?: number
   nextFontManifest?: DeepReadonly<NextFontManifest>
+  experimentalClientTraceMetadata?: string[]
 }
 
 export const HtmlContext = createContext<HtmlProps | undefined>(undefined)

diff --git a/...-trace-metadata/app/dynamic-page/page.tsx → ...data/app/app-router/dynamic-page/page.tsx b/...-trace-metadata/app/dynamic-page/page.tsx → ...data/app/app-router/dynamic-page/page.tsx
diff --git a/...trace-metadata/app/static-page-2/page.tsx → ...ata/app/app-router/static-page-2/page.tsx b/...trace-metadata/app/static-page-2/page.tsx → ...ata/app/app-router/static-page-2/page.tsx
diff --git a/...t-trace-metadata/app/static-page/page.tsx → ...adata/app/app-router/static-page/page.tsx b/...t-trace-metadata/app/static-page/page.tsx → ...adata/app/app-router/static-page/page.tsx
@@ -4,10 +4,10 @@ export default function StaticPage() {
   return (
     <>
       <h1 id="static-page-header">Static Page</h1>
-      <Link href="/dynamic-page" id="go-to-dynamic-page">
+      <Link href="/app-router/dynamic-page" id="go-to-dynamic-page">
         Go to dynamic page
       </Link>
-      <Link href="/static-page-2" id="go-to-static-page">
+      <Link href="/app-router/static-page-2" id="go-to-static-page">
         Go to static page
       </Link>
     </>

diff --git a/...nt-trace-metadata/app/suspense/client.tsx → ...tadata/app/app-router/suspense/client.tsx b/...nt-trace-metadata/app/suspense/client.tsx → ...tadata/app/app-router/suspense/client.tsx
diff --git a/...ient-trace-metadata/app/suspense/page.tsx → ...metadata/app/app-router/suspense/page.tsx b/...ient-trace-metadata/app/suspense/page.tsx → ...metadata/app/app-router/suspense/page.tsx