fix: Always try to use sidecar along with direct SDK transport (#672)

Fixes #669

Author: BYK

.changeset/cyan-gifts-hunt.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+fix: Always try to use sidecar along with direct SDK transport

.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/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) => {
@@ -197,7 +202,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 +216,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;
@@ -243,12 +248,12 @@ function addSpotlightIntegrationToSentry(options: SentryIntegrationOptions) {
     const existingIntegration = Object.keys(sentryClient._integrations).find(i => /spotlight/i.test(i));
     if (existingIntegration) {
       log(
-        `Skipping direct integration as there's already a Spotlight integration enabled in Sentry SDK: ${existingIntegration}`,
+        `Skipping adding integration as there's already a Spotlight integration enabled in Sentry SDK: ${existingIntegration}`,
       );
       return;
     }
-    const integration = spotlightIntegration();
-    sentryClient.addIntegration(integration);
+    sentryClient.addIntegration(spotlightIntegration());
+    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,5 +1,5 @@
 import type { Client, Envelope, Event, Integration } from '@sentry/types';
-import { serializeEnvelope } from '@sentry/utils';
+import { serializeEnvelope } from '@sentry/core';
 import { trigger } from '../../lib/eventTarget';
 import { log } from '../../lib/logger';
 import sentryDataCache from './data/sentryDataCache';
@@ -20,14 +20,13 @@ export const spotlightIntegration = () => {
     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;
       }
 

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 () => {