fix: bump http-proxy-middleware to v4

.changeset/bump-http-proxy-middleware.md

@@ -0,0 +1,6 @@
+---
+"@hyperdx/api": patch
+"@hyperdx/app": patch
+---
+
+Bump http-proxy-middleware to v4, replacing http-proxy with httpxy

packages/api/package.json

@@ -34,7 +34,7 @@
     "express-session": "^1.17.3",
     "handlebars": "^4.7.9",
     "http-graceful-shutdown": "^3.1.13",
-    "http-proxy-middleware": "^3.0.5",
+    "http-proxy-middleware": "^4.0.0",
     "jsonwebtoken": "^9.0.0",
     "lodash": "^4.18.1",
     "minimist": "^1.2.7",

packages/api/src/routers/api/clickhouseProxy.ts

@@ -1,6 +1,5 @@
 import { sanitizeUrl } from '@braintree/sanitize-url';
 import express, { RequestHandler, Response } from 'express';
-import { createProxyMiddleware } from 'http-proxy-middleware';
 import { z } from 'zod';
 import { validateRequest } from 'zod-express-middleware';
 
@@ -164,116 +163,140 @@ const getConnection: RequestHandler =
     }
   };
 
-const proxyMiddleware: RequestHandler =
-  // prettier-ignore-next-line
-  createProxyMiddleware({
-    target: '', // doesn't matter. it should be overridden by the router
-    changeOrigin: true,
-    pathFilter: (path, _req) => {
-      return _req.method === 'GET' || _req.method === 'POST';
-    },
-    pathRewrite: function (path, req) {
-      const sanitizedPath = validateAndSanitizePath(
-        path.replace(/^\/clickhouse-proxy/, ''),
-      );
+// http-proxy-middleware v4 is ESM-only, so we use a dynamic import with a
+// cached promise to keep this CJS module compatible and avoid concurrent-init races.
+let _proxyPromise: Promise<RequestHandler> | undefined;
 
-      const parsedUrl = new URL(sanitizedPath, 'http://localhost');
-      const { searchParams, pathname } = parsedUrl;
-
-      // Append user email as custom ClickHouse setting for query log annotation if the prefix was set
-      const hyperdxSettingPrefix = req._hdx_connection?.hyperdxSettingPrefix;
-      if (hyperdxSettingPrefix) {
-        const userEmail = req.user?.email;
-        if (userEmail) {
-          const userSettingKey = `${hyperdxSettingPrefix}${CUSTOM_SETTING_KEY_SEP}${CUSTOM_SETTING_KEY_USER_SUFFIX}`;
-          searchParams.set(userSettingKey, userEmail);
-        } else {
-          logger.debug('hyperdxSettingPrefix set, no session user found');
-        }
-      }
+function getProxyMiddleware(): Promise<RequestHandler> {
+  if (_proxyPromise) return _proxyPromise;
 
-      return `${pathname}?${searchParams.toString()}`;
-    },
-    router: _req => {
-      if (!_req._hdx_connection?.host) {
-        throw new Error('[createProxyMiddleware] Connection not found');
-      }
-      return _req._hdx_connection.host;
-    },
-    on: {
-      proxyReq: (proxyReq, _req, res) => {
-        // set user-agent to the hyperdx version identifier
-        proxyReq.setHeader('user-agent', `hyperdx ${CODE_VERSION}`);
-
-        if (_req._hdx_connection?.username) {
-          proxyReq.setHeader(
-            'X-ClickHouse-User',
-            _req._hdx_connection.username,
+  _proxyPromise = import('http-proxy-middleware').then(
+    ({ createProxyMiddleware }) =>
+      createProxyMiddleware({
+        target: '', // doesn't matter. it should be overridden by the router
+        changeOrigin: true,
+        pathFilter: (path, _req) => {
+          return _req.method === 'GET' || _req.method === 'POST';
+        },
+        pathRewrite: function (path, req) {
+          const sanitizedPath = validateAndSanitizePath(
+            path.replace(/^\/clickhouse-proxy/, ''),
           );
-        }
-        // Passwords can be empty
-        if (_req._hdx_connection?.password) {
-          proxyReq.setHeader('X-ClickHouse-Key', _req._hdx_connection.password);
-        }
-
-        if (_req.method !== 'POST') {
-          console.error(`Unsupported method ${_req.method}`);
-          return res.sendStatus(405);
-        }
-
-        let body = _req.body;
-        if (_req.headers['content-type'] === 'application/json') {
-          try {
-            body = JSON.stringify(body);
-          } catch (e) {
-            console.error(e);
+
+          const parsedUrl = new URL(sanitizedPath, 'http://localhost');
+          const { searchParams, pathname } = parsedUrl;
+
+          // Append user email as custom ClickHouse setting for query log annotation if the prefix was set
+          const hyperdxSettingPrefix =
+            req._hdx_connection?.hyperdxSettingPrefix;
+          if (hyperdxSettingPrefix) {
+            const userEmail = req.user?.email;
+            if (userEmail) {
+              const userSettingKey = `${hyperdxSettingPrefix}${CUSTOM_SETTING_KEY_SEP}${CUSTOM_SETTING_KEY_USER_SUFFIX}`;
+              searchParams.set(userSettingKey, userEmail);
+            } else {
+              logger.debug('hyperdxSettingPrefix set, no session user found');
+            }
           }
-        }
-
-        try {
-          // TODO: Use fixRequestBody after this issue is resolved: https://github.com/chimurai/http-proxy-middleware/issues/1102
-          proxyReq.write(body);
-        } catch (e) {
-          console.error(
-            `clickhouseProxy error writing body, body is type ${typeof body}`,
-          );
-        }
-      },
-      proxyRes: (proxyRes, _req, res) => {
-        // since clickhouse v24, the cors headers * will be attached to the response by default
-        // which will cause the browser to block the response
-        if (_req.headers['access-control-request-method']) {
-          proxyRes.headers['access-control-allow-methods'] =
-            _req.headers['access-control-request-method'];
-        }
-
-        if (_req.headers['access-control-request-headers']) {
-          proxyRes.headers['access-control-allow-headers'] =
-            _req.headers['access-control-request-headers'];
-        }
-
-        if (_req.headers.origin) {
-          proxyRes.headers['access-control-allow-origin'] = _req.headers.origin;
-          proxyRes.headers['access-control-allow-credentials'] = 'true';
-        }
-      },
-      error: (err, _req, _res) => {
-        console.error('Proxy error:', err);
-        (_res as Response).writeHead(500, {
-          'Content-Type': 'application/json',
-        });
-        _res.end(
-          JSON.stringify({
-            success: false,
-            error: err.message || 'Failed to connect to ClickHouse server',
-          }),
-        );
-      },
-    },
-    // ...(config.IS_DEV && {
-    //   logger: console,
-    // }),
-  });
+
+          return `${pathname}?${searchParams.toString()}`;
+        },
+        router: _req => {
+          if (!_req._hdx_connection?.host) {
+            throw new Error('[createProxyMiddleware] Connection not found');
+          }
+          return _req._hdx_connection.host;
+        },
+        on: {
+          proxyReq: (proxyReq, _req, res) => {
+            // set user-agent to the hyperdx version identifier
+            proxyReq.setHeader('user-agent', `hyperdx ${CODE_VERSION}`);
+
+            if (_req._hdx_connection?.username) {
+              proxyReq.setHeader(
+                'X-ClickHouse-User',
+                _req._hdx_connection.username,
+              );
+            }
+            // Passwords can be empty
+            if (_req._hdx_connection?.password) {
+              proxyReq.setHeader(
+                'X-ClickHouse-Key',
+                _req._hdx_connection.password,
+              );
+            }
+
+            if (_req.method !== 'POST') {
+              console.error(`Unsupported method ${_req.method}`);
+              return res.sendStatus(405);
+            }
+
+            let body = _req.body;
+            if (_req.headers['content-type'] === 'application/json') {
+              try {
+                body = JSON.stringify(body);
+              } catch (e) {
+                console.error(e);
+              }
+            }
+
+            try {
+              proxyReq.write(body);
+            } catch (e) {
+              console.error(
+                `clickhouseProxy error writing body, body is type ${typeof body}`,
+              );
+            }
+          },
+          proxyRes: (proxyRes, _req, res) => {
+            // since clickhouse v24, the cors headers * will be attached to the response by default
+            // which will cause the browser to block the response
+            if (_req.headers['access-control-request-method']) {
+              proxyRes.headers['access-control-allow-methods'] =
+                _req.headers['access-control-request-method'];
+            }
+
+            if (_req.headers['access-control-request-headers']) {
+              proxyRes.headers['access-control-allow-headers'] =
+                _req.headers['access-control-request-headers'];
+            }
+
+            if (_req.headers.origin) {
+              proxyRes.headers['access-control-allow-origin'] =
+                _req.headers.origin;
+              proxyRes.headers['access-control-allow-credentials'] = 'true';
+            }
+          },
+          error: (err, _req, _res) => {
+            console.error('Proxy error:', err);
+            (_res as Response).writeHead(500, {
+              'Content-Type': 'application/json',
+            });
+            _res.end(
+              JSON.stringify({
+                success: false,
+                error: err.message || 'Failed to connect to ClickHouse server',
+              }),
+            );
+          },
+        },
+        // ...(config.IS_DEV && {
+        //   logger: console,
+        // }),
+      }),
+  );
+
+  return _proxyPromise;
+}
+
+const proxyMiddleware: RequestHandler = async (req, res, next) => {
+  try {
+    const middleware = await getProxyMiddleware();
+    middleware(req, res, next);
+  } catch (e) {
+    next(e);
+  }
+};
 
 router.get('/*', hasConnectionId, getConnection, proxyMiddleware);
 router.post('/*', hasConnectionId, getConnection, proxyMiddleware);

packages/app/package.json

@@ -63,7 +63,7 @@
     "dayjs": "^1.11.19",
     "flat": "^5.0.2",
     "fuse.js": "^6.6.2",
-    "http-proxy-middleware": "^3.0.5",
+    "http-proxy-middleware": "^4.0.0",
     "immer": "^9.0.21",
     "jotai": "^2.5.1",
     "ky": "^0.30.0",

packages/app/pages/api/[...all].ts

@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { createProxyMiddleware } from 'http-proxy-middleware';
+import type { RequestHandler } from 'http-proxy-middleware';
 
 const DEFAULT_SERVER_URL = `http://127.0.0.1:${process.env.HYPERDX_API_PORT}`;
 
@@ -16,7 +16,26 @@ export const config = {
 // we proxy `/api/*` to a separately-deployed API service as before.
 const isInlineApi = process.env.HDX_PREVIEW_INLINE_API === 'true';
 
-export default (req: NextApiRequest, res: NextApiResponse) => {
+// http-proxy-middleware v4 is ESM-only. Use a dynamic import with a cached
+// promise so the module is loaded once and concurrent requests share the result.
+let _proxyPromise: Promise<RequestHandler> | undefined;
+
+function getProxy(): Promise<RequestHandler> {
+  if (!_proxyPromise) {
+    _proxyPromise = import('http-proxy-middleware').then(
+      ({ createProxyMiddleware }) =>
+        createProxyMiddleware({
+          changeOrigin: true,
+          pathRewrite: { '^/api': '' },
+          target: process.env.SERVER_URL || DEFAULT_SERVER_URL,
+          autoRewrite: true,
+        }),
+    );
+  }
+  return _proxyPromise;
+}
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
   if (isInlineApi) {
     // Lazy require so non-preview production builds — where the webpack
     // externals hook in next.config.mjs marks @hyperdx/api as external —
@@ -27,16 +46,7 @@ export default (req: NextApiRequest, res: NextApiResponse) => {
     return handler(req, res);
   }
 
-  const proxy = createProxyMiddleware({
-    changeOrigin: true,
-    // logger: console, // DEBUG
-    pathRewrite: { '^/api': '' },
-    target: process.env.SERVER_URL || DEFAULT_SERVER_URL,
-    autoRewrite: true,
-    // ...(IS_DEV && {
-    //   logger: console,
-    // }),
-  });
+  const proxy = await getProxy();
   return proxy(req, res, error => {
     if (error) {
       console.error(error);