Reverse proxy fails to forward websocket requests

[paulcretu]

When working in a dev environment on localhost:4000, the following error shows up in the console repeatedly:

WebSocket connection to 'ws://localhost:4000/_next/webpack-hmr' failed:
init @ websocket.ts:57

And Next.js fast refresh also fails to work properly.

Cause

In a dev environment, we have two servers running:

• localhost:3000 is the Next.js server (frontend)
• localhost:4000 is the Phoenix server (backend)

If you connect to localhost:4000, it's first hitting the Phoenix/Elixir server, and then reverse proxying the connection to the Next.js server (which is actually running on localhost:3000). We need to do this because we use session auth (cookie based) so the cookies only cover a single origin.

Since we have two servers running on different ports, we need to get them on the same origin somehow, which is where the reverse proxy comes in. This all works okay for auth, http(s) requests are forwarded correctly, but websocket requests are not. Next.js uses websockets for fast refresh, which causes the error.

Workaround and potential fixes

A workaround is to use localhost:3000 to access the Next.js server directly. Fast refresh will work correctly and the error won't happen anymore. The downside is that auth won't work, which hasn't been particularly important so far, but is becoming more important as we put more features behind the auth wall. For now, it's safe to ignore the error or use the workaround of localhost:3000 as long as you don't need to be authenticated.

I believe there was a bug with the reverse proxy library or it just flat out didn't support websockets. We should definitely revisit and see if there's a way to forward the websocket requests correctly, or alternatively, see if we can make auth work across domains/ports (possibly by moving to token based auth).

[skanderm]

Websockets aren't implemented yet in reverse_proxy_plug: tallarium/reverse_proxy_plug#56