fix: removing traceparent from cachekey should not remove traceparent…

… from request

packages/next/src/server/lib/incremental-cache/index.ts

@@ -388,7 +388,7 @@ export class IncrementalCache implements IncrementalCacheType {
     const headers =
       typeof (init.headers || {}).keys === 'function'
         ? Object.fromEntries(init.headers as Headers)
-        : Object.assign(init.headers || {}, {})
+        : Object.assign({}, init.headers)
 
     if ('traceparent' in headers) delete headers['traceparent']
 

test/e2e/app-dir/app-static/app-static.test.ts

@@ -40,6 +40,22 @@ createNextDescribe(
       }
     })
 
+    it('should still cache even though the `traceparent` header was different', async () => {
+      const res = await next.fetch('/strip-header-traceparent')
+      expect(res.status).toBe(200)
+
+      const html = await res.text()
+      const $ = cheerio.load(html)
+
+      const data1 = $('#data1').text()
+      const data2 = $('#data2').text()
+      expect(data1).toBeTruthy()
+      expect(data1).toBe(data2)
+
+      const echoedHeaders = JSON.parse($('#echoedHeaders').text())
+      expect(echoedHeaders.headers.traceparent).toEqual('C')
+    })
+
     it('should warn for too many cache tags', async () => {
       const res = await next.fetch('/too-many-cache-tags')
       expect(res.status).toBe(200)

test/e2e/app-dir/app-static/app/strip-header-traceparent/page.tsx

@@ -0,0 +1,33 @@
+export default async function Page() {
+  const data1 = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      headers: { traceparent: 'A' },
+      next: { revalidate: 50 },
+    }
+  ).then((res) => res.text())
+
+  const data2 = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/random',
+    {
+      headers: { traceparent: 'B' },
+      next: { revalidate: 50 },
+    }
+  ).then((res) => res.text())
+
+  const echoedHeaders = await fetch(
+    'https://next-data-api-endpoint.vercel.app/api/echo-headers',
+    {
+      headers: { traceparent: 'C' },
+      next: { revalidate: 50 },
+    }
+  ).then((res) => res.text())
+
+  return (
+    <>
+      <p id="data1">{data1}</p>
+      <p id="data2">{data2}</p>
+      <p id="echoedHeaders">{echoedHeaders}</p>
+    </>
+  )
+}