Skip to content

feat(tracing): add OpenTelemetry spans to prerenderToStream phases#88914

Open
wyattjoh wants to merge 2 commits intocanaryfrom
wyattjoh/app-render-tracing
Open

feat(tracing): add OpenTelemetry spans to prerenderToStream phases#88914
wyattjoh wants to merge 2 commits intocanaryfrom
wyattjoh/app-render-tracing

Conversation

@wyattjoh
Copy link
Contributor

@wyattjoh wyattjoh commented Jan 22, 2026

What?

Adds comprehensive OpenTelemetry tracing spans to the App Router render pipeline, covering both build-time prerendering and runtime prefetch scenarios.

Why?

When debugging or optimizing applications, it's helpful to understand where time is being spent during rendering. These spans provide visibility into:

Build-time (Cache Components prerender):

  • Prospective RSC Payload generation
  • Prospective Server Prerender (to fill caches)
  • Cache Ready Wait (waiting for all cache reads)
  • Prospective Client Prerender (HTML prerender to fill client caches)
  • Final RSC Payload generation (with warmed caches)
  • Final Server Prerender (with task-based abort)
  • Final Client Prerender (with task-based abort)

Runtime (prefetch):

  • Runtime Prospective RSC Payload
  • Runtime Prospective Server Prerender
  • Runtime Cache Ready Wait
  • Runtime Final RSC Payload
  • Runtime Final Server Prerender

Dynamic Flight Rendering:

  • generateDynamicFlightRenderResult span for RSC streaming responses

How?

  1. Added AppRenderSpan.generateDynamicFlightRenderResult for dynamic flight result generation
  2. Added runtime prerender spans to PrerenderSpan enum for prefetch scenarios
  3. Updated span naming to use consistent prospective/final terminology
  4. Wrapped relevant code paths with getTracer().trace() calls

Note: To expose these spans with OpenTelemetry traces, set the NEXT_OTEL_VERBOSE=1 environment variable.

Add tracing spans to visualize the different phases of the Cache
Components prerender pipeline in prerenderToStream:

- Initial RSC Payload generation
- Initial Server Prerender (prospective render to fill caches)
- Cache Ready Wait (waiting for all cache reads to complete)
- Initial Client Prerender (HTML prerender to fill client caches)
- Final RSC Payload generation (with warmed caches)
- Final Server Prerender (final RSC render with task-based abort)
- Final Client Prerender (final HTML render with task-based abort)

These spans help developers understand the performance characteristics
of their Cache Components-enabled applications during build time.
@wyattjoh wyattjoh force-pushed the wyattjoh/app-render-tracing branch from e1b0e42 to 53e7e26 Compare January 22, 2026 20:58
@nextjs-bot
Copy link
Collaborator

nextjs-bot commented Jan 22, 2026

Stats from current PR

🔴 1 regression

Metric Canary PR Change Trend
node_modules Size 460 MB 461 MB 🔴 +225 kB (+0%) █████
📊 All Metrics
📖 Metrics Glossary

Dev Server Metrics:

  • Listen = TCP port starts accepting connections
  • First Request = HTTP server returns successful response
  • Cold = Fresh build (no cache)
  • Warm = With cached build artifacts

Build Metrics:

  • Fresh = Clean build (no .next directory)
  • Cached = With existing .next directory

Change Thresholds:

  • Time: Changes < 50ms AND < 10%, OR < 2% are insignificant
  • Size: Changes < 1KB AND < 1% are insignificant
  • All other changes are flagged to catch regressions

⚡ Dev Server

Metric Canary PR Change Trend
Cold (Listen) 456ms 456ms ▁▁▁▁█
Cold (Ready in log) 437ms 438ms ▂▆▅▅█
Cold (First Request) 1.148s 1.167s ▂███▇
Warm (Listen) 457ms 457ms ▁▁▁▁█
Warm (Ready in log) 442ms 442ms ▁▁▁▁█
Warm (First Request) 341ms 343ms ▁▁▁▁█
📦 Dev Server (Webpack) (Legacy)

📦 Dev Server (Webpack)

Metric Canary PR Change Trend
Cold (Listen) 456ms 455ms ▁▅▁▅▅
Cold (Ready in log) 440ms 439ms ▇▁▇▂▆
Cold (First Request) 1.759s 1.778s ▆▁▅▁▅
Warm (Listen) 456ms 456ms ▁▁▁▁▁
Warm (Ready in log) 440ms 439ms ▅▂▅▁▅
Warm (First Request) 1.767s 1.799s ▅▂▅▁▆

⚡ Production Builds

Metric Canary PR Change Trend
Fresh Build 4.391s 4.347s ▄▂▁▁▇
Cached Build 4.343s 4.363s ▃▁▁▁█
📦 Production Builds (Webpack) (Legacy)

📦 Production Builds (Webpack)

Metric Canary PR Change Trend
Fresh Build 14.100s 14.089s ▂▂▂▁▁
Cached Build 14.220s 14.194s ▄▂▁▂▁
node_modules Size 460 MB 461 MB 🔴 +225 kB (+0%) █████
📦 Bundle Sizes

Bundle Sizes

⚡ Turbopack

Client

Main Bundles: **432 kB** → **432 kB** ✅ -32 B

82 files with content-based hashes (individual files not comparable between builds)

Server

Middleware
Canary PR Change
middleware-b..fest.js gzip 762 B 768 B
Total 762 B 768 B ⚠️ +6 B
Build Details
Build Manifests
Canary PR Change
_buildManifest.js gzip 450 B 451 B
Total 450 B 451 B ⚠️ +1 B

📦 Webpack

Client

Main Bundles
Canary PR Change
2086.HASH.js gzip 169 B N/A -
2161-HASH.js gzip 5.41 kB N/A -
2747-HASH.js gzip 4.48 kB N/A -
4322-HASH.js gzip 52.7 kB N/A -
ec793fe8-HASH.js gzip 62.3 kB N/A -
framework-HASH.js gzip 59.8 kB 59.8 kB
main-app-HASH.js gzip 250 B 254 B 🔴 +4 B (+2%)
main-HASH.js gzip 38.7 kB 39.1 kB
webpack-HASH.js gzip 1.68 kB 1.68 kB
1596.HASH.js gzip N/A 169 B -
2658-HASH.js gzip N/A 52.4 kB -
6349-HASH.js gzip N/A 4.46 kB -
7019-HASH.js gzip N/A 5.43 kB -
b17a3386-HASH.js gzip N/A 62.3 kB -
Total 226 kB 226 kB ⚠️ +56 B
Polyfills
Canary PR Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Total 39.4 kB 39.4 kB
Pages
Canary PR Change
_app-HASH.js gzip 194 B 193 B
_error-HASH.js gzip 182 B 182 B
css-HASH.js gzip 336 B 335 B
dynamic-HASH.js gzip 1.8 kB 1.8 kB
edge-ssr-HASH.js gzip 256 B 256 B
head-HASH.js gzip 352 B 349 B
hooks-HASH.js gzip 385 B 384 B
image-HASH.js gzip 580 B 580 B
index-HASH.js gzip 259 B 258 B
link-HASH.js gzip 2.5 kB 2.51 kB
routerDirect..HASH.js gzip 319 B 317 B
script-HASH.js gzip 385 B 387 B
withRouter-HASH.js gzip 316 B 315 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Total 7.97 kB 7.96 kB ✅ -8 B

Server

Edge SSR
Canary PR Change
edge-ssr.js gzip 126 kB 126 kB
page.js gzip 244 kB 240 kB 🟢 4.16 kB (-2%)
Total 370 kB 366 kB ✅ -3.88 kB
Middleware
Canary PR Change
middleware-b..fest.js gzip 617 B 618 B
middleware-r..fest.js gzip 155 B 156 B
middleware.js gzip 33 kB 33.5 kB 🔴 +442 B (+1%)
edge-runtime..pack.js gzip 842 B 842 B
Total 34.7 kB 35.1 kB ⚠️ +444 B
Build Details
Build Manifests
Canary PR Change
_buildManifest.js gzip 738 B 738 B
Total 738 B 738 B
Build Cache
Canary PR Change
0.pack gzip 3.71 MB 3.72 MB 🔴 +13.1 kB (+0%)
index.pack gzip 102 kB 102 kB
index.pack.old gzip 102 kB 102 kB
Total 3.91 MB 3.93 MB ⚠️ +13.5 kB

🔄 Shared (bundler-independent)

Runtimes
Canary PR Change
app-page-exp...dev.js gzip 306 kB 307 kB
app-page-exp..prod.js gzip 163 kB 163 kB
app-page-tur...dev.js gzip 306 kB 306 kB
app-page-tur..prod.js gzip 163 kB 163 kB
app-page-tur...dev.js gzip 303 kB 303 kB
app-page-tur..prod.js gzip 161 kB 161 kB
app-page.run...dev.js gzip 303 kB 303 kB
app-page.run..prod.js gzip 161 kB 161 kB
app-route-ex...dev.js gzip 69.4 kB 69.6 kB
app-route-ex..prod.js gzip 48.2 kB 48.2 kB
app-route-tu...dev.js gzip 69.5 kB 69.6 kB
app-route-tu..prod.js gzip 48.2 kB 48.3 kB
app-route-tu...dev.js gzip 69.1 kB 69.2 kB
app-route-tu..prod.js gzip 48 kB 48 kB
app-route.ru...dev.js gzip 69 kB 69.2 kB
app-route.ru..prod.js gzip 48 kB 48 kB
dist_client_...dev.js gzip 324 B 324 B
dist_client_...dev.js gzip 326 B 326 B
dist_client_...dev.js gzip 318 B 318 B
dist_client_...dev.js gzip 317 B 317 B
pages-api-tu...dev.js gzip 42.5 kB 42.7 kB
pages-api-tu..prod.js gzip 32.3 kB 32.3 kB
pages-api.ru...dev.js gzip 42.5 kB 42.6 kB
pages-api.ru..prod.js gzip 32.3 kB 32.3 kB
pages-turbo....dev.js gzip 51.8 kB 52 kB
pages-turbo...prod.js gzip 38.8 kB 38.9 kB
pages.runtim...dev.js gzip 51.8 kB 51.9 kB
pages.runtim..prod.js gzip 38.8 kB 38.8 kB
server.runti..prod.js gzip 62.3 kB 62.3 kB
Total 2.73 MB 2.73 MB ⚠️ +5.28 kB
📝 Changed Files (22 files)

Files with changes:

  • app-page-exp..ntime.dev.js
  • app-page-exp..time.prod.js
  • app-page-tur..ntime.dev.js
  • app-page-tur..time.prod.js
  • app-page-tur..ntime.dev.js
  • app-page-tur..time.prod.js
  • app-page.runtime.dev.js
  • app-page.runtime.prod.js
  • app-route-ex..ntime.dev.js
  • app-route-ex..time.prod.js
  • app-route-tu..ntime.dev.js
  • app-route-tu..time.prod.js
  • app-route-tu..ntime.dev.js
  • app-route-tu..time.prod.js
  • app-route.runtime.dev.js
  • app-route.ru..time.prod.js
  • pages-api-tu..ntime.dev.js
  • pages-api.runtime.dev.js
  • pages-turbo...ntime.dev.js
  • pages-turbo...time.prod.js
  • ... and 2 more
View diffs
app-page-exp..ntime.dev.js

Diff too large to display

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

Diff too large to display

app-page-tur..ntime.dev.js

Diff too large to display

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

Diff too large to display

app-page-tur..ntime.dev.js

Diff too large to display

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

Diff too large to display

app-page.runtime.dev.js

Diff too large to display

app-page.runtime.prod.js

Diff too large to display

app-route-ex..ntime.dev.js

Diff too large to display

app-route-ex..time.prod.js

Diff too large to display

app-route-tu..ntime.dev.js

Diff too large to display

app-route-tu..time.prod.js

Diff too large to display

app-route-tu..ntime.dev.js

Diff too large to display

app-route-tu..time.prod.js

Diff too large to display

app-route.runtime.dev.js

Diff too large to display

app-route.ru..time.prod.js

Diff too large to display

pages-api-tu..ntime.dev.js

Diff too large to display

pages-api.runtime.dev.js

Diff too large to display

pages-turbo...ntime.dev.js

Diff too large to display

pages-turbo...time.prod.js

Diff too large to display

pages.runtime.dev.js

Diff too large to display

pages.runtime.prod.js

Diff too large to display

- Add span for generateDynamicFlightRenderResult
- Add runtime prerender spans for prefetch scenarios
- Improve span naming consistency (prospective/final pattern)
@nextjs-bot
Copy link
Collaborator

nextjs-bot commented Jan 23, 2026

Tests Passed

@wyattjoh wyattjoh marked this pull request as ready for review January 23, 2026 15:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants