Skip to content

Commit 249c6be

Browse files
betschkibetschki
committed
Enhance error handling by updating the proxy error page to a more user-friendly design, inspired by the Ghost error page. The new HTML structure includes improved styling and messaging for better user experience during downtime.
1 parent 1c1f0cc commit 249c6be

File tree

1 file changed

+89
-19
lines changed

1 file changed

+89
-19
lines changed

‎src/middleware.ts‎

Lines changed: 89 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -96,25 +96,95 @@ export class ProxyMiddleware {
9696
private handleProxyError(err: Error, req: Request, res: Response): void {
9797
console.error('❌ Error during proxy operation:', err);
9898

99-
// Send a nicer error page
100-
const errorHtml = `
101-
<!DOCTYPE html>
102-
<html>
103-
<head>
104-
<title>Service Temporarily Unavailable</title>
105-
<style>
106-
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
107-
text-align: center; padding-top: 50px; }
108-
h1 { color: #333; }
109-
p { color: #666; }
110-
</style>
111-
</head>
112-
<body>
113-
<h1>Service Temporarily Unavailable</h1>
114-
<p>The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.</p>
115-
</body>
116-
</html>
117-
`;
99+
// The error page resembles the Ghost error page
100+
// @see: https://github.com/TryGhost/Ghost/blob/ec62120b94ccce06b56ae1ca6944ab87644437bd/ghost/core/core/server/views/maintenance.html#L84
101+
const errorHtml = `<!DOCTYPE html>
102+
<html>
103+
<head>
104+
<meta charset="utf-8">
105+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
106+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
107+
<title>We'll be right back</title>
108+
<style type="text/css">
109+
* {
110+
box-sizing: border-box;
111+
}
112+
html {
113+
font-size: 62.5%;
114+
background: #f1f2f3;
115+
-ms-text-size-adjust: 100%;
116+
-webkit-text-size-adjust: 100%;
117+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
118+
}
119+
body {
120+
display: flex;
121+
flex-direction: column;
122+
justify-content: center;
123+
align-items: center;
124+
height: 100vh;
125+
width: 100vw;
126+
margin: 0;
127+
padding: 4vmin;
128+
color: #15171A;
129+
font-size: 2rem;
130+
line-height: 1.4em;
131+
font-family: sans-serif;
132+
background: #f1f2f3;
133+
scroll-behavior: smooth;
134+
-webkit-font-smoothing: antialiased;
135+
-moz-osx-font-smoothing: grayscale;
136+
}
137+
138+
::selection {
139+
text-shadow: none;
140+
background: #cbeafb;
141+
}
142+
143+
.content {
144+
display: flex;
145+
flex-direction: column;
146+
justify-content: center;
147+
max-width: 500px;
148+
min-height: 360px;
149+
margin: 0 0 4vmin;
150+
padding: 40px;
151+
text-align: center;
152+
background: #fff;
153+
border-radius: 20px;
154+
box-shadow:
155+
0 50px 100px -20px rgb(50 50 93 / 8%),
156+
0 30px 60px -30px rgb(0 0 0 / 13%),
157+
0 10px 20px -10px rgb(0 0 0 / 8%);
158+
}
159+
h1 {
160+
margin: 0 0 0.3em;
161+
font-size: 4rem;
162+
line-height: 1em;
163+
font-weight: 700;
164+
letter-spacing: -0.02em;
165+
}
166+
p {
167+
margin: 0;
168+
opacity: 0.7;
169+
font-weight: 400;
170+
}
171+
img {
172+
display: block;
173+
margin: 0 auto 40px;
174+
}
175+
@media (max-width: 500px) {
176+
body { font-size: 1.8rem; }
177+
h1 { font-size: 3.4rem; }
178+
}
179+
</style>
180+
</head>
181+
<body>
182+
<div class="content">
183+
<h1>We'll be right back.</h1>
184+
<p>We're busy updating our site to give you the best experience, and will be back soon.</p>
185+
</div>
186+
</body>
187+
</html>`;
118188

119189
res.status(503).send(errorHtml);
120190
}

0 commit comments

Comments
 (0)