Add otel span for client component loading #62296

ijjk · 2024-02-20T18:30:52Z

This adds a new span to allow tracking the sum of all client component loading times for a specific request along with the count of items loaded.

Closes NEXT-2540

ijjk · 2024-02-20T18:34:17Z

Tests Passed

dvoytenko · 2024-02-20T18:36:20Z

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

  // We need to expose the bundled `require` API globally for
  // react-server-dom-webpack. This is a hack until we find a better way.
  if (ComponentMod.__next_app__) {
    // @ts-ignore
-    globalThis.__next_require__ = ComponentMod.__next_app__.require
+    globalThis.__next_require__ = (...args: any[]) => {


Do you know if this recursive? Or only top-level? If recursive - we need to expect 100s to 1000s of calls here.

Yea should be ok as we're only tracking the total sum and not each individual call

dvoytenko · 2024-02-20T18:36:29Z

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

-    globalThis.__next_require__ = ComponentMod.__next_app__.require
+    globalThis.__next_require__ = (...args: any[]) => {
+      if (clientComponentLoadStart === 0) {
+        clientComponentLoadStart = Date.now()


Why not performance.now()?

Maybe there can be gaps in the timeline?

Just followed prior art of Date.now() being used in lib/trace/tracer

Ok. Let's follow then what they do.

javivelasco · 2024-02-20T18:37:23Z

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

+        clientComponentLoadStart = Date.now()
+      }
+
+      const startTime = Date.now()


One assumption that we are making here is that all of these require times are sequential. Is that true? Otherwise we will get bigger values than that it actually takes.

The span time time should be the duration of the sum of individual load times even if spread out over time

ijjk · 2024-02-20T18:37:32Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
buildDuration	14.2s	14.5s	⚠️ +262ms
buildDurationCached	8.3s	8.3s	N/A
nodeModulesSize	197 MB	197 MB	⚠️ +69.2 kB
nextStartRea..uration (ms)	405ms	408ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
1068-HASH.js gzip	30.3 kB	30.3 kB	N/A
3f784ff6-HASH.js gzip	53.5 kB	53.5 kB	N/A
4944-HASH.js gzip	5.04 kB	5.03 kB	N/A
8423.HASH.js gzip	181 B	181 B	✓
framework-HASH.js gzip	45.2 kB	45.2 kB	✓
main-app-HASH.js gzip	241 B	242 B	N/A
main-HASH.js gzip	32.2 kB	32.1 kB	N/A
webpack-HASH.js gzip	1.7 kB	1.7 kB	✓
Overall change	47.1 kB	47.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
_app-HASH.js gzip	196 B	196 B	✓
_error-HASH.js gzip	184 B	183 B	N/A
amp-HASH.js gzip	503 B	504 B	N/A
css-HASH.js gzip	323 B	324 B	N/A
dynamic-HASH.js gzip	2.5 kB	2.51 kB	N/A
edge-ssr-HASH.js gzip	258 B	259 B	N/A
head-HASH.js gzip	353 B	351 B	N/A
hooks-HASH.js gzip	370 B	370 B	✓
image-HASH.js gzip	4.21 kB	4.2 kB	N/A
index-HASH.js gzip	259 B	259 B	✓
link-HASH.js gzip	2.68 kB	2.67 kB	N/A
routerDirect..HASH.js gzip	313 B	314 B	N/A
script-HASH.js gzip	386 B	385 B	N/A
withRouter-HASH.js gzip	309 B	311 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	931 B	931 B	✓

Client Build Manifests

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
_buildManifest.js gzip	485 B	484 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
index.html gzip	526 B	528 B	N/A
link.html gzip	540 B	540 B	✓
withRouter.html gzip	524 B	522 B	N/A
Overall change	540 B	540 B	✓

Edge SSR bundle Size

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
edge-ssr.js gzip	2.29 kB	2.29 kB	N/A
page.js gzip	2.98 kB	2.97 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
middleware-b..fest.js gzip	627 B	629 B	N/A
middleware-r..fest.js gzip	151 B	151 B	✓
middleware.js gzip	466 B	465 B	N/A
edge-runtime..pack.js gzip	839 B	839 B	✓
Overall change	990 B	990 B	✓

Next Runtimes Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
app-page-exp...dev.js gzip	166 kB	167 kB	⚠️ +258 B
app-page-exp..prod.js gzip	95.9 kB	96.1 kB	⚠️ +260 B
app-page-tur..prod.js gzip	97.6 kB	97.9 kB	⚠️ +263 B
app-page-tur..prod.js gzip	92 kB	92.3 kB	⚠️ +253 B
app-page.run...dev.js gzip	136 kB	136 kB	⚠️ +254 B
app-page.run..prod.js gzip	90.6 kB	90.8 kB	⚠️ +255 B
app-route-ex...dev.js gzip	22 kB	22.1 kB	N/A
app-route-ex..prod.js gzip	14.9 kB	14.9 kB	N/A
app-route-tu..prod.js gzip	14.9 kB	14.9 kB	N/A
app-route-tu..prod.js gzip	14.7 kB	14.7 kB	N/A
app-route.ru...dev.js gzip	21.7 kB	21.8 kB	N/A
app-route.ru..prod.js gzip	14.7 kB	14.7 kB	N/A
pages-api-tu..prod.js gzip	9.47 kB	9.49 kB	N/A
pages-api.ru...dev.js gzip	9.74 kB	9.76 kB	N/A
pages-api.ru..prod.js gzip	9.47 kB	9.48 kB	N/A
pages-turbo...prod.js gzip	22.1 kB	22.2 kB	N/A
pages.runtim...dev.js gzip	22.8 kB	22.8 kB	N/A
pages.runtim..prod.js gzip	22.1 kB	22.2 kB	N/A
server.runti..prod.js gzip	50.2 kB	50.2 kB	N/A
Overall change	679 kB	680 kB	⚠️ +1.54 kB

build cache Overall increase ⚠️

	vercel/next.js canary	ijjk/next.js add/otel-client-loading	Change
0.pack gzip	1.49 MB	1.49 MB	N/A
index.pack gzip	104 kB	104 kB	⚠️ +464 B
Overall change	104 kB	104 kB	⚠️ +464 B

Diff details

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

failed to diff

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

failed to diff

Diff for app-page.runtime.prod.js

Diff too large to display

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

Diff too large to display

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

Diff too large to display

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

Diff too large to display

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

Diff too large to display

Diff for app-route.runtime.dev.js

Diff too large to display

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

Diff too large to display

Diff for pages-api-tu..time.prod.js

Diff too large to display

Diff for pages-api.runtime.dev.js

Diff too large to display

Diff for pages-api.ru..time.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Diff for server.runtime.prod.js

Diff too large to display

Commit: dd04292

Add otel span for client component loading

7469075

ijjk requested review from timneutkens, shuding, huozhi, feedthejim, ztanner and wyattjoh as code owners February 20, 2024 18:30

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Feb 20, 2024

ijjk requested review from dvoytenko and javivelasco February 20, 2024 18:33

dvoytenko reviewed Feb 20, 2024

View reviewed changes

javivelasco reviewed Feb 20, 2024

View reviewed changes

fix edge runtime case

4aec809

ijjk requested review from javivelasco and dvoytenko February 20, 2024 19:01

dvoytenko approved these changes Feb 20, 2024

View reviewed changes

update tests

f492487

ijjk added the area: tests label Feb 20, 2024

javivelasco approved these changes Feb 20, 2024

View reviewed changes

Merge branch 'canary' into add/otel-client-loading

dd04292

ztanner merged commit 6feb803 into vercel:canary Feb 20, 2024
64 checks passed

ijjk deleted the add/otel-client-loading branch February 20, 2024 21:36

github-actions bot added the locked label Mar 6, 2024

github-actions bot locked as resolved and limited conversation to collaborators Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add otel span for client component loading #62296

Add otel span for client component loading #62296

ijjk commented Feb 20, 2024 •

edited by padmaia

ijjk commented Feb 20, 2024 •

edited

dvoytenko Feb 20, 2024

ijjk Feb 20, 2024

dvoytenko Feb 20, 2024

javivelasco Feb 20, 2024

ijjk Feb 20, 2024

dvoytenko Feb 20, 2024

javivelasco Feb 20, 2024

ijjk Feb 20, 2024

ijjk commented Feb 20, 2024 •

edited

Add otel span for client component loading #62296

Add otel span for client component loading #62296

Conversation

ijjk commented Feb 20, 2024 • edited by padmaia

ijjk commented Feb 20, 2024 • edited

Tests Passed

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ijjk commented Feb 20, 2024 • edited

Stats from current PR

ijjk commented Feb 20, 2024 •

edited by padmaia

ijjk commented Feb 20, 2024 •

edited

ijjk commented Feb 20, 2024 •

edited