deps(ui): Upgrade webpack dev server, terser (#69150)

package.json

@@ -50,7 +50,7 @@
  "@react-stately/tabs": "^3.6.3",
  "@react-stately/tree": "^3.7.5",
  "@react-types/shared": "^3.22.0",
- "@rsdoctor/webpack-plugin": "^0.1.0",
+ "@rsdoctor/webpack-plugin": "^0.1.10",
  "@sentry-internal/global-search": "^0.5.7",
  "@sentry-internal/react-inspector": "6.0.1-4",
  "@sentry-internal/rrweb": "2.12.0",
@@ -92,7 +92,7 @@
  "@types/react-virtualized": "^9.21.22",
  "@types/reflux": "0.4.1",
  "@types/scroll-to-element": "^2.0.2",
- "@types/webpack-env": "^1.18.0",
+ "@types/webpack-env": "^1.18.4",
  "ansi-to-react": "^6.1.6",
  "babel-loader": "^9.1.2",
  "babel-plugin-add-react-displayname": "^0.0.5",
@@ -101,7 +101,7 @@
  "cbor-web": "^8.1.0",
  "classnames": "2.3.1",
  "color": "^4.2.3",
- "compression-webpack-plugin": "11.0.0",
+ "compression-webpack-plugin": "11.1.0",
  "copy-webpack-plugin": "^12.0.2",
  "core-js": "^3.33.0",
  "cronstrue": "^2.26.0",
@@ -169,15 +169,15 @@
  "typescript": "^5.4.5",
  "u2f-api": "1.0.10",
  "url-loader": "^4.1.1",
- "webpack": "5.90.1",
+ "webpack": "5.91.0",
  "webpack-cli": "5.1.4",
  "webpack-remove-empty-scripts": "^1.0.4",
  "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
  "@biomejs/biome": "^1.7.0",
  "@codecov/webpack-plugin": "^0.0.1-beta.6",
- "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
+ "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
  "@sentry/jest-environment": "^4.0.0",
  "@sentry/profiling-node": "^7.109.0",
  "@styled/typescript-styled-plugin": "^1.0.1",
@@ -202,9 +202,9 @@
  "react-refresh": "0.14.0",
  "stylelint": "16.2.1",
  "stylelint-config-recommended": "^14.0.0",
- "terser": "5.27.0",
+ "terser": "5.30.3",
  "tsconfig-paths": "^4.2.0",
- "webpack-dev-server": "^4.15.1"
+ "webpack-dev-server": "5.0.4"
  },
  "optionalDependencies": {
  "fsevents": "^2.3.2"

webpack.config.ts

@@ -13,7 +13,11 @@ import fs from 'node:fs';
 import path from 'node:path';
 import TerserPlugin from 'terser-webpack-plugin';
 import webpack from 'webpack';
-import type {Configuration as DevServerConfig} from 'webpack-dev-server';
+import type {
+ Configuration as DevServerConfig,
+ ProxyConfigArray,
+ Static,
+} from 'webpack-dev-server';
 import FixStyleOnlyEntriesPlugin from 'webpack-remove-empty-scripts';
 
 import LastBuiltPlugin from './build-utils/last-built-plugin';
@@ -576,46 +580,59 @@ if (
 
  // If we're running siloed servers we also need to proxy
  // those requests to the right server.
- let controlSiloProxy = {};
+ let controlSiloProxy: ProxyConfigArray = [];
  if (CONTROL_SILO_PORT) {
  // TODO(hybridcloud) We also need to use this URL pattern
  // list to select control/region when making API requests in non-proxied
  // environments (like production). We'll likely need a way to consolidate this
  // with the configuration api.Client uses.
  const controlSiloAddress = `http:https://127.0.0.1:${CONTROL_SILO_PORT}`;
- controlSiloProxy = {
- '/auth/**': controlSiloAddress,
- '/account/**': controlSiloAddress,
- '/api/0/users/**': controlSiloAddress,
- '/api/0/api-tokens/**': controlSiloAddress,
- '/api/0/sentry-apps/**': controlSiloAddress,
- '/api/0/organizations/*/audit-logs/**': controlSiloAddress,
- '/api/0/organizations/*/broadcasts/**': controlSiloAddress,
- '/api/0/organizations/*/integrations/**': controlSiloAddress,
- '/api/0/organizations/*/config/integrations/**': controlSiloAddress,
- '/api/0/organizations/*/sentry-apps/**': controlSiloAddress,
- '/api/0/organizations/*/sentry-app-installations/**': controlSiloAddress,
- '/api/0/api-authorizations/**': controlSiloAddress,
- '/api/0/api-applications/**': controlSiloAddress,
- '/api/0/doc-integrations/**': controlSiloAddress,
- '/api/0/assistant/**': controlSiloAddress,
- };
+ controlSiloProxy = [
+ {
+ context: [
+ '/auth/**',
+ '/account/**',
+ '/api/0/users/**',
+ '/api/0/api-tokens/**',
+ '/api/0/sentry-apps/**',
+ '/api/0/organizations/*/audit-logs/**',
+ '/api/0/organizations/*/broadcasts/**',
+ '/api/0/organizations/*/integrations/**',
+ '/api/0/organizations/*/config/integrations/**',
+ '/api/0/organizations/*/sentry-apps/**',
+ '/api/0/organizations/*/sentry-app-installations/**',
+ '/api/0/api-authorizations/**',
+ '/api/0/api-applications/**',
+ '/api/0/doc-integrations/**',
+ '/api/0/assistant/**',
+ ],
+ target: controlSiloAddress,
+ },
+ ];
  }
 
  appConfig.devServer = {
  ...appConfig.devServer,
  static: {
- ...(appConfig.devServer.static as object),
+ ...(appConfig.devServer.static as Static),
  publicPath: '/_static/dist/sentry',
  },
  // syntax for matching is using https://www.npmjs.com/package/micromatch
- proxy: {
+ proxy: [
  ...controlSiloProxy,
- '/api/store/**': relayAddress,
- '/api/{1..9}*({0..9})/**': relayAddress,
- '/api/0/relays/outcomes/': relayAddress,
- '!/_static/dist/sentry/**': backendAddress,
- },
+ {
+ context: [
+ '/api/store/**',
+ '/api/{1..9}*({0..9})/**',
+ '/api/0/relays/outcomes/**',
+ ],
+ target: relayAddress,
+ },
+ {
+ context: ['!/_static/dist/sentry/**'],
+ target: backendAddress,
+ },
+ ],
  };
  appConfig.output!.publicPath = '/_static/dist/sentry/';
  }