Repository: prometheus/prometheus (language: go)

Issue:
web ui npm start broken
### What did you do?

- npm install
- npm start then the result is below



### What did you expect to see?

npm start work well

### What did you see instead? Under which circumstances?

<img width="604" alt="image" src="https://user-images.githubusercontent.com/961094/168252123-e5c94bf6-1820-4949-8440-7fd3cc9900e5.png">

### System information

mac os

### Prometheus version

_No response_

### Prometheus configuration file

_No response_

### Alertmanager version

_No response_

### Alertmanager configuration file

_No response_

### Logs

_No response_


Discussion / hints:

Fix patch:
diff --git a/web/ui/package-lock.json b/web/ui/package-lock.json
index 151912d9e57..3cd91ee259d 100644
--- a/web/ui/package-lock.json
+++ b/web/ui/package-lock.json
@@ -3617,7 +3617,7 @@
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
       "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/connect": "*",
         "@types/node": "*"
@@ -3645,7 +3645,7 @@
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
       "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -3700,7 +3700,7 @@
       "version": "4.17.13",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
       "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.18",
@@ -3712,7 +3712,7 @@
       "version": "4.17.28",
       "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
       "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -3753,7 +3753,6 @@
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
       "integrity": "sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==",
-      "dev": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -3823,13 +3822,12 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/node": {
       "version": "17.0.23",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
-      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==",
-      "dev": true
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3859,13 +3857,13 @@
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/react": {
       "version": "17.0.41",
@@ -3984,7 +3982,7 @@
       "version": "1.13.10",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
       "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/mime": "^1",
         "@types/node": "*"
@@ -7969,8 +7967,7 @@
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
     "node_modules/events": {
       "version": "3.3.0",
@@ -8338,7 +8335,6 @@
       "version": "1.14.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
       "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -9080,7 +9076,6 @@
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
       "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dev": true,
       "dependencies": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -9105,10 +9100,9 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz",
-      "integrity": "sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==",
-      "dev": true,
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
       "dependencies": {
         "@types/http-proxy": "^1.17.8",
         "http-proxy": "^1.18.1",
@@ -9542,7 +9536,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
       "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -11040,7 +11033,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
       "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.1",
         "picomatch": "^2.2.3"
@@ -14235,8 +14227,7 @@
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "node_modules/resize-observer-polyfill": {
       "version": "1.5.1",
@@ -17346,6 +17337,7 @@
         "codemirror-promql": "0.19.0",
         "css.escape": "^1.5.1",
         "downshift": "^6.1.7",
+        "http-proxy-middleware": "^2.0.6",
         "jquery": "^3.5.1",
         "jquery.flot.tooltip": "^0.9.0",
         "moment": "^2.29.2",
@@ -19941,7 +19933,7 @@
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
       "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/connect": "*",
         "@types/node": "*"
@@ -19969,7 +19961,7 @@
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
       "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/node": "*"
       }
@@ -20024,7 +20016,7 @@
       "version": "4.17.13",
       "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
       "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/body-parser": "*",
         "@types/express-serve-static-core": "^4.17.18",
@@ -20036,7 +20028,7 @@
       "version": "4.17.28",
       "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
       "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -20077,7 +20069,6 @@
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
       "integrity": "sha512-5kPLG5BKpWYkw/LVOGWpiq3nEVqxiN32rTgI53Sk12/xHFQ2rG3ehI9IO+O3W2QoKeyB92dJkoka8SUm6BX1pA==",
-      "dev": true,
       "requires": {
         "@types/node": "*"
       }
@@ -20147,13 +20138,12 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
       "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
-      "dev": true
+      "devOptional": true
     },
     "@types/node": {
       "version": "17.0.23",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.23.tgz",
-      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==",
-      "dev": true
+      "integrity": "sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw=="
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -20183,13 +20173,13 @@
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
       "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
-      "dev": true
+      "devOptional": true
     },
     "@types/range-parser": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
-      "dev": true
+      "devOptional": true
     },
     "@types/react": {
       "version": "17.0.41",
@@ -20307,7 +20297,7 @@
       "version": "1.13.10",
       "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
       "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
-      "dev": true,
+      "devOptional": true,
       "requires": {
         "@types/mime": "^1",
         "@types/node": "*"
@@ -23342,8 +23332,7 @@
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
-      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-      "dev": true
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
     },
     "events": {
       "version": "3.3.0",
@@ -23641,8 +23630,7 @@
     "follow-redirects": {
       "version": "1.14.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
-      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==",
-      "dev": true
+      "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w=="
     },
     "fork-ts-checker-webpack-plugin": {
       "version": "6.5.0",
@@ -23984,6 +23972,7 @@
         "enzyme": "^3.11.0",
         "enzyme-to-json": "^3.6.2",
         "fsevents": "^2.3.2",
+        "http-proxy-middleware": "^2.0.6",
         "jquery": "^3.5.1",
         "jquery.flot.tooltip": "^0.9.0",
         "moment": "^2.29.2",
@@ -24241,7 +24230,6 @@
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
       "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
-      "dev": true,
       "requires": {
         "eventemitter3": "^4.0.0",
         "follow-redirects": "^1.0.0",
@@ -24260,10 +24248,9 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz",
-      "integrity": "sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==",
-      "dev": true,
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz",
+      "integrity": "sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==",
       "requires": {
         "@types/http-proxy": "^1.17.8",
         "http-proxy": "^1.18.1",
@@ -24556,8 +24543,7 @@
     "is-plain-obj": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz",
-      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==",
-      "dev": true
+      "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA=="
     },
     "is-plain-object": {
       "version": "5.0.0",
@@ -25736,7 +25722,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
       "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
-      "dev": true,
       "requires": {
         "braces": "^3.0.1",
         "picomatch": "^2.2.3"
@@ -28005,8 +27990,7 @@
     "requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
-      "dev": true
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
     "resize-observer-polyfill": {
       "version": "1.5.1",
diff --git a/web/ui/react-app/package.json b/web/ui/react-app/package.json
index 0bbab0ade60..aaf27891868 100644
--- a/web/ui/react-app/package.json
+++ b/web/ui/react-app/package.json
@@ -25,6 +25,7 @@
     "codemirror-promql": "0.19.0",
     "css.escape": "^1.5.1",
     "downshift": "^6.1.7",
+    "http-proxy-middleware": "^2.0.6",
     "jquery": "^3.5.1",
     "jquery.flot.tooltip": "^0.9.0",
     "moment": "^2.29.2",
@@ -83,7 +84,6 @@
     "mutationobserver-shim": "^0.3.7",
     "sinon": "^13.0.1"
   },
-  "proxy": "http://localhost:9090",
   "jest": {
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
diff --git a/web/ui/react-app/src/setupProxy.js b/web/ui/react-app/src/setupProxy.js
new file mode 100644
index 00000000000..f7f54c4a271
--- /dev/null
+++ b/web/ui/react-app/src/setupProxy.js
@@ -0,0 +1,11 @@
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = function(app) {
+  app.use(
+    '/api',
+    createProxyMiddleware({
+      target: 'http://localhost:9090',
+      changeOrigin: true,
+    })
+  );
+};


Test patch: