fix(turbopack): Suppress logging for short no-op turbopack HMRs

Author: bgw

packages/next/src/client/components/react-dev-overlay/app/hot-reloader-client.tsx

@@ -267,7 +267,7 @@ function processMessage(
   function handleHotUpdate() {
     if (process.env.TURBOPACK) {
       const hmrUpdate = turbopackHmr!.onBuilt()
-      if (hmrUpdate != null) {
+      if (hmrUpdate != null && hmrUpdate.hasUpdates) {
         reportHmrLatency(
           sendMessage,
           [...hmrUpdate.updatedModules],
@@ -306,8 +306,8 @@ function processMessage(
       } else {
         webpackStartMsSinceEpoch = Date.now()
         setPendingHotUpdateWebpack()
+        console.log('[Fast Refresh] rebuilding')
       }
-      console.log('[Fast Refresh] rebuilding')
       break
     }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILT:
@@ -395,11 +395,11 @@ function processMessage(
         type: HMR_ACTIONS_SENT_TO_BROWSER.TURBOPACK_MESSAGE,
         data: obj.data,
       })
-      dispatcher.onRefresh()
       if (RuntimeErrorHandler.hadRuntimeError) {
         console.warn(REACT_REFRESH_FULL_RELOAD_FROM_ERROR)
         performFullReload(null, sendMessage)
       }
+      dispatcher.onRefresh()
       turbopackHmr!.onTurbopackMessage(obj)
       break
     }

packages/next/src/client/components/react-dev-overlay/pages/hot-reloader-client.ts

@@ -133,7 +133,7 @@ function handleSuccess() {
 
   if (process.env.TURBOPACK) {
     const hmrUpdate = turbopackHmr!.onBuilt()
-    if (hmrUpdate != null) {
+    if (hmrUpdate != null && hmrUpdate.hasUpdates) {
       reportHmrLatency(
         sendMessage,
         [...hmrUpdate.updatedModules],
@@ -275,8 +275,8 @@ function processMessage(obj: HMR_ACTION_TYPES) {
         turbopackHmr!.onBuilding()
       } else {
         webpackStartMsSinceEpoch = Date.now()
+        console.log('[Fast Refresh] rebuilding')
       }
-      console.log('[Fast Refresh] rebuilding')
       break
     }
     case HMR_ACTIONS_SENT_TO_BROWSER.BUILT:

packages/next/src/client/components/react-dev-overlay/utils/turbopack-hot-reloader-common.ts

@@ -1,7 +1,18 @@
 import type { TurbopackMessageAction } from '../../../../server/dev/hot-reloader-types'
 import type { Update as TurbopackUpdate } from '../../../../build/swc/types'
 
+declare global {
+  interface Window {
+    __NEXT_HMR_TURBOPACK_REPORT_NOISY_NOOP_EVENTS: boolean | undefined
+  }
+}
+
+// How long to wait before reporting the HMR start, used to suppress irrelevant
+// `BUILDING` events. Does not impact reported latency.
+const TURBOPACK_HMR_START_DELAY_MS = 100
+
 interface HmrUpdate {
+  hasUpdates: boolean
   updatedModules: Set<string>
   startMsSinceEpoch: number
   endMsSinceEpoch: number
@@ -11,17 +22,51 @@ export class TurbopackHmr {
   #updatedModules: Set<string>
   #startMsSinceEpoch: number | undefined
   #lastUpdateMsSinceEpoch: number | undefined
+  #deferredReportHmrStartId: ReturnType<typeof setTimeout> | undefined
 
   constructor() {
     this.#updatedModules = new Set()
   }
 
+  // HACK: Turbopack tends to generate a lot of irrelevant "BUILDING" actions,
+  // as it reports *any* compilation, including fully no-op/cached compilations
+  // and those unrelated to HMR. Fixing this would require significant
+  // architectural changes.
+  //
+  // Work around this by deferring any "rebuilding" message by 100ms. If we get
+  // a BUILT event within that threshold and nothing has changed, just suppress
+  // the message entirely.
+  #runDeferredReportHmrStart() {
+    if (this.#deferredReportHmrStartId != null) {
+      console.log('[Fast Refresh] rebuilding')
+      this.#cancelDeferredReportHmrStart()
+    }
+  }
+
+  #cancelDeferredReportHmrStart() {
+    clearTimeout(this.#deferredReportHmrStartId)
+    this.#deferredReportHmrStartId = undefined
+  }
+
   onBuilding() {
     this.#lastUpdateMsSinceEpoch = undefined
+    this.#cancelDeferredReportHmrStart()
     this.#startMsSinceEpoch = Date.now()
+
+    if (self.__NEXT_HMR_TURBOPACK_REPORT_NOISY_NOOP_EVENTS) {
+      // debugging feature: don't defer/suppress noisy no-op HMR update messages
+      this.#runDeferredReportHmrStart()
+    } else {
+      // report the HMR start after a short delay
+      this.#deferredReportHmrStartId = setTimeout(
+        () => this.#runDeferredReportHmrStart(),
+        TURBOPACK_HMR_START_DELAY_MS
+      )
+    }
   }
 
   onTurbopackMessage(msg: TurbopackMessageAction) {
+    this.#runDeferredReportHmrStart()
     this.#lastUpdateMsSinceEpoch = Date.now()
     const updatedModules = extractModulesFromTurbopackMessage(msg.data)
     for (const module of updatedModules) {
@@ -30,17 +75,23 @@ export class TurbopackHmr {
   }
 
   onBuilt(): HmrUpdate | null {
-    // it's possible for `this.#startMsSinceEpoch` to not be set if this was the initial
-    // computation, just return null in this case.
-    if (this.#startMsSinceEpoch == null) {
+    // Check that we got *any* `TurbopackMessageAction`, even if `updatedModules` is empty (not
+    // everything gets recorded there).
+    //
+    // This also handles for the case where `onBuilt` gets called before `onBuilding`, which can
+    // happen during initial page load. We should ignore this.
+    const hasUpdates = this.#lastUpdateMsSinceEpoch != null
+    if (!hasUpdates && this.#deferredReportHmrStartId != null) {
+      // suppress the update entirely
+      this.#cancelDeferredReportHmrStart()
       return null
     }
+    this.#runDeferredReportHmrStart()
+
     const result = {
+      hasUpdates,
       updatedModules: this.#updatedModules,
       startMsSinceEpoch: this.#startMsSinceEpoch!,
-      // Turbopack has a debounce which causes every BUILT message to appear
-      // 30ms late. We don't want to include this latency in our reporting, so
-      // prefer to use the last TURBOPACK_MESSAGE time.
       endMsSinceEpoch: this.#lastUpdateMsSinceEpoch ?? Date.now(),
     }
     this.#updatedModules = new Set()