Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing trace for full reload event #40393

Merged
merged 3 commits into from Sep 9, 2022
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/next/server/dev/hot-reloader.ts
Expand Up @@ -361,6 +361,10 @@ export default class HotReloader {
break
}
case 'client-full-reload': {
traceChild = {
name: payload.event,
attrs: { stackTrace: payload.stackTrace ?? '' },
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it make sense to add the stackTrace here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The additional context does seem nice to have here

}
Log.warn(
'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
)
Expand Down
83 changes: 83 additions & 0 deletions test/development/basic/hmr.test.ts
Expand Up @@ -776,11 +776,94 @@ describe('basic HMR', () => {
})
})

describe('Full reload', () => {
it('should warn about full reload in cli output - anonymous page function', async () => {
const start = next.cliOutput.length
const browser = await webdriver(
next.appPort,
`/hmr/anonymous-page-function`
)
expect(await browser.elementByCss('p').text()).toBe('hello world')
expect(next.cliOutput.slice(start)).not.toContain(
'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
)

const currentFileContent = await next.readFile(
'./pages/hmr/anonymous-page-function.js'
)
const newFileContent = currentFileContent.replace(
'<p>hello world</p>',
'<p>hello world!!!</p>'
)
await next.patchFile(
'./pages/hmr/anonymous-page-function.js',
newFileContent
)
await check(() => browser.elementByCss('p').text(), 'hello world!!!')

// CLI warning and stacktrace
expect(next.cliOutput.slice(start)).toContain(
'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
)
expect(next.cliOutput.slice(start)).toContain(
'Error: Aborted because ./pages/hmr/anonymous-page-function.js is not accepted'
)

// Browser warning
const browserLogs = await browser.log()
expect(
browserLogs.some(({ message }) =>
message.includes(
"Fast Refresh will perform a full reload when you edit a file that's imported by modules outside of the React rendering tree."
)
)
).toBeTruthy()
})

it('should warn about full reload in cli output - runtime-error', async () => {
const start = next.cliOutput.length
const browser = await webdriver(next.appPort, `/hmr/runtime-error`)
await check(
() => getRedboxHeader(browser),
/ReferenceError: whoops is not defined/
)
expect(next.cliOutput.slice(start)).not.toContain(
'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
)

const currentFileContent = await next.readFile(
'./pages/hmr/runtime-error.js'
)
const newFileContent = currentFileContent.replace('whoops', '"whoops"')
await next.patchFile('./pages/hmr/runtime-error.js', newFileContent)
await check(() => browser.elementByCss('body').text(), 'whoops')

// CLI warning and stacktrace
expect(next.cliOutput.slice(start)).toContain(
'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
)
expect(next.cliOutput.slice(start)).not.toContain(
'Error: Aborted because ./pages/runtime-error.js is not accepted'
)

// Browser warning
const browserLogs = await browser.log()
expect(
browserLogs.some(({ message }) =>
message.includes(
'[Fast Refresh] performing full reload because your application had an unrecoverable error'
)
)
).toBeTruthy()
})
})

it('should have client HMR events in trace file', async () => {
const traceData = await next.readFile('.next/trace')
expect(traceData).toContain('client-hmr-latency')
expect(traceData).toContain('client-error')
expect(traceData).toContain('client-success')
expect(traceData).toContain('client-full-reload')
})

it('should have correct compile timing after fixing error', async () => {
Expand Down
@@ -0,0 +1,3 @@
export default function () {
return <p>hello world</p>
}
4 changes: 4 additions & 0 deletions test/development/basic/hmr/pages/hmr/runtime-error.js
@@ -0,0 +1,4 @@
export default function () {
// eslint-disable-next-line no-undef
return whoops
}
97 changes: 0 additions & 97 deletions test/development/full-reload-warning/index.test.ts

This file was deleted.