style: show custom page when proxy fails to resolve dns (#62)

nsrCodes · web-flow · commit d5af0b36fe72 · 2025-05-30T11:13:51.000+05:30
diff --git a/src/components/proxy-middleware/helpers/handleUnreachableAddress.js b/src/components/proxy-middleware/helpers/handleUnreachableAddress.js
@@ -0,0 +1,79 @@
+import dns from 'dns';
+
+export function isAddressUnreachableError(host) {
+    return new Promise((resolve, reject) => {
+        dns.lookup(host, (err, address) => {
+            if (err) {
+                if (err.code === 'ENOTFOUND') {
+                    resolve(true);
+                } else {
+                    reject(err); 
+                }
+            } else {
+                resolve(false); 
+            }
+        });
+    });
+}
+
+export function dataToServeUnreachablePage(host) {
+    return {
+        status: 502,
+        contentType: 'text/html',
+        body: `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>ERR_NAME_NOT_RESOLVED</title>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+    <style>
+        body {
+            background-color: #f2f2f2;
+            color: #333;
+            font-family: 'Roboto', sans-serif;
+            margin: 0;
+            padding: 0;
+        }
+        .container {
+            max-width: 600px;
+            margin: 100px auto;
+            padding: 20px;
+            text-align: center;
+        }
+        .sad-face {
+            font-size: 80px;
+            margin-bottom: 20px;
+        }
+        h1 {
+            font-size: 24px;
+            font-weight: normal;
+            margin-bottom: 10px;
+        }
+        p {
+            font-size: 16px;
+            color: #666;
+        }
+        @media (max-width: 600px) {
+            .container {
+                margin-top: 50px;
+                padding: 10px;
+            }
+            .sad-face {
+                font-size: 60px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="sad-face">:(</div>
+        <h1>This site can’t be reached</h1>
+        <p>The webpage at <strong>${host}/</strong> might be temporarily down or it may have moved permanently to a new web address.</p>
+        <p><strong>ERR_NAME_NOT_RESOLVED</strong></p>
+    </div>
+</body>
+</html>
+        `.trim()
+    };
+}
diff --git a/src/components/proxy-middleware/index.js b/src/components/proxy-middleware/index.js
@@ -21,6 +21,7 @@ import CtxRQNamespace from "./helpers/ctx_rq_namespace";
 import { bodyParser, getContentType } from "./helpers/http_helpers";
 import { RQ_INTERCEPTED_CONTENT_TYPES } from "./constants";
 import { CONSTANTS as GLOBAL_CONSTANTS } from "@requestly/requestly-core";
+import { dataToServeUnreachablePage, isAddressUnreachableError } from "./helpers/handleUnreachableAddress";
 // import SSLProxyingConfigFetcher from "renderer/lib/fetcher/ssl-proxying-config-fetcher";
 // import SSLProxyingManager from "../ssl-proxying/ssl-proxying-manager";
 
@@ -142,7 +143,7 @@ class ProxyMiddlewareManager {
         // Only modify response if any modify_response action is applied
         const modifyResponseActionExist = action_result_objs.some((action_result_obj) => action_result_obj?.action?.action === "modify_response")
 
-        if(modifyResponseActionExist) {
+        if (modifyResponseActionExist) {
           const statusCode = ctx.rq_response_status_code || 404;
           const responseHeaders = getResponseHeaders(ctx) || {}
           ctx.proxyToClientResponse.writeHead(
@@ -163,9 +164,39 @@ class ProxyMiddlewareManager {
               rules_middleware.action_result_objs,
               GLOBAL_CONSTANTS.REQUEST_STATE.COMPLETE
             )
-          } else {
-            console.log("Expected Error after early termination of request: ", err);
-          }
+          } 
+        } else if (kind === "PROXY_TO_SERVER_REQUEST_ERROR") {
+          try {
+            const host = get_request_url(ctx);
+            const isAddressUnreachable = await isAddressUnreachableError(host);
+            if (isAddressUnreachable) {
+              const { status, contentType, body } = dataToServeUnreachablePage(host);
+              ctx.proxyToClientResponse.writeHead(
+                status,
+                http.STATUS_CODES[status],
+                { 
+                  "Content-Type": contentType ,
+                  "x-rq-error": "ERR_NAME_NOT_RESOLVED"
+                }
+              );
+              ctx.proxyToClientResponse.end(body);
+              ctx.rq.set_final_response({
+                status_code: status,
+                headers: { "Content-Type": contentType },
+                body: body,
+              });
+              logger_middleware.send_network_log(
+                ctx,
+                rules_middleware.action_result_objs,
+                GLOBAL_CONSTANTS.REQUEST_STATE.COMPLETE
+              );
+              return;
+            }
+          } catch (error) {
+            console.error("Error checking address:", error);
+          } 
+        } else {
+          console.log("Expected Error after early termination of request: ", err);
         }
 
         return callback();
