Log HMR events

Summary:We've received reports saying that sometimes HRM updates take a couple of seconds to get applied. The feature is very optimized so that it takes around 100ms for most common type of changes. Only changes that require rebuilding caches could take longer than that, maybe up to 1 second.

We think the problem is that watchman delays sending the file change notification because the system is under heavy use. It worth mentioning this is not a watchman issue!. This could happen for instance if flow is enabled. So, to better understand what's going on lets log when a file is changed and just before sending the HMR update to the client. The client codepath is extremelly fast so no need to log any of that.

Reviewed By: davidaurelio

Differential Revision: D2978694

fb-gh-sync-id: abd3b473d0b7ac7cd4461effce9813ccfda32c2b
shipit-source-id: abd3b473d0b7ac7cd4461effce9813ccfda32c2b

local-cli/server/util/attachHMRServer.js

@@ -111,6 +111,9 @@ function attachHMRServer({httpServer, path, packagerServer}) {
           if (!client) {
             return;
           }
+          console.log(
+            `[Hot Module Replacement] File change detected (${time()})`
+          );
 
           client.ws.send(JSON.stringify({type: 'update-start'}));
           stat.then(() => {
@@ -230,6 +233,10 @@ function attachHMRServer({httpServer, path, packagerServer}) {
                   return;
                 }
 
+                console.log(
+                  '[Hot Module Replacement] Sending HMR update to client (' +
+                  time() + ')'
+                );
                 client.ws.send(update);
               });
             },
@@ -263,4 +270,9 @@ function arrayEquals(arrayA, arrayB) {
   );
 }
 
+function time() {
+  const date = new Date();
+  return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}:${date.getMilliseconds()}`;
+}
+
 module.exports = attachHMRServer;