Webpack-bundle-analyzer: Server errors are unhandled

[sompylasar]

Issue description

After introducing webpack-bundle-analyzer, the following two errors started crashing the development server process.

When accidentally using the same analyzerPort for the plugin in two webpack configs within the same process (universal, for browser-side and server-side) – configuration issue, has a workaround:

Unhandled exception:  Error: listen EADDRINUSE 127.0.0.1:8888
     at Object._errnoException (util.js:1021:11)
     at _exceptionWithHostPort (util.js:1043:20)
     at Server.setupListenHandle [as _listen2] (net.js:1344:14)
     at listenInCluster (net.js:1385:12)
     at doListen (net.js:1494:7)
     at _combinedTickCallback (internal/process/next_tick.js:141:11)
     at process._tickDomainCallback (internal/process/next_tick.js:218:9)

When quickly refreshing the analyzer webpage while it's still loading – no workaround possible:

Unhandled exception:  Error: read ECONNRESET
     at _errnoException (util.js:1021:11)
     at TCP.onread (net.js:608:25)

Technical info

• Webpack Bundle Analyzer version: [email protected]
• Webpack version: [email protected]
• Node.js version: v8.7.0
• npm/yarn version: [email protected]
• OS: Darwin ... 16.0.0 Darwin Kernel Version 16.0.0: Mon Aug 29 17:56:20 PDT 2016; root:xnu-3789.1.32~3/RELEASE_X86_64 x86_64

Debug info

How do you use this module? As CLI utility or as plugin?

As a plugin.

If CLI, what command was used? (e.g. webpack-bundle-analyzer -O path/to/stats.json)

N/A

If plugin, what options were provided? (e.g. new BundleAnalyzerPlugin({ analyzerMode: 'disabled', generateStatsFile: true }))

    new BundleAnalyzerPlugin({
      analyzerMode: 'server',
      analyzerHost: '127.0.0.1',
      analyzerPort: (CLIENT ? 8888 : 8889),  // This conditional port fixes EADDRINUSE.
      openAnalyzer: false,
      generateStatsFile: false,
    }),

What other Webpack plugins were used?

Oh, many of them, via a dynamically generated webpack config. I cannot share that.

It would be nice to also attach webpack stats file.
It can be generated using these options:

  new BundleAnalyzerPlugin({
    analyzerMode: 'disabled',
    generateStatsFile: true,
    // Excludes module sources from stats file so there won't be any sensitive data
    statsOptions: { source: false }
  })

stats.json will be created in Webpack bundle output directory.

I cannot share that.

[valscion]

Hi! Thanks for the detailed issue, it's highly appreciated :relaxed:

Is it so that you are however able to use the tool anyway? So that nothing is fundamentally broken, albeit the UX is definitely suboptimal here.

[sompylasar]

I can, yes, and it's already proven to be very helpful: discovered code splitting to not work, fixed, shaved off 300 KB of initial load of 1.41 MB app.

Due to the large number of modules to build, though, the development hot reloading server crashing is quite inconvenient because it needs to rebuild all the modules (I didn't go with caches across builds for reliability).

[valscion]

Great, thanks for the additional info!

Would you perhaps have a chance at trying out editing this code to add some resiliency to the quick reloads? I don't use the dev server myself, so I am not able to start digging into this without someone else looking into it first.

https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/a9282dec4fdb87e3ccdc2b996bcf3b7f5172b39f/src/viewer.js#L25-L99

[th0r]

Unhandled exception: Error: read ECONNRESET

Looks like this error can be caused by this issue in ws.

Can you check your ws version using npm ls --depth 0 | grep ws@?

[valscion]

This should be fixed by #140. I published a new version with the fix, v2.9.2

[fchastanet]

Sorry to dig up this topic.
I was having the same problem, and it was because my webpack is configured to compile multiple apps with plugins in each app. The plugin BundleAnalyzerPlugin was duplicated in each App and so several web app was trying to be opened, so the error.

let apps = [
  'app1',        
  'App2',
  // ...
];
// getConfig add plugins and other common stuff to each apps
module.exports.configs = apps.map(getConfig); 

I'm using now the same instance of BundleAnalyzerPlugin, the error disappeared but only the result of the last build is available in the web view.

So I ended to add the plugin to only the app I need to analyse.

Another solution(not tested) would be to instantiate the plugin with a different port for each app
bundleAnalyzerPlugin = new BundleAnalyzerPlugin({analyzerPort: incrementedPort});

If it can help someone.

[th0r]

@fchastanet you can use analyzerPort: 'auto' configuration option.