feat(trace): next/trace to event format converter

[kwonoj]

This PR adds a small utility script for the existing next/trace converts emitted output into chromium's trace event format (https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview?mode=html#). Converted output can be loaded in a couple of visualizers that understand trace event format.

• chrome://tracing
• https://ui.perfetto.dev/

Technically it is possible to make generated event format to be compatible to chrome devtool's profiler as well, but that is not dealt with initial implementation.

This is very straightforward, naive conversion between generated trace to the specific format instead of trying to augment existing traces: in result, some of the values are dummy (pid, tid, category). Depends on usecases we can potentially expand & correct later if needed.

Below screenshot is perfetto from bench/nested-deps.

Bug

• Related issues linked using fixes #number
• Integration tests added
• Errors have helpful link attached, see contributing.md

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.
• Errors have helpful link attached, see contributing.md

Documentation / Examples

• Make sure the linting passes by running yarn lint

[ijjk]

Stats from current PR

Default Build (Increase detected ⚠️)

General

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
buildDuration	15.9s	16.1s	⚠️ +160ms
buildDurationCached	6.1s	6.2s	⚠️ +160ms
nodeModulesSize	485 MB	485 MB	✓

Page Load Tests Overall increase ✓

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.238	3.284	⚠️ +0.05
/ avg req/sec	772.15	761.29	⚠️ -10.86
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.424	1.383	-0.04
/error-in-render avg req/sec	1755.57	1807.46	+51.89

Client Bundles (main, webpack)

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
925.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42 kB	42 kB	✓
main-HASH.js gzip	28.5 kB	28.5 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
_app-HASH.js gzip	1.36 kB	1.36 kB	✓
_error-HASH.js gzip	192 B	192 B	✓
amp-HASH.js gzip	309 B	309 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	3.04 kB	3.04 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	920 B	920 B	✓
image-HASH.js gzip	5.74 kB	5.74 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	2.36 kB	2.36 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	392 B	392 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16 kB	16 kB	✓

Client Build Manifests

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
_buildManifest.js gzip	461 B	461 B	✓
Overall change	461 B	461 B	✓

Rendered Page Sizes

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
index.html gzip	532 B	532 B	✓
link.html gzip	545 B	545 B	✓
withRouter.html gzip	527 B	527 B	✓
Overall change	1.6 kB	1.6 kB	✓

---

Default Build with SWC (Decrease detected ✓)

General

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
buildDuration	19.1s	18.8s	-317ms
buildDurationCached	6.1s	6.2s	⚠️ +53ms
nodeModulesSize	485 MB	485 MB	✓

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.315	3.3	-0.02
/ avg req/sec	754.08	757.65	+3.57
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.421	1.455	⚠️ +0.03
/error-in-render avg req/sec	1759.49	1718.38	⚠️ -41.11

Client Bundles (main, webpack)

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
925.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.9 kB	28.9 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	72.8 kB	72.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
_app-HASH.js gzip	1.35 kB	1.35 kB	✓
_error-HASH.js gzip	179 B	179 B	✓
amp-HASH.js gzip	313 B	313 B	✓
css-HASH.js gzip	325 B	325 B	✓
dynamic-HASH.js gzip	3.02 kB	3.02 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	921 B	921 B	✓
image-HASH.js gzip	5.78 kB	5.78 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.44 kB	2.44 kB	✓
routerDirect..HASH.js gzip	322 B	322 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	317 B	317 B	✓
85e02e95b279..7e3.css gzip	107 B	107 B	✓
Overall change	16.1 kB	16.1 kB	✓

Client Build Manifests

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
_buildManifest.js gzip	457 B	457 B	✓
Overall change	457 B	457 B	✓

Rendered Page Sizes

	vercel/next.js canary	kwonoj/next.js feat-trace-event-format-converter	Change
index.html gzip	530 B	530 B	✓
link.html gzip	544 B	544 B	✓
withRouter.html gzip	526 B	526 B	✓
Overall change	1.6 kB	1.6 kB	✓

Commit: e3fa908