Add `clientTraceMetadata` experimental option to propagate tracing data to the client #64256

lforst · 2024-04-09T14:58:57Z

What?

This PR adds an experimental option clientTraceMetadata that will use the existing OpenTelemetry functionality to propagate conventional OpenTelemetry trace information to the client.

The propagation metadata is propagated to the client via meta tags, having a name and a content attribute containing the value of the tracing value:

<html>
    <head>
        <meta name="baggage" content="key1=val1,key2=val2">
        <meta name="traceparent" content="00-0af7651916cd43dd8448eb211c80319c-b7ad6b7169203331-01">
        <meta name="custom" content="foobar">
    </head>
</html>

The implementation adheres to OpenTelemetry as much as possible, treating the meta tags as if they were tracing headers on outgoing requests. The clientTraceMetadata will contain the keys of the metadata that're going to injected for tracing purpose.

Why?

Telemetry providers usually want to provide visibility across the entire stack, meaning it is useful for users to be able to associate, for example, web vitals on the client, with a span tree on the server. In order to be able to correlate tracing events from the front- and backend, it is necessary to share something like a trace ID or similar, that the telemetry providers can pick up and stitch back together to create a trace.

How?

The tracer was extended with a method getTracePropagationData() that returns the propagation data on the currently active OpenTelemetry context.
We are using makeGetServerInsertedHTML() to inject the meta tags into the HTML head for dynamic requests.
The meta tags are generated through using the newly added getTracePropagationData() method on the tracer.

It is important to mention that the trace information should only be propagated for the initial loading of the page, including hard navigations. Any subsequent operations should not propagate trace data from the server to the client, as the client generally is the root of the trace. The exception is initial pageloads, since while the request starts on the client, no JS has had the opportunity to run yet, meaning there is no trace propagation on the client before the server hasn't responded.

Situations that we do not want tracing information to be propagated from the server to the client:

Prefetch requests. Prefetches generally start on the client and are already instrumented.
Any sort of static precomputation, including PPR. If we include trace information in static pages, it means that all clients that will land on the static page will be part of the "precomputation" trace. This would lead to gigantic traces with a ton of unrelated data that is not useful. The special case is dev mode where it is likely fine to propagate trace information, even for static content, since it is usually not actually static in dev mode.
Clientside (soft) navigations. Navigations start on the client and are usually already instrumented.

Alternatives considered

An implementation that purely lives in user-land could have been implemented with useServerInsertedHTML(), however, that implementation would be cumbersome for users to set up, since the implementation of tracing would have to happen in a) the instrumentation hook, b) in a client-component that is used in a top-level layout.

Related issues/discussions

[NEXT-911] Issue tracking OpenTelemetry support #47660
Add support for server-timing header #62353 (Could be used as an alternative to the server-timing header)
Trace pageloads on Next.js app router getsentry/sentry-javascript#9571

ijjk · 2024-04-09T14:59:20Z

Allow CI Workflow Run

approve CI run for commit: 1994fd1

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

lforst · 2024-04-09T15:15:41Z

I am happy to add more tests! I'd like to gauge the appetite for something like this.

dvoytenko · 2024-04-09T23:57:31Z

packages/next/src/server/lib/trace/tracer.ts

@@ -172,6 +193,13 @@ class NextTracerImpl implements NextTracer {
    return context
  }

+  public getTracePropagationData(): ClientTraceDataEntry[] {
+    const activeContext = context.active()


TBD, but you could check if the context is sampled and output nothing if it's not. The traceparent and similar have "sampled" flag. But usually non-sampled trace context is not helpful.

In general, it is beneficial to propagate sampled and un-sampled contexts because telemetry systems often do traced-based sampling, where a tracing decision for a particular trace (usually decided on the first service) is propagated across the entire system, and the individual services of the system only report spans, if the incoming tracing decision is positive.

For example in the traceparent header there is a flag indicating whether the trace is sampled or not: https://www.w3.org/TR/trace-context/#sampled-flag If we didn't propagate the data when the trace is not sampled, the flag would not be needed in the first place.

Does that make sense? All in all this is good because it allows us to have less logic here. :)

That's what I meant - the absence of the trace can be used to mean the traceflags are 00. But I agree with the overall reasoning. You can keep this.

test/e2e/client-trace-metadata/app/layout.tsx

lforst · 2024-04-11T11:20:53Z

@dvoytenko Re our slack convo: To clarify in what cases trace metadata should be propagated to the client:

tldr: Effectively only for pageloads or hard navigations.
Not for any statically generated pages, as the "cached" trace data would be picked up by all clients and create huge and unusable traces.
Not for any PPR content. (same reason as static pages)
Not for soft navigations. Traces for navigations originate from the client and do not need to be propagated back.

I added tests for all of the above.

I think moving forward we need to get clearance two things:

The naming of the meta tags. Imo, this can be _next-trace-data-* for now as the option is experimental and we can update later if we find a better name.
Whether what I did in makeGetServerInsertedHTML() makes sense or whether this needs to live somewhere else.

dvoytenko · 2024-04-17T00:01:24Z

Not for any statically generated pages, as the "cached" trace data would be picked up by all clients and create huge and unusable traces.

Not for any PPR content. (same reason as static pages)

This sounds reasonable. But how does your code avoid having these values produced in these modes?

P.S. We actually produce trace references for both static and PPR. But we are not using them as parent traces - that would indeed make the parent traces huge and not useful. We simply use them as links/tags for other traces to add. It reads like this: "this trace was produced by a page which was originally statically generated".

lforst · 2024-04-17T09:09:14Z

@dvoytenko Thanks for giving this another pass!

Not for any statically generated pages, as the "cached" trace data would be picked up by all clients and create huge and unusable traces.

Not for any PPR content. (same reason as static pages)

This sounds reasonable. But how does your code avoid having these values produced in these modes?

Currently, we don't explicitly check for PPR/SSG, but I believe the code path where we would generate the <meta> tags is simply not executed for PPR and static pages. In theory, the tests I added verify this 🤔 (1, 2, 3). Maybe someone working on the Next.js team working on this part of the code can confirm. If you feel like it's a good idea, I can also explicitly check for SSG and PPR and not inject the meta tags, however, I would lean towards not doing that because it would essentially be dead code assuming the code path is actually not hit.

The point about generating traces for static content also makes complete sense 👍 I assume you're using that already to track Next.js compile speed? We should just make sure that those traces do not leak into production monitoring, but I think we are aligned on that point and the tests already test for it.

ijjk · 2024-04-24T09:08:14Z

Tests Passed

packages/next/src/server/app-render/app-render.tsx

packages/next/src/server/app-render/make-get-server-inserted-html.tsx

ijjk · 2024-04-24T10:51:30Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
buildDuration	15.6s	14.2s	N/A
buildDurationCached	7.8s	7.6s	N/A
nodeModulesSize	345 MB	345 MB	⚠️ +46.8 kB
nextStartRea..uration (ms)	413ms	409ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
1813.HASH.js gzip	169 B	169 B	✓
3433-HASH.js gzip	5.06 kB	5.06 kB	N/A
6159-HASH.js gzip	33.5 kB	33.5 kB	N/A
69089819-HASH.js gzip	50.8 kB	50.8 kB	N/A
framework-HASH.js gzip	55.8 kB	55.8 kB	N/A
main-app-HASH.js gzip	221 B	221 B	✓
main-HASH.js gzip	32.3 kB	32.3 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.7 kB	N/A
Overall change	390 B	390 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
_app-HASH.js gzip	192 B	193 B	N/A
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	511 B	510 B	N/A
css-HASH.js gzip	342 B	343 B	N/A
dynamic-HASH.js gzip	2.53 kB	2.52 kB	N/A
edge-ssr-HASH.js gzip	265 B	266 B	N/A
head-HASH.js gzip	362 B	364 B	N/A
hooks-HASH.js gzip	391 B	392 B	N/A
image-HASH.js gzip	4.27 kB	4.27 kB	N/A
index-HASH.js gzip	269 B	268 B	N/A
link-HASH.js gzip	2.69 kB	2.69 kB	N/A
routerDirect..HASH.js gzip	328 B	329 B	N/A
script-HASH.js gzip	394 B	397 B	N/A
withRouter-HASH.js gzip	324 B	324 B	✓
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	622 B	622 B	✓

Client Build Manifests

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
_buildManifest.js gzip	483 B	483 B	✓
Overall change	483 B	483 B	✓

Rendered Page Sizes

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
index.html gzip	521 B	522 B	N/A
link.html gzip	535 B	536 B	N/A
withRouter.html gzip	518 B	517 B	N/A
Overall change	0 B	0 B	✓

Edge SSR bundle Size Overall increase ⚠️

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
edge-ssr.js gzip	120 kB	120 kB	N/A
page.js gzip	179 kB	179 kB	⚠️ +223 B
Overall change	179 kB	179 kB	⚠️ +223 B

Middleware size

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
middleware-b..fest.js gzip	656 B	659 B	N/A
middleware-r..fest.js gzip	155 B	153 B	N/A
middleware.js gzip	26 kB	26 kB	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	839 B	839 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
app-page-exp...dev.js gzip	173 kB	173 kB	N/A
app-page-exp..prod.js gzip	105 kB	105 kB	⚠️ +120 B
app-page-tur..prod.js gzip	114 kB	115 kB	⚠️ +121 B
app-page-tur..prod.js gzip	94.1 kB	94.2 kB	⚠️ +101 B
app-page.run...dev.js gzip	159 kB	159 kB	N/A
app-page.run..prod.js gzip	92.8 kB	92.9 kB	⚠️ +102 B
app-route-ex...dev.js gzip	20.9 kB	20.9 kB	✓
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	✓
app-route-tu..prod.js gzip	15 kB	15 kB	✓
app-route-tu..prod.js gzip	14.8 kB	14.8 kB	✓
app-route.ru...dev.js gzip	20.7 kB	20.7 kB	✓
app-route.ru..prod.js gzip	14.8 kB	14.8 kB	✓
pages-api-tu..prod.js gzip	9.53 kB	9.53 kB	✓
pages-api.ru...dev.js gzip	9.8 kB	9.8 kB	✓
pages-api.ru..prod.js gzip	9.53 kB	9.53 kB	✓
pages-turbo...prod.js gzip	21.4 kB	21.4 kB	✓
pages.runtim...dev.js gzip	22 kB	22 kB	✓
pages.runtim..prod.js gzip	21.4 kB	21.4 kB	✓
server.runti..prod.js gzip	51.8 kB	51.8 kB	N/A
Overall change	601 kB	602 kB	⚠️ +444 B

build cache Overall increase ⚠️

	vercel/next.js canary	lforst/nextjs-fork lforst-propagate-trace-to-client	Change
0.pack gzip	1.65 MB	1.65 MB	⚠️ +1.11 kB
index.pack gzip	127 kB	127 kB	⚠️ +107 B
Overall change	1.77 MB	1.77 MB	⚠️ +1.22 kB

Diff details

Diff for page.js

