fix: Use sidecar when it is available for local JS

Author: BYK

.vscode/settings.json

@@ -19,7 +19,9 @@
     "notarytool",
     "outro",
     "pageload",
+    "platformicons",
     "postject",
+    "raleway",
     "rcodesign",
     "spotlightjs",
     "svgr",

packages/overlay/package.json

@@ -29,9 +29,10 @@
   "devDependencies": {
     "@fontsource/raleway": "^5.1.0",
     "@microlink/react-json-view": "^1.23.4",
-    "@sentry/react": "^8.43.0",
-    "@sentry/types": "^8.33.1",
-    "@sentry/utils": "^8.33.1",
+    "@sentry/browser": "^8.51.0",
+    "@sentry/react": "^8.51.0",
+    "@sentry/types": "^8.51.0",
+    "@sentry/core": "^8.51.0",
     "@spotlightjs/sidecar": "workspace:*",
     "@spotlightjs/tsconfig": "workspace:*",
     "@types/beautify": "^0.0.3",

packages/overlay/src/App.tsx

@@ -4,7 +4,7 @@ import Debugger from './components/Debugger';
 import Trigger from './components/Trigger';
 import type { Integration, IntegrationData } from './integrations/integration';
 import * as db from './lib/db';
-import { getSpotlightEventTarget } from './lib/eventTarget';
+import { getSpotlightEventTarget, trigger } from './lib/eventTarget';
 import { log } from './lib/logger';
 import useKeyPress from './lib/useKeyPress';
 import { connectToSidecar } from './sidecar';
@@ -62,6 +62,10 @@ export default function App({
     return result;
   });
   const [isOnline, setOnline] = useState(false);
+  const notifyOnlineStatus = useCallback((onlineStatus: boolean) => {
+    trigger('sidecar:connectivity', { connected: onlineStatus });
+    setOnline(onlineStatus);
+  }, []);
   const [triggerButtonCount, setTriggerButtonCount] = useState<NotificationCount>({ count: 0, severe: false });
   const [isOpen, setOpen] = useState(openOnInit);
   log('App rerender', integrationData, isOnline, triggerButtonCount, isOpen);
@@ -111,8 +115,8 @@ export default function App({
   }, [integrations]);
 
   useEffect(
-    () => connectToSidecar(sidecarUrl, contentTypeListeners, setOnline) as () => undefined,
-    [sidecarUrl, contentTypeListeners],
+    () => connectToSidecar(sidecarUrl, contentTypeListeners, notifyOnlineStatus) as () => undefined,
+    [sidecarUrl, contentTypeListeners, notifyOnlineStatus],
   );
 
   const spotlightEventTarget = useMemo(() => getSpotlightEventTarget(), []);

packages/overlay/src/integrations/sentry/data/sentryDataCache.ts

@@ -1,10 +1,10 @@
-import { Envelope } from '@sentry/types';
+import type { Envelope } from '@sentry/types';
 import { CONTEXT_LINES_ENDPOINT } from '@spotlightjs/sidecar/constants';
 import { DEFAULT_SIDECAR_URL } from '~/constants';
-import { RawEventContext } from '~/integrations/integration';
+import type { RawEventContext } from '~/integrations/integration';
 import { log } from '../../../lib/logger';
 import { generateUuidv4 } from '../../../lib/uuid';
-import { Sdk, SentryErrorEvent, SentryEvent, SentryTransactionEvent, Span, Trace } from '../types';
+import type { Sdk, SentryErrorEvent, SentryEvent, SentryTransactionEvent, Span, Trace } from '../types';
 import { getNativeFetchImplementation } from '../utils/fetch';
 import { sdkToPlatform } from '../utils/sdkToPlatform';
 import { groupSpans } from '../utils/traces';

packages/overlay/src/integrations/sentry/index.ts

@@ -11,6 +11,8 @@ import InsightsTab from './tabs/InsightsTab';
 import PerformanceTab from './tabs/PerformanceTab';
 import type { SentryErrorEvent, SentryEvent } from './types';
 
+import { spotlightBrowserIntegration } from '@sentry/browser';
+
 const HEADER = 'application/x-sentry-envelope';
 
 type SentryIntegrationOptions = {
@@ -28,10 +30,13 @@ export default function sentryIntegration(options: SentryIntegrationOptions = {}
       if (options.retries == null) {
         options.retries = 10;
       }
+      let baseSidecarUrl: string | undefined = undefined;
       if (sidecarUrl) {
-        sentryDataCache.setSidecarUrl(removeURLSuffix(sidecarUrl, '/stream'));
+        baseSidecarUrl = removeURLSuffix(sidecarUrl, '/stream');
+        sentryDataCache.setSidecarUrl(baseSidecarUrl);
       }
-      addSpotlightIntegrationToSentry(options);
+      log('Setting up Sentry integration for Spotlight');
+      addSpotlightIntegrationToSentry(options, baseSidecarUrl && new URL('/stream', baseSidecarUrl).href);
 
       if (options.openLastError) {
         sentryDataCache.subscribe('event', (e: SentryEvent) => {
@@ -181,6 +186,11 @@ type WindowWithSentry = Window & {
   __SENTRY__?: LegacyCarrier & VersionedCarrier;
 };
 
+let sidecarConnected = false;
+on('sidecar:connectivity', evt => {
+  sidecarConnected = (evt as CustomEvent).detail.connected;
+});
+
 /**
  * Takes care of injecting spotlight-specific behavior into the Sentry SDK by
  * accessing the global __SENTRY__ carrier object.
@@ -197,7 +207,7 @@ type WindowWithSentry = Window & {
  *
  * @param options options of the Sentry integration for Spotlight
  */
-function addSpotlightIntegrationToSentry(options: SentryIntegrationOptions) {
+function addSpotlightIntegrationToSentry(options: SentryIntegrationOptions, sidecarUrl?: string) {
   if (options.injectIntoSDK === false) {
     return;
   }
@@ -211,7 +221,7 @@ function addSpotlightIntegrationToSentry(options: SentryIntegrationOptions) {
       log(`Will retry ${options.retries} more time(s) at 100ms intervals...`);
       options.retries--;
       setTimeout(() => {
-        addSpotlightIntegrationToSentry(options);
+        addSpotlightIntegrationToSentry(options, sidecarUrl);
       }, 500);
     }
     return;
@@ -247,8 +257,8 @@ function addSpotlightIntegrationToSentry(options: SentryIntegrationOptions) {
       );
       return;
     }
-    const integration = spotlightIntegration();
-    sentryClient.addIntegration(integration);
+    sentryClient.addIntegration(spotlightIntegration(sidecarConnected));
+    sentryClient.addIntegration(spotlightBrowserIntegration({ sidecarUrl }));
   } catch (e) {
     warn('Failed to add Spotlight integration to Sentry', e);
     log('Please open an issue with the error at: https://github.com/getsentry/spotlight/issues/new/choose');

packages/overlay/src/integrations/sentry/sentry-integration.ts

@@ -1,6 +1,6 @@
 import type { Client, Envelope, Event, Integration } from '@sentry/types';
-import { serializeEnvelope } from '@sentry/utils';
-import { trigger } from '../../lib/eventTarget';
+import { serializeEnvelope } from '@sentry/core';
+import { trigger, on } from '../../lib/eventTarget';
 import { log } from '../../lib/logger';
 import sentryDataCache from './data/sentryDataCache';
 
@@ -14,20 +14,24 @@ import sentryDataCache from './data/sentryDataCache';
  *
  * @returns Sentry integration for Spotlight.
  */
-export const spotlightIntegration = () => {
+export const spotlightIntegration = (sidecarConnected = false) => {
+  let enabled = !sidecarConnected;
+  on('sidecar:connectivity', evt => {
+    enabled = !(evt as CustomEvent).detail.connected;
+  });
+
   return {
     name: 'SpotlightBrowserDirect',
     setupOnce: () => {
       /* Empty function to ensure compatibility w/ JS SDK v7 >= 7.99.0 */
     },
-    setup: () => {
-      log('Setting up the *direct* Sentry SDK integration for Spotlight');
-    },
+    setup: () => {},
     processEvent: (event: Event) => {
       // We don't want to send interaction transactions/root spans created from
       // clicks within Spotlight to Sentry. Neither do we want them to be sent to
       // spotlight.
       if (isSpotlightInteraction(event)) {
+        log('Dropping transaction created from Spotlight interaction');
         return null;
       }
 
@@ -39,9 +43,11 @@ export const spotlightIntegration = () => {
       return event;
     },
     afterAllSetup: (client: Client) =>
-      client.on('beforeEnvelope', (envelope: Envelope) =>
-        trigger('event', { contentType: 'application/x-sentry-envelope', data: serializeEnvelope(envelope) }),
-      ),
+      client.on('beforeEnvelope', (envelope: Envelope) => {
+        if (enabled) {
+          trigger('event', { contentType: 'application/x-sentry-envelope', data: serializeEnvelope(envelope) });
+        }
+      }),
   } satisfies Integration;
 };
 

packages/overlay/src/sidecar.ts

@@ -1,11 +1,10 @@
-import type React from 'react';
 import { log } from './lib/logger';
 
 export function connectToSidecar(
   sidecarUrl: string,
   // Content Type to listener
   contentTypeListeners: Record<string, (event: { data: string | Uint8Array }) => void>,
-  setOnline: React.Dispatch<React.SetStateAction<boolean>>,
+  setOnline: (online: boolean) => void,
 ): () => void {
   log('Connecting to sidecar at', sidecarUrl);
   const sidecarStreamUrl = new URL('/stream', sidecarUrl);
@@ -18,12 +17,12 @@ export function connectToSidecar(
 
   source.addEventListener('open', () => {
     setOnline(true);
-    log('Open');
+    log('Sidecar connected.');
   });
 
   source.addEventListener('error', err => {
     setOnline(false);
-    console.error('EventSource failed:', err);
+    console.error('Sidecar connection error:', err);
   });
 
   return () => {