From fc32c5e6deb256e81636b7ef591cdb9e647904ec Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Tue, 9 Apr 2024 15:35:19 +0200
Subject: [PATCH 01/13] Add `clientTraceMetadata` experimental option to
 propagate tracing data to the client

---
 .../crates/next-core/src/next_config.rs       |  1 +
 packages/next/src/build/webpack-config.ts     |  1 +
 packages/next/src/export/index.ts             |  1 +
 .../next/src/server/app-render/app-render.tsx |  6 ++++
 .../make-get-server-inserted-html.tsx         |  9 +++++-
 packages/next/src/server/app-render/types.ts  |  1 +
 packages/next/src/server/base-server.ts       |  2 ++
 packages/next/src/server/config-schema.ts     |  1 +
 packages/next/src/server/config-shared.ts     |  7 +++++
 packages/next/src/server/lib/trace/tracer.ts  | 28 +++++++++++++++++++
 10 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/next-swc/crates/next-core/src/next_config.rs b/packages/next-swc/crates/next-core/src/next_config.rs
index 93cf4bda13ae7..cde9514d27b97 100644
--- a/packages/next-swc/crates/next-core/src/next_config.rs
+++ b/packages/next-swc/crates/next-core/src/next_config.rs
@@ -514,6 +514,7 @@ pub struct ExperimentalConfig {
     gzip_size: Option<bool>,
 
     instrumentation_hook: Option<bool>,
+    client_trace_metadata: Option<bool>,
     large_page_data_bytes: Option<f64>,
     logging: Option<serde_json::Value>,
     memory_based_workers_count: Option<bool>,
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index d0a5f322bc504..262b0c718f9bb 100644
--- a/packages/next/src/build/webpack-config.ts
+++ b/packages/next/src/build/webpack-config.ts
@@ -2057,6 +2057,7 @@ export default async function getBaseWebpackConfig(
     emotion: config.compiler?.emotion,
     modularizeImports: config.modularizeImports,
     imageLoaderFile: config.images.loaderFile,
+    clientTraceMetadata: config.experimental.clientTraceMetadata,
   })
 
   const cache: any = {
diff --git a/packages/next/src/export/index.ts b/packages/next/src/export/index.ts
index f428fcfcf8ec6..b667808c6c8ec 100644
--- a/packages/next/src/export/index.ts
+++ b/packages/next/src/export/index.ts
@@ -421,6 +421,7 @@ export async function exportAppImpl(
     experimental: {
       isAppPPREnabled: checkIsAppPPREnabled(nextConfig.experimental.ppr),
       swrDelta: nextConfig.experimental.swrDelta,
+      clientTraceMetadata: nextConfig.experimental.clientTraceMetadata === true,
     },
   }
 
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 5d9b7c7d2e0d2..b5a0a1478edf8 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -995,6 +995,9 @@ async function renderToHTMLOrFlightImpl(
         renderServerInsertedHTML,
         serverCapturedErrors: allCapturedErrors,
         basePath: renderOpts.basePath,
+        traceData: renderOpts.experimental.clientTraceMetadata
+          ? getTracer().getTracePropagationData()
+          : [],
       })
 
       const renderer = createStaticRenderer({
@@ -1319,6 +1322,9 @@ async function renderToHTMLOrFlightImpl(
                 renderServerInsertedHTML,
                 serverCapturedErrors: [],
                 basePath: renderOpts.basePath,
+                traceData: renderOpts.experimental.clientTraceMetadata
+                  ? getTracer().getTracePropagationData()
+                  : [],
               }),
               serverInsertedHTMLToHead: true,
               validateRootLayout,
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
index 976733f19644f..e9d52e7342650 100644
--- 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
@@ -9,15 +9,18 @@ import { renderToReadableStream } from 'react-dom/server.edge'
 import { streamToString } from '../stream-utils/node-web-streams-helper'
 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 makeGetServerInsertedHTML({
   polyfills,
   renderServerInsertedHTML,
   serverCapturedErrors,
+  traceData,
   basePath,
 }: {
   polyfills: JSX.IntrinsicElements['script'][]
   renderServerInsertedHTML: () => React.ReactNode
+  traceData: ClientTraceDataEntry[]
   serverCapturedErrors: Error[]
   basePath: string
 }) {
@@ -81,7 +84,11 @@ export function makeGetServerInsertedHTML({
               return <script key={polyfill.src} {...polyfill} />
             })
         }
-        {serverInsertedHTML}
+        {traceData.map(({ key, value }) => {
+          return (
+            <meta key={key} name={`_next-trace-data-${key}`} content={value} />
+          )
+        })}
         {errorMetaTags}
       </>,
       {
diff --git a/packages/next/src/server/app-render/types.ts b/packages/next/src/server/app-render/types.ts
index 8cc63bdd82ace..91564f8de6081 100644
--- a/packages/next/src/server/app-render/types.ts
+++ b/packages/next/src/server/app-render/types.ts
@@ -170,6 +170,7 @@ export interface RenderOptsPartial {
      */
     isRoutePPREnabled?: boolean
     swrDelta: SwrDelta | undefined
+    clientTraceMetadata: boolean
   }
   postponed?: string
   /**
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index e2b7b4c6d0b0a..88ec35fc504a4 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -556,6 +556,8 @@ export default abstract class Server<
       experimental: {
         isAppPPREnabled,
         swrDelta: this.nextConfig.experimental.swrDelta,
+        clientTraceMetadata:
+          this.nextConfig.experimental.clientTraceMetadata === true,
       },
     }
 
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
index 5a86133987986..dfdac28456479 100644
--- a/packages/next/src/server/config-schema.ts
+++ b/packages/next/src/server/config-schema.ts
@@ -390,6 +390,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
         optimizePackageImports: z.array(z.string()).optional(),
         optimizeServerReact: z.boolean().optional(),
         instrumentationHook: z.boolean().optional(),
+        clientTraceMetadata: z.boolean().optional(),
         turbotrace: z
           .object({
             logLevel: z
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 2f46d3d53939b..8726dee79dc89 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -365,6 +365,11 @@ export interface ExperimentalConfig {
    */
   instrumentationHook?: boolean
 
+  /**
+   * Enables the propagation of trace data through meta tags to the client.
+   */
+  clientTraceMetadata?: boolean
+
   /**
    * Using this feature will enable the `react@experimental` for the `app` directory.
    */
@@ -919,6 +924,8 @@ export const defaultConfig: NextConfig = {
     turbotrace: undefined,
     typedRoutes: false,
     instrumentationHook: false,
+    clientTraceMetadata: false,
+    bundlePagesExternals: false,
     parallelServerCompiles: false,
     parallelServerBuildTraces: false,
     ppr:
diff --git a/packages/next/src/server/lib/trace/tracer.ts b/packages/next/src/server/lib/trace/tracer.ts
index 80223dc54e953..1636c43758885 100644
--- a/packages/next/src/server/lib/trace/tracer.ts
+++ b/packages/next/src/server/lib/trace/tracer.ts
@@ -1,4 +1,5 @@
 import type { FetchEventResult } from '../../web/types'
+import type { TextMapSetter } from '@opentelemetry/api'
 import type { SpanTypes } from './constants'
 import { LogSpanAllowList, NextVanillaSpanAllowlist } from './constants'
 
@@ -149,6 +150,12 @@ interface NextTracer {
    * Returns undefined otherwise.
    */
   getActiveScopeSpan(): Span | undefined
+
+  /**
+   * Returns trace propagation data for the currently active context. The format is equal to data provided
+   * through the OpenTelemetry propagator API.
+   */
+  getTracePropagationData(): ClientTraceDataEntry[]
 }
 
 type NextAttributeNames =
@@ -171,6 +178,20 @@ const rootSpanIdKey = api.createContextKey('next.rootSpanId')
 let lastSpanId = 0
 const getSpanId = () => lastSpanId++
 
+export interface ClientTraceDataEntry {
+  key: string
+  value: string
+}
+
+const clientTraceDataSetter: TextMapSetter<ClientTraceDataEntry[]> = {
+  set(carrier, key, value) {
+    carrier.push({
+      key,
+      value,
+    })
+  },
+}
+
 class NextTracerImpl implements NextTracer {
   /**
    * Returns an instance to the trace with configured name.
@@ -185,6 +206,13 @@ class NextTracerImpl implements NextTracer {
     return context
   }
 
+  public getTracePropagationData(): ClientTraceDataEntry[] {
+    const activeContext = context.active()
+    const entries: ClientTraceDataEntry[] = []
+    propagation.inject(activeContext, entries, clientTraceDataSetter)
+    return entries
+  }
+
   public getActiveScopeSpan(): Span | undefined {
     return trace.getSpan(context?.active())
   }

From 3f5afccebf979b8b66cc306b70a2cadd2d31ed10 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Tue, 9 Apr 2024 16:52:30 +0200
Subject: [PATCH 02/13] Add e2e test

---
 test/e2e/client-trace-metadata/.gitignore     |  2 ++
 test/e2e/client-trace-metadata/app/layout.tsx |  7 +++++
 test/e2e/client-trace-metadata/app/page.tsx   |  5 ++++
 .../client-trace-metadata.test.ts             | 19 ++++++++++++
 .../instrumentation-node.ts                   | 30 +++++++++++++++++++
 .../client-trace-metadata/instrumentation.ts  |  5 ++++
 test/e2e/client-trace-metadata/next.config.js | 11 +++++++
 test/e2e/client-trace-metadata/package.json   |  7 +++++
 8 files changed, 86 insertions(+)
 create mode 100644 test/e2e/client-trace-metadata/.gitignore
 create mode 100644 test/e2e/client-trace-metadata/app/layout.tsx
 create mode 100644 test/e2e/client-trace-metadata/app/page.tsx
 create mode 100644 test/e2e/client-trace-metadata/client-trace-metadata.test.ts
 create mode 100644 test/e2e/client-trace-metadata/instrumentation-node.ts
 create mode 100644 test/e2e/client-trace-metadata/instrumentation.ts
 create mode 100644 test/e2e/client-trace-metadata/next.config.js
 create mode 100644 test/e2e/client-trace-metadata/package.json

diff --git a/test/e2e/client-trace-metadata/.gitignore b/test/e2e/client-trace-metadata/.gitignore
new file mode 100644
index 0000000000000..0181c386fa8d6
--- /dev/null
+++ b/test/e2e/client-trace-metadata/.gitignore
@@ -0,0 +1,2 @@
+# files generated by next.js
+node_modules/
diff --git a/test/e2e/client-trace-metadata/app/layout.tsx b/test/e2e/client-trace-metadata/app/layout.tsx
new file mode 100644
index 0000000000000..e7077399c03ce
--- /dev/null
+++ b/test/e2e/client-trace-metadata/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/client-trace-metadata/app/page.tsx b/test/e2e/client-trace-metadata/app/page.tsx
new file mode 100644
index 0000000000000..09ff826d3c514
--- /dev/null
+++ b/test/e2e/client-trace-metadata/app/page.tsx
@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic'
+
+export default function Page() {
+  return <p>hello world</p>
+}
diff --git a/test/e2e/client-trace-metadata/client-trace-metadata.test.ts b/test/e2e/client-trace-metadata/client-trace-metadata.test.ts
new file mode 100644
index 0000000000000..0ff2fb75d2070
--- /dev/null
+++ b/test/e2e/client-trace-metadata/client-trace-metadata.test.ts
@@ -0,0 +1,19 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('client-trace-metadata', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+    dependencies: require('./package.json').dependencies,
+  })
+
+  it('Should inject propagation data from registered OpenTelemetry propagator into meta tags', async () => {
+    const $ = await next.render$('/')
+    const headHtml = $.html('head')
+    expect(headHtml).toContain(
+      '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
+    )
+    expect($.html('head')).toContain(
+      '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
+    )
+  })
+})
diff --git a/test/e2e/client-trace-metadata/instrumentation-node.ts b/test/e2e/client-trace-metadata/instrumentation-node.ts
new file mode 100644
index 0000000000000..7d850edf7c4e5
--- /dev/null
+++ b/test/e2e/client-trace-metadata/instrumentation-node.ts
@@ -0,0 +1,30 @@
+import { Resource } from '@opentelemetry/resources'
+import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions'
+import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node'
+
+export function register() {
+  // Next.js expects you to use to register TraceProvider. It won't work if you use NodeSDK.
+  // We use registered provider to create traces inside of Next.js internals.
+  const provider = new NodeTracerProvider({
+    resource: new Resource({
+      [SEMRESATTRS_SERVICE_NAME]: 'next-app',
+    }),
+  })
+
+  // Make sure to register you provider
+  provider.register({
+    propagator: {
+      inject(_context, carrier, setter) {
+        setter.set(carrier, 'my-test-key-1', 'my-test-value-1')
+        setter.set(carrier, 'my-test-key-2', 'my-test-value-2')
+      },
+      extract(context) {
+        // This is a noop because we don't extract in this test
+        return context
+      },
+      fields() {
+        return ['my-test-key-1', 'my-test-key-2']
+      },
+    },
+  })
+}
diff --git a/test/e2e/client-trace-metadata/instrumentation.ts b/test/e2e/client-trace-metadata/instrumentation.ts
new file mode 100644
index 0000000000000..cd9be56845fd0
--- /dev/null
+++ b/test/e2e/client-trace-metadata/instrumentation.ts
@@ -0,0 +1,5 @@
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    require('./instrumentation-node').register()
+  }
+}
diff --git a/test/e2e/client-trace-metadata/next.config.js b/test/e2e/client-trace-metadata/next.config.js
new file mode 100644
index 0000000000000..4e0f3282f3a90
--- /dev/null
+++ b/test/e2e/client-trace-metadata/next.config.js
@@ -0,0 +1,11 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  experimental: {
+    instrumentationHook: true,
+    clientTraceMetadata: true,
+  },
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/client-trace-metadata/package.json b/test/e2e/client-trace-metadata/package.json
new file mode 100644
index 0000000000000..7b0ea8619a1f8
--- /dev/null
+++ b/test/e2e/client-trace-metadata/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@opentelemetry/resources": "^1.21.0",
+    "@opentelemetry/semantic-conventions": "^1.21.0",
+    "@opentelemetry/sdk-trace-node": "^1.21.0"
+  }
+}

From 7cfb69258fe13c7dcfbbe75f58046070b78ad4f9 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Thu, 11 Apr 2024 10:28:44 +0200
Subject: [PATCH 03/13] Move folder

---
 test/e2e/opentelemetry/{ => instrumentation}/.gitignore           | 0
 .../{ => instrumentation}/app/api/app/[param]/data/edge/route.ts  | 0
 .../{ => instrumentation}/app/api/app/[param]/data/route.ts       | 0
 .../{ => instrumentation}/app/app/[param]/layout.tsx              | 0
 .../{ => instrumentation}/app/app/[param]/loading/loading.tsx     | 0
 .../{ => instrumentation}/app/app/[param]/loading/page1/page.tsx  | 0
 .../{ => instrumentation}/app/app/[param]/loading/page2/page.tsx  | 0
 .../{ => instrumentation}/app/app/[param]/rsc-fetch/edge/page.tsx | 0
 .../{ => instrumentation}/app/app/[param]/rsc-fetch/page.tsx      | 0
 .../{ => instrumentation}/app/behind-middleware/layout.tsx        | 0
 .../{ => instrumentation}/app/behind-middleware/page.tsx          | 0
 test/e2e/opentelemetry/{ => instrumentation}/collector.ts         | 0
 test/e2e/opentelemetry/{ => instrumentation}/constants.ts         | 0
 .../{ => instrumentation}/instrumentation-minimal.ts              | 0
 .../opentelemetry/{ => instrumentation}/instrumentation-node.ts   | 0
 .../{ => instrumentation}/instrumentation-pages-app-only.test.ts  | 0
 .../{ => instrumentation}/instrumentation-polyfill.ts             | 0
 .../opentelemetry/{ => instrumentation}/instrumentation-test.ts   | 0
 test/e2e/opentelemetry/{ => instrumentation}/instrumentation.ts   | 0
 test/e2e/opentelemetry/{ => instrumentation}/middleware.ts        | 0
 test/e2e/opentelemetry/{ => instrumentation}/next.config.js       | 0
 .../e2e/opentelemetry/{ => instrumentation}/opentelemetry.test.ts | 0
 test/e2e/opentelemetry/{ => instrumentation}/package.json         | 0
 .../{ => instrumentation}/pages/api/pages/[param]/basic.ts        | 0
 .../{ => instrumentation}/pages/api/pages/[param]/edge.ts         | 0
 .../pages/pages/[param]/edge/getServerSideProps.tsx               | 0
 .../pages/pages/[param]/getServerSideProps.tsx                    | 0
 .../{ => instrumentation}/pages/pages/[param]/getStaticProps.tsx  | 0
 .../{ => instrumentation}/pages/pages/[param]/getStaticProps2.tsx | 0
 29 files changed, 0 insertions(+), 0 deletions(-)
 rename test/e2e/opentelemetry/{ => instrumentation}/.gitignore (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/api/app/[param]/data/edge/route.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/api/app/[param]/data/route.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/app/[param]/layout.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/app/[param]/loading/loading.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/app/[param]/loading/page1/page.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/app/[param]/loading/page2/page.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/app/[param]/rsc-fetch/edge/page.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/app/[param]/rsc-fetch/page.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/behind-middleware/layout.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/app/behind-middleware/page.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/collector.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/constants.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/instrumentation-minimal.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/instrumentation-node.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/instrumentation-pages-app-only.test.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/instrumentation-polyfill.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/instrumentation-test.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/instrumentation.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/middleware.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/next.config.js (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/opentelemetry.test.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/package.json (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/pages/api/pages/[param]/basic.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/pages/api/pages/[param]/edge.ts (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/pages/pages/[param]/edge/getServerSideProps.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/pages/pages/[param]/getServerSideProps.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/pages/pages/[param]/getStaticProps.tsx (100%)
 rename test/e2e/opentelemetry/{ => instrumentation}/pages/pages/[param]/getStaticProps2.tsx (100%)

diff --git a/test/e2e/opentelemetry/.gitignore b/test/e2e/opentelemetry/instrumentation/.gitignore
similarity index 100%
rename from test/e2e/opentelemetry/.gitignore
rename to test/e2e/opentelemetry/instrumentation/.gitignore
diff --git a/test/e2e/opentelemetry/app/api/app/[param]/data/edge/route.ts b/test/e2e/opentelemetry/instrumentation/app/api/app/[param]/data/edge/route.ts
similarity index 100%
rename from test/e2e/opentelemetry/app/api/app/[param]/data/edge/route.ts
rename to test/e2e/opentelemetry/instrumentation/app/api/app/[param]/data/edge/route.ts
diff --git a/test/e2e/opentelemetry/app/api/app/[param]/data/route.ts b/test/e2e/opentelemetry/instrumentation/app/api/app/[param]/data/route.ts
similarity index 100%
rename from test/e2e/opentelemetry/app/api/app/[param]/data/route.ts
rename to test/e2e/opentelemetry/instrumentation/app/api/app/[param]/data/route.ts
diff --git a/test/e2e/opentelemetry/app/app/[param]/layout.tsx b/test/e2e/opentelemetry/instrumentation/app/app/[param]/layout.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/app/[param]/layout.tsx
rename to test/e2e/opentelemetry/instrumentation/app/app/[param]/layout.tsx
diff --git a/test/e2e/opentelemetry/app/app/[param]/loading/loading.tsx b/test/e2e/opentelemetry/instrumentation/app/app/[param]/loading/loading.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/app/[param]/loading/loading.tsx
rename to test/e2e/opentelemetry/instrumentation/app/app/[param]/loading/loading.tsx
diff --git a/test/e2e/opentelemetry/app/app/[param]/loading/page1/page.tsx b/test/e2e/opentelemetry/instrumentation/app/app/[param]/loading/page1/page.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/app/[param]/loading/page1/page.tsx
rename to test/e2e/opentelemetry/instrumentation/app/app/[param]/loading/page1/page.tsx
diff --git a/test/e2e/opentelemetry/app/app/[param]/loading/page2/page.tsx b/test/e2e/opentelemetry/instrumentation/app/app/[param]/loading/page2/page.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/app/[param]/loading/page2/page.tsx
rename to test/e2e/opentelemetry/instrumentation/app/app/[param]/loading/page2/page.tsx
diff --git a/test/e2e/opentelemetry/app/app/[param]/rsc-fetch/edge/page.tsx b/test/e2e/opentelemetry/instrumentation/app/app/[param]/rsc-fetch/edge/page.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/app/[param]/rsc-fetch/edge/page.tsx
rename to test/e2e/opentelemetry/instrumentation/app/app/[param]/rsc-fetch/edge/page.tsx
diff --git a/test/e2e/opentelemetry/app/app/[param]/rsc-fetch/page.tsx b/test/e2e/opentelemetry/instrumentation/app/app/[param]/rsc-fetch/page.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/app/[param]/rsc-fetch/page.tsx
rename to test/e2e/opentelemetry/instrumentation/app/app/[param]/rsc-fetch/page.tsx
diff --git a/test/e2e/opentelemetry/app/behind-middleware/layout.tsx b/test/e2e/opentelemetry/instrumentation/app/behind-middleware/layout.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/behind-middleware/layout.tsx
rename to test/e2e/opentelemetry/instrumentation/app/behind-middleware/layout.tsx
diff --git a/test/e2e/opentelemetry/app/behind-middleware/page.tsx b/test/e2e/opentelemetry/instrumentation/app/behind-middleware/page.tsx
similarity index 100%
rename from test/e2e/opentelemetry/app/behind-middleware/page.tsx
rename to test/e2e/opentelemetry/instrumentation/app/behind-middleware/page.tsx
diff --git a/test/e2e/opentelemetry/collector.ts b/test/e2e/opentelemetry/instrumentation/collector.ts
similarity index 100%
rename from test/e2e/opentelemetry/collector.ts
rename to test/e2e/opentelemetry/instrumentation/collector.ts
diff --git a/test/e2e/opentelemetry/constants.ts b/test/e2e/opentelemetry/instrumentation/constants.ts
similarity index 100%
rename from test/e2e/opentelemetry/constants.ts
rename to test/e2e/opentelemetry/instrumentation/constants.ts
diff --git a/test/e2e/opentelemetry/instrumentation-minimal.ts b/test/e2e/opentelemetry/instrumentation/instrumentation-minimal.ts
similarity index 100%
rename from test/e2e/opentelemetry/instrumentation-minimal.ts
rename to test/e2e/opentelemetry/instrumentation/instrumentation-minimal.ts
diff --git a/test/e2e/opentelemetry/instrumentation-node.ts b/test/e2e/opentelemetry/instrumentation/instrumentation-node.ts
similarity index 100%
rename from test/e2e/opentelemetry/instrumentation-node.ts
rename to test/e2e/opentelemetry/instrumentation/instrumentation-node.ts
diff --git a/test/e2e/opentelemetry/instrumentation-pages-app-only.test.ts b/test/e2e/opentelemetry/instrumentation/instrumentation-pages-app-only.test.ts
similarity index 100%
rename from test/e2e/opentelemetry/instrumentation-pages-app-only.test.ts
rename to test/e2e/opentelemetry/instrumentation/instrumentation-pages-app-only.test.ts
diff --git a/test/e2e/opentelemetry/instrumentation-polyfill.ts b/test/e2e/opentelemetry/instrumentation/instrumentation-polyfill.ts
similarity index 100%
rename from test/e2e/opentelemetry/instrumentation-polyfill.ts
rename to test/e2e/opentelemetry/instrumentation/instrumentation-polyfill.ts
diff --git a/test/e2e/opentelemetry/instrumentation-test.ts b/test/e2e/opentelemetry/instrumentation/instrumentation-test.ts
similarity index 100%
rename from test/e2e/opentelemetry/instrumentation-test.ts
rename to test/e2e/opentelemetry/instrumentation/instrumentation-test.ts
diff --git a/test/e2e/opentelemetry/instrumentation.ts b/test/e2e/opentelemetry/instrumentation/instrumentation.ts
similarity index 100%
rename from test/e2e/opentelemetry/instrumentation.ts
rename to test/e2e/opentelemetry/instrumentation/instrumentation.ts
diff --git a/test/e2e/opentelemetry/middleware.ts b/test/e2e/opentelemetry/instrumentation/middleware.ts
similarity index 100%
rename from test/e2e/opentelemetry/middleware.ts
rename to test/e2e/opentelemetry/instrumentation/middleware.ts
diff --git a/test/e2e/opentelemetry/next.config.js b/test/e2e/opentelemetry/instrumentation/next.config.js
similarity index 100%
rename from test/e2e/opentelemetry/next.config.js
rename to test/e2e/opentelemetry/instrumentation/next.config.js
diff --git a/test/e2e/opentelemetry/opentelemetry.test.ts b/test/e2e/opentelemetry/instrumentation/opentelemetry.test.ts
similarity index 100%
rename from test/e2e/opentelemetry/opentelemetry.test.ts
rename to test/e2e/opentelemetry/instrumentation/opentelemetry.test.ts
diff --git a/test/e2e/opentelemetry/package.json b/test/e2e/opentelemetry/instrumentation/package.json
similarity index 100%
rename from test/e2e/opentelemetry/package.json
rename to test/e2e/opentelemetry/instrumentation/package.json
diff --git a/test/e2e/opentelemetry/pages/api/pages/[param]/basic.ts b/test/e2e/opentelemetry/instrumentation/pages/api/pages/[param]/basic.ts
similarity index 100%
rename from test/e2e/opentelemetry/pages/api/pages/[param]/basic.ts
rename to test/e2e/opentelemetry/instrumentation/pages/api/pages/[param]/basic.ts
diff --git a/test/e2e/opentelemetry/pages/api/pages/[param]/edge.ts b/test/e2e/opentelemetry/instrumentation/pages/api/pages/[param]/edge.ts
similarity index 100%
rename from test/e2e/opentelemetry/pages/api/pages/[param]/edge.ts
rename to test/e2e/opentelemetry/instrumentation/pages/api/pages/[param]/edge.ts
diff --git a/test/e2e/opentelemetry/pages/pages/[param]/edge/getServerSideProps.tsx b/test/e2e/opentelemetry/instrumentation/pages/pages/[param]/edge/getServerSideProps.tsx
similarity index 100%
rename from test/e2e/opentelemetry/pages/pages/[param]/edge/getServerSideProps.tsx
rename to test/e2e/opentelemetry/instrumentation/pages/pages/[param]/edge/getServerSideProps.tsx
diff --git a/test/e2e/opentelemetry/pages/pages/[param]/getServerSideProps.tsx b/test/e2e/opentelemetry/instrumentation/pages/pages/[param]/getServerSideProps.tsx
similarity index 100%
rename from test/e2e/opentelemetry/pages/pages/[param]/getServerSideProps.tsx
rename to test/e2e/opentelemetry/instrumentation/pages/pages/[param]/getServerSideProps.tsx
diff --git a/test/e2e/opentelemetry/pages/pages/[param]/getStaticProps.tsx b/test/e2e/opentelemetry/instrumentation/pages/pages/[param]/getStaticProps.tsx
similarity index 100%
rename from test/e2e/opentelemetry/pages/pages/[param]/getStaticProps.tsx
rename to test/e2e/opentelemetry/instrumentation/pages/pages/[param]/getStaticProps.tsx
diff --git a/test/e2e/opentelemetry/pages/pages/[param]/getStaticProps2.tsx b/test/e2e/opentelemetry/instrumentation/pages/pages/[param]/getStaticProps2.tsx
similarity index 100%
rename from test/e2e/opentelemetry/pages/pages/[param]/getStaticProps2.tsx
rename to test/e2e/opentelemetry/instrumentation/pages/pages/[param]/getStaticProps2.tsx

From 0f0549191dbd5df7fa6bd275555d9d173c70828a Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Thu, 11 Apr 2024 12:48:48 +0200
Subject: [PATCH 04/13] Update tests to cover a few cases

---
 test/e2e/app-dir/adsf/adsf.test.ts            |  32 ++++
 .../adsf}/app/layout.tsx                      |   0
 .../adsf}/app/page.tsx                        |   2 -
 test/e2e/app-dir/adsf/next.config.js          |   6 +
 .../client-trace-metadata.test.ts             |  19 ---
 .../instrumentation-node.ts                   |  30 ----
 .../client-trace-metadata/instrumentation.ts  |   5 -
 test/e2e/client-trace-metadata/package.json   |   7 -
 .../client-trace-metadata/.gitignore          |   0
 .../app/dynamic-page/page.tsx                 |   5 +
 .../client-trace-metadata/app/layout.tsx      |   7 +
 .../app/static-page-2/page.tsx                |   3 +
 .../app/static-page/page.tsx                  |  15 ++
 .../client-trace-metadata.test.ts             | 142 ++++++++++++++++++
 .../client-trace-metadata/instrumentation.ts  |  28 ++++
 .../client-trace-metadata/next.config.js      |   0
 .../client-trace-metadata/package.json        |   6 +
 17 files changed, 244 insertions(+), 63 deletions(-)
 create mode 100644 test/e2e/app-dir/adsf/adsf.test.ts
 rename test/e2e/{client-trace-metadata => app-dir/adsf}/app/layout.tsx (100%)
 rename test/e2e/{client-trace-metadata => app-dir/adsf}/app/page.tsx (61%)
 create mode 100644 test/e2e/app-dir/adsf/next.config.js
 delete mode 100644 test/e2e/client-trace-metadata/client-trace-metadata.test.ts
 delete mode 100644 test/e2e/client-trace-metadata/instrumentation-node.ts
 delete mode 100644 test/e2e/client-trace-metadata/instrumentation.ts
 delete mode 100644 test/e2e/client-trace-metadata/package.json
 rename test/e2e/{ => opentelemetry}/client-trace-metadata/.gitignore (100%)
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/app/dynamic-page/page.tsx
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/app/layout.tsx
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/app/static-page-2/page.tsx
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/app/static-page/page.tsx
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts
 rename test/e2e/{ => opentelemetry}/client-trace-metadata/next.config.js (100%)
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/package.json

diff --git a/test/e2e/app-dir/adsf/adsf.test.ts b/test/e2e/app-dir/adsf/adsf.test.ts
new file mode 100644
index 0000000000000..201b201faa997
--- /dev/null
+++ b/test/e2e/app-dir/adsf/adsf.test.ts
@@ -0,0 +1,32 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('adsf', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
+  it('should work using cheerio', async () => {
+    const $ = await next.render$('/')
+    expect($('p').text()).toBe('hello world')
+  })
+
+  // Recommended for tests that need a full browser
+  it('should work using browser', async () => {
+    const browser = await next.browser('/')
+    expect(await browser.elementByCss('p').text()).toBe('hello world')
+  })
+
+  // In case you need the full HTML. Can also use $.html() with cheerio.
+  it('should work with html', async () => {
+    const html = await next.render('/')
+    expect(html).toContain('hello world')
+  })
+
+  // In case you need to test the response object
+  it('should work with fetch', async () => {
+    const res = await next.fetch('/')
+    const html = await res.text()
+    expect(html).toContain('hello world')
+  })
+})
diff --git a/test/e2e/client-trace-metadata/app/layout.tsx b/test/e2e/app-dir/adsf/app/layout.tsx
similarity index 100%
rename from test/e2e/client-trace-metadata/app/layout.tsx
rename to test/e2e/app-dir/adsf/app/layout.tsx
diff --git a/test/e2e/client-trace-metadata/app/page.tsx b/test/e2e/app-dir/adsf/app/page.tsx
similarity index 61%
rename from test/e2e/client-trace-metadata/app/page.tsx
rename to test/e2e/app-dir/adsf/app/page.tsx
index 09ff826d3c514..ff7159d9149fe 100644
--- a/test/e2e/client-trace-metadata/app/page.tsx
+++ b/test/e2e/app-dir/adsf/app/page.tsx
@@ -1,5 +1,3 @@
-export const dynamic = 'force-dynamic'
-
 export default function Page() {
   return <p>hello world</p>
 }
diff --git a/test/e2e/app-dir/adsf/next.config.js b/test/e2e/app-dir/adsf/next.config.js
new file mode 100644
index 0000000000000..807126e4cf0bf
--- /dev/null
+++ b/test/e2e/app-dir/adsf/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig
diff --git a/test/e2e/client-trace-metadata/client-trace-metadata.test.ts b/test/e2e/client-trace-metadata/client-trace-metadata.test.ts
deleted file mode 100644
index 0ff2fb75d2070..0000000000000
--- a/test/e2e/client-trace-metadata/client-trace-metadata.test.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { nextTestSetup } from 'e2e-utils'
-
-describe('client-trace-metadata', () => {
-  const { next } = nextTestSetup({
-    files: __dirname,
-    dependencies: require('./package.json').dependencies,
-  })
-
-  it('Should inject propagation data from registered OpenTelemetry propagator into meta tags', async () => {
-    const $ = await next.render$('/')
-    const headHtml = $.html('head')
-    expect(headHtml).toContain(
-      '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
-    )
-    expect($.html('head')).toContain(
-      '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
-    )
-  })
-})
diff --git a/test/e2e/client-trace-metadata/instrumentation-node.ts b/test/e2e/client-trace-metadata/instrumentation-node.ts
deleted file mode 100644
index 7d850edf7c4e5..0000000000000
--- a/test/e2e/client-trace-metadata/instrumentation-node.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Resource } from '@opentelemetry/resources'
-import { SEMRESATTRS_SERVICE_NAME } from '@opentelemetry/semantic-conventions'
-import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node'
-
-export function register() {
-  // Next.js expects you to use to register TraceProvider. It won't work if you use NodeSDK.
-  // We use registered provider to create traces inside of Next.js internals.
-  const provider = new NodeTracerProvider({
-    resource: new Resource({
-      [SEMRESATTRS_SERVICE_NAME]: 'next-app',
-    }),
-  })
-
-  // Make sure to register you provider
-  provider.register({
-    propagator: {
-      inject(_context, carrier, setter) {
-        setter.set(carrier, 'my-test-key-1', 'my-test-value-1')
-        setter.set(carrier, 'my-test-key-2', 'my-test-value-2')
-      },
-      extract(context) {
-        // This is a noop because we don't extract in this test
-        return context
-      },
-      fields() {
-        return ['my-test-key-1', 'my-test-key-2']
-      },
-    },
-  })
-}
diff --git a/test/e2e/client-trace-metadata/instrumentation.ts b/test/e2e/client-trace-metadata/instrumentation.ts
deleted file mode 100644
index cd9be56845fd0..0000000000000
--- a/test/e2e/client-trace-metadata/instrumentation.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export async function register() {
-  if (process.env.NEXT_RUNTIME === 'nodejs') {
-    require('./instrumentation-node').register()
-  }
-}
diff --git a/test/e2e/client-trace-metadata/package.json b/test/e2e/client-trace-metadata/package.json
deleted file mode 100644
index 7b0ea8619a1f8..0000000000000
--- a/test/e2e/client-trace-metadata/package.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "dependencies": {
-    "@opentelemetry/resources": "^1.21.0",
-    "@opentelemetry/semantic-conventions": "^1.21.0",
-    "@opentelemetry/sdk-trace-node": "^1.21.0"
-  }
-}
diff --git a/test/e2e/client-trace-metadata/.gitignore b/test/e2e/opentelemetry/client-trace-metadata/.gitignore
similarity index 100%
rename from test/e2e/client-trace-metadata/.gitignore
rename to test/e2e/opentelemetry/client-trace-metadata/.gitignore
diff --git a/test/e2e/opentelemetry/client-trace-metadata/app/dynamic-page/page.tsx b/test/e2e/opentelemetry/client-trace-metadata/app/dynamic-page/page.tsx
new file mode 100644
index 0000000000000..e1679f32f8fc0
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/app/dynamic-page/page.tsx
@@ -0,0 +1,5 @@
+export const dynamic = 'force-dynamic'
+
+export default function DynamicPage() {
+  return <h1 id="dynamic-page-header">Dynamic Page</h1>
+}
diff --git a/test/e2e/opentelemetry/client-trace-metadata/app/layout.tsx b/test/e2e/opentelemetry/client-trace-metadata/app/layout.tsx
new file mode 100644
index 0000000000000..e7077399c03ce
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/opentelemetry/client-trace-metadata/app/static-page-2/page.tsx b/test/e2e/opentelemetry/client-trace-metadata/app/static-page-2/page.tsx
new file mode 100644
index 0000000000000..50cc7d891ee46
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/app/static-page-2/page.tsx
@@ -0,0 +1,3 @@
+export default function StaticPage() {
+  return <h1 id="static-page-2-header">Static Page 2</h1>
+}
diff --git a/test/e2e/opentelemetry/client-trace-metadata/app/static-page/page.tsx b/test/e2e/opentelemetry/client-trace-metadata/app/static-page/page.tsx
new file mode 100644
index 0000000000000..dd675c61e47fe
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/app/static-page/page.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+export default function StaticPage() {
+  return (
+    <>
+      <h1 id="static-page-header">Static Page</h1>
+      <Link href="/dynamic-page" id="go-to-dynamic-page">
+        Go to dynamic page
+      </Link>
+      <Link href="/static-page-2" id="go-to-static-page">
+        Go to static page
+      </Link>
+    </>
+  )
+}
diff --git a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
new file mode 100644
index 0000000000000..68ec3887cf1c0
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
@@ -0,0 +1,142 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('clientTraceMetadata', () => {
+  const { next, isNextDev } = nextTestSetup({
+    files: __dirname,
+    dependencies: require('./package.json').dependencies,
+  })
+
+  it('should inject propagation data for a dynamically server-side-rendered page', async () => {
+    const $ = await next.render$('/dynamic-page')
+    const headHtml = $.html('head')
+    expect(headHtml).toContain(
+      '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
+    )
+    expect($.html('head')).toContain(
+      '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
+    )
+    expect($.html('head')).toMatch(
+      /<meta name="_next-trace-data-my-parent-span-id" content="[a-f0-9]{16}">/
+    )
+  })
+
+  if (isNextDev) {
+    describe('next dev only', () => {
+      it('should inject propagation data for a statically server-side-rendered page', async () => {
+        const $ = await next.render$('/static-page')
+        const headHtml = $.html('head')
+        expect(headHtml).toContain(
+          '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
+        )
+        expect($.html('head')).toContain(
+          '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
+        )
+        expect($.html('head')).toMatch(
+          /<meta name="_next-trace-data-my-parent-span-id" content="[a-f0-9]{16}">/
+        )
+      })
+
+      it('soft navigating to a dynamic page should not transform previous propagation data', async () => {
+        const browser = await next.browser('/static-page')
+
+        const initialSpanIdTagContent = await browser
+          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .getAttribute('content')
+
+        // We are in dev mode so the static page should contain propagation data
+        expect(initialSpanIdTagContent).toMatch(/[a-f0-9]{16}/)
+
+        await browser.elementByCss('#go-to-dynamic-page').click()
+        await browser.elementByCss('#dynamic-page-header')
+
+        const updatedSpanIdTagContent = await browser
+          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .getAttribute('content')
+
+        expect(initialSpanIdTagContent).toBe(updatedSpanIdTagContent)
+      })
+
+      it('soft navigating to a static page should not transform previous propagation data', async () => {
+        const browser = await next.browser('/static-page')
+
+        const initialSpanIdTagContent = await browser
+          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .getAttribute('content')
+
+        // We are in dev mode so the static page should contain propagation data
+        expect(initialSpanIdTagContent).toMatch(/[a-f0-9]{16}/)
+
+        await browser.elementByCss('#go-to-static-page').click()
+        await browser.elementByCss('#static-page-2-header')
+
+        const updatedSpanIdTagContent = await browser
+          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .getAttribute('content')
+
+        expect(initialSpanIdTagContent).toBe(updatedSpanIdTagContent)
+      })
+    })
+  } else {
+    describe('next start only', () => {
+      it('should inject propagation data for a statically server-side-rendered page', async () => {
+        const $ = await next.render$('/static-page')
+        const headHtml = $.html('head')
+        expect(headHtml).not.toContain(
+          '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
+        )
+        expect($.html('head')).not.toContain(
+          '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
+        )
+        expect($.html('head')).not.toMatch(
+          /<meta name="_next-trace-data-my-parent-span-id" content="[a-f0-9]{16}">/
+        )
+      })
+
+      it('soft navigating to a dynamic page should not transform previous propagation data', async () => {
+        const browser = await next.browser('/static-page')
+
+        await browser.elementByCss('#static-page-header')
+
+        const initialSpanIdTag = await browser.eval(
+          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+        )
+
+        // We are in prod mode so we are not expecting propagation data to be present for a static page
+        expect(initialSpanIdTag).toBeNull()
+
+        await browser.elementByCss('#go-to-dynamic-page').click()
+        await browser.elementByCss('#dynamic-page-header')
+
+        const updatedSpanIdTag = await browser.eval(
+          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+        )
+
+        // After the navigation to the dynamic page, there should still be no meta tag with propagation data
+        expect(updatedSpanIdTag).toBeNull()
+      })
+
+      it('soft navigating to a static page should not transform previous propagation data', async () => {
+        const browser = await next.browser('/static-page')
+
+        await browser.elementByCss('#static-page-header')
+
+        const initialSpanIdTag = await browser.eval(
+          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+        )
+
+        // We are in prod mode so we are not expecting propagation data to be present for a static page
+        expect(initialSpanIdTag).toBeNull()
+
+        await browser.elementByCss('#go-to-static-page').click()
+        await browser.elementByCss('#static-page-2-header')
+
+        const updatedSpanIdTag = await browser.eval(
+          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+        )
+
+        // After the navigation to the dynamic page, there should still be no meta tag with propagation data
+        expect(updatedSpanIdTag).toBeNull()
+      })
+    })
+  }
+})
diff --git a/test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts b/test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts
new file mode 100644
index 0000000000000..f12793ad9056a
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts
@@ -0,0 +1,28 @@
+import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node'
+import { trace } from '@opentelemetry/api'
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    const provider = new NodeTracerProvider()
+    provider.register({
+      propagator: {
+        inject(context, carrier, setter) {
+          setter.set(carrier, 'my-test-key-1', 'my-test-value-1')
+          setter.set(carrier, 'my-test-key-2', 'my-test-value-2')
+          setter.set(
+            carrier,
+            'my-parent-span-id',
+            trace.getSpanContext(context).spanId
+          )
+        },
+        extract(context) {
+          // This is a noop because we don't extract in this test
+          return context
+        },
+        fields() {
+          return ['my-parent-span-id', 'my-test-key-1', 'my-test-key-2']
+        },
+      },
+    })
+  }
+}
diff --git a/test/e2e/client-trace-metadata/next.config.js b/test/e2e/opentelemetry/client-trace-metadata/next.config.js
similarity index 100%
rename from test/e2e/client-trace-metadata/next.config.js
rename to test/e2e/opentelemetry/client-trace-metadata/next.config.js
diff --git a/test/e2e/opentelemetry/client-trace-metadata/package.json b/test/e2e/opentelemetry/client-trace-metadata/package.json
new file mode 100644
index 0000000000000..59db9002b5857
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/package.json
@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@opentelemetry/api": "^1.8.0",
+    "@opentelemetry/sdk-trace-node": "^1.21.0"
+  }
+}

From e2bac9c0d17dd06137de4b6196c273b3df05d81d Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Thu, 11 Apr 2024 12:54:47 +0200
Subject: [PATCH 05/13] Add test to ensure dynamicity of data

---
 .../client-trace-metadata.test.ts                | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
index 68ec3887cf1c0..8f93ecf49df5e 100644
--- a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
+++ b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
@@ -20,6 +20,22 @@ describe('clientTraceMetadata', () => {
     )
   })
 
+  it('hard loading a dynamic page twice should yield different dynamic trace data', async () => {
+    const browser1 = await next.browser('/dynamic-page')
+    const firstLoadSpanIdContent = await browser1
+      .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+      .getAttribute('content')
+
+    const browser2 = await next.browser('/dynamic-page')
+    const secondLoadSpanIdContent = await browser2
+      .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+      .getAttribute('content')
+
+    expect(firstLoadSpanIdContent).toMatch(/[a-f0-9]{16}/)
+    expect(secondLoadSpanIdContent).toMatch(/[a-f0-9]{16}/)
+    expect(firstLoadSpanIdContent).not.toBe(secondLoadSpanIdContent)
+  })
+
   if (isNextDev) {
     describe('next dev only', () => {
       it('should inject propagation data for a statically server-side-rendered page', async () => {

From 55a720940b0c5865615ec147172f900565ff2f12 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Thu, 11 Apr 2024 13:07:49 +0200
Subject: [PATCH 06/13] Run tests for ppr true and false

---
 .../client-trace-metadata.test.ts                     |  9 ++++++++-
 .../client-trace-metadata/next.config.js              | 11 -----------
 2 files changed, 8 insertions(+), 12 deletions(-)
 delete mode 100644 test/e2e/opentelemetry/client-trace-metadata/next.config.js

diff --git a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
index 8f93ecf49df5e..03ea3bfddff1f 100644
--- a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
+++ b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
@@ -1,9 +1,16 @@
 import { nextTestSetup } from 'e2e-utils'
 
-describe('clientTraceMetadata', () => {
+describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
   const { next, isNextDev } = nextTestSetup({
     files: __dirname,
     dependencies: require('./package.json').dependencies,
+    nextConfig: {
+      experimental: {
+        instrumentationHook: true,
+        clientTraceMetadata: true,
+        ppr: pprEnabled,
+      },
+    },
   })
 
   it('should inject propagation data for a dynamically server-side-rendered page', async () => {
diff --git a/test/e2e/opentelemetry/client-trace-metadata/next.config.js b/test/e2e/opentelemetry/client-trace-metadata/next.config.js
deleted file mode 100644
index 4e0f3282f3a90..0000000000000
--- a/test/e2e/opentelemetry/client-trace-metadata/next.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @type {import('next').NextConfig}
- */
-const nextConfig = {
-  experimental: {
-    instrumentationHook: true,
-    clientTraceMetadata: true,
-  },
-}
-
-module.exports = nextConfig

From 9231fcbc0d0b13b2fef4a1e8a137a6c715891896 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Thu, 11 Apr 2024 13:11:06 +0200
Subject: [PATCH 07/13] Remove dev artifact

---
 test/e2e/app-dir/adsf/adsf.test.ts   | 32 ----------------------------
 test/e2e/app-dir/adsf/app/layout.tsx |  7 ------
 test/e2e/app-dir/adsf/app/page.tsx   |  3 ---
 test/e2e/app-dir/adsf/next.config.js |  6 ------
 4 files changed, 48 deletions(-)
 delete mode 100644 test/e2e/app-dir/adsf/adsf.test.ts
 delete mode 100644 test/e2e/app-dir/adsf/app/layout.tsx
 delete mode 100644 test/e2e/app-dir/adsf/app/page.tsx
 delete mode 100644 test/e2e/app-dir/adsf/next.config.js

diff --git a/test/e2e/app-dir/adsf/adsf.test.ts b/test/e2e/app-dir/adsf/adsf.test.ts
deleted file mode 100644
index 201b201faa997..0000000000000
--- a/test/e2e/app-dir/adsf/adsf.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { nextTestSetup } from 'e2e-utils'
-
-describe('adsf', () => {
-  const { next } = nextTestSetup({
-    files: __dirname,
-  })
-
-  // Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
-  it('should work using cheerio', async () => {
-    const $ = await next.render$('/')
-    expect($('p').text()).toBe('hello world')
-  })
-
-  // Recommended for tests that need a full browser
-  it('should work using browser', async () => {
-    const browser = await next.browser('/')
-    expect(await browser.elementByCss('p').text()).toBe('hello world')
-  })
-
-  // In case you need the full HTML. Can also use $.html() with cheerio.
-  it('should work with html', async () => {
-    const html = await next.render('/')
-    expect(html).toContain('hello world')
-  })
-
-  // In case you need to test the response object
-  it('should work with fetch', async () => {
-    const res = await next.fetch('/')
-    const html = await res.text()
-    expect(html).toContain('hello world')
-  })
-})
diff --git a/test/e2e/app-dir/adsf/app/layout.tsx b/test/e2e/app-dir/adsf/app/layout.tsx
deleted file mode 100644
index e7077399c03ce..0000000000000
--- a/test/e2e/app-dir/adsf/app/layout.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Root({ children }: { children: React.ReactNode }) {
-  return (
-    <html>
-      <body>{children}</body>
-    </html>
-  )
-}
diff --git a/test/e2e/app-dir/adsf/app/page.tsx b/test/e2e/app-dir/adsf/app/page.tsx
deleted file mode 100644
index ff7159d9149fe..0000000000000
--- a/test/e2e/app-dir/adsf/app/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function Page() {
-  return <p>hello world</p>
-}
diff --git a/test/e2e/app-dir/adsf/next.config.js b/test/e2e/app-dir/adsf/next.config.js
deleted file mode 100644
index 807126e4cf0bf..0000000000000
--- a/test/e2e/app-dir/adsf/next.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * @type {import('next').NextConfig}
- */
-const nextConfig = {}
-
-module.exports = nextConfig

From 38536c4c692fab9d514d864c25618442f3feb405 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Thu, 18 Apr 2024 15:14:49 +0200
Subject: [PATCH 08/13] Add comment clarifying the purpose of the
 `_next-trace-data-` prefix

---
 .../src/server/app-render/make-get-server-inserted-html.tsx    | 3 +++
 1 file changed, 3 insertions(+)

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
index e9d52e7342650..8571cf949b3c9 100644
--- 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
@@ -85,6 +85,9 @@ export function makeGetServerInsertedHTML({
             })
         }
         {traceData.map(({ key, value }) => {
+          // The meta-tag name is prefixed with "_next-trace-data-" for mainly two reasons:
+          // - Avoid collisions with meta tags created by the user
+          // - Allow clients that want to propagate _all_ trace data to explicitly query for meta tags prefixed with "_next-trace-data-"
           return (
             <meta key={key} name={`_next-trace-data-${key}`} content={value} />
           )

From e430d57d33f0fff5a9ef9681032f34a3ea7c9b63 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 14 May 2024 17:17:47 +0200
Subject: [PATCH 09/13] use array to filer the injected metadata

---
 packages/next/src/export/index.ts             |  2 +-
 .../next/src/server/app-render/app-render.tsx | 18 ++++---
 .../make-get-server-inserted-html.tsx         | 31 ++++++++----
 packages/next/src/server/app-render/types.ts  |  2 +-
 packages/next/src/server/base-server.ts       |  3 +-
 packages/next/src/server/config-schema.ts     |  2 +-
 packages/next/src/server/config-shared.ts     |  6 +--
 .../client-trace-metadata.test.ts             | 47 ++++++++-----------
 .../client-trace-metadata/next.config.js      | 10 ++++
 9 files changed, 69 insertions(+), 52 deletions(-)
 create mode 100644 test/e2e/opentelemetry/client-trace-metadata/next.config.js

diff --git a/packages/next/src/export/index.ts b/packages/next/src/export/index.ts
index b667808c6c8ec..b52db8cd6d3dd 100644
--- a/packages/next/src/export/index.ts
+++ b/packages/next/src/export/index.ts
@@ -420,8 +420,8 @@ export async function exportAppImpl(
     deploymentId: nextConfig.deploymentId,
     experimental: {
       isAppPPREnabled: checkIsAppPPREnabled(nextConfig.experimental.ppr),
+      clientTraceMetadata: nextConfig.experimental.clientTraceMetadata,
       swrDelta: nextConfig.experimental.swrDelta,
-      clientTraceMetadata: nextConfig.experimental.clientTraceMetadata === true,
     },
   }
 
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index b5a0a1478edf8..23facb23c4902 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -76,7 +76,10 @@ 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 { makeGetServerInsertedHTML } from './make-get-server-inserted-html'
+import {
+  getTracedMetadata,
+  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'
@@ -912,6 +915,11 @@ async function renderToHTMLOrFlightImpl(
       tree,
       formState,
     }: RenderToStreamOptions): Promise<RenderToStreamResult> => {
+      const tracingMetadata = getTracedMetadata(
+        getTracer().getTracePropagationData(),
+        renderOpts.experimental.clientTraceMetadata
+      )
+
       const polyfills: JSX.IntrinsicElements['script'][] =
         buildManifest.polyfillFiles
           .filter(
@@ -995,9 +1003,7 @@ async function renderToHTMLOrFlightImpl(
         renderServerInsertedHTML,
         serverCapturedErrors: allCapturedErrors,
         basePath: renderOpts.basePath,
-        traceData: renderOpts.experimental.clientTraceMetadata
-          ? getTracer().getTracePropagationData()
-          : [],
+        tracingMetadata: tracingMetadata,
       })
 
       const renderer = createStaticRenderer({
@@ -1322,9 +1328,7 @@ async function renderToHTMLOrFlightImpl(
                 renderServerInsertedHTML,
                 serverCapturedErrors: [],
                 basePath: renderOpts.basePath,
-                traceData: renderOpts.experimental.clientTraceMetadata
-                  ? getTracer().getTracePropagationData()
-                  : [],
+                tracingMetadata: tracingMetadata,
               }),
               serverInsertedHTMLToHead: true,
               validateRootLayout,
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
index 8571cf949b3c9..624b1df8d7ac7 100644
--- 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,16 +11,24 @@ 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,
   serverCapturedErrors,
-  traceData,
+  tracingMetadata,
   basePath,
 }: {
   polyfills: JSX.IntrinsicElements['script'][]
   renderServerInsertedHTML: () => React.ReactNode
-  traceData: ClientTraceDataEntry[]
+  tracingMetadata: ClientTraceDataEntry[] | undefined
   serverCapturedErrors: Error[]
   basePath: string
 }) {
@@ -84,14 +92,17 @@ export function makeGetServerInsertedHTML({
               return <script key={polyfill.src} {...polyfill} />
             })
         }
-        {traceData.map(({ key, value }) => {
-          // The meta-tag name is prefixed with "_next-trace-data-" for mainly two reasons:
-          // - Avoid collisions with meta tags created by the user
-          // - Allow clients that want to propagate _all_ trace data to explicitly query for meta tags prefixed with "_next-trace-data-"
-          return (
-            <meta key={key} name={`_next-trace-data-${key}`} content={value} />
-          )
-        })}
+        {tracingMetadata
+          ? tracingMetadata.map(({ key, value }) => {
+              return (
+                <meta
+                  key={`next-trace-data-${key}:${value}`}
+                  name={key}
+                  content={value}
+                />
+              )
+            })
+          : null}
         {errorMetaTags}
       </>,
       {
diff --git a/packages/next/src/server/app-render/types.ts b/packages/next/src/server/app-render/types.ts
index 91564f8de6081..7709994149763 100644
--- a/packages/next/src/server/app-render/types.ts
+++ b/packages/next/src/server/app-render/types.ts
@@ -170,7 +170,7 @@ export interface RenderOptsPartial {
      */
     isRoutePPREnabled?: boolean
     swrDelta: SwrDelta | undefined
-    clientTraceMetadata: boolean
+    clientTraceMetadata: string[] | undefined
   }
   postponed?: string
   /**
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index 88ec35fc504a4..3f66e33d2ea52 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -556,8 +556,7 @@ export default abstract class Server<
       experimental: {
         isAppPPREnabled,
         swrDelta: this.nextConfig.experimental.swrDelta,
-        clientTraceMetadata:
-          this.nextConfig.experimental.clientTraceMetadata === true,
+        clientTraceMetadata: this.nextConfig.experimental.clientTraceMetadata,
       },
     }
 
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
index dfdac28456479..4c00c7cce8386 100644
--- a/packages/next/src/server/config-schema.ts
+++ b/packages/next/src/server/config-schema.ts
@@ -390,7 +390,7 @@ export const configSchema: zod.ZodType<NextConfig> = z.lazy(() =>
         optimizePackageImports: z.array(z.string()).optional(),
         optimizeServerReact: z.boolean().optional(),
         instrumentationHook: z.boolean().optional(),
-        clientTraceMetadata: z.boolean().optional(),
+        clientTraceMetadata: z.array(z.string()).optional(),
         turbotrace: z
           .object({
             logLevel: z
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 8726dee79dc89..418c486e453a3 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -366,9 +366,9 @@ export interface ExperimentalConfig {
   instrumentationHook?: boolean
 
   /**
-   * Enables the propagation of trace data through meta tags to the client.
+   * The array of the meta tags to the client injected by tracing propagation data.
    */
-  clientTraceMetadata?: boolean
+  clientTraceMetadata?: string[]
 
   /**
    * Using this feature will enable the `react@experimental` for the `app` directory.
@@ -924,7 +924,7 @@ export const defaultConfig: NextConfig = {
     turbotrace: undefined,
     typedRoutes: false,
     instrumentationHook: false,
-    clientTraceMetadata: false,
+    clientTraceMetadata: undefined,
     bundlePagesExternals: false,
     parallelServerCompiles: false,
     parallelServerBuildTraces: false,
diff --git a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
index 03ea3bfddff1f..b5b39d6ca6a2c 100644
--- a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
+++ b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
@@ -1,41 +1,34 @@
 import { nextTestSetup } from 'e2e-utils'
 
-describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
+describe('clientTraceMetadata (ppr=%p)', () => {
   const { next, isNextDev } = nextTestSetup({
     files: __dirname,
     dependencies: require('./package.json').dependencies,
-    nextConfig: {
-      experimental: {
-        instrumentationHook: true,
-        clientTraceMetadata: true,
-        ppr: pprEnabled,
-      },
-    },
   })
 
   it('should inject propagation data for a dynamically server-side-rendered page', async () => {
     const $ = await next.render$('/dynamic-page')
     const headHtml = $.html('head')
     expect(headHtml).toContain(
-      '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
+      '<meta name="my-test-key-1" content="my-test-value-1">'
     )
     expect($.html('head')).toContain(
-      '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
+      '<meta name="my-test-key-2" content="my-test-value-2">'
     )
     expect($.html('head')).toMatch(
-      /<meta name="_next-trace-data-my-parent-span-id" content="[a-f0-9]{16}">/
+      /<meta name="my-parent-span-id" content="[a-f0-9]{16}">/
     )
   })
 
   it('hard loading a dynamic page twice should yield different dynamic trace data', async () => {
     const browser1 = await next.browser('/dynamic-page')
     const firstLoadSpanIdContent = await browser1
-      .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+      .elementByCss('meta[name="my-parent-span-id"]')
       .getAttribute('content')
 
     const browser2 = await next.browser('/dynamic-page')
     const secondLoadSpanIdContent = await browser2
-      .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+      .elementByCss('meta[name="my-parent-span-id"]')
       .getAttribute('content')
 
     expect(firstLoadSpanIdContent).toMatch(/[a-f0-9]{16}/)
@@ -49,13 +42,13 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         const $ = await next.render$('/static-page')
         const headHtml = $.html('head')
         expect(headHtml).toContain(
-          '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
+          '<meta name="my-test-key-1" content="my-test-value-1">'
         )
         expect($.html('head')).toContain(
-          '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
+          '<meta name="my-test-key-2" content="my-test-value-2">'
         )
         expect($.html('head')).toMatch(
-          /<meta name="_next-trace-data-my-parent-span-id" content="[a-f0-9]{16}">/
+          /<meta name="my-parent-span-id" content="[a-f0-9]{16}">/
         )
       })
 
@@ -63,7 +56,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         const browser = await next.browser('/static-page')
 
         const initialSpanIdTagContent = await browser
-          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .elementByCss('meta[name="my-parent-span-id"]')
           .getAttribute('content')
 
         // We are in dev mode so the static page should contain propagation data
@@ -73,7 +66,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         await browser.elementByCss('#dynamic-page-header')
 
         const updatedSpanIdTagContent = await browser
-          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .elementByCss('meta[name="my-parent-span-id"]')
           .getAttribute('content')
 
         expect(initialSpanIdTagContent).toBe(updatedSpanIdTagContent)
@@ -83,7 +76,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         const browser = await next.browser('/static-page')
 
         const initialSpanIdTagContent = await browser
-          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .elementByCss('meta[name="my-parent-span-id"]')
           .getAttribute('content')
 
         // We are in dev mode so the static page should contain propagation data
@@ -93,7 +86,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         await browser.elementByCss('#static-page-2-header')
 
         const updatedSpanIdTagContent = await browser
-          .elementByCss('meta[name="_next-trace-data-my-parent-span-id"]')
+          .elementByCss('meta[name="my-parent-span-id"]')
           .getAttribute('content')
 
         expect(initialSpanIdTagContent).toBe(updatedSpanIdTagContent)
@@ -105,13 +98,13 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         const $ = await next.render$('/static-page')
         const headHtml = $.html('head')
         expect(headHtml).not.toContain(
-          '<meta name="_next-trace-data-my-test-key-1" content="my-test-value-1">'
+          '<meta name="my-test-key-1" content="my-test-value-1">'
         )
         expect($.html('head')).not.toContain(
-          '<meta name="_next-trace-data-my-test-key-2" content="my-test-value-2">'
+          '<meta name="my-test-key-2" content="my-test-value-2">'
         )
         expect($.html('head')).not.toMatch(
-          /<meta name="_next-trace-data-my-parent-span-id" content="[a-f0-9]{16}">/
+          /<meta name="my-parent-span-id" content="[a-f0-9]{16}">/
         )
       })
 
@@ -121,7 +114,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         await browser.elementByCss('#static-page-header')
 
         const initialSpanIdTag = await browser.eval(
-          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+          'document.querySelector(\'meta[name="my-parent-span-id"]\')'
         )
 
         // We are in prod mode so we are not expecting propagation data to be present for a static page
@@ -131,7 +124,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         await browser.elementByCss('#dynamic-page-header')
 
         const updatedSpanIdTag = await browser.eval(
-          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+          'document.querySelector(\'meta[name="my-parent-span-id"]\')'
         )
 
         // After the navigation to the dynamic page, there should still be no meta tag with propagation data
@@ -144,7 +137,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         await browser.elementByCss('#static-page-header')
 
         const initialSpanIdTag = await browser.eval(
-          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+          'document.querySelector(\'meta[name="my-parent-span-id"]\')'
         )
 
         // We are in prod mode so we are not expecting propagation data to be present for a static page
@@ -154,7 +147,7 @@ describe.each([false, true])('clientTraceMetadata (ppr=%p)', (pprEnabled) => {
         await browser.elementByCss('#static-page-2-header')
 
         const updatedSpanIdTag = await browser.eval(
-          'document.querySelector(\'meta[name="_next-trace-data-my-parent-span-id"]\')'
+          'document.querySelector(\'meta[name="my-parent-span-id"]\')'
         )
 
         // After the navigation to the dynamic page, there should still be no meta tag with propagation data
diff --git a/test/e2e/opentelemetry/client-trace-metadata/next.config.js b/test/e2e/opentelemetry/client-trace-metadata/next.config.js
new file mode 100644
index 0000000000000..529a5ed29d0cf
--- /dev/null
+++ b/test/e2e/opentelemetry/client-trace-metadata/next.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  experimental: {
+    instrumentationHook: true,
+    clientTraceMetadata: [
+      'my-parent-span-id',
+      'my-test-key-1',
+      'my-test-key-2',
+    ],
+  },
+}

From 52abe2ad53c7bbf440921aa615f1d0d5475e9b8a Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 14 May 2024 17:20:54 +0200
Subject: [PATCH 10/13] change type in turbopack

---
 packages/next-swc/crates/next-core/src/next_config.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/next-swc/crates/next-core/src/next_config.rs b/packages/next-swc/crates/next-core/src/next_config.rs
index cde9514d27b97..38026e5c77e26 100644
--- a/packages/next-swc/crates/next-core/src/next_config.rs
+++ b/packages/next-swc/crates/next-core/src/next_config.rs
@@ -514,7 +514,7 @@ pub struct ExperimentalConfig {
     gzip_size: Option<bool>,
 
     instrumentation_hook: Option<bool>,
-    client_trace_metadata: Option<bool>,
+    client_trace_metadata: Option<Vec<String>>,
     large_page_data_bytes: Option<f64>,
     logging: Option<serde_json::Value>,
     memory_based_workers_count: Option<bool>,

From 1f42da00b7a11e1071baf9721ddef1120f2b051e Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 14 May 2024 17:37:26 +0200
Subject: [PATCH 11/13] rm conflicted flag

---
 packages/next/src/server/config-shared.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 418c486e453a3..555444d3bac7b 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -925,7 +925,6 @@ export const defaultConfig: NextConfig = {
     typedRoutes: false,
     instrumentationHook: false,
     clientTraceMetadata: undefined,
-    bundlePagesExternals: false,
     parallelServerCompiles: false,
     parallelServerBuildTraces: false,
     ppr:

From 4311c486ac5b5e34635220e3047aebd542874981 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 14 May 2024 17:46:05 +0200
Subject: [PATCH 12/13] fix missing serverInsertedHTML

---
 .../next/src/server/app-render/make-get-server-inserted-html.tsx | 1 +
 1 file changed, 1 insertion(+)

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
index 624b1df8d7ac7..d3fb3b9f29826 100644
--- 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
@@ -92,6 +92,7 @@ export function makeGetServerInsertedHTML({
               return <script key={polyfill.src} {...polyfill} />
             })
         }
+        {serverInsertedHTML}
         {tracingMetadata
           ? tracingMetadata.map(({ key, value }) => {
               return (

From 2b3412e60ae58f6e4b410d2d3185cc747a4c17a2 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Wed, 15 May 2024 11:16:57 +0200
Subject: [PATCH 13/13] test the non-injected case

---
 .../client-trace-metadata.test.ts                    | 12 +++++++-----
 .../client-trace-metadata/instrumentation.ts         |  9 ++++++++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
index b5b39d6ca6a2c..0300ba638efc9 100644
--- a/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
+++ b/test/e2e/opentelemetry/client-trace-metadata/client-trace-metadata.test.ts
@@ -1,6 +1,6 @@
 import { nextTestSetup } from 'e2e-utils'
 
-describe('clientTraceMetadata (ppr=%p)', () => {
+describe('clientTraceMetadata', () => {
   const { next, isNextDev } = nextTestSetup({
     files: __dirname,
     dependencies: require('./package.json').dependencies,
@@ -12,12 +12,13 @@ describe('clientTraceMetadata (ppr=%p)', () => {
     expect(headHtml).toContain(
       '<meta name="my-test-key-1" content="my-test-value-1">'
     )
-    expect($.html('head')).toContain(
+    expect(headHtml).toContain(
       '<meta name="my-test-key-2" content="my-test-value-2">'
     )
-    expect($.html('head')).toMatch(
+    expect(headHtml).toMatch(
       /<meta name="my-parent-span-id" content="[a-f0-9]{16}">/
     )
+    expect(headHtml).not.toContain('non-metadata-key-3')
   })
 
   it('hard loading a dynamic page twice should yield different dynamic trace data', async () => {
@@ -44,12 +45,13 @@ describe('clientTraceMetadata (ppr=%p)', () => {
         expect(headHtml).toContain(
           '<meta name="my-test-key-1" content="my-test-value-1">'
         )
-        expect($.html('head')).toContain(
+        expect(headHtml).toContain(
           '<meta name="my-test-key-2" content="my-test-value-2">'
         )
-        expect($.html('head')).toMatch(
+        expect(headHtml).toMatch(
           /<meta name="my-parent-span-id" content="[a-f0-9]{16}">/
         )
+        expect(headHtml).not.toContain('non-metadata-key-3')
       })
 
       it('soft navigating to a dynamic page should not transform previous propagation data', async () => {
diff --git a/test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts b/test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts
index f12793ad9056a..5a3b001be9676 100644
--- a/test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts
+++ b/test/e2e/opentelemetry/client-trace-metadata/instrumentation.ts
@@ -9,6 +9,8 @@ export async function register() {
         inject(context, carrier, setter) {
           setter.set(carrier, 'my-test-key-1', 'my-test-value-1')
           setter.set(carrier, 'my-test-key-2', 'my-test-value-2')
+          // This non-metadata-key-3 is not going to be injected into the page
+          setter.set(carrier, 'non-metadata-key-3', 'non-metadata-key-3')
           setter.set(
             carrier,
             'my-parent-span-id',
@@ -20,7 +22,12 @@ export async function register() {
           return context
         },
         fields() {
-          return ['my-parent-span-id', 'my-test-key-1', 'my-test-key-2']
+          return [
+            'my-parent-span-id',
+            'my-test-key-1',
+            'my-test-key-2',
+            'non-metadata-key-3',
+          ]
         },
       },
     })