From 9f9370f71c3d9f84fecc9fa3b890f9ccc872a766 Mon Sep 17 00:00:00 2001 From: Daniel Griesser Date: Thu, 23 Nov 2023 12:15:27 +0100 Subject: [PATCH] Add debug option to Spotlight --- .changeset/perfect-carrots-flash.md | 6 ++++++ packages/astro/src/index.ts | 3 ++- packages/astro/src/snippets.ts | 1 + packages/core/src/App.tsx | 11 ++++++----- packages/core/src/index.tsx | 8 +++++++- .../sentry/components/PlatformIcon.tsx | 1 - .../integrations/sentry/data/sentryDataCache.ts | 1 - packages/core/src/integrations/sentry/index.ts | 5 ----- .../core/src/integrations/sentry/utils/traces.ts | 5 +++-- packages/core/src/lib/logger.ts | 15 +++++++++++++++ packages/core/src/sidecar.ts | 13 +++++++------ packages/website/astro.config.mjs | 4 +++- .../src/content/docs/reference/configuration.md | 12 ++++++++++++ 13 files changed, 62 insertions(+), 23 deletions(-) create mode 100644 .changeset/perfect-carrots-flash.md create mode 100644 packages/core/src/lib/logger.ts diff --git a/.changeset/perfect-carrots-flash.md b/.changeset/perfect-carrots-flash.md new file mode 100644 index 00000000..c19a9c1e --- /dev/null +++ b/.changeset/perfect-carrots-flash.md @@ -0,0 +1,6 @@ +--- +'@spotlightjs/astro': patch +'@spotlightjs/core': patch +--- + +Add debug flag to Spotlight diff --git a/packages/astro/src/index.ts b/packages/astro/src/index.ts index 9c38fa69..82a906a5 100644 --- a/packages/astro/src/index.ts +++ b/packages/astro/src/index.ts @@ -11,6 +11,7 @@ const PKG_NAME = '@spotlightjs/astro'; export type SpotlightOptions = | { __debugOptions?: ClientInitOptions; + debug: boolean; } | undefined; @@ -35,7 +36,7 @@ const createPlugin = (options?: SpotlightOptions): AstroIntegration => { ...(config.vite.plugins || []), ]; - injectScript('page', buildClientInitSnippet({ importPath: PKG_NAME, showTriggerButton: false })); + injectScript('page', buildClientInitSnippet({ importPath: PKG_NAME, showTriggerButton: false, ...options })); injectScript('page-ssr', SPOTLIGHT_SERVER_SNIPPET); const importPath = path.dirname(url.fileURLToPath(import.meta.url)); diff --git a/packages/astro/src/snippets.ts b/packages/astro/src/snippets.ts index 3120c687..d0aa9c41 100644 --- a/packages/astro/src/snippets.ts +++ b/packages/astro/src/snippets.ts @@ -21,6 +21,7 @@ Spotlight.init({ ], showTriggerButton: ${options.showTriggerButton === false ? 'false' : 'true'}, injectImmediately: ${options.injectImmediately === true ? 'true' : 'false'}, + debug: ${options.debug === true ? 'true' : 'false'}, }); `; }; diff --git a/packages/core/src/App.tsx b/packages/core/src/App.tsx index 036cc473..a0b70fb5 100644 --- a/packages/core/src/App.tsx +++ b/packages/core/src/App.tsx @@ -3,6 +3,7 @@ import Debugger from './components/Debugger'; import Trigger, { type Anchor } from './components/Trigger'; import type { Integration, IntegrationData } from './integrations/integration'; import { getSpotlightEventTarget } from './lib/eventTarget'; +import { log } from './lib/logger'; import { connectToSidecar } from './sidecar'; import { TriggerButtonCount } from './types'; @@ -23,7 +24,7 @@ export default function App({ sidecar, anchor, }: AppProps) { - console.log('[Spotlight] App rerender'); + log('App rerender'); const [integrationData, setIntegrationData] = useState>({}); const [isOnline, setOnline] = useState(false); @@ -52,7 +53,7 @@ export default function App({ ); return () => { - console.log('[Spotlight] useeffect cleanup'); + log('useEffect cleanup'); cleanupListeners(); }; }, [integrations, sidecar]); @@ -61,12 +62,12 @@ export default function App({ useEffect(() => { const onOpen = () => { - console.log('[Spotlight] Open'); + log('Open'); setOpen(true); }; const onClose = () => { - console.log('[Spotlight] Close'); + log('Close'); setOpen(false); }; @@ -88,7 +89,7 @@ export default function App({ } }, [isOpen]); - console.log('[Spotlight] Integrations', integrationData); + log('Integrations', integrationData); return ( <> diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index 4e559191..463e301e 100644 --- a/packages/core/src/index.tsx +++ b/packages/core/src/index.tsx @@ -9,6 +9,7 @@ import type { Integration } from './integrations/integration.ts'; import { initIntegrations } from './integrations/integration.ts'; import { default as sentry } from './integrations/sentry/index.ts'; import { getSpotlightEventTarget } from './lib/eventTarget.ts'; +import { activateLogger, log } from './lib/logger.ts'; import { WindowWithSpotlight } from './types.ts'; export { default as console } from './integrations/console/index.ts'; @@ -52,6 +53,7 @@ export async function init({ injectImmediately = false, sidecar = DEFAULT_SIDECAR, anchor = DEFAULT_ANCHOR, + debug = false, }: { integrations?: Integration[]; fullScreen?: boolean; @@ -61,6 +63,7 @@ export async function init({ injectImmediately?: boolean; sidecar?: string; anchor?: Anchor; + debug?: boolean; } = {}) { if (typeof document === 'undefined') return; @@ -71,6 +74,9 @@ export async function init({ return; } + if (debug) { + activateLogger(); + } const initializedIntegrations = await initIntegrations(integrations); // build shadow dom container to contain styles @@ -107,7 +113,7 @@ export async function init({ ); function injectSpotlight() { - console.log('[spotlight] Injecting into application'); + log('Injecting into application'); document.body.append(docRoot); } diff --git a/packages/core/src/integrations/sentry/components/PlatformIcon.tsx b/packages/core/src/integrations/sentry/components/PlatformIcon.tsx index 84fc5fd9..321e7ef7 100644 --- a/packages/core/src/integrations/sentry/components/PlatformIcon.tsx +++ b/packages/core/src/integrations/sentry/components/PlatformIcon.tsx @@ -21,7 +21,6 @@ export default function PlatformIcon({ platform?: Platform; event?: SentryEvent; }) { - console.log('SDK:', platform, event?.platform); const name = platform || event?.platform || 'unknown'; switch (name) { case 'ruby': diff --git a/packages/core/src/integrations/sentry/data/sentryDataCache.ts b/packages/core/src/integrations/sentry/data/sentryDataCache.ts index d01353ba..a2dda193 100644 --- a/packages/core/src/integrations/sentry/data/sentryDataCache.ts +++ b/packages/core/src/integrations/sentry/data/sentryDataCache.ts @@ -81,7 +81,6 @@ class SentryDataCache { items.forEach(([itemHeader, itemData]) => { if (itemHeader.type === 'event' || itemHeader.type === 'transaction') { - console.log(sdkToPlatform(sdk.name)); (itemData as SentryEvent).platform = sdkToPlatform(sdk.name); this.pushEvent(itemData as SentryEvent); } diff --git a/packages/core/src/integrations/sentry/index.ts b/packages/core/src/integrations/sentry/index.ts index c115fba9..edc930bf 100644 --- a/packages/core/src/integrations/sentry/index.ts +++ b/packages/core/src/integrations/sentry/index.ts @@ -11,8 +11,6 @@ import TracesTab from './tabs/TracesTab'; const HEADER = 'application/x-sentry-envelope'; export default function sentryIntegration() { - console.log('spotlight', sentryDataCache.getEvents()); - return { name: 'sentry', forwardedContentType: [HEADER], @@ -60,12 +58,9 @@ type WindowWithSentry = Window & { }; export function processEnvelope({ data }: RawEventContext) { - console.log('[Spotlight] Received new envelope'); const [rawHeader, ...rawEntries] = data.split(/\n/gm); const header = JSON.parse(rawHeader) as Envelope[0]; - console.log(`[Spotlight] Received new envelope from SDK ${header.sdk?.name || '(unknown)'}`); - const items: Envelope[1][] = []; for (let i = 0; i < rawEntries.length; i += 2) { // guard both rawEntries[i] and rawEntries[i + 1] are defined and not empty diff --git a/packages/core/src/integrations/sentry/utils/traces.ts b/packages/core/src/integrations/sentry/utils/traces.ts index 829ff216..3a3c56d0 100644 --- a/packages/core/src/integrations/sentry/utils/traces.ts +++ b/packages/core/src/integrations/sentry/utils/traces.ts @@ -1,3 +1,4 @@ +import { log } from '../../../lib/logger'; import { Span } from '../types'; // mutates spans in place and adds children, as well as returns the top level tree @@ -19,9 +20,9 @@ export function groupSpans(spans: Span[]) { } else if (span.parent_span_id) { const parentParent = sortedSpans.find(s => !s.parent_span_id); if (!parentParent) { - console.log(`Root span (${span.parent_span_id}) for span (${span.span_id}). Creating orphan.`); + log(`Root span (${span.parent_span_id}) for span (${span.span_id}). Creating orphan.`); } else { - console.log(`Creating orphan for parent (${span.parent_span_id}) for span (${span.span_id})`); + log(`Creating orphan for parent (${span.parent_span_id}) for span (${span.span_id})`); } parent = { trace_id: span.trace_id, diff --git a/packages/core/src/lib/logger.ts b/packages/core/src/lib/logger.ts new file mode 100644 index 00000000..ae54419c --- /dev/null +++ b/packages/core/src/lib/logger.ts @@ -0,0 +1,15 @@ +let loggerActive = false; + +export function activateLogger() { + loggerActive = true; +} + +export function deactivateLogger() { + loggerActive = false; +} + +export function log(...args: unknown[]) { + if (loggerActive) { + console.log('🔎 [Spotlight]', ...args); + } +} diff --git a/packages/core/src/sidecar.ts b/packages/core/src/sidecar.ts index fb51022d..94f0e45a 100644 --- a/packages/core/src/sidecar.ts +++ b/packages/core/src/sidecar.ts @@ -1,5 +1,6 @@ import React from 'react'; import { Integration, IntegrationData } from './integrations/integration'; +import { log } from './lib/logger'; import { TriggerButtonCount } from './types'; export function connectToSidecar( @@ -9,14 +10,14 @@ export function connectToSidecar( setOnline: React.Dispatch>, setTriggerButtonCount: React.Dispatch>, ): () => void { - console.log('[Spotlight] Connecting to sidecar at', sidecar); + log('Connecting to sidecar at', sidecar); const source = new EventSource(sidecar); const contentTypeListeners: [contentType: string, listener: (event: MessageEvent) => void][] = []; for (const [contentType, integrations] of contentTypeToIntegrations.entries()) { const listener = (event: MessageEvent): void => { - console.log(`[spotlight] Received new ${contentType} event`); + log(`Received new ${contentType} event`); integrations.forEach(integration => { if (integration.processEvent) { const processedEvent = integration.processEvent({ @@ -43,7 +44,7 @@ export function connectToSidecar( }); }; - console.log('[spotlight] adding listener for', contentType, 'sum', contentTypeListeners.length); + log('Adding listener for', contentType, 'sum', contentTypeListeners.length); // `contentType` could for example be "application/x-sentry-envelope" contentTypeListeners.push([contentType, listener]); @@ -52,7 +53,7 @@ export function connectToSidecar( source.addEventListener('open', () => { setOnline(true); - console.log('[Spotlight] open'); + log('Open'); }); source.addEventListener('error', err => { @@ -61,10 +62,10 @@ export function connectToSidecar( }); return () => { - console.log(`[spotlight] removing ${contentTypeListeners.length} listeners`); + log(`Removing ${contentTypeListeners.length} listeners`); contentTypeListeners.forEach(typeAndListener => { source.removeEventListener(typeAndListener[0], typeAndListener[1]); - console.log('[spotlight] removed listner for type', typeAndListener[0]); + log('Removed listner for type', typeAndListener[0]); }); }; } diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs index 964d17bc..6f212fa4 100644 --- a/packages/website/astro.config.mjs +++ b/packages/website/astro.config.mjs @@ -29,7 +29,9 @@ export default defineConfig({ sentry({ debug: true, }), - spotlight(), + spotlight({ + debug: true, + }), starlight({ title: 'Spotlight', logo: { diff --git a/packages/website/src/content/docs/reference/configuration.md b/packages/website/src/content/docs/reference/configuration.md index 02503e2c..72876f26 100644 --- a/packages/website/src/content/docs/reference/configuration.md +++ b/packages/website/src/content/docs/reference/configuration.md @@ -32,6 +32,18 @@ init({ type SpotlightIntegration = {}; ``` +### `debug` + +**type:** boolean **default:** false + +Enables some debug output in console for debugging. + +```ts +init({ + debug: true, +}); +``` + ### `sidecar` **type:** string