feat(overlay): Allow to skip sidecar

.changeset/bright-experts-learn.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': minor
+---
+
+feat(overlay): Allow to skipSidecar to avoid connecting to sidecar

.changeset/mean-rivers-brush.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+fix(overlay): Skip contextLines lookup if sidecar is empty

packages/overlay/src/App.tsx

@@ -20,6 +20,7 @@ export default function App({
   anchor,
   fullPage = false,
   showClearEventsButton = true,
+  skipSidecar = false,
 }: AppProps) {
   const [integrationData, setIntegrationData] = useState<IntegrationData<unknown>>({});
   const [isOnline, setOnline] = useState(false);
@@ -46,8 +47,11 @@ export default function App({
   }, [integrations]);
 
   useEffect(
-    () => connectToSidecar(sidecarUrl, contentTypeToIntegrations, setIntegrationData, setOnline) as () => undefined,
-    [sidecarUrl, contentTypeToIntegrations],
+    () =>
+      skipSidecar
+        ? () => {}
+        : (connectToSidecar(sidecarUrl, contentTypeToIntegrations, setIntegrationData, setOnline) as () => undefined),
+    [sidecarUrl, contentTypeToIntegrations, skipSidecar],
   );
 
   const spotlightEventTarget = useMemo(() => getSpotlightEventTarget(), []);
@@ -62,6 +66,10 @@ export default function App({
   const eventHandlers = useMemo(() => {
     log('useMemo: initializing event handlers');
     const clearEvents = async () => {
+      if (skipSidecar) {
+        return;
+      }
+
       const { origin } = new URL(sidecarUrl);
       const clearEventsUrl: string = `${origin}/clear`;
 
@@ -72,7 +80,7 @@ export default function App({
         });
       } catch (err) {
         console.error(
-          `Spotlight can't connect to Sidecar is it running? See: https://spotlightjs.com/sidecar/npx/`,
+          `Spotlight can't connect to Sidecar - is it running? See: https://spotlightjs.com/sidecar/npx/`,
           err,
         );
         return;
@@ -110,7 +118,7 @@ export default function App({
     };
 
     return { clearEvents, onOpen, onClose, onNavigate, onToggle };
-  }, [integrations, navigate, sidecarUrl]);
+  }, [integrations, navigate, sidecarUrl, skipSidecar]);
 
   useKeyPress(['ctrlKey', 'F12'], eventHandlers.onToggle);
 
@@ -161,6 +169,7 @@ export default function App({
         integrationData={integrationData}
         setTriggerButtonCount={setTriggerButtonCount}
         fullPage={fullPage}
+        skipSidecar={skipSidecar}
         showClearEventsButton={showClearEventsButton}
       />
     </>

packages/overlay/src/components/Debugger.tsx

@@ -43,6 +43,7 @@ export default function Debugger({
   setTriggerButtonCount: setNotificationCount,
   fullPage,
   showClearEventsButton,
+  skipSidecar,
 }: {
   integrations: Integration[];
   isOpen: boolean;
@@ -52,6 +53,7 @@ export default function Debugger({
   setTriggerButtonCount: (count: NotificationCount) => void;
   fullPage: boolean;
   showClearEventsButton: boolean;
+  skipSidecar: boolean;
 }) {
   return (
     <FullscreenBlur isOpen={isOpen} setOpen={setOpen} fullPage={fullPage}>
@@ -80,17 +82,19 @@ export default function Debugger({
                   <path d="M12 .3a12 12 0 0 0-3.8 23.38c.6.12.83-.26.83-.57L9 21.07c-3.34.72-4.04-1.61-4.04-1.61-.55-1.39-1.34-1.76-1.34-1.76-1.08-.74.09-.73.09-.73 1.2.09 1.83 1.24 1.83 1.24 1.08 1.83 2.81 1.3 3.5 1 .1-.78.42-1.31.76-1.61-2.67-.3-5.47-1.33-5.47-5.93 0-1.31.47-2.38 1.24-3.22-.14-.3-.54-1.52.1-3.18 0 0 1-.32 3.3 1.23a11.5 11.5 0 0 1 6 0c2.28-1.55 3.29-1.23 3.29-1.23.64 1.66.24 2.88.12 3.18a4.65 4.65 0 0 1 1.23 3.22c0 4.61-2.8 5.63-5.48 5.92.42.36.81 1.1.81 2.22l-.01 3.29c0 .31.2.69.82.57A12 12 0 0 0 12 .3Z"></path>
                 </svg>
               </a>
-              <div
-                className={classNames('ml-2 flex items-center gap-x-2 pl-2 text-xs', isOnline ? '' : 'text-red-400')}
-              >
+              {!skipSidecar && (
                 <div
-                  className={classNames(
-                    ' block h-2 w-2 rounded-full',
-                    isOnline ? 'bg-green-400' : 'animate-pulse bg-red-400',
-                  )}
-                />
-                {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'}
-              </div>
+                  className={classNames('ml-2 flex items-center gap-x-2 pl-2 text-xs', isOnline ? '' : 'text-red-400')}
+                >
+                  <div
+                    className={classNames(
+                      ' block h-2 w-2 rounded-full',
+                      isOnline ? 'bg-green-400' : 'animate-pulse bg-red-400',
+                    )}
+                  />
+                  {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'}
+                </div>
+              )}
             </div>
           </h1>
           {showClearEventsButton && (

packages/overlay/src/index.tsx

@@ -94,6 +94,7 @@ export async function init({
   experiments = DEFAULT_EXPERIMENTS,
   fullPage = false,
   showClearEventsButton = true,
+  skipSidecar = false,
 }: SpotlightOverlayOptions = {}) {
   // The undefined document guard is to avoid being initialized in a Worker
   // @see https://github.com/vitejs/vite/discussions/17644#discussioncomment-10026390
@@ -168,6 +169,7 @@ export async function init({
           anchor={anchor}
           fullPage={fullPage}
           showClearEventsButton={showClearEventsButton}
+          skipSidecar={skipSidecar}
         />
       </SpotlightContextProvider>
     </MemoryRouter>,

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

@@ -34,7 +34,7 @@ class SentryDataCache {
 
   protected subscribers: Map<string, Subscription> = new Map();
 
-  protected contextLinesProvider: string = new URL(DEFAULT_SIDECAR_URL).origin + CONTEXT_LINES_ENDPOINT;
+  protected contextLinesProvider: string | null = new URL(DEFAULT_SIDECAR_URL).origin + CONTEXT_LINES_ENDPOINT;
 
   constructor(
     initial: (SentryEvent & {
@@ -44,7 +44,12 @@ class SentryDataCache {
     initial.forEach(e => this.pushEvent(e));
   }
 
-  setSidecarUrl(url: string) {
+  setSidecarUrl(url: string | null) {
+    if (!url) {
+      this.contextLinesProvider = null;
+      return;
+    }
+
     const { origin } = new URL(url);
     this.contextLinesProvider = origin + CONTEXT_LINES_ENDPOINT;
   }
@@ -295,21 +300,23 @@ class SentryDataCache {
         }
         exception.stacktrace.frames.reverse();
 
-        try {
-          const makeFetch = getNativeFetchImplementation();
-          const stackTraceWithContextResponse = await makeFetch(this.contextLinesProvider, {
-            method: 'PUT',
-            body: JSON.stringify(exception.stacktrace),
-          });
-
-          if (!stackTraceWithContextResponse.ok || stackTraceWithContextResponse.status !== 200) {
-            return;
+        if (this.contextLinesProvider) {
+          try {
+            const makeFetch = getNativeFetchImplementation();
+            const stackTraceWithContextResponse = await makeFetch(this.contextLinesProvider, {
+              method: 'PUT',
+              body: JSON.stringify(exception.stacktrace),
+            });
+
+            if (!stackTraceWithContextResponse.ok || stackTraceWithContextResponse.status !== 200) {
+              return;
+            }
+
+            const stackTraceWithContext = await stackTraceWithContextResponse.json();
+            exception.stacktrace = stackTraceWithContext;
+          } catch {
+            // Something went wrong, for now we just ignore it.
           }
-
-          const stackTraceWithContext = await stackTraceWithContextResponse.json();
-          exception.stacktrace = stackTraceWithContext;
-        } catch {
-          // Something went wrong, for now we just ignore it.
         }
       }),
     );

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

@@ -31,6 +31,8 @@ export default function sentryIntegration(options: SentryIntegrationOptions = {}
       }
       if (options.sidecarUrl) {
         sentryDataCache.setSidecarUrl(options.sidecarUrl);
+      } else if ('sidecarUrl' in options) {
+        sentryDataCache.setSidecarUrl(null);
       }
       addSpotlightIntegrationToSentry(options);
 

packages/overlay/src/types.ts

@@ -97,6 +97,14 @@ export type SpotlightOverlayOptions = {
    * @default true
    */
   showClearEventsButton?: boolean;
+
+  /**
+   * If set to `true`, the Spotlight overlay will not connect to the sidecar.
+   * This is useful if you want to add data manually to Spotlight.
+   *
+   * @default false
+   */
+  skipSidecar?: boolean;
 };
 
 export type NotificationCount = {