feat: Add Spotlight

package.json

@@ -62,6 +62,7 @@
     "@sentry/tracing": "^7.85.0",
     "@sentry/types": "^7.85.0",
     "@sentry/utils": "^7.85.0",
+    "@spotlightjs/spotlight": "^1.1.1",
     "@tanstack/react-query": "^4.29.7",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
@@ -169,6 +170,7 @@
     "url-loader": "^4.1.0",
     "webpack": "5.87.0",
     "webpack-cli": "5.1.4",
+    "webpack-hook-plugin": "^1.0.7",
     "webpack-remove-empty-scripts": "^1.0.3",
     "zxcvbn": "^4.4.2"
   },

src/sentry/conf/server.py

@@ -494,6 +494,7 @@ def env(
     ]
     CSP_CONNECT_SRC += [
         "ws://127.0.0.1:8000",
+        "http://localhost:8969/stream",
     ]
 
 # Before enforcing Content Security Policy, we recommend creating a separate

src/sentry/utils/sdk.py

@@ -458,6 +458,7 @@ def flush(
             ThreadingIntegration(propagate_hub=True),
             OpenAiIntegration(capture_prompts=True),
         ],
+        spotlight=settings.IS_DEV,
         **sdk_options,
     )
 

static/app/bootstrap/initializeSdk.tsx

@@ -169,6 +169,14 @@ export function initializeSdk(config: Config, {routes}: {routes?: Function} = {}
     },
   });
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (sentryConfig.environment === 'development') {
+      import('@spotlightjs/spotlight').then(Spotlight => {
+        /* #__PURE__ */ Spotlight.init();
+      });
+    }
+  }
+
   // Event processor to fill the debug_meta field with debug IDs based on the
   // files the error touched. (files inside the stacktrace)
   const debugIdPolyfillEventProcessor = async (event: Event, hint: Sentry.EventHint) => {

static/app/types/system.tsx

@@ -170,6 +170,7 @@ export interface Config {
     dsn: string;
     release: string;
     tracePropagationTargets: string[];
+    environment?: string;
     profilesSampleRate?: number;
   };
   singleOrganization: boolean;

webpack.config.ts

@@ -12,6 +12,7 @@ import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpack from 'webpack';
 import {Configuration as DevServerConfig} from 'webpack-dev-server';
+import WebpackHookPlugin from 'webpack-hook-plugin';
 import FixStyleOnlyEntriesPlugin from 'webpack-remove-empty-scripts';
 
 import IntegrationDocsFetchPlugin from './build-utils/integration-docs-fetch-plugin';
@@ -613,6 +614,15 @@ if (
   }
 }
 
+// We want Spotlight only in Dev mode - Local and UI only
+if (DEV_MODE) {
+  appConfig.plugins?.push(
+    new WebpackHookPlugin({
+      onBuildStart: ['yarn run spotlight-sidecar'],
+    })
+  );
+}
+
 // XXX(epurkhiser): Sentry (development) can be run in an experimental
 // pure-SPA mode, where ONLY /api* requests are proxied directly to the API
 // backend (in this case, sentry.io), otherwise ALL requests are rewritten

yarn.lock

@@ -2701,6 +2701,24 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
+"@spotlightjs/overlay@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/overlay/-/overlay-1.0.1.tgz#2761cbf1675e19e8fec2a9327ec69a9d11d7841b"
+  integrity sha512-uyL3MMSjPXDjDNw/6Waf98k5lvqccC6VR+vPuLTPf2QTQxr9EQ3y1p4Arbhid9NZ1BXqJfi2cqvXEwj0MvKVxQ==
+
+"@spotlightjs/sidecar@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/sidecar/-/sidecar-1.1.1.tgz#498d5742628a16e11c0a411e25a7c563eb5e4a52"
+  integrity sha512-fRWQJHwT7r3WlCzGdIyFb+dh88T7aleLd76d7mEUXLRRkqvSZPP2uO48OlBXFJJoATFfm+1XSIedehvlVjHqUw==
+
+"@spotlightjs/spotlight@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/spotlight/-/spotlight-1.1.1.tgz#01706182f406a8589e44b4e65ccfcab22999fc5c"
+  integrity sha512-MqGfh/pSa3S7KhnRx09lxKUbpWs02IU5tzYOlDAYd4PBtFVDQ2yDOLahxgxO0v12NE11Wh06aL1KfdNwY+zfdw==
+  dependencies:
+    "@spotlightjs/overlay" "1.0.1"
+    "@spotlightjs/sidecar" "1.1.1"
+
 "@styled/typescript-styled-plugin@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@styled/typescript-styled-plugin/-/typescript-styled-plugin-1.0.0.tgz#82723b57c2a49cfb4bb7ea456cd7350474ae423a"
@@ -11561,6 +11579,11 @@ webpack-dev-server@^4.15.1:
     webpack-dev-middleware "^5.3.1"
     ws "^8.13.0"
 
+webpack-hook-plugin@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/webpack-hook-plugin/-/webpack-hook-plugin-1.0.7.tgz#689c2a24e16df247be91d8649e9da048774308ec"
+  integrity sha512-8GJ+LiR+0rrShCSeeFMaKONX7xMMW3H9Hszmy5IsCereZUJ5AoLhJgn5BhySQChA4Q5lZ7/9KtidDypYHQDDmA==
+
 webpack-merge@^5.7.3:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.7.3.tgz#2a0754e1877a25a8bbab3d2475ca70a052708213"