feat: Add Spotlight (#60523)

Co-authored-by: Abhijeet Prasad <aprasad@sentry.io>

package.json

@@ -176,6 +176,7 @@
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
     "@sentry/jest-environment": "^4.0.0",
     "@sentry/profiling-node": "^1.2.1",
+    "@spotlightjs/spotlight": "^1.0.0",
     "@styled/typescript-styled-plugin": "^1.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.2",
@@ -203,7 +204,8 @@
     "terser": "5.16.9",
     "tocbot": "^4.20.0",
     "tsconfig-paths": "^4.2.0",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "webpack-hook-plugin": "^1.0.7"
   },
   "optionalDependencies": {
     "fsevents": "^2.3.2"

src/sentry/conf/server.py

@@ -494,6 +494,7 @@ if ENVIRONMENT == "development":
     ]
     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 configure_sdk():
             ThreadingIntegration(propagate_hub=True),
             OpenAiIntegration(capture_prompts=True),
         ],
+        spotlight=settings.IS_DEV,
         **sdk_options,
     )
 

static/app/bootstrap/initializeSdk.tsx

@@ -2,6 +2,7 @@
 import {browserHistory, createRoutes, match} from 'react-router';
 import {ExtraErrorData} from '@sentry/integrations';
 import * as Sentry from '@sentry/react';
+import * as Spotlight from '@spotlightjs/spotlight';
 import {BrowserTracing} from '@sentry/react';
 import {_browserPerformanceTimeOriginMode} from '@sentry/utils';
 import {Event} from '@sentry/types';
@@ -169,6 +170,12 @@ export function initializeSdk(config: Config, {routes}: {routes?: Function} = {}
     },
   });
 
+  if (process.env.NODE_ENV !== 'production') {
+    if (sentryConfig.environment === 'development') {
+      /* #__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

@@ -166,6 +166,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';
@@ -610,6 +611,12 @@ if (
       },
     };
     appConfig.output!.publicPath = '/_static/dist/sentry/';
+
+    appConfig.plugins?.push(
+      new WebpackHookPlugin({
+        onBuildStart: ['yarn run spotlight-sidecar'],
+      })
+    );
   }
 }
 

yarn.lock

@@ -2701,6 +2701,24 @@
   dependencies:
     "@sinonjs/commons" "^2.0.0"
 
+"@spotlightjs/overlay@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/overlay/-/overlay-1.0.0.tgz#1fa67d3a631fc87db63eda931681ed4ac8df4203"
+  integrity sha512-PAytV9acAqF8UHFD4236eAMlvOrh46T14508UuhM4fTRKSpJPktNpm+EO5wIa1Z1V+DtycJRi93tskbm6H4Faw==
+
+"@spotlightjs/sidecar@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/sidecar/-/sidecar-1.0.0.tgz#fe5ef4909c065e15dd7bc9deaac692ca54871cfb"
+  integrity sha512-OVyIetoyF8+POvfLbKuW6U3+STjiudxF4ugpxwCWCM+KIp9ZMJNmtQyXAsxkCrXTbWVtt88Pj2duZRPsQiYr7Q==
+
+"@spotlightjs/spotlight@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@spotlightjs/spotlight/-/spotlight-1.0.0.tgz#9d89096c3de2ad95d712e77999cafd82e59c65a3"
+  integrity sha512-cYeKHUt6ntR6assWnwzm5NlEKF70bGlXJnzDAbpyGKgyE5wIawwEzSj5Jq80/c7BOx4NrETxhJX+mX3y9hztrA==
+  dependencies:
+    "@spotlightjs/overlay" "1.0.0"
+    "@spotlightjs/sidecar" "1.0.0"
+
 "@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"