Add missing trace for full reload event (#40393)

Added missing trace for `client-full-reload` event in hot reloader. Full
reload tests moved to hmr, think they make more sense there than on
their own.

packages/next/server/dev/hot-reloader.ts

@@ -361,6 +361,10 @@ export default class HotReloader {
               break
             }
             case 'client-full-reload': {
+              traceChild = {
+                name: payload.event,
+                attrs: { stackTrace: payload.stackTrace ?? '' },
+              }
               Log.warn(
                 'Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/basic-features/fast-refresh#how-it-works'
               )

test/development/basic/hmr.test.ts

@@ -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 () => {

test/development/basic/hmr/pages/hmr/anonymous-page-function.js

@@ -0,0 +1,3 @@
+export default function () {
+  return <p>hello world</p>
+}

test/development/basic/hmr/pages/hmr/runtime-error.js

@@ -0,0 +1,4 @@
+export default function () {
+  // eslint-disable-next-line no-undef
+  return whoops
+}