Caddy reverse proxy failing to load on js-based script reload

benwis · February 5, 2023, 6:13pm

1. Caddy version:

v2.6.2 h1:wKoFIxpmOJLGl3QXoo6PNbYvGW4xLEgo32GPBEjWL8o

2. How I installed, and run Caddy:

I installed caddy with Homebrew

a. System environment:

MacOs, m1

b. Command:

caddy run

c. Service/unit/compose file:

Not using one

d. My complete Caddy config:

leptos.localhost  {
    reverse_proxy 127.0.0.1:3000
}

3. The problem I’m having:

This setup seems to work as I expect when loaded through a browser via user navigation. But there’s also a websocket connection that can trigger a page reload via a script tag, and that always fails with a 502 error. If you manually reload it though, it shows the page again

4. Error messages and/or full log output:

2023/02/05 17:44:10.809	ERROR	http.log.error	EOF	{"request": {"remote_ip": "::1", "remote_port": "59248", "proto": "HTTP/2.0", "method": "GET", "host": "leptos.localhost", "uri": "/", "headers": {"Accept": ["text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9"], "Referer": ["https://leptos.localhost/"], "Dnt": ["1"], "User-Agent": ["Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36"], "Sec-Ch-Ua": ["\"Not_A Brand\";v=\"99\", \"Google Chrome\";v=\"109\", \"Chromium\";v=\"109\""], "Sec-Ch-Ua-Mobile": ["?0"], "Sec-Fetch-Site": ["same-origin"], "Accept-Language": ["en-US,en;q=0.9"], "Pragma": ["no-cache"], "Upgrade-Insecure-Requests": ["1"], "Sec-Fetch-Dest": ["document"], "Accept-Encoding": ["gzip, deflate, br"], "Sec-Gpc": ["1"], "Sec-Ch-Ua-Platform": ["\"macOS\""], "Sec-Fetch-Mode": ["navigate"], "Cache-Control": ["no-cache"]}, "tls": {"resumed": true, "version": 772, "cipher_suite": 4865, "proto": "h2", "server_name": "leptos.localhost"}}, "duration": 0.003019375, "status": 502, "err_id": "u4a5b67yu", "err_trace": "reverseproxy.statusError (reverseproxy.go:1272)"}

5. What I already tried:

I spent some time trying to figure out if this is some kind of https thing, as without the reverse proxy, the page reloads as you would expect. But I’m mostly grasping at straws here.

6. Links to relevant resources:

Here is a link to the relevant websockets code that does the page reloading:

github.com

leptos-rs/leptos/blob/7f77910e919b768a991e4097f68119eef4b859b5/integrations/axum/src/lib.rs#L544


      
          // we add _bg to the wasm files if cargo-leptos doesn't set the env var LEPTOS_OUTPUT_NAME
          // Otherwise we need to add _bg because wasm_pack always does. This is not the same as options.output_name, which is set regardless
          let mut wasm_output_name = output_name.clone();
          if std::env::var("LEPTOS_OUTPUT_NAME").is_err() {
              wasm_output_name.push_str("_bg");
          }
          
          
let site_ip = &options.site_addr.ip().to_string();
          let reload_port = options.reload_port;
          
          
let leptos_autoreload = match std::env::var("LEPTOS_WATCH").is_ok() {
              true => format!(
                  r#"
                      <script crossorigin="">(function () {{
                          var ws = new WebSocket('ws://{site_ip}:{reload_port}/live_reload');
                          ws.onmessage = (ev) => {{
                              let msg = JSON.parse(ev.data);
                              if (msg.all) window.location.reload();
                              if (msg.css) {{
                                  const link = document.querySelector("link#leptos");
                                  if (link) {{

francislavoie · February 5, 2023, 7:41pm

Enable the debug global option and try again, the logs should show more detail as to what’s going on.

I’m guessing your upstream app has some short amount of downtime when the reload happens, and Caddy proxies to it just before it’s ready.

What you could do is play around with lb_try_duration to let Caddy retry the connection a few times:

benwis · February 6, 2023, 7:39am

Good idea, I tried this and it worked!

leptos.localhost {
	reverse_proxy {
		to 127.0.0.1:3000
		lb_try_duration 5s
	}
}

Thanks!

system · March 8, 2023, 7:40am

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