Add custom error page, defer backend resolution

dappnode · Apr 1, 2023 · c34a133 · c34a133
1 parent 0b998f4
commit c34a133
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 25 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -21,6 +21,8 @@ ENV DOMAINS_DIR=/usr/src/app/domains  \
 WORKDIR /usr/src/app
 COPY package.json yarn.lock ./
 COPY ./templates ./templates
+COPY ./snippets /etc/nginx/snippets
+COPY ./static /usr/share/nginx/html
 RUN yarn --production
 
 COPY --from=builder /usr/src/app/build/ ./build/

diff --git a/dappnode_package.json b/dappnode_package.json
@@ -25,7 +25,12 @@
     "backup": [
       {
         "name": "portal-certs",
-        "path": "/var/lib/https-portal/",
+        "path": "/etc/ssl/dappnode/wildcard_certs/",
+        "service": "https.dnp.dappnode.eth"
+      },
+      {
+        "name": "portal-data",
+        "path": "/usr/src/app/domains",
         "service": "https.dnp.dappnode.eth"
       }
     ],

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -15,6 +15,8 @@ services:
       MAPPING_EXTERNAL_BY_DEFAULT: "true"
       FORCE: null
       PRIVATE_SUBNET: null
+      CLIENT_MAX_BODY_SIZE: null
+      PROXY_BUFFERING: null
     dns: 172.33.1.2
     networks:
       dncore_network:

diff --git a/snippets/custom-error.conf b/snippets/custom-error.conf
@@ -0,0 +1,5 @@
+error_page 403 404 500 502 503 504 /custom_error.html;
+location = /custom_error.html {
+    root /usr/share/nginx/html;
+    internal;
+}
diff --git a/src/api/app.ts b/src/api/app.ts
@@ -14,7 +14,7 @@ app.get(
   "/add",
   asyncHandler(async (req) => {
     const from = await sanitizeFrom(req.query.from as string);
-    const to = await sanitizeTo(req.query.to as string);
+    const to = sanitizeTo(req.query.to as string);
     const external = sanitizeExternal(req.query.external as string); //true if not set, we should swap this, but it left like this for backwards compatibility
 
     const entries = entriesDb.read();

diff --git a/src/api/utils/nginx.ts b/src/api/utils/nginx.ts
@@ -4,17 +4,15 @@ import { updateServerConfigs } from "../../nginx";
 
 const maxRetries = 3;
 
-export async function reconfigureNGINX(
-  force = false
-): Promise<boolean> {
+export async function reconfigureNGINX(force = false): Promise<boolean> {
   await updateServerConfigs(entriesDb.read(), force);
   for (let i = 0; i < maxRetries; i++) {
     try {
       await shell("nginx -s reload");
       console.log("Reconfigured NGINX");
       return true;
     } catch (e) {
-      console.log("Failed to reconfigure NGINX");
+      console.log("Failed to reconfigure NGINX", e);
     }
     await new Promise((r) => setTimeout(r, 3000));
   }

diff --git a/src/api/utils/sanitize.ts b/src/api/utils/sanitize.ts
@@ -1,6 +1,5 @@
 import { config } from "../../config";
 import { BadRequestError } from "./asyncHandler";
-import axios from "axios"
 /**
  * from param must be a subdomain
  */
@@ -19,25 +18,12 @@ export async function sanitizeFrom(from: string): Promise<string> {
 /**
  * to param must be a host with maybe a port number
  */
-export async function sanitizeTo(to: string): Promise<string> {
+export function sanitizeTo(to: string): string {
   try {
     if (!to) throw Error("not defined");
   } catch (e) {
     throw new BadRequestError(`Bad param 'to': ${e.message}`);
   }
-
-  // probe target with axios. We are actually not interested whether it returns something or not, just that target package is available and that port is correct
-
-  try {
-    await axios.get(to, {timeout: 100});
-  } catch (e) {
-    if(e.message === "ECONNREFUSED") {
-      throw new BadRequestError(`Unable to add mapping! Make sure that you are pointing to the open port`);
-    }
-    if(e.code === "ENOTFOUND") {
-      throw new BadRequestError(`Unable to add mapping! Make sure that target package is up and running`);
-    }
-  }
   return to;
 }
 

diff --git a/src/certificates/index.ts b/src/certificates/index.ts
@@ -27,7 +27,7 @@ export default async function initCertificateProvider() {
     await generateDummyCert();
     console.log("- Generating domain key");
     await generateDomainKey();
-    console.log("- Generating DH parameters");
+    console.log("- Generating DH parameters (this may take a while)");
     await generateDHParam();
     console.log("- Creating Certificate signing request");
     await createCSR();

diff --git a/static/custom_error.html b/static/custom_error.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>500 Internal Server Error</title>
+    <style>
+        :root {
+            --dappnode-white-color: #fff;
+            --dappnode-strong-main-color: #00b1f4;
+            --dappnode-darker-main-color: #007dfc;
+            --dappnode-shadow-main-color: #06d4e7;
+            --dappnode-light-main-color: #a0bdbb;
+            --dappnode-gray-main-color: #748888;
+            --dappnode-links-color: #00b1f4;
+            --dappnode-links-darker-color: #007dfc;
+            --dappnode-complimentary-color: #bc2f39;
+
+        --danger-color: var(--dappnode-complimentary-color);
+        --warning-color: #ffcc00;
+        --success-color: var(--dappnode-strong-main-color);
+        --success-green-color: #34a853;
+    }
+
+    body {
+        font-family: Arial, sans-serif;
+        background-color: var(--color-light-background-main);
+        color: var(--light-text-color);
+        margin: 0;
+        padding: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        flex-direction: column;
+    }
+
+    .logo {
+        width: 200px;
+        height: auto;
+        margin-bottom: 1rem;
+    }
+
+    h1 {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+    }
+
+    h2 {
+        font-size: 2rem;
+        margin-bottom: 1rem;
+    }
+
+    a {
+        color: var(--dappnode-links-color);
+        text-decoration: none;
+    }
+
+    a:hover {
+        color: var(--dappnode-links-darker-color);
+    }
+
+    .error-code {
+        font-size: 5rem;
+        font-weight: bold;
+        color: var(--danger-color);
+    }
+
+    ul {
+        list-style-type: disc;
+        padding-left: 1.5rem;
+        margin-bottom: 1rem;
+    }
+
+</style>
+</head>
+<body>
+    <div class="error-container">
+    <img class="logo" src="https://raw.githubusercontent.com/dappnode/DNP_DAPPMANAGER/develop/packages/admin-ui/src/img/dappnode-logo-wide-min.png" alt="Logo">
+
+        <h1>Whops!</h1>
+        <h2>Something went wrong with your mapping.</h2>
+        <p>To troubleshoot try these options:</p>
+        <ul>
+            <li>Make sure that package you're trying to connect to is installed and running</li>
+            <li>If you added package through package configuration tab, make sure that you entered target service and port correctly</li>
+            <li>If nothing from above works, go to System > Network and try clicking "Recreate" button</li>
+        </ul>
+</div>
+</body>
+</html>
diff --git a/templates/default.ssl.conf.ejs b/templates/default.ssl.conf.ejs
@@ -45,9 +45,12 @@ server {
     deny all;
     <% } %>
 
+    include snippets/custom-error.conf;
+
     location / {
 
-        proxy_pass http://<%-data.target %>;
+        set $backend http://<%-data.target %>;
+        proxy_pass $backend;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

diff --git a/templates/nginx.conf.ejs b/templates/nginx.conf.ejs
@@ -51,10 +51,12 @@ http {
     <% if (process.env.CLIENT_MAX_BODY_SIZE) { %>
     client_max_body_size <%- process.env.CLIENT_MAX_BODY_SIZE %>;
     <% } %>
-    <% if (process.env.PROXY_BUFFERS){ %>
+    <% if (process.env.PROXY_BUFFERS && process.env.BUFFERING !== 'off'){ %>
     proxy_buffers <%- process.env.PROXY_BUFFERS %>;
-    <%} if (process.env.PROXY_BUFFER_SIZE) {%>
+    <%} if (process.env.PROXY_BUFFER_SIZE && process.env.BUFFERING !== 'off') {%>
     proxy_buffer_size <%- process.env.PROXY_BUFFER_SIZE %>;
+    <%} if (process.env.PROXY_BUFFERING === 'off') {%>
+    proxy_buffering off;
     <%} if (process.env.RESOLVER) { %>
     resolver <%- process.env.RESOLVER %>;
     <% } if (process.env.PROXY_CONNECT_TIMEOUT) { %>