Add tracing for css-loader #28756

timneutkens · 2021-09-03T08:00:04Z

Adds spans for css-loader.

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

…r-tracing-2

…t.js into add/css-loader-tracing-2

ijjk · 2021-09-04T10:13:27Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
buildDuration	15.1s	14.9s	-107ms
buildDurationCached	3.9s	3.8s	-35ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +2 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.923	2.869	-0.05
/ avg req/sec	855.43	871.34	+15.91
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.643	1.581	-0.06
/error-in-render avg req/sec	1521.29	1581.34	+60.05

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.3 kB	23.3 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	67.2 kB	67.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
_app-HASH.js gzip	979 B	979 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.14 kB	4.14 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	318 B	318 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
_buildManifest.js gzip	492 B	492 B	✓
Overall change	492 B	492 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
index.html gzip	539 B	539 B	✓
link.html gzip	553 B	553 B	✓
withRouter.html gzip	533 B	533 B	✓
Overall change	1.63 kB	1.63 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
buildDuration	12.2s	11.8s	-360ms
buildDurationCached	5.1s	4.9s	-183ms
nodeModulesSize	49.3 MB	49.3 MB	⚠️ +2 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.86	2.836	-0.02
/ avg req/sec	874.11	881.53	+7.42
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.64	1.529	-0.11
/error-in-render avg req/sec	1524.1	1635.29	+111.19

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
16.HASH.js gzip	186 B	186 B	✓
677f882d2ed8..HASH.js gzip	14.1 kB	14.1 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.7 kB	10.7 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	68.1 kB	68.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
_app-HASH.js gzip	964 B	964 B	✓
_error-HASH.js gzip	3.8 kB	3.8 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.87 kB	2.87 kB	✓
head-HASH.js gzip	3.06 kB	3.06 kB	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	3.03 kB	3.03 kB	✓
withRouter-HASH.js gzip	295 B	295 B	✓
30809af5c834..565.css gzip	125 B	125 B	✓
Overall change	18.1 kB	18.1 kB	✓

Client Build Manifests

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes

	vercel/next.js canary	timneutkens/next.js add/css-loader-tracing-2	Change
index.html gzip	584 B	584 B	✓
link.html gzip	597 B	597 B	✓
withRouter.html gzip	577 B	577 B	✓
Overall change	1.76 kB	1.76 kB	✓

Commit: 0e65ce3

ijjk · 2021-09-04T10:28:33Z

Failing test suites

Commit: 0e65ce3

test/integration/required-server-files/test/index.test.js

Required Server Files > should output required-server-files manifest correctly
Required Server Files > should render SSR page correctly
Required Server Files > should render dynamic SSR page correctly
Required Server Files > should render fallback page correctly
Required Server Files > should render SSR page correctly with x-matched-path
Required Server Files > should render dynamic SSR page correctly with x-matched-path
Required Server Files > should render fallback page correctly with x-matched-path and routes-matches
Required Server Files > should return data correctly with x-matched-path
Required Server Files > should render fallback optional catch-all route correctly with x-matched-path and routes-matches
Required Server Files > should return data correctly with x-matched-path for optional catch-all route
Required Server Files > should not apply trailingSlash redirect
Required Server Files > should normalize catch-all rewrite query values correctly
Required Server Files > should bubble error correctly for gip page
Required Server Files > should bubble error correctly for gssp page
Required Server Files > should bubble error correctly for gsp page
Required Server Files > should bubble error correctly for API page
Required Server Files > should normalize optional values correctly for SSP page
Required Server Files > should normalize optional values correctly for SSG page
Required Server Files > should normalize optional values correctly for SSG page with encoded slash
Required Server Files > should normalize optional values correctly for API page
Required Server Files > should match the index page correctly
Required Server Files > should match the root dyanmic page correctly

Expand output

● Required Server Files › should output required-server-files manifest correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render SSR page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render dynamic SSR page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render fallback page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render SSR page correctly with x-matched-path

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render dynamic SSR page correctly with x-matched-path

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render fallback page correctly with x-matched-path and routes-matches

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should return data correctly with x-matched-path

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should render fallback optional catch-all route correctly with x-matched-path and routes-matches

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should return data correctly with x-matched-path for optional catch-all route

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should not apply trailingSlash redirect

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize catch-all rewrite query values correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for gip page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for gssp page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for gsp page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should bubble error correctly for API page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for SSP page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for SSG page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for SSG page with encoded slash

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should normalize optional values correctly for API page

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should match the index page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

● Required Server Files › should match the root dyanmic page correctly

Command failed with exit code 1 (EPERM): yarn install

  42 |     await fs.writeFile(
  43 |       join(workDir, 'package.json'),
> 44 |       JSON.stringify({
     |         ^
  45 |         dependencies: {
  46 |           next: packagePath,
  47 |           react: 'latest',

  at makeError (../node_modules/execa/lib/error.js:58:11)
  at handlePromise (../node_modules/execa/index.js:112:26)
  at integration/required-server-files/test/index.test.js:44:9

Add tracing for css-loader

91c2c36

timneutkens requested review from huozhi, ijjk, padmaia, shuding and styfle as code owners September 3, 2021 08:00

ijjk added created-by: Next.js team PRs by the Next.js team type: next labels Sep 3, 2021