Context cancelled when Webpack HMR sends updates

talentlessguy · August 10, 2020, 3:21pm

1. Caddy version (`caddy version`):

v2.1.1h1:X9k1+ehZPYYrSqBvf/ocUgdLSRIuiNiMo7CvyGUQKeA=

2. How I run Caddy:

a. System environment:

Manjaro Linux x64

b. Command:

sudo caddy run

d. My complete Caddyfile or JSON config:

{
  auto_https off
}

(theheaders) {
  header Host {host}
  header X-Forwarded-For {remote_host}
  header X-Forwarded-Proto {scheme}
  header X-Url-Scheme {scheme}
  header X-Forwarded-Host {host}
}

:80 {
  import theheaders
  encode gzip

  route /api* {
  reverse_proxy :8000
  }
  route /media* {
  reverse_proxy :8000
  }
  route /admin* {
  reverse_proxy :8000
  }
  route /static* {
  reverse_proxy :8000
  }
  reverse_proxy :3000
}

3. The problem I’m having:

Every time Next.js dev server sends a request to Webpack HMR the request doesn’t get sent and the page doesn’t update. Without proxying, e.g. without Caddy at all, the request gets sent and it works fine.

4. Error messages and/or full log output:

Every time a request is being sent to Webpack HMR, I get this in logs:

2020/08/10 15:03:02.545 INFO    using adjacent Caddyfile
2020/08/10 15:03:02.547 INFO    admin   admin endpoint started  {"address": "tcp/localhost:2019", "enforce_origin": false, "origins": ["[::1]:2019", "127.0.0.1:2019", "localhost:2019"]}
2020/08/10 18:03:02 [INFO][cache:0xc00069e300] Started certificate maintenance routine
2020/08/10 15:03:02.548 INFO    tls     cleaned up storage units
2020/08/10 15:03:02.549 INFO    autosaved config        {"file": "/root/.config/caddy/autosave.json"}
2020/08/10 15:03:02.549 INFO    serving initial configuration
2020/08/10 15:04:08.939 ERROR   http.handlers.reverse_proxy     aborting with incomplete response       {"error": "context canceled"}
2020/08/10 15:04:23.356 ERROR   http.handlers.reverse_proxy     aborting with incomplete response       {"error": "context canceled"}

The request looks like this:

scheme http
host localhost
filename /_next/webpack-hmr

When I try to request it directly from the browser I get infinite loading and then Unable to connect. I suspect I messed up somewhere in the config.

5. What I already tried:

I couldn’t find anything relevant on google everything with Context cancelled was unrelated. But I found some issues about Webpack dev server, but with nginx, and there they returned 404. In my case nothing is returned at all. Although, it works just fine without a proxy, e.g. localhost:3000/webpack-hmr/...

6. Links to relevant resources:

Webpack dev server issue (with nginx)

matt · August 10, 2020, 3:47pm

This error is somewhat unusual and I haven’t seen it actually appear before. In fact, it occurs in a place where we borrowed code from the Go standard library (which is probably correct), and they panic in case of this same error but I changed it to log the error instead:

github.com

caddyserver/caddy/blob/c42bfaf31ed9d0e25078076a2bcda15bf8a1d1d7/modules/caddyhttp/reverseproxy/reverseproxy.go#L623-L632

    
      
          	err = h.copyResponse(rw, res.Body, h.flushInterval(req, res))
          	res.Body.Close() // close now, instead of defer, to populate res.Trailer
          	if err != nil {
          		// we're streaming the response and we've already written headers, so
          		// there's nothing an error handler can do to recover at this point;
          		// the standard lib's proxy panics at this point, but we'll just log
          		// the error and abort the stream here
          		h.logger.Error("aborting with incomplete response", zap.Error(err))
          		return nil
          	}

While it’s certainly possible for it to be a bug in Caddy – like something I got wrong as I ported the code over from the standard lib – and it’s certainly possible for it to be a bug in the standard lib’s code in the first place – though that’s even less likely – I believe this is a problem with either the client (web page) or the backend app. Since the error is context cancelled I’m guessing that means one side of the proxy “hung up” i.e. cancelled the request or response.

talentlessguy · August 10, 2020, 8:47pm

It’s especially weird, because I catch all requests on :3000, and if I access it directly (e.g. :3000/webpack-hmr) it gives me the file

so yep something wrong with Caddy

matt · August 10, 2020, 9:24pm

Can you tell us how to reproduce the problem? (Step-by-step instructions, as simple as possible, assume no knowledge of your stack.)

talentlessguy · August 11, 2020, 11:05am

No problem, here are the repro instructions:

Install Node.js
Create a folder
Put caddyfile with the contents there, then run sudo caddy run
Run npx create-next-app www
Create another folder with any app that will host on :8000
Run caddy
Go to www folder and run npm run dev
Open a browser with “Requests” tab open
Open pages/index.js file of www in the editor and try to edit the source code, but without breaking the project. E.g. try to remove or add an html tag, or write some text there.
Go back to the browser and see some requests by Webpack HMR being made - should be 0B and not transfered.
Open your caddy running, you’ll see these context cancelled errors

the instructions are that long so you can reproduce exactly my case, there’s nothing difficult there

talentlessguy · August 20, 2020, 3:46pm

any updates on this? it’s quite annoying that I can’t use HMR / React Refresh and have to force reload every time

matt · August 20, 2020, 3:52pm

Thanks for the instructions. It’s a big ask. I haven’t had a chance yet to follow all those instructions including installing node. I’m actually quite behind on issues and the 2.2 release as-is. Of course, anyone else is welcome to help solve it, I’m just stacked full right now.

system · September 9, 2020, 3:21pm

This topic was automatically closed after 30 days. New replies are no longer allowed.

francislavoie · September 19, 2020, 5:50am

This had been closed due to age, but a followup thread was opened that offers an explanation (for those who were involved in this thread or find this via searching):