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