Make traces in development reliable #28990

timneutkens · 2021-09-10T11:06:13Z

Moves the trace directory to be in a more logical location.
Updates console trace reporter to show ms instead of microseconds
Moves spans related to webpack compilation under the webpack-compilation span
Added name attribute for webpack-close span
Added trigger attribute for webpack-invalidated
Each compile traces will be flushed so that the particular run can be investigated
Added deeply nested benchmark to compare SWC/Babel-Terser

…pack

…e-dir

…nto add/move-trace-dir

bench/nested-deps/fuzzponent.js

package.json

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

ijjk · 2021-09-13T12:39:58Z

Failing test suites

Commit: 652043e

test/integration/config/test/index.test.js

Configuration > should log webpack version correctly

Expand output

● Configuration › should log webpack version correctly

expect(received).toContain(expected) // indexOf

Expected substring: "Using webpack 4. Reason: webpack5 flag is set to false in next.config.js"
Received string:    "Starting inspector on 127.0.0.1:9229 failed: address already in use
ready - started server on 0.0.0.0:38819, url: http://localhost:38819
info  - Using webpack 4 in Next.js is deprecated. Please upgrade to using webpack 5: https://nextjs.org/docs/messages/webpack5
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled·
event - compiled successfully
event - build page: /next-config
wait  - compiling...
event - build page: /build-id
event - build page: /webpack-css
event - build page: /next/dist/pages/_error
event - compiled successfully
"

  44 |   })
  45 |
> 46 |   afterAll(() => {
     |                   ^
  47 |     killApp(context.server)
  48 |   })
  49 |

  at Object.<anonymous> (integration/config/test/index.test.js:46:32)

test/acceptance/ReactRefreshLogBox.dev.test.js

logbox: can recover from a syntax error without losing state
render error not shown right after syntax error
component props errors

Expand output

● logbox: can recover from a syntax error without losing state

expect(received).toBe(expected) // Object.is equality

Expected: "Count: 1"
Received: "1"

  46 |       import { useCallback, useState } from 'react'
  47 |
