Skip to content

cli: Add a wait screen (HTML) instead of a plain text error when reverse proxy hits a non-started server #5044

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.

Sign up for GitHub

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

Open
tekacs wants to merge 1 commit into
base: main
Choose a base branch
from
+105 −5
Open

cli: Add a wait screen (HTML) instead of a plain text error when reverse proxy hits a non-started server #5044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/cli/Cargo.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ itertools = { workspace = true }
throbber-widgets-tui = "0.8.0"
unicode-segmentation = "1.12.0"
handlebars = "6.3.2"
html-escape = "0.2.13"
strum = { version = "0.27.1", features = ["derive"] }
memmap = "0.7.0"
walrus = { workspace = true, features = ["parallel"] }
Expand Down
109 changes: 104 additions & 5 deletions packages/cli/src/serve/server.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
use crate::{
config::WebHttpsConfig, serve::ServeUpdate, BuildId, BuildStage, BuilderUpdate, BundleFormat,
Result, TraceSrc,
Error, Result, TraceSrc,
};
use anyhow::{bail, Context};
use axum::{
Expand All @@ -10,7 +10,7 @@ use axum::{
Query, Request, State, WebSocketUpgrade,
},
http::{
header::{HeaderName, HeaderValue, CACHE_CONTROL, EXPIRES, PRAGMA},
header::{HeaderName, HeaderValue, CACHE_CONTROL, CONTENT_TYPE, EXPIRES, PRAGMA},
Method, Response, StatusCode,
},
middleware::{self, Next},
Expand All @@ -25,6 +25,7 @@ use futures_util::{
stream::{self, FuturesUnordered},
StreamExt,
};
use html_escape::encode_text;
use hyper::HeaderMap;
use rustls::crypto::{aws_lc_rs::default_provider, CryptoProvider};
use serde::{Deserialize, Serialize};
Expand Down Expand Up @@ -73,6 +74,103 @@ pub(crate) struct ConnectedWsClient {
pid: Option<u32>,
}

fn render_backend_wait_page(error: &Error) -> String {
let escaped_error = encode_text(&format!("{error:#?}")).to_string();

format!(
r#"<!doctype html>
<html lang=\"en\">
<head>
<meta charset=\"utf-8\" />
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />
<title>Backend starting...</title>
<style>
:root {{
color-scheme: dark;
}}

body {{
margin: 0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 20% 20%, #111827, #0b1220 55%);
color: #e5e7eb;
font-family: system-ui, -apple-system, Segoe UI, sans-serif;
padding: 16px;
}}

main {{
width: min(640px, calc(100% - 24px));
padding: 28px 26px;
text-align: left;
background: #0f172a;
border: 1px solid #1f2937;
border-radius: 14px;
box-shadow: 0 16px 46px rgba(0,0,0,0.32);
}}

h1 {{
margin: 0 0 8px;
font-size: 21px;
letter-spacing: 0.2px;
}}

p {{
margin: 0 0 14px;
font-size: 14px;
line-height: 1.6;
color: #cbd5e1;
}}

pre {{
margin: 0;
padding: 12px 14px;
background: #0b1220;
border: 1px solid #1f2937;
border-radius: 10px;
color: #e5e7eb;
font-size: 13px;
line-height: 1.45;
white-space: pre-wrap;
word-break: break-word;
max-height: 320px;
overflow: auto;
}}
</style>
</head>
<body>
<main>
<h1>Backend starting...</h1>
<p>Waiting for the backend to accept connections. This page will reload automatically once it responds.</p>
<pre>{escaped_error}</pre>
</main>
<script>
const target = location.href;
let delay = 600;

async function poll() {{
try {{
const res = await fetch(target, {{ method: 'GET', cache: 'no-store' }});
if (res.ok || (res.status >= 300 && res.status < 400)) {{
location.reload();
return;
}}
}} catch (e) {{}}

delay = Math.min(Math.floor(delay * 1.6), 5000);
setTimeout(poll, delay);
}}

poll();
</script>
</body>
</html>
"#
)
}

impl WebServer {
pub const SELF_IP: IpAddr = IpAddr::V4(Ipv4Addr::new(127, 0, 0, 1));

Expand Down Expand Up @@ -468,11 +566,12 @@ fn build_devserver_router(
format!("http://{address}").parse().unwrap(),
true,
|error| {
tracing::error!(dx_src = ?TraceSrc::Dev, "Fullstack proxy error: {error:#?}");
let body = render_backend_wait_page(&error);
Response::builder()
.status(StatusCode::INTERNAL_SERVER_ERROR)
.body(Body::from(format!(
"Backend connection failed. The backend is likely still starting up. Please try again in a few seconds. Error: {error:#?}"
)))
.header(CONTENT_TYPE, "text/html; charset=utf-8")
.body(Body::from(body))
.unwrap()
},
));
Expand Down
Loading