serve crashes on websocket close

[epelc]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Area

- [x] devkit
- [ ] schematics

Versions

npm 6.1.0

Angular CLI: 6.0.7
Node: 10.3.0
OS: darwin x64
Angular: 6.0.3

Repro steps

Run the cli serve command with proxying to a backend websocket server(turn "ws":true on for one of your endpoints) and return an error from the websocket server. The cli proxy server will crash with the error below.

Specifically if you return an http error status code before the websocket request is upgraded to the websocket protocol. Here is the server returning the error code(it's in golang) but you can roughly see that in this example the error returned is well before the protocol change so it is just a regular http 403 error.

The log given by the failure

ℹ ｢wdm｣: Compiled successfully.
events.js:167
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TCP.onread (net.js:657:25)
Emitted 'error' event at:
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Desired functionality

The cli proxy dev server should support returning websocket errors to the client instead of crashing.

Mention any other details that might be useful

[Halynsky]

Same

[SimonSch]

+1

[hieronymusma]

+1

[pmouawad]

Hello,
Facing same issue with following configuration:

`
Angular CLI: 7.3.6
Node: 10.15.3
OS: darwin x64
Angular: 7.2.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.13.6
@angular-devkit/build-angular 0.13.6
@angular-devkit/build-optimizer 0.13.6
@angular-devkit/build-webpack 0.13.6
@angular-devkit/core 7.3.6
@angular-devkit/schematics 7.3.6
@angular/cdk 7.3.4
@angular/cli 7.3.6
@angular/material 7.3.4
@angular/material-moment-adapter 7.3.7
@ngtools/webpack 7.3.6
@schematics/angular 7.3.6
@schematics/update 0.13.6
rxjs 6.3.3
typescript 3.2.4
webpack 4.29.0`

Proxy configuration is :

var process = require("process");
var BACKEND_PORT = process.env.BACKEND_PORT || 8443;
const PROXY_CONFIG = [
  {
    context: ["/api"],
    target: "https://localhost:" + BACKEND_PORT,
    secure: false,
    logLevel: "info"
  },
  {
    context: ["/event"],
    target: "wss://localhost:" + BACKEND_PORT,
    ws: true,
    secure: false,
    logLevel: "info"
  },
];
module.exports = PROXY_CONFIG;

Whenever Backend is stopped, ng server crashes with:

[HPM] Error occurred while trying to proxy request /event from localhost:4200 to wss://localhost:8443 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:111:27)
Emitted 'error' event at:
    at emitErrorNT (internal/streams/destroy.js:82:8)
    at emitErrorAndCloseNT (internal/streams/destroy.js:50:3)
    at process._tickCallback (internal/process/next_tick.js:63:19)

Same issue occurs on Windows 10.

Thanks in advance for any help.
Regards

[cod-e-ash]

+1

[apocalyp0sys]

As a workaround, you can put

var process = require('process');

process.on('uncaughtException', function(err) {
    // Prevent ECONNRESET errors
    // handle the error safely
    console.log(err)
});

somewhere in ng serve script,
for example in node_modules/@angular/cli/commands/serve-impl.js

[davidstellini]

Same issue.
@apocalyp0sys The workaround involves editing node modules, right? I'm trying to figure out something better without ejecting.

[maciaszczykm]

Is there a chance to raise the priority of this issue? Do you know any workarounds different than editing module code directly?

cc @filipesilva

[filipesilva]

It doesn't sound like the correct way to address this problem is to add a process wide handler. Other, non-webpack, parts of Angular CLI might have legitimate reasons to emit those errors too.

As far as the proxy server is concerned, we mostly just pass it on to https://webpack.js.org/configuration/dev-server/#devserverproxy. Maybe there's a bug in webpack-dev-server that should be fixed to prevent this problem?

[maciaszczykm]

It doesn't sound like the correct way to address this problem is to add a process wide handler. Other, non-webpack, parts of Angular CLI might have legitimate reasons to emit those errors too.

Totally agree.

As far as the proxy server is concerned, we mostly just pass it on to https://webpack.js.org/configuration/dev-server/#devserverproxy. Maybe there's a bug in webpack-dev-server that should be fixed to prevent this problem?

Could you help us with describing the problem in the Webpack issue tracker? You have more knowledge of how Angular CLI uses the Dev Server and that might help.

Thanks for the quick response!

[filipesilva]

The best way to go about these reports is to make a repro that the maintainers can run locally and see the problem happening.

Angular CLI requires the proxy file and then puts it in the webpack config:

angular-cli/packages/angular_devkit/build_angular/src/dev-server/index.ts

Lines 657 to 671 in 8543bf7

	function _addProxyConfig(
	root: string,
	options: DevServerBuilderOptions,
	config: WebpackDevServer.Configuration,
	) {
	let proxyConfig = {};
	const proxyPath = path.resolve(root, options.proxyConfig as string);
	if (existsSync(proxyPath)) {
	proxyConfig = require(proxyPath);
	} else {
	const message = 'Proxy config file ' + proxyPath + ' does not exist.';
	throw new Error(message);
	}
	config.proxy = proxyConfig;
	}

For a webpack-dev-server repro you don't need to do this. It's enough to just put it in the config. A minimal repro would have a very basic webpack config (e.g. build a index.js that contains a console.log), and the bare minimum dev server options (just the proxy stuff). Then whatever else you need to see the error.

Make a github repository with that code, and then you can open an issue in https://github.com/webpack/webpack-dev-server for it.

[ciekawy]

could this be related?
webpack/webpack-dev-server#1642

change to Server.js proposed in the issue description is able to solve my issue - Angular app is able to reconnect upon backend being up again.

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}