> 48 |       export default function Index() {
     |        ^
  49 |         const [count, setCount] = useState(0)
  50 |         const increment = useCallback(() => setCount(c => c + 1), [setCount])
  51 |         return (

  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:48:8)

● render error not shown right after syntax error

expect(received).toBe(expected) // Object.is equality

Expected: true
Received: false

  229 |
  230 |   await cleanup()
> 231 | })
      |   ^
  232 |
  233 | // https://github.com/pmmmwh/react-refresh-webpack-plugin/pull/3#issuecomment-554137262
  234 | test('render error not shown right after syntax error', async () => {

  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:231:43)

● component props errors

expect(received).toBe(expected) // Object.is equality

Expected: false
Received: true

  845 |   expect(await session.hasRedbox(true)).toBe(true)
  846 |   const source = await session.getRedboxSource()
> 847 |   expect(source).toMatch('./index.module.css:1:1')
      |                                       ^
  848 |   expect(source).toMatch('Syntax error: ')
  849 |   expect(source).toMatch('Unclosed block')
  850 |   expect(source).toMatch('> 1 | .button {')

  at Object.<anonymous> (acceptance/ReactRefreshLogBox.dev.test.js:847:39)

ijjk · 2021-09-13T12:44:22Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	Change
buildDuration	15.4s	15.6s	⚠️ +212ms
buildDurationCached	3.9s	3.8s	-107ms
nodeModulesSize	47 MB	47 MB	⚠️ +2.44 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.273	3.375	⚠️ +0.1
/ avg req/sec	763.88	740.65	⚠️ -23.23
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.705	1.793	⚠️ +0.09
/error-in-render avg req/sec	1466.14	1394.5	⚠️ -71.64

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	26.6 kB	26.6 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	70.4 kB	70.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	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/move-trace-dir	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/move-trace-dir	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/move-trace-dir	Change
index.html gzip	539 B	539 B	✓
link.html gzip	552 B	552 B	✓
withRouter.html gzip	533 B	533 B	✓
Overall change	1.62 kB	1.62 kB	✓

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	Change
buildDuration	12.7s	12.9s	⚠️ +243ms
buildDurationCached	5.3s	5.1s	-159ms
nodeModulesSize	47 MB	47 MB	⚠️ +2.44 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.366	3.319	-0.05
/ avg req/sec	742.74	753.24	+10.5
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.764	1.811	⚠️ +0.05
/error-in-render avg req/sec	1417.32	1380.13	⚠️ -37.19

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	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	13.8 kB	13.8 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	71.2 kB	71.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	timneutkens/next.js add/move-trace-dir	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/move-trace-dir	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/move-trace-dir	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/move-trace-dir	Change
index.html gzip	585 B	585 B	✓
link.html gzip	597 B	597 B	✓
withRouter.html gzip	578 B	578 B	✓
Overall change	1.76 kB	1.76 kB	✓

Commit: 652043e

Move trace directory

719810c

timneutkens requested review from huozhi, ijjk, padmaia, shuding and styfle as code owners September 10, 2021 11:06

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

This comment has been minimized.

Sign in to view

timneutkens added 6 commits September 10, 2021 13:57

Remove unused function

7753757

Make console trace reporter more useful

23bab83

Ensure hot-reloader span is sent as it's the first in the dev trace

d21ab1b

Pass span to next-export to ensure it has a parentSpan

3936b81

Ensure hooks that do not have a parent are added as a child of runWeb…

0783c8a

…pack

Leverage traceChild instead of manually passing ids for css minimizer

c0b6ca9

This comment has been minimized.

Sign in to view

timneutkens added 7 commits September 10, 2021 15:29

Move bench directory

95ce162

Ensure webpack spans have correct parent

5038ab4

Add nested-deps to bench directory

5324463

Add name to webpack-close

4b2b3c0

Ensure traces are flushed after each compile in development

77df4fd

Add trigger attribute for invalidation

21122f9

Merge branch 'canary' of github.com:vercel/next.js into add/move-trac…

b105b7d

…e-dir

This comment has been minimized.

Sign in to view

timneutkens changed the title ~~Move trace directory~~ Make traces in development reliable Sep 12, 2021

Merge branch 'canary' into add/move-trace-dir

bf6a462

This comment has been minimized.

Sign in to view

Merge branch 'add/move-trace-dir' of github.com:timneutkens/next.js i…

8b57283

…nto add/move-trace-dir

timneutkens added 2 commits September 12, 2021 20:12

Fix linting

130bc1b

Add import

e712f90

This comment has been minimized.

Sign in to view

Remove unused variable

c6b6b33

This comment has been minimized.

Sign in to view

huozhi reviewed Sep 13, 2021

View reviewed changes

bench/nested-deps/fuzzponent.js Outdated Show resolved Hide resolved

package.json Show resolved Hide resolved

Update bench/nested-deps/fuzzponent.js

652043e

Co-authored-by: Jiachi Liu <inbox@huozhi.im>

huozhi approved these changes Sep 13, 2021

View reviewed changes

timneutkens merged commit c1e5f5b into vercel:canary Sep 13, 2021

timneutkens deleted the add/move-trace-dir branch September 13, 2021 13:49

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make traces in development reliable #28990

Make traces in development reliable #28990

timneutkens commented Sep 10, 2021 •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 13, 2021 •

edited

Loading

ijjk commented Sep 13, 2021

Make traces in development reliable #28990

Make traces in development reliable #28990

Conversation

timneutkens commented Sep 10, 2021 • edited Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Sep 13, 2021 • edited Loading

Failing test suites

ijjk commented Sep 13, 2021

Stats from current PR

timneutkens commented Sep 10, 2021 •

edited

Loading

ijjk commented Sep 13, 2021 •

edited

Loading