webpack-dashboard: BUG: Large webpack stats bundles cause socket.io client disconnect.

After upgrading to webpack@4 and webpack-dashboard@3.0.2 I’m able to get a full Success notification as well as Modules/Assets/Problems display. However, when also updating babel to @7, jest to @24, and storybook to @5 (I think only really babel is related, but for completeness) I’m able to build and watch my application seemingly with no issues in the code output, but I’m unable to get the Status to go to Success or the Modules/Assets/Problems sections to display.

If there is something easy that I might be missing, I’d love to hear it, but mostly I’m looking for places in particular to look for issues with my set up here.

====================================================================

If the issue is visual, please provide screenshots here

====================================================================

Steps to reproduce the problem

====================================================================

Please provide a gist of relevant files

package.json (specifically the script you are using to start the dashboard) ENABLE_SOURCE_MAPS=true NODE_ENV=development webpack-dashboard -- webpack-dev-server --config webpack.config.local-dev.js --host 0.0.0.0 --no-inline
webpack.config.js

====================================================================

More Details

What operating system are you on? MacOS
What terminal application are you using? Terminal
What version of webpack-dashboard are you using? 3.0.2
What is the output of running echo $TERM? xterm-256color

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 42 (21 by maintainers)

Commits related to this issue

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 / erro... — committed to FormidableLabs/webpack-dashboard by ryan-roemer 5 years ago

Most upvoted comments

WOAH, WAIT A MINUTE. We already do inspectpack on the client / webpack plugin side! @westbrook-asapp fantastic observation – we’re only using warnings|errors and we can easily slice that out of the stats object.

ryan-roemer on Apr 17, 2019

Let’s see if the sheer size of the stats object is causing problems. Can you try something like the following that doesn’t send the entire stats object works?

Here’s an untested diff that may help get you started:

diff --git a/plugin/index.js b/plugin/index.js
index f90d64e..36ff05a 100644
--- a/plugin/index.js
+++ b/plugin/index.js
@@ -164,6 +164,17 @@ class DashboardPlugin {
         || options.stats
         || { colors: true };
 
+
+      console.log("TODO HERE DONE", JSON.stringify({
+        stats: {
+          // Just get string length instead of actual object.
+          length: JSON.stringify(stats.toJson()).length,
+          errors: stats.hasErrors(),
+          warnings: stats.hasWarnings(),
+          string: stats.toString(statsOptions).length,
+        }
+      }, null, 2));
+
       handler([
         {
           type: "status",
@@ -182,12 +193,12 @@ class DashboardPlugin {
           value: {
             errors: stats.hasErrors(),
             warnings: stats.hasWarnings(),
-            data: stats.toJson()
+            data: {}
           }
         },
         {
           type: "log",
-          value: stats.toString(statsOptions)
+          value: "TODO REMOVED STATS TO STRING"
         }
       ]);

ryan-roemer on Apr 16, 2019