From 0ec320d1259c85e3505d6a80f88dc41d0f567d9e Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 21 Aug 2024 11:20:51 +0200 Subject: [PATCH 1/4] feat(overlay): Allow to skip sidecar --- .changeset/bright-experts-learn.md | 5 ++++ packages/overlay/src/App.tsx | 17 ++++++++++---- packages/overlay/src/components/Debugger.tsx | 24 ++++++++++++-------- packages/overlay/src/index.tsx | 2 ++ packages/overlay/src/types.ts | 8 +++++++ 5 files changed, 42 insertions(+), 14 deletions(-) create mode 100644 .changeset/bright-experts-learn.md diff --git a/.changeset/bright-experts-learn.md b/.changeset/bright-experts-learn.md new file mode 100644 index 00000000..297e8e84 --- /dev/null +++ b/.changeset/bright-experts-learn.md @@ -0,0 +1,5 @@ +--- +'@spotlightjs/overlay': minor +--- + +feat(overlay): Allow to skipSidecar to avoid connecting to sidecar diff --git a/packages/overlay/src/App.tsx b/packages/overlay/src/App.tsx index a7d11ce7..44d2f7b0 100644 --- a/packages/overlay/src/App.tsx +++ b/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>({}); 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} /> diff --git a/packages/overlay/src/components/Debugger.tsx b/packages/overlay/src/components/Debugger.tsx index 5d4e0d1e..6241b458 100644 --- a/packages/overlay/src/components/Debugger.tsx +++ b/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 ( @@ -80,17 +82,19 @@ export default function Debugger({ -
+ {!skipSidecar && (
- {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'} -
+ className={classNames('ml-2 flex items-center gap-x-2 pl-2 text-xs', isOnline ? '' : 'text-red-400')} + > +
+ {isOnline ? 'Connected to Sidecar' : 'Not connected to Sidecar'} +
+ )}
{showClearEventsButton && ( diff --git a/packages/overlay/src/index.tsx b/packages/overlay/src/index.tsx index 5ad35a86..6e775b07 100644 --- a/packages/overlay/src/index.tsx +++ b/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} /> , diff --git a/packages/overlay/src/types.ts b/packages/overlay/src/types.ts index eff27182..bb84336c 100644 --- a/packages/overlay/src/types.ts +++ b/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 = { From 28818193ba34093d456bd855c483eb61e364d14d Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 21 Aug 2024 11:40:56 +0200 Subject: [PATCH 2/4] skip contextLinesProvider without sidecar --- .changeset/mean-rivers-brush.md | 5 +++ .../sentry/data/sentryDataCache.ts | 36 +++++++++++-------- 2 files changed, 26 insertions(+), 15 deletions(-) create mode 100644 .changeset/mean-rivers-brush.md diff --git a/.changeset/mean-rivers-brush.md b/.changeset/mean-rivers-brush.md new file mode 100644 index 00000000..7a150b64 --- /dev/null +++ b/.changeset/mean-rivers-brush.md @@ -0,0 +1,5 @@ +--- +'@spotlightjs/overlay': patch +--- + +fix(overlay): Skip contextLines lookup if sidecar is empty diff --git a/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts b/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts index 11ccf5ad..f2b0b229 100644 --- a/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts +++ b/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts @@ -34,7 +34,7 @@ class SentryDataCache { protected subscribers: Map = 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 & { @@ -45,6 +45,10 @@ class SentryDataCache { } setSidecarUrl(url: string) { + if (!url) { + this.contextLinesProvider = null; + } + const { origin } = new URL(url); this.contextLinesProvider = origin + CONTEXT_LINES_ENDPOINT; } @@ -295,21 +299,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. } }), ); From d334a2b963170f72653a48c00938b5a86e38a5b1 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 21 Aug 2024 11:53:34 +0200 Subject: [PATCH 3/4] fix it --- packages/overlay/src/integrations/sentry/data/sentryDataCache.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts b/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts index f2b0b229..28b75d34 100644 --- a/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts +++ b/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts @@ -47,6 +47,7 @@ class SentryDataCache { setSidecarUrl(url: string) { if (!url) { this.contextLinesProvider = null; + return; } const { origin } = new URL(url); From 5e51d6cd99a0af1e4f6000b806edf7da4acfe2e8 Mon Sep 17 00:00:00 2001 From: Francesco Novy Date: Wed, 21 Aug 2024 12:57:24 +0200 Subject: [PATCH 4/4] really fix it now? --- .../overlay/src/integrations/sentry/data/sentryDataCache.ts | 2 +- packages/overlay/src/integrations/sentry/index.ts | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts b/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts index 28b75d34..6b2e343d 100644 --- a/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts +++ b/packages/overlay/src/integrations/sentry/data/sentryDataCache.ts @@ -44,7 +44,7 @@ class SentryDataCache { initial.forEach(e => this.pushEvent(e)); } - setSidecarUrl(url: string) { + setSidecarUrl(url: string | null) { if (!url) { this.contextLinesProvider = null; return; diff --git a/packages/overlay/src/integrations/sentry/index.ts b/packages/overlay/src/integrations/sentry/index.ts index 69413e2c..60ea31b8 100644 --- a/packages/overlay/src/integrations/sentry/index.ts +++ b/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);