OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Add custom 502 error page, for when the app goes down but nginx is up

Browse source
This commit is contained in:
Emi Matchu 2024-02-19 13:19:31 -08:00
parent a6daef636c
commit ead0003397
2 changed files with 69 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
deploy/files/sites-available/impress.conf
View file

@ -33,9 +33,14 @@ server {
add_header ETag ""; add_header ETag "";
} }
# On status 503, return the maintenance page. # On status 503, return the maintenance page. (We'll trigger this ourselves
# in the @app location, if $maintenance is on.)
error_page 503 /maintenance.html; error_page 503 /maintenance.html;
# On status 502, return the outage page. (nginx will trigger this if the
# `proxy_pass` to the application fails.)
error_page 502 /outage.html;
# Try serving static files first. If not found, fall back to the app. # Try serving static files first. If not found, fall back to the app.
try_files $uri/index.html $uri @app; try_files $uri/index.html $uri @app;

63
public/outage.html Normal file
View file

@ -0,0 +1,63 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Dress to Impress: Surprise Downtime?</title>
<style type="text/css">
body {
background-color: #fff;
color: #666;
font-family: arial, sans-serif;
padding: 2em 1em;
}
main {
border: 1px solid #ccc;
margin-inline: auto;
padding: 1em;
max-width: 600px;
display: grid;
grid-template-areas: "illustration body";
grid-template-columns: auto 1fr;
column-gap: 1em;
}
h1 {
font-size: 1.5em;
margin: 0;
margin-bottom: 0.5em;
}
p {
margin-bottom: 0.5em;
}
</style>
</head>
<body>
<main>
<img
width="100"
height="100"
alt="Distressed Grundo programmer"
src="/images/error-grundo.png"
/>
<div>
<h1>DTI is down for the count?!</h1>
<p>
Hrm, it looks like the DTI application has crashed all the
way into the ground?? 😬
</p>
<p>
This can happen when our system gets overloaded, or when the
team is working on something and we hit the wrong button 😓
</p>
<p>
We'll be notified of this outage, and we'll do our best to
be back up soon! 💖
</p>
</div>
</main>
</body>
</html>