Add debug option to Spotlight

getsentry · Nov 23, 2023 · 9f9370f · 9f9370f
1 parent df5160a
commit 9f9370f
Show file tree

Hide file tree

Showing 13 changed files with 62 additions and 23 deletions.
diff --git a/.changeset/perfect-carrots-flash.md 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
@@ -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
@@ -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
@@ -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<IntegrationData<unknown>>({});
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<React.SetStateAction<boolean>>,
   setTriggerButtonCount: React.Dispatch<React.SetStateAction<TriggerButtonCount>>,
 ): () => 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
@@ -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
@@ -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