Report HMR latency when a Server Component changes (#67699)

vercel · Jul 12, 2024 · 2621746 · 2621746
1 parent a4a628c
commit 2621746
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 10 deletions.
diff --git a/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx b/packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx
@@ -430,6 +430,7 @@ function processMessage(
         router.fastRefresh()
         dispatcher.onRefresh()
       })
+      reportHmrLatency(sendMessage, [])
 
       if (process.env.__NEXT_TEST_MODE) {
         if (self.__NEXT_HMR_CB) {

diff --git a/test/development/app-hmr/hmr.test.ts b/test/development/app-hmr/hmr.test.ts
@@ -1,5 +1,5 @@
 import { nextTestSetup } from 'e2e-utils'
-import { check, waitFor } from 'next-test-utils'
+import { retry, waitFor } from 'next-test-utils'
 
 const envFile = '.env.development.local'
 
@@ -40,11 +40,10 @@ describe(`app-dir-hmr`, () => {
 
       try {
         // Should be 404 in a few seconds
-        await check(async () => {
+        await retry(async () => {
           const body = await browser.elementByCss('body').text()
           expect(body).toContain('404')
-          return 'success'
-        }, 'success')
+        })
 
         // The new page should be rendered
         const newHTML = await next.render('/folder-renamed')
@@ -61,11 +60,31 @@ describe(`app-dir-hmr`, () => {
       expect(await browser.elementByCss('p').text()).toBe('mac')
       await next.patchFile(envFile, 'MY_DEVICE="ipad"')
 
+      const logs = await browser.log()
+      await retry(async () => {
+        expect(logs).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              message: '[Fast Refresh] rebuilding',
+              source: 'log',
+            }),
+          ])
+        )
+      })
+
       try {
-        await check(async () => {
+        await retry(async () => {
           expect(await browser.elementByCss('p').text()).toBe('ipad')
-          return 'success'
-        }, /success/)
+        })
+
+        expect(logs).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              message: expect.stringContaining('[Fast Refresh] done in'),
+              source: 'log',
+            }),
+          ])
+        )
       } finally {
         await next.patchFile(envFile, envContent)
       }
@@ -77,11 +96,31 @@ describe(`app-dir-hmr`, () => {
       expect(await browser.elementByCss('p').text()).toBe('mac')
       await next.patchFile(envFile, 'MY_DEVICE="ipad"')
 
+      const logs = await browser.log()
+      await retry(async () => {
+        expect(logs).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              message: '[Fast Refresh] rebuilding',
+              source: 'log',
+            }),
+          ])
+        )
+      })
+
       try {
-        await check(async () => {
+        await retry(async () => {
           expect(await browser.elementByCss('p').text()).toBe('ipad')
-          return 'success'
-        }, /success/)
+        })
+
+        expect(logs).toEqual(
+          expect.arrayContaining([
+            expect.objectContaining({
+              message: expect.stringContaining('[Fast Refresh] done in'),
+              source: 'log',
+            }),
+          ])
+        )
       } finally {
         await next.patchFile(envFile, envContent)
       }