BUG: Handle large webpack stats bundles without socket.io client disconnect. (#281)

- Limits the webpack stats messaged object to just errors and warnings. Fixes #279 
- Add client disconnect / error messages to help analogous issues in the future.

Author: ryan-roemer

.gitignore

@@ -10,3 +10,4 @@ yarn-error.log
 package-lock.json
 dist-*
 .vscode
+.lankrc.js

CHANGELOG.md

@@ -1,8 +1,14 @@
 # Change Log
 
-This project adheres to [Semantic Versioning](http://semver.org/).  
+This project adheres to [Semantic Versioning](http://semver.org/).
 Every release, along with the migration instructions, is documented on the Github [Releases](https://github.com/FormidableLabs/webpack-dashboard/releases) page.
 
+## UNRELEASED
+
+### Bugs
+
+- **Socket.io disconnects / large stats object size**: Dramatically reduce the size of the webpack stats object being sent from client (webpack plugin) to server (CLI). Add client error/disconnect information for better future debugging. Original issue: https://github.com/FormidableLabs/inspectpack/issues/279 and fix: https://github.com/FormidableLabs/inspectpack/pull/281
+
 ## [3.0.2] - 2019-03-28
 
 ### Features

bin/webpack-dashboard.js

@@ -65,9 +65,9 @@ const main = (module.exports = opts => {
     server.on("connection", socket => {
       socket.emit("mode", { minimal: program.minimal || false });
 
-      socket.on("message", message => {
+      socket.on("message", (message, ack) => {
         if (message.type !== "log") {
-          dashboard.setData(message);
+          dashboard.setData(message, ack);
         }
       });
     });
@@ -95,8 +95,8 @@ const main = (module.exports = opts => {
     });
   } else {
     server.on("connection", socket => {
-      socket.on("message", message => {
-        dashboard.setData(message);
+      socket.on("message", (message, ack) => {
+        dashboard.setData(message, ack);
       });
     });
   }

dashboard/index.js

@@ -91,7 +91,7 @@ class Dashboard {
     this.screen.render();
   }
 
-  setData(dataArray) {
+  setData(dataArray, ack) {
     dataArray
       .map(data =>
         data.error
@@ -105,6 +105,11 @@ class Dashboard {
       });
 
     this.screen.render();
+
+    // Send ack back if requested.
+    if (ack) {
+      ack();
+    }
   }
 
   setProgress(data) {

plugin/index.js

@@ -72,6 +72,7 @@ class DashboardPlugin {
 
   apply(compiler) {
     let handler = this.handler;
+    let reachedSuccess = false;
     let timer;
 
     if (!handler) {
@@ -85,6 +86,16 @@ class DashboardPlugin {
       this.socket.once("mode", args => {
         this.minimal = args.minimal;
       });
+      this.socket.on("error", err => {
+        // eslint-disable-next-line no-console
+        console.log(err);
+      });
+      this.socket.on("disconnect", () => {
+        if (!reachedSuccess) {
+          // eslint-disable-next-line no-console
+          console.log("Socket.io disconnected before completing build lifecycle.");
+        }
+      });
     }
 
     new webpack.ProgressPlugin((percent, msg) => {
@@ -162,32 +173,47 @@ class DashboardPlugin {
       const statsOptions = (options.devServer && options.devServer.stats) ||
         options.stats || { colors: true };
 
-      handler([
-        {
-          type: "status",
-          value: "Success"
-        },
-        {
-          type: "progress",
-          value: 1
-        },
-        {
-          type: "operations",
-          value: `idle${getTimeMessage(timer)}`
-        },
-        {
-          type: "stats",
-          value: {
-            errors: stats.hasErrors(),
-            warnings: stats.hasWarnings(),
-            data: stats.toJson()
+      // We only need errors/warnings for stats information for finishing up.
+      // This allows us to avoid sending a full stats object to the CLI which
+      // can cause socket.io client disconnects for large objects.
+      // See: https://github.com/FormidableLabs/webpack-dashboard/issues/279
+      const statsJsonOptions = {
+        all: false,
+        errors: true,
+        warnings: true
+      };
+
+      handler(
+        [
+          {
+            type: "status",
+            value: "Success"
+          },
+          {
+            type: "progress",
+            value: 1
+          },
+          {
+            type: "operations",
+            value: `idle${getTimeMessage(timer)}`
+          },
+          {
+            type: "stats",
+            value: {
+              errors: stats.hasErrors(),
+              warnings: stats.hasWarnings(),
+              data: stats.toJson(statsJsonOptions)
+            }
+          },
+          {
+            type: "log",
+            value: stats.toString(statsOptions)
           }
-        },
-        {
-          type: "log",
-          value: stats.toString(statsOptions)
+        ],
+        () => {
+          reachedSuccess = true;
         }
-      ]);
+      );
 
       if (!this.minimal) {
         this.observeMetrics(stats).subscribe({
@@ -203,6 +229,7 @@ class DashboardPlugin {
   }
 
   observeMetrics(statsObj) {
+    // Get the **full** stats object here for `inspectpack` analysis.
     const statsToObserve = statsObj.toJson();
 
     const getSizes = stats =>