Added a check for spotlight v1.x.x to not load sentry sdk >= v8

.changeset/cold-kings-rush.md

@@ -0,0 +1,6 @@
+---
+'@spotlightjs/spotlight': patch
+'@spotlightjs/overlay': patch
+---
+
+added a check for spotlight v1.x.x to not load sentry sdk >= v8

.changeset/ninety-days-tie.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+updated the logic to retrieve the version of browser sentry sdk.

packages/overlay/src/components/Overview.tsx

@@ -51,7 +51,11 @@ export default function Overview({
       <Tabs tabs={tabs} setOpen={setOpen} />
       <div className="flex-1 overflow-auto overflow-x-hidden">
         <Routes>
-          <Route path="/not-found" element={<p>Not Found - How'd you manage to get here?</p>} key={'not-found'}></Route>
+          <Route
+            path="/not-found"
+            element={<div className="text-primary-300 p-6">Not Found - How'd you manage to get here?</div>}
+            key={'not-found'}
+          ></Route>
           {tabs.map(tab => {
             const TabContent = tab.content && tab.content;
 

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

@@ -190,3 +190,5 @@ export const PERFORMANCE_SCORE_PROFILES = {
     // }
   ],
 };
+
+export const SDK_VERSION_SUPPORT_REGEX = /^[0-7]\.\d+\.\d+$/;

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

@@ -1,14 +1,17 @@
 import type { Envelope } from '@sentry/types';
 import { getSpotlightEventTarget } from '../../lib/eventTarget';
-import { log } from '../../lib/logger';
+import { log, warn } from '../../lib/logger';
 import type { Integration, RawEventContext } from '../integration';
 import sentryDataCache from './data/sentryDataCache';
 import { Spotlight } from './sentry-integration';
 import DeveloperInfo from './tabs/DeveloperInfo';
 import ErrorsTab from './tabs/ErrorsTab';
+import InfoTab from './tabs/InfoTab';
 import PerformanceTab from './tabs/PerformanceTab';
 import SdksTab from './tabs/SdksTab';
 import TracesTab from './tabs/TracesTab';
+import { LegacyCarrier, WindowWithSentry } from './types';
+import { checkBrowserSDKVersion } from './utils/sdkValidation';
 
 const HEADER = 'application/x-sentry-envelope';
 
@@ -17,7 +20,7 @@ type SentryIntegrationOptions = {
   injectIntoSDK?: boolean;
 };
 
-export default function sentryIntegration(options?: SentryIntegrationOptions) {
+function _sentryIntegration(options?: SentryIntegrationOptions) {
   return {
     name: 'sentry',
     forwardedContentType: [HEADER],
@@ -96,19 +99,36 @@ export default function sentryIntegration(options?: SentryIntegrationOptions) {
   } satisfies Integration<Envelope>;
 }
 
-type WindowWithSentry = Window & {
-  __SENTRY__?: {
-    hub: {
-      getClient: () =>
-        | {
-            setupIntegrations: (force: boolean) => void;
-            addIntegration(integration: Integration): void;
-            on: (event: string, callback: (envelope: Envelope) => void) => void;
-          }
-        | undefined;
-    };
-  };
-};
+function _fallbackSentryIntegration() {
+  return {
+    name: 'sentry',
+    forwardedContentType: [],
+    setup: () => {},
+    processEvent: () => undefined,
+    tabs: () => {
+      return [
+        {
+          id: 'info',
+          title: 'Info',
+          content: () =>
+            InfoTab({
+              info: 'This version of Spotlight supports Sentry browser SDK version less than 8.x.x. Check out Spotlight v2.x.x',
+            }),
+        },
+      ];
+    },
+    reset: () => {},
+  } satisfies Integration<Envelope>;
+}
+
+export default function sentryIntegration(options?: SentryIntegrationOptions) {
+  if (checkBrowserSDKVersion()) {
+    return _sentryIntegration(options);
+  } else {
+    warn(`This version of Spotlight only supports Sentry browser SDK versions below 8.x.x. Check out Spotlight v2.x.x`);
+    return _fallbackSentryIntegration();
+  }
+}
 
 export function processEnvelope(rawEvent: RawEventContext) {
   const { data } = rawEvent;
@@ -150,12 +170,14 @@ function addSpotlightIntegrationToSentry(options?: SentryIntegrationOptions) {
   if (options?.injectIntoSDK === false) return;
   // A very hacky way to hook into Sentry's SDK
   // but we love hacks
-  const sentryHub = (window as WindowWithSentry).__SENTRY__?.hub;
-  const sentryClient = sentryHub?.getClient();
-  if (sentryClient) {
-    const spotlightIntegration = new Spotlight({
-      sidecarUrl: options?.sidecarUrl,
-    });
-    sentryClient.addIntegration(spotlightIntegration);
+  const sentryHub = ((window as WindowWithSentry).__SENTRY__ as LegacyCarrier)?.hub;
+  if (sentryHub) {
+    const sentryClient = sentryHub?.getClient();
+    if (sentryClient) {
+      const spotlightIntegration = new Spotlight({
+        sidecarUrl: options?.sidecarUrl,
+      });
+      sentryClient.addIntegration(spotlightIntegration);
+    }
   }
 }

packages/overlay/src/integrations/sentry/tabs/InfoTab.tsx

@@ -0,0 +1,3 @@
+export default function InfoTab({ info }: { info?: string }) {
+  return <div className="text-primary-300 p-6">{info}</div>;
+}

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

@@ -1,4 +1,5 @@
-import { Measurements } from '@sentry/types';
+import { Client, Envelope, Measurements } from '@sentry/types';
+import { Integration } from '../integration';
 
 export type FrameVars = {
   [key: string]: string;
@@ -212,3 +213,37 @@ export type MetricWeightsProps = {
   fid: number;
   ttfb: number;
 };
+
+type V8Carrier = {
+  stack: {
+    getScope?: () => {
+      getClient?: () => Client | undefined;
+    };
+  };
+};
+
+export type LegacyCarrier = {
+  /** pre-v8 way of accessing client (v7 and earlier) */
+  hub: {
+    getClient: () =>
+      | {
+          setupIntegrations: (force: boolean) => void;
+          addIntegration(integration: Integration): void;
+          on: (event: string, callback: (envelope: Envelope) => void) => void;
+          getOptions: () => {
+            _metadata: {
+              sdk: {
+                version: string;
+              };
+            };
+          };
+        }
+      | undefined;
+  };
+};
+
+export type VersionedCarrier = { version: string } & Record<Exclude<string, 'version'>, V8Carrier>;
+
+export type WindowWithSentry = Window & {
+  __SENTRY__?: LegacyCarrier | VersionedCarrier;
+};

packages/overlay/src/integrations/sentry/utils/sdkValidation.ts

@@ -0,0 +1,15 @@
+import { SDK_VERSION_SUPPORT_REGEX } from '../constants';
+import { LegacyCarrier, VersionedCarrier, WindowWithSentry } from '../types';
+
+export function checkBrowserSDKVersion() {
+  const sentrySDKVersionPreV8 = ((window as WindowWithSentry).__SENTRY__ as LegacyCarrier)?.hub
+    ?.getClient()
+    ?.getOptions()?._metadata?.sdk?.version;
+
+  const sentrySDKVersionPostV8 = ((window as WindowWithSentry).__SENTRY__ as VersionedCarrier)?.version;
+
+  // if browser SDK verion not found, return true to load the events from server side.
+  return sentrySDKVersionPreV8 || sentrySDKVersionPostV8
+    ? new RegExp(SDK_VERSION_SUPPORT_REGEX).test(sentrySDKVersionPreV8 || sentrySDKVersionPostV8)
+    : true;
+}

packages/overlay/src/lib/logger.ts

@@ -13,3 +13,21 @@ export function log(...args: unknown[]) {
     console.log('🔎 [Spotlight]', ...args);
   }
 }
+
+export function warn(...args: unknown[]) {
+  if (loggerActive) {
+    console.warn('🔎 [Spotlight]', ...args);
+  }
+}
+
+export function info(...args: unknown[]) {
+  if (loggerActive) {
+    console.info('🔎 [Spotlight]', ...args);
+  }
+}
+
+export function error(...args: unknown[]) {
+  if (loggerActive) {
+    console.error('🔎 [Spotlight]', ...args);
+  }
+}

packages/website/src/components/InstallCommand.mdx

@@ -7,17 +7,17 @@ import { Tabs, TabItem } from '@astrojs/starlight/components';
 <Tabs>
   <TabItem label="npm">
   ```sh 
-  npm add @spotlightjs/spotlight
+  npm i @spotlightjs/spotlight --save-dev
   ```
   </TabItem>
   <TabItem label="pnpm">
   ```sh 
-  pnpm add @spotlightjs/spotlight
+  pnpm add -D @spotlightjs/spotlight
   ```
   </TabItem>
   <TabItem label="yarn">
   ```sh 
-  yarn add @spotlightjs/spotlight
+  yarn add -D @spotlightjs/spotlight
   ```
   </TabItem>
 </Tabs>