@@ -15,7 +15,7 @@
       /***/
     },
 
-    /***/ 5670: /***/ (
+    /***/ 3514: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -30,7 +30,7 @@
         default: () => /* binding */ nHandler,
       });
 
-      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsvXpfsz%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // NAMESPACE OBJECT: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsvXpfsz%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       var page_next_edge_ssr_entry_namespaceObject = {};
       __webpack_require__.r(page_next_edge_ssr_entry_namespaceObject);
       __webpack_require__.d(page_next_edge_ssr_entry_namespaceObject, {
@@ -68,24 +68,24 @@
         tree: () => tree,
       });
 
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/web/globals.js
-      var globals = __webpack_require__(5107);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
-      var adapter = __webpack_require__(6713);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
-      var render = __webpack_require__(6526);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
-      var incremental_cache = __webpack_require__(2116);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
-      var app_render = __webpack_require__(7906);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
-      var module_compiled = __webpack_require__(4445);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/future/route-kind.js
-      var route_kind = __webpack_require__(8063);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/client/components/error-boundary.js
-      var error_boundary = __webpack_require__(3483);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
-      var entry_base = __webpack_require__(7165); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsvXpfsz%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/web/globals.js
+      var globals = __webpack_require__(4009);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/web/adapter.js + 3 modules
+      var adapter = __webpack_require__(6978);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/build/webpack/loaders/next-edge-ssr-loader/render.js + 87 modules
+      var render = __webpack_require__(8791);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/lib/incremental-cache/index.js + 3 modules
+      var incremental_cache = __webpack_require__(994);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/app-render.js + 52 modules
+      var app_render = __webpack_require__(3653);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/future/route-modules/app-page/module.compiled.js
+      var module_compiled = __webpack_require__(8414);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/future/route-kind.js
+      var route_kind = __webpack_require__(2229);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/client/components/error-boundary.js
+      var error_boundary = __webpack_require__(8002);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/entry-base.js + 9 modules
+      var entry_base = __webpack_require__(7832); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapp-edge-ssr%2Fpage&page=%2Fapp-edge-ssr%2Fpage&pagePath=private-next-app-dir%2Fapp-edge-ssr%2Fpage.js&appDir=%2Ftmp%2Fnext-statsvXpfsz%2Fstats-app%2Fapp&appPaths=%2Fapp-edge-ssr%2Fpage&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&basePath=&assetPrefix=&nextConfigOutput=&preferredRegion=&middlewareConfig=e30%3D!./app/app-edge-ssr/page.js?__next_edge_ssr_entry__
       ("TURBOPACK { transition: next-ssr }");
 
       // We inject the tree and pages here so that we can use them in the route
@@ -104,7 +104,7 @@
                     page: [
                       () =>
                         Promise.resolve(/* import() eager */).then(
-                          __webpack_require__.bind(__webpack_require__, 4791)
+                          __webpack_require__.bind(__webpack_require__, 3053)
                         ),
                       "/tmp/next-statsvXpfsz/stats-app/app/app-edge-ssr/page.js",
                     ],
@@ -118,14 +118,14 @@
             layout: [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 9469)
+                  __webpack_require__.bind(__webpack_require__, 9363)
                 ),
               "/tmp/next-statsvXpfsz/stats-app/app/layout.js",
             ],
             "not-found": [
               () =>
                 Promise.resolve(/* import() eager */).then(
-                  __webpack_require__.bind(__webpack_require__, 3048)
+                  __webpack_require__.bind(__webpack_require__, 6385)
                 ),
               "next/dist/client/components/not-found-error",
             ],
