Skip to content

/ aspnetcore

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

NET 6.0 React SPA template - consider adding an onError handler to setupProxy.js to prevent websocket connection crashes #35155

Open
JakeYallop opened this issue Aug 8, 2021 · 5 comments · May be fixed by dotnet/spa-templates#10
Open

NET 6.0 React SPA template - consider adding an onError handler to setupProxy.js to prevent websocket connection crashes #35155

JakeYallop opened this issue Aug 8, 2021 · 5 comments · May be fixed by dotnet/spa-templates#10
Labels
area-mvc enhancement feature-spa feature-templates good first issue help wanted
Milestone
Backlog

Comments

@JakeYallop
Copy link

@JakeYallop JakeYallop commented Aug 8, 2021

The problem

The new NET 6.0 React SPA template uses the http-proxy-middleware package to proxy http requests from the React dev server to ASP Net Core.

If a project uses websockets, these need to be proxied in a specific way:

// ./src/setupProxy.js 

const myWebsocketProxy = createProxyMiddleware("/hub", {
    ws: true,
    //... other settings
});

Unfortunately, whenever the backend webserver is restarted, it causes the react dev server to crash due to the websocket connection no longer being available and throwing an error:

[HPM] Error occurred while proxying request localhost:5002/hub/myhub to undefined [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)
events.js:377
      throw er; // Unhandled 'error' event
      ^

Error: read ECONNRESET
    at TLSWrap.onStreamRead (internal/stream_base_commons.js:209:20)
Emitted 'error' event on TLSSocket instance at:
    at emitErrorNT (internal/streams/destroy.js:106:8)
    at emitErrorCloseNT (internal/streams/destroy.js:74:3)
    at processTicksAndRejections (internal/process/task_queues.js:82:21) {
  errno: -4077,
  code: 'ECONNRESET',
  syscall: 'read'
}
error Command failed with exit code 1.

Which means you now need to recompile your entire front-end application whenever you restart the backend webserver. This is quite slow and effects the inner-loop significantly, especially for larger apps.

Proposed solution

Checking the documentation for http-proxy-middleware, we can pass an onError handler to it to handle any exceptions:

// ./src/setupProxy.js 

const onError = (err, req, resp, target) => {
    console.log(`${err.message}`);
};

const myWebsocketProxy = createProxyMiddleware("/hub", {
    ws: true,
    //handle errors produced by http-proxy-middleware to prevent the react dev server from completing crashing
    onError: onError 
    //... other settings
});

This stops the dev server from crashing outright:

connect ECONNREFUSED 127.0.0.1:5001
[HPM] Error occurred while proxying request localhost:5002/hub/myhub to undefined [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

I propose adding this error handler to the proxy defined in ./src/setupProxy.js by default, to improve the inner-loop for new developers.

This file is already something that may need to edited manually by developers as they add new API endpoints, so adding an error handler that may also want to modify isn't a huge leap.
@javiercn
Copy link
Contributor

@javiercn javiercn commented Aug 9, 2021

@JakeYallop thanks for contacting us.

Your suggestion sounds appropriate. Is there a way to add the error handling globally or does it have to be within an endpoint?

Also, we would gladly accept a PR for this if you are willing to contribute it. We've moved the spa templates to here
@mkArtakMSFT mkArtakMSFT added this to the Backlog milestone Aug 9, 2021
@msftbot
Copy link
Contributor

@msftbot msftbot bot commented Aug 9, 2021

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.
@JakeYallop
Copy link
Author

@JakeYallop JakeYallop commented Aug 9, 2021

There isn't really a way to set global options - all we're really doing when we call createProxyMiddleware is to create a piece of middleware that the express server created by React dev tools then uses. We can pass more than one endpoint (and this is what the template already does, I just simplified my example above).
@javiercn
Copy link
Contributor

@javiercn javiercn commented Aug 10, 2021

@JakeYallop I apologize, I didn't express myself correctly. I meant if we can do it here as a one time thing, or if we need to do it on a per endpoint basis.

At least the function to handle the errors should be defined in one place, that's all I'm asking for.
@JakeYallop
Copy link
Author

@JakeYallop JakeYallop commented Aug 10, 2021

Ah - yep, that's totally possible - we don't need to add error handling per endpoint.
@JakeYallop JakeYallop linked a pull request that will close this issue Aug 15, 2021
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-mvc enhancement feature-spa feature-templates good first issue help wanted
Projects
None yet
Milestone
Backlog
Linked pull requests

Successfully merging a pull request may close this issue.

Handle errors in setupProxy
3 participants
@javiercn @JakeYallop @mkArtakMSFT