From af9a2cfd2fb0b3d80d4da2a95227cde67895e7ed Mon Sep 17 00:00:00 2001
From: Rory Powell <rory.codes@gmail.com>
Date: Thu, 31 Mar 2022 15:58:45 +0100
Subject: [PATCH] Add static html error page to nginx for 502, 503, 504

---
 hosting/docker-compose.dev.yaml |   1 +
 hosting/nginx.dev.conf.hbs      |   6 ++
 hosting/nginx.prod.conf.hbs     |   8 +-
 hosting/proxy/Dockerfile        |   3 +-
 hosting/proxy/error.html        | 141 ++++++++++++++++++++++++++++++++
 5 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 hosting/proxy/error.html

diff --git a/hosting/docker-compose.dev.yaml b/hosting/docker-compose.dev.yaml
index 43b8526e9e..be0bc74a26 100644
--- a/hosting/docker-compose.dev.yaml
+++ b/hosting/docker-compose.dev.yaml
@@ -27,6 +27,7 @@ services:
     image: nginx:latest
     volumes:
       - ./.generated-nginx.dev.conf:/etc/nginx/nginx.conf
+      - ./proxy/error.html:/usr/share/nginx/html/error.html
     ports:
       - "${MAIN_PORT}:10000"
     depends_on:
diff --git a/hosting/nginx.dev.conf.hbs b/hosting/nginx.dev.conf.hbs
index 9fc2345fb2..9398b7e719 100644
--- a/hosting/nginx.dev.conf.hbs
+++ b/hosting/nginx.dev.conf.hbs
@@ -28,6 +28,12 @@ http {
     ignore_invalid_headers off;
     proxy_buffering off;
 
+    error_page 502 503 504 /error.html;
+    location = /error.html {
+      root /usr/share/nginx/html; 
+      internal;
+    }
+
     location /db/ {
       proxy_pass      http://couchdb-service:5984;
       rewrite ^/db/(.*)$ /$1 break;
diff --git a/hosting/nginx.prod.conf.hbs b/hosting/nginx.prod.conf.hbs
index 8560ad0198..ad6ffb42cb 100644
--- a/hosting/nginx.prod.conf.hbs
+++ b/hosting/nginx.prod.conf.hbs
@@ -44,11 +44,17 @@ http {
     proxy_buffering off;
     # port_in_redirect off;
 
+    error_page 502 503 504 /error.html;
+    location = /error.html {
+      root /usr/share/nginx/html; 
+      internal;
+    }
+
     # Security Headers
     add_header X-Frame-Options SAMEORIGIN always;
     add_header X-Content-Type-Options nosniff always;
     add_header X-XSS-Protection "1; mode=block" always;
-    add_header Content-Security-Policy  "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data:; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
+    add_header Content-Security-Policy  "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.budi.live https://js.intercomcdn.com https://widget.intercom.io https://jspm.dev; style-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://fonts.googleapis.com https://rsms.me https://maxcdn.bootstrapcdn.com; object-src 'none'; base-uri 'self'; connect-src 'self' https://api-iam.intercom.io https://app.posthog.com wss://nexus-websocket-a.intercom.io ; font-src 'self' data: https://cdn.jsdelivr.net https://fonts.gstatic.com https://rsms.me https://maxcdn.bootstrapcdn.com; frame-src 'self' https:; img-src http: https: data:; manifest-src 'self'; media-src 'self'; worker-src 'none';" always;
 
     # upstreams
     set $apps {{ apps }};
diff --git a/hosting/proxy/Dockerfile b/hosting/proxy/Dockerfile
index b577e3e40f..a2b17d3333 100644
--- a/hosting/proxy/Dockerfile
+++ b/hosting/proxy/Dockerfile
@@ -1,2 +1,3 @@
 FROM nginx:latest
-COPY .generated-nginx.prod.conf /etc/nginx/nginx.conf
\ No newline at end of file
+COPY .generated-nginx.prod.conf /etc/nginx/nginx.conf
+COPY error.html /usr/share/nginx/html/error.html
\ No newline at end of file
diff --git a/hosting/proxy/error.html b/hosting/proxy/error.html
new file mode 100644
index 0000000000..f1c7647e0a
--- /dev/null
+++ b/hosting/proxy/error.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Budibase</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1">  
+  </head>
+
+  <script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module" async></script>
+
+  <script>
+    function goToStatus() {
+      window.location.href = "https://status.budibase.com";
+    }
+    function goHome() {
+      window.location.href = window.location.origin;
+    }
+    function getStatus() {
+      var http = new XMLHttpRequest()
+      var url = window.location.href
+      http.open('GET', url, true)
+      http.send()
+      http.onreadystatechange = (e) => {
+        var status = http.status
+        document.getElementById("status").innerHTML = status
+
+        var message
+        if (status === 502) {
+          message = "Bad gateway. Please try again later."
+        } else if (status === 503) {
+          message = "Service Unavailable. Please try again later."
+        } else if (status === 504) {
+          message = "Gateway timeout. Please try again later."
+        } else {
+          message = "Please try again later."
+        }
+
+        document.getElementById("message").innerHTML = message
+      }
+    }
+
+    getStatus()
+  </script>
+
+  <style>
+    html, body {
+      background-color: #1a1a1a;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+      color: #e7e7e7;
+    } 
+    .main {
+      height: 100vh;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+    }
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+    }
+
+    @media only screen and (max-width: 600px) {
+      .info {
+        align-items: center;
+      }
+    }
+
+    .status {
+      color: var(--spectrum-global-color-gray-600)
+    }
+    .title {
+      font-weight: 400;
+      color: var(--spectrum-global-color-gray-900)
+    }
+    .message {
+      font-weight: 200;
+      color: var(--spectrum-global-color-gray-800)
+    }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      margin-top: 15px;
+    }
+    .statusButton {
+      margin-left: 20px;
+      border: none;
+    }
+    .hero {
+      height: 160px;
+      width: 160px;
+      margin-right: 80px;
+    }
+    .content {
+      display: flex;
+      flex-direction: row;
+      align-items: flex-end;
+      justify-content: center;
+    }
+
+    @media only screen and (max-width: 600px) {
+      .content {
+        flex-direction: column;
+      }
+    }
+  </style>
+
+  <script src="">
+  </script>
+
+  <body>
+    <sp-theme scale="medium" color="dark">
+      <div class="main">
+        <div class="content">
+          <div class="hero">
+            <img src="https://raw.githubusercontent.com/Budibase/budibase/master/packages/builder/assets/bb-space-man.svg" alt="Budibase Logo">
+          </div>
+          <div class="info">
+            <div>
+              <h4 id="status" class="status"></h4>
+              <h1 class="title">
+                Houston we have a problem!
+              </h1>
+              <h3 id="message" class="message">
+              </h3>
+            </div>
+            <div class="buttons">
+              <sp-button onclick=goHome()>Return home</sp-button> 
+              <sp-button class="statusButton" quiet variant="secondary" onclick=goToStatus()>Check out status</sp-button> 
+            </div>
+          </div>
+        </div>
+        
+      </div>
+    </sp-theme>
+  </body>
+
+</html>
\ No newline at end of file