@@ -161,12 +161,12 @@
       });
 
       //# sourceMappingURL=app-page.js.map
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/lib/page-types.js
-      var page_types = __webpack_require__(3047);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/encryption-utils.js
-      var encryption_utils = __webpack_require__(866);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/esm/server/app-render/action-utils.js
-      var action_utils = __webpack_require__(2041); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzdlhwZnN6L3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiQG1hdGVyaWFsLXVpL2NvcmUiLCJAbWF0ZXJpYWwtdWkvaWNvbnMiLCJAdGFibGVyL2ljb25zLXJlYWN0IiwibXVpLWNvcmUiLCJyZWFjdC1pY29ucy9haSIsInJlYWN0LWljb25zL2JpIiwicmVhY3QtaWNvbnMvYnMiLCJyZWFjdC1pY29ucy9jZyIsInJlYWN0LWljb25zL2NpIiwicmVhY3QtaWNvbnMvZGkiLCJyZWFjdC1pY29ucy9mYSIsInJlYWN0LWljb25zL2ZhNiIsInJlYWN0LWljb25zL2ZjIiwicmVhY3QtaWNvbnMvZmkiLCJyZWFjdC1pY29ucy9naSIsInJlYWN0LWljb25zL2dvIiwicmVhY3QtaWNvbnMvZ3IiLCJyZWFjdC1pY29ucy9oaSIsInJlYWN0LWljb25zL2hpMiIsInJlYWN0LWljb25zL2ltIiwicmVhY3QtaWNvbnMvaW8iLCJyZWFjdC1pY29ucy9pbzUiLCJyZWFjdC1pY29ucy9saWEiLCJyZWFjdC1pY29ucy9saWIiLCJyZWFjdC1pY29ucy9sdSIsInJlYWN0LWljb25zL21kIiwicmVhY3QtaWNvbnMvcGkiLCJyZWFjdC1pY29ucy9yaSIsInJlYWN0LWljb25zL3J4IiwicmVhY3QtaWNvbnMvc2kiLCJyZWFjdC1pY29ucy9zbCIsInJlYWN0LWljb25zL3RiIiwicmVhY3QtaWNvbnMvdGZpIiwicmVhY3QtaWNvbnMvdGkiLCJyZWFjdC1pY29ucy92c2MiLCJyZWFjdC1pY29ucy93aSJdfSwiYnVuZGxlUGFnZXNSb3V0ZXJEZXBlbmRlbmNpZXMiOmZhbHNlLCJjb25maWdGaWxlIjoiL3RtcC9uZXh0LXN0YXRzdlhwZnN6L3N0YXRzLWFwcC9uZXh0LmNvbmZpZy5qcyIsImNvbmZpZ0ZpbGVOYW1lIjoibmV4dC5jb25maWcuanMifQ==","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzdlhwZnN6JTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/lib/page-types.js
+      var page_types = __webpack_require__(9287);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/encryption-utils.js
+      var encryption_utils = __webpack_require__(3934);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/esm/server/app-render/action-utils.js
+      var action_utils = __webpack_require__(1730); // CONCATENATED MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/dist/build/webpack/loaders/next-edge-ssr-loader/index.js?{"absolute500Path":"","absoluteAppPath":"next/dist/pages/_app","absoluteDocumentPath":"next/dist/pages/_document","absoluteErrorPath":"next/dist/pages/_error","absolutePagePath":"private-next-app-dir/app-edge-ssr/page.js","dev":false,"isServerComponent":true,"page":"/app-edge-ssr/page","stringifiedConfig":"eyJlbnYiOnt9LCJlc2xpbnQiOnsiaWdub3JlRHVyaW5nQnVpbGRzIjpmYWxzZX0sInR5cGVzY3JpcHQiOnsiaWdub3JlQnVpbGRFcnJvcnMiOmZhbHNlLCJ0c2NvbmZpZ1BhdGgiOiJ0c2NvbmZpZy5qc29uIn0sImRpc3REaXIiOiIubmV4dCIsImNsZWFuRGlzdERpciI6dHJ1ZSwiYXNzZXRQcmVmaXgiOiIiLCJjYWNoZU1heE1lbW9yeVNpemUiOjUyNDI4ODAwLCJjb25maWdPcmlnaW4iOiJuZXh0LmNvbmZpZy5qcyIsInVzZUZpbGVTeXN0ZW1QdWJsaWNSb3V0ZXMiOnRydWUsImdlbmVyYXRlRXRhZ3MiOnRydWUsInBhZ2VFeHRlbnNpb25zIjpbInRzeCIsInRzIiwianN4IiwianMiXSwicG93ZXJlZEJ5SGVhZGVyIjp0cnVlLCJjb21wcmVzcyI6dHJ1ZSwiaW1hZ2VzIjp7ImRldmljZVNpemVzIjpbNjQwLDc1MCw4MjgsMTA4MCwxMjAwLDE5MjAsMjA0OCwzODQwXSwiaW1hZ2VTaXplcyI6WzE2LDMyLDQ4LDY0LDk2LDEyOCwyNTYsMzg0XSwicGF0aCI6Ii9fbmV4dC9pbWFnZSIsImxvYWRlciI6ImRlZmF1bHQiLCJsb2FkZXJGaWxlIjoiIiwiZG9tYWlucyI6W10sImRpc2FibGVTdGF0aWNJbWFnZXMiOmZhbHNlLCJtaW5pbXVtQ2FjaGVUVEwiOjYwLCJmb3JtYXRzIjpbImltYWdlL3dlYnAiXSwiZGFuZ2Vyb3VzbHlBbGxvd1NWRyI6ZmFsc2UsImNvbnRlbnRTZWN1cml0eVBvbGljeSI6InNjcmlwdC1zcmMgJ25vbmUnOyBmcmFtZS1zcmMgJ25vbmUnOyBzYW5kYm94OyIsImNvbnRlbnREaXNwb3NpdGlvblR5cGUiOiJhdHRhY2htZW50IiwicmVtb3RlUGF0dGVybnMiOltdLCJ1bm9wdGltaXplZCI6ZmFsc2V9LCJkZXZJbmRpY2F0b3JzIjp7ImJ1aWxkQWN0aXZpdHkiOnRydWUsImJ1aWxkQWN0aXZpdHlQb3NpdGlvbiI6ImJvdHRvbS1yaWdodCJ9LCJvbkRlbWFuZEVudHJpZXMiOnsibWF4SW5hY3RpdmVBZ2UiOjYwMDAwLCJwYWdlc0J1ZmZlckxlbmd0aCI6NX0sImFtcCI6eyJjYW5vbmljYWxCYXNlIjoiIn0sImJhc2VQYXRoIjoiIiwic2Fzc09wdGlvbnMiOnt9LCJ0cmFpbGluZ1NsYXNoIjpmYWxzZSwiaTE4biI6bnVsbCwicHJvZHVjdGlvbkJyb3dzZXJTb3VyY2VNYXBzIjpmYWxzZSwib3B0aW1pemVGb250cyI6dHJ1ZSwiZXhjbHVkZURlZmF1bHRNb21lbnRMb2NhbGVzIjp0cnVlLCJzZXJ2ZXJSdW50aW1lQ29uZmlnIjp7fSwicHVibGljUnVudGltZUNvbmZpZyI6e30sInJlYWN0UHJvZHVjdGlvblByb2ZpbGluZyI6ZmFsc2UsInJlYWN0U3RyaWN0TW9kZSI6bnVsbCwiaHR0cEFnZW50T3B0aW9ucyI6eyJrZWVwQWxpdmUiOnRydWV9LCJzdGF0aWNQYWdlR2VuZXJhdGlvblRpbWVvdXQiOjYwLCJtb2R1bGFyaXplSW1wb3J0cyI6eyJAbXVpL2ljb25zLW1hdGVyaWFsIjp7InRyYW5zZm9ybSI6IkBtdWkvaWNvbnMtbWF0ZXJpYWwve3ttZW1iZXJ9fSJ9LCJsb2Rhc2giOnsidHJhbnNmb3JtIjoibG9kYXNoL3t7bWVtYmVyfX0ifX0sImV4cGVyaW1lbnRhbCI6eyJmbHlpbmdTaHV0dGxlIjpmYWxzZSwicHJlcmVuZGVyRWFybHlFeGl0IjpmYWxzZSwic2VydmVyTWluaWZpY2F0aW9uIjp0cnVlLCJzZXJ2ZXJTb3VyY2VNYXBzIjpmYWxzZSwibGlua05vVG91Y2hTdGFydCI6ZmFsc2UsImNhc2VTZW5zaXRpdmVSb3V0ZXMiOmZhbHNlLCJwcmVsb2FkRW50cmllc09uU3RhcnQiOnRydWUsImNsaWVudFJvdXRlckZpbHRlciI6dHJ1ZSwiY2xpZW50Um91dGVyRmlsdGVyUmVkaXJlY3RzIjpmYWxzZSwiZmV0Y2hDYWNoZUtleVByZWZpeCI6IiIsIm1pZGRsZXdhcmVQcmVmZXRjaCI6ImZsZXhpYmxlIiwib3B0aW1pc3RpY0NsaWVudENhY2hlIjp0cnVlLCJtYW51YWxDbGllbnRCYXNlUGF0aCI6ZmFsc2UsImNwdXMiOjE5LCJtZW1vcnlCYXNlZFdvcmtlcnNDb3VudCI6ZmFsc2UsImlzckZsdXNoVG9EaXNrIjp0cnVlLCJ3b3JrZXJUaHJlYWRzIjpmYWxzZSwib3B0aW1pemVDc3MiOmZhbHNlLCJuZXh0U2NyaXB0V29ya2VycyI6ZmFsc2UsInNjcm9sbFJlc3RvcmF0aW9uIjpmYWxzZSwiZXh0ZXJuYWxEaXIiOmZhbHNlLCJkaXNhYmxlT3B0aW1pemVkTG9hZGluZyI6ZmFsc2UsImd6aXBTaXplIjp0cnVlLCJjcmFDb21wYXQiOmZhbHNlLCJlc21FeHRlcm5hbHMiOnRydWUsImZ1bGx5U3BlY2lmaWVkIjpmYWxzZSwib3V0cHV0RmlsZVRyYWNpbmdSb290IjoiL3RtcC9uZXh0LXN0YXRzdlhwZnN6L3N0YXRzLWFwcCIsInN3Y1RyYWNlUHJvZmlsaW5nIjpmYWxzZSwiZm9yY2VTd2NUcmFuc2Zvcm1zIjpmYWxzZSwibGFyZ2VQYWdlRGF0YUJ5dGVzIjoxMjgwMDAsImFkanVzdEZvbnRGYWxsYmFja3MiOmZhbHNlLCJhZGp1c3RGb250RmFsbGJhY2tzV2l0aFNpemVBZGp1c3QiOmZhbHNlLCJ0eXBlZFJvdXRlcyI6ZmFsc2UsImluc3RydW1lbnRhdGlvbkhvb2siOmZhbHNlLCJwYXJhbGxlbFNlcnZlckNvbXBpbGVzIjpmYWxzZSwicGFyYWxsZWxTZXJ2ZXJCdWlsZFRyYWNlcyI6ZmFsc2UsInBwciI6ZmFsc2UsIm9wdGltaXplU2VydmVyUmVhY3QiOnRydWUsInVzZUVhcmx5SW1wb3J0IjpmYWxzZSwic3RhbGVUaW1lcyI6eyJkeW5hbWljIjozMCwic3RhdGljIjozMDB9LCJvcHRpbWl6ZVBhY2thZ2VJbXBvcnRzIjpbImx1Y2lkZS1yZWFjdCIsImRhdGUtZm5zIiwibG9kYXNoLWVzIiwicmFtZGEiLCJhbnRkIiwicmVhY3QtYm9vdHN0cmFwIiwiYWhvb2tzIiwiQGFudC1kZXNpZ24vaWNvbnMiLCJAaGVhZGxlc3N1aS9yZWFjdCIsIkBoZWFkbGVzc3VpLWZsb2F0L3JlYWN0IiwiQGhlcm9pY29ucy9yZWFjdC8yMC9zb2xpZCIsIkBoZXJvaWNvbnMvcmVhY3QvMjQvc29saWQiLCJAaGVyb2ljb25zL3JlYWN0LzI0L291dGxpbmUiLCJAdmlzeC92aXN4IiwiQHRyZW1vci9yZWFjdCIsInJ4anMiLCJAbXVpL21hdGVyaWFsIiwiQG11aS9pY29ucy1tYXRlcmlhbCIsInJlY2hhcnRzIiwicmVhY3QtdXNlIiwiQG1hdGVyaWFsLXVpL2NvcmUiLCJAbWF0ZXJpYWwtdWkvaWNvbnMiLCJAdGFibGVyL2ljb25zLXJlYWN0IiwibXVpLWNvcmUiLCJyZWFjdC1pY29ucy9haSIsInJlYWN0LWljb25zL2JpIiwicmVhY3QtaWNvbnMvYnMiLCJyZWFjdC1pY29ucy9jZyIsInJlYWN0LWljb25zL2NpIiwicmVhY3QtaWNvbnMvZGkiLCJyZWFjdC1pY29ucy9mYSIsInJlYWN0LWljb25zL2ZhNiIsInJlYWN0LWljb25zL2ZjIiwicmVhY3QtaWNvbnMvZmkiLCJyZWFjdC1pY29ucy9naSIsInJlYWN0LWljb25zL2dvIiwicmVhY3QtaWNvbnMvZ3IiLCJyZWFjdC1pY29ucy9oaSIsInJlYWN0LWljb25zL2hpMiIsInJlYWN0LWljb25zL2ltIiwicmVhY3QtaWNvbnMvaW8iLCJyZWFjdC1pY29ucy9pbzUiLCJyZWFjdC1pY29ucy9saWEiLCJyZWFjdC1pY29ucy9saWIiLCJyZWFjdC1pY29ucy9sdSIsInJlYWN0LWljb25zL21kIiwicmVhY3QtaWNvbnMvcGkiLCJyZWFjdC1pY29ucy9yaSIsInJlYWN0LWljb25zL3J4IiwicmVhY3QtaWNvbnMvc2kiLCJyZWFjdC1pY29ucy9zbCIsInJlYWN0LWljb25zL3RiIiwicmVhY3QtaWNvbnMvdGZpIiwicmVhY3QtaWNvbnMvdGkiLCJyZWFjdC1pY29ucy92c2MiLCJyZWFjdC1pY29ucy93aSJdfSwiYnVuZGxlUGFnZXNSb3V0ZXJEZXBlbmRlbmNpZXMiOmZhbHNlLCJjb25maWdGaWxlIjoiL3RtcC9uZXh0LXN0YXRzdlhwZnN6L3N0YXRzLWFwcC9uZXh0LmNvbmZpZy5qcyIsImNvbmZpZ0ZpbGVOYW1lIjoibmV4dC5jb25maWcuanMifQ==","pagesType":"app","appDirLoader":"bmV4dC1hcHAtbG9hZGVyP25hbWU9YXBwJTJGYXBwLWVkZ2Utc3NyJTJGcGFnZSZwYWdlPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZVBhdGg9cHJpdmF0ZS1uZXh0LWFwcC1kaXIlMkZhcHAtZWRnZS1zc3IlMkZwYWdlLmpzJmFwcERpcj0lMkZ0bXAlMkZuZXh0LXN0YXRzdlhwZnN6JTJGc3RhdHMtYXBwJTJGYXBwJmFwcFBhdGhzPSUyRmFwcC1lZGdlLXNzciUyRnBhZ2UmcGFnZUV4dGVuc2lvbnM9dHN4JnBhZ2VFeHRlbnNpb25zPXRzJnBhZ2VFeHRlbnNpb25zPWpzeCZwYWdlRXh0ZW5zaW9ucz1qcyZiYXNlUGF0aD0mYXNzZXRQcmVmaXg9Jm5leHRDb25maWdPdXRwdXQ9JnByZWZlcnJlZFJlZ2lvbj0mbWlkZGxld2FyZUNvbmZpZz1lMzAlM0Qh","sriEnabled":false,"middlewareConfig":"e30="}!
       var _self___RSC_MANIFEST;
 
       const incrementalCacheHandler = null;
@@ -404,47 +404,47 @@
       /***/
     },
 
-    /***/ 5903: /***/ (
+    /***/ 4588: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 1817)
+        __webpack_require__.bind(__webpack_require__, 4394)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 9652)
+        __webpack_require__.bind(__webpack_require__, 4988)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 3519)
+        __webpack_require__.bind(__webpack_require__, 9932)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 4977)
+        __webpack_require__.bind(__webpack_require__, 6371)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 9558)
+        __webpack_require__.bind(__webpack_require__, 9592)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 2096)
+        __webpack_require__.bind(__webpack_require__, 2380)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 9388)
+        __webpack_require__.bind(__webpack_require__, 6487)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 9693)
+        __webpack_require__.bind(__webpack_require__, 7202)
       );
       Promise.resolve(/* import() eager */).then(
-        __webpack_require__.bind(__webpack_require__, 5675)
+        __webpack_require__.bind(__webpack_require__, 4645)
       );
 
       /***/
     },
 
-    /***/ 7129: /***/ () => {
+    /***/ 8402: /***/ () => {
       /***/
     },
 
-    /***/ 4791: /***/ (
+    /***/ 3053: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -464,7 +464,7 @@
       /***/
     },
 
-    /***/ 9469: /***/ (
+    /***/ 9363: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -476,7 +476,7 @@
         /* harmony export */
       });
       /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ =
-        __webpack_require__(3251);
+        __webpack_require__(4470);
 
       function RootLayout({ children }) {
         return /*#__PURE__*/ (0,
@@ -495,7 +495,7 @@
     // webpackRuntimeModules
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
-    /******/ __webpack_require__.O(0, [33, 320], () => __webpack_exec__(5670));
+    /******/ __webpack_require__.O(0, [778, 793], () => __webpack_exec__(3514));
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ (_ENTRIES = typeof _ENTRIES === "undefined" ? {} : _ENTRIES)[
       "middleware_app/app-edge-ssr/page"

Diff for middleware.js

Diff too large to display

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [8358],
   {
-    /***/ 5497: /***/ (
+    /***/ 2307: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(5700);
+          return __webpack_require__(4720);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 959: /***/ (module, exports, __webpack_require__) => {
+    /***/ 8697: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,15 +40,15 @@
         __webpack_require__(5439)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(232)
+        __webpack_require__(2185)
       );
-      const _getimgprops = __webpack_require__(7335);
-      const _imageconfig = __webpack_require__(7712);
-      const _imageconfigcontextsharedruntime = __webpack_require__(1207);
-      const _warnonce = __webpack_require__(9114);
-      const _routercontextsharedruntime = __webpack_require__(8426);
+      const _getimgprops = __webpack_require__(9461);
+      const _imageconfig = __webpack_require__(5517);
+      const _imageconfigcontextsharedruntime = __webpack_require__(8947);
+      const _warnonce = __webpack_require__(5860);
+      const _routercontextsharedruntime = __webpack_require__(7328);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8106)
+        __webpack_require__(7310)
       );
       // This is replaced by webpack define plugin
       const configEnv = {
@@ -376,7 +376,7 @@
       /***/
     },
 
-    /***/ 7335: /***/ (
+    /***/ 9461: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -392,9 +392,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(9114);
-      const _imageblursvg = __webpack_require__(9966);
-      const _imageconfig = __webpack_require__(7712);
+      const _warnonce = __webpack_require__(5860);
+      const _imageblursvg = __webpack_require__(5425);
+      const _imageconfig = __webpack_require__(5517);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -769,7 +769,7 @@
       /***/
     },
 
-    /***/ 9966: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5425: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -824,7 +824,7 @@
       /***/
     },
 
-    /***/ 8366: /***/ (
+    /***/ 9578: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -851,10 +851,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(1478);
-      const _getimgprops = __webpack_require__(7335);
-      const _imagecomponent = __webpack_require__(959);
+      const _getimgprops = __webpack_require__(9461);
+      const _imagecomponent = __webpack_require__(8697);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8106)
+        __webpack_require__(7310)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -886,7 +886,7 @@
       /***/
     },
 
-    /***/ 8106: /***/ (__unused_webpack_module, exports) => {
+    /***/ 7310: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -921,7 +921,7 @@
       /***/
     },
 
-    /***/ 5700: /***/ (
+    /***/ 4720: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -938,8 +938,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/react@19.0.0-beta-4508873393-20240430/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(3456);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+main-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_65yyqpgvftv4sckwrae5ytuiki/node_modules/next/image.js
-      var next_image = __webpack_require__(5008);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/file+..+diff-repo+packages+next+next-packed.tgz_react-dom@19.0.0-beta-4508873393-20240430_rea_bi4li5t763kdoqq4snruxkmfcu/node_modules/next/image.js
+      var next_image = __webpack_require__(932);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // CONCATENATED MODULE: ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -969,12 +969,12 @@
       /***/
     },
 
-    /***/ 5008: /***/ (
+    /***/ 932: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(8366);
+      module.exports = __webpack_require__(9578);
 
       /***/
     },
@@ -984,7 +984,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [2888, 9774, 179], () =>
-      __webpack_exec__(5497)
+      __webpack_exec__(2307)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: 2b3412e

…ta to the client

unblock

huozhi · 2024-05-15T10:06:55Z

After discussing with @dvoytenko, we decided to change clientTraceMetadata to a list that represents the names of metadata that are going to be propagated to in the client. I also removed the _next-trace-data- prefix so the 3p can still rely on the standard fields such as traceparent, tracestate if they're parsing them from html page

…ta to the client (vercel#64256) ### What? This PR adds an experimental option `clientTraceMetadata` that will use the existing OpenTelemetry functionality to propagate conventional OpenTelemetry trace information to the client. The propagation metadata is propagated to the client via meta tags, having a `name` and a `content` attribute containing the value of the tracing value: ```html <html> <head> <meta name="baggage" content="key1=val1,key2=val2"> <meta name="traceparent" content="00-0af7651916cd43dd8448eb211c80319c-b7ad6b7169203331-01"> <meta name="custom" content="foobar"> </head> </html> ``` The implementation adheres to OpenTelemetry as much as possible, treating the meta tags as if they were tracing headers on outgoing requests. The `clientTraceMetadata` will contain the keys of the metadata that're going to injected for tracing purpose. ### Why? Telemetry providers usually want to provide visibility across the entire stack, meaning it is useful for users to be able to associate, for example, web vitals on the client, with a span tree on the server. In order to be able to correlate tracing events from the front- and backend, it is necessary to share something like a trace ID or similar, that the telemetry providers can pick up and stitch back together to create a trace. ### How? The tracer was extended with a method `getTracePropagationData()` that returns the propagation data on the currently active OpenTelemetry context. We are using `makeGetServerInsertedHTML()` to inject the meta tags into the HTML head for dynamic requests. The meta tags are generated through using the newly added `getTracePropagationData()` method on the tracer. It is important to mention that **the trace information should only be propagated for the initial loading of the page, including hard navigations**. Any subsequent operations should not propagate trace data from the server to the client, as the client generally is the root of the trace. The exception is initial pageloads, since while the request starts on the client, no JS has had the opportunity to run yet, meaning there is no trace propagation on the client before the server hasn't responded. Situations that we do not want tracing information to be propagated from the server to the client: - _Prefetch requests._ Prefetches generally start on the client and are already instrumented. - _Any sort of static precomputation, including PPR._ If we include trace information in static pages, it means that all clients that will land on the static page will be part of the "precomputation" trace. This would lead to gigantic traces with a ton of unrelated data that is not useful. The special case is dev mode where it is likely fine to propagate trace information, even for static content, since it is usually not actually static in dev mode. - _Clientside (soft) navigations._ Navigations start on the client and are usually already instrumented. ### Alternatives considered An implementation that purely lives in user-land could have been implemented with `useServerInsertedHTML()`, however, that implementation would be cumbersome for users to set up, since the implementation of tracing would have to happen in a) the instrumentation hook, b) in a client-component that is used in a top-level layout. ### Related issues/discussions - vercel#47660 - vercel#62353 (Could be used as an alternative to the server-timing header) - getsentry/sentry-javascript#9571 --------- Co-authored-by: Jiachi Liu <inbox@huozhi.im>

MrLoh · 2024-05-20T19:59:49Z

Is it known yet, what next.js release this will be included in?

lforst requested review from timneutkens, ijjk, shuding, huozhi, a team, ztanner, feedthejim and wyattjoh as code owners April 9, 2024 14:58

ijjk added area: tests Turbopack Related to Turbopack with Next.js. type: next labels Apr 9, 2024

lforst changed the title ~~Add clientTraceMetadata experimental option to propagate tracing da…~~ Add clientTraceMetadata experimental option to propagate tracing da… Apr 9, 2024

lforst mentioned this pull request Apr 9, 2024

Trace pageloads on Next.js app router getsentry/sentry-javascript#9571

Closed

dvoytenko previously requested changes Apr 10, 2024

View reviewed changes

lforst changed the title ~~Add clientTraceMetadata experimental option to propagate tracing da…~~ Add clientTraceMetadata experimental option to propagate tracing data to the client Apr 11, 2024

lforst requested a review from dvoytenko April 15, 2024 09:45

ijjk added the tests label Apr 18, 2024

huozhi added the CI approved Approve running CI for fork label Apr 24, 2024

huozhi reviewed Apr 24, 2024

View reviewed changes

packages/next/src/server/app-render/app-render.tsx Outdated Show resolved Hide resolved

packages/next/src/server/app-render/make-get-server-inserted-html.tsx Outdated Show resolved Hide resolved

balazsorban44 removed the area: tests label Apr 30, 2024

lforst mentioned this pull request May 6, 2024

Working with Next.js RSC Error digests getsentry/sentry-javascript#9474

Closed

lforst added 2 commits May 14, 2024 16:59

Add clientTraceMetadata experimental option to propagate tracing da…

fc32c5e

…ta to the client

Add e2e test

3f5afcc

lforst and others added 7 commits May 14, 2024 16:59

Move folder

7cfb692

Update tests to cover a few cases

0f05491

Add test to ensure dynamicity of data

e2bac9c

Run tests for ppr true and false

55a7209

Remove dev artifact

9231fcb

Add comment clarifying the purpose of the _next-trace-data- prefix

38536c4

use array to filer the injected metadata

e430d57

huozhi force-pushed the lforst-propagate-trace-to-client branch from ce0fb29 to e430d57 Compare May 14, 2024 15:18

huozhi added 3 commits May 14, 2024 17:20

change type in turbopack

52abe2a

rm conflicted flag

1f42da0

fix missing serverInsertedHTML

4311c48

huozhi approved these changes May 14, 2024

View reviewed changes

test the non-injected case

2b3412e

huozhi merged commit 0840d52 into vercel:canary May 15, 2024
74 checks passed

lforst mentioned this pull request May 23, 2024

feat(nextjs): Trace pageloads in App Router getsentry/sentry-javascript#12157

Merged

github-actions bot added the locked label Jun 5, 2024

github-actions bot locked as resolved and limited conversation to collaborators Jun 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `clientTraceMetadata` experimental option to propagate tracing data to the client #64256

Add `clientTraceMetadata` experimental option to propagate tracing data to the client #64256

lforst commented Apr 9, 2024 •

edited by huozhi

Loading

ijjk commented Apr 9, 2024 •

edited

Loading

lforst commented Apr 9, 2024

dvoytenko Apr 9, 2024

lforst Apr 10, 2024

dvoytenko Apr 10, 2024

lforst commented Apr 11, 2024

dvoytenko commented Apr 17, 2024

lforst commented Apr 17, 2024

ijjk commented Apr 24, 2024 •

edited

Loading

ijjk commented Apr 24, 2024 •

edited

Loading

huozhi commented May 15, 2024

MrLoh commented May 20, 2024

Add clientTraceMetadata experimental option to propagate tracing data to the client #64256

Add clientTraceMetadata experimental option to propagate tracing data to the client #64256

Conversation

lforst commented Apr 9, 2024 • edited by huozhi Loading

What?

Why?

How?

Alternatives considered

Related issues/discussions

ijjk commented Apr 9, 2024 • edited Loading

lforst commented Apr 9, 2024

dvoytenko Apr 9, 2024

Choose a reason for hiding this comment

lforst Apr 10, 2024

Choose a reason for hiding this comment

dvoytenko Apr 10, 2024

Choose a reason for hiding this comment

lforst commented Apr 11, 2024

dvoytenko commented Apr 17, 2024

lforst commented Apr 17, 2024

ijjk commented Apr 24, 2024 • edited Loading

Tests Passed

ijjk commented Apr 24, 2024 • edited Loading

Stats from current PR

huozhi commented May 15, 2024

MrLoh commented May 20, 2024

Add `clientTraceMetadata` experimental option to propagate tracing data to the client #64256

Add `clientTraceMetadata` experimental option to propagate tracing data to the client #64256

lforst commented Apr 9, 2024 •

edited by huozhi

Loading

ijjk commented Apr 9, 2024 •

edited

Loading

ijjk commented Apr 24, 2024 •

edited

Loading

ijjk commented Apr 24, 2024 •

edited

Loading