ref: Overhaul console integration

.changeset/proud-days-relate.md

@@ -0,0 +1,5 @@
+---
+'@spotlightjs/overlay': patch
+---
+
+Overhaul console integration for more performance and stability

demos/sveltekit/vite.config.ts

@@ -4,7 +4,11 @@ import { defineConfig } from 'vitest/config';
 import spotlight from '@spotlightjs/spotlight/vite-plugin';
 
 export default defineConfig({
-	plugins: [sveltekit(), sentrySvelteKit({ autoUploadSourceMaps: false }), spotlight()],
+	plugins: [
+		sveltekit(),
+		sentrySvelteKit({ autoUploadSourceMaps: false }),
+		spotlight({ integrationNames: ['sentry', 'console'], debug: true })
+	],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}']
 	}

packages/overlay/package.json

@@ -27,42 +27,42 @@
       "require": "./dist/sentry-spotlight.umd.cjs"
     }
   },
-  "dependencies": {},
   "devDependencies": {
+    "@fontsource/raleway": "^5.0.8",
     "@sentry/types": "^8.0.0-alpha.7",
     "@sentry/utils": "^8.0.0-alpha.7",
-    "@spotlightjs/tsconfig": "workspace:*",
     "@spotlightjs/sidecar": "workspace:*",
+    "@spotlightjs/tsconfig": "workspace:*",
+    "@types/beautify": "^0.0.3",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
     "@vitest/coverage-v8": "^0.34.6",
+    "autoprefixer": "^10.4.15",
+    "beautify": "^0.0.8",
+    "dayjs": "^1.11.9",
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.5.3",
-    "vite-plugin-dts": "^3.5.2",
-    "vite-plugin-svgr": "^3.2.0",
-    "vitest": "^0.34.6",
-    "@fontsource/raleway": "^5.0.8",
-    "autoprefixer": "^10.4.15",
-    "dayjs": "^1.11.9",
+    "happy-dom": "^15.7.4",
+    "magic-string": "^0.30.5",
     "platformicons": "^5.8.3",
     "postcss": "^8.4.28",
     "react": "^18.2.0",
+    "react-diff-viewer-continued": "^3.4.0",
     "react-dom": "^18.2.0",
+    "react-json-view": "^1.21.3",
     "react-router-dom": "^6.18.0",
     "sql-formatter": "^12.2.4",
     "tailwindcss": "^3.3.3",
+    "typescript": "^5.0.2",
     "usehooks-ts": "^2.9.1",
-    "magic-string": "^0.30.5",
-    "beautify": "^0.0.8",
-    "react-diff-viewer-continued": "^3.4.0",
-    "@types/beautify": "^0.0.3",
-    "react-json-view": "^1.21.3"
+    "vite": "^4.5.3",
+    "vite-plugin-dts": "^3.5.2",
+    "vite-plugin-svgr": "^3.2.0",
+    "vitest": "^0.34.6"
   },
   "volta": {
     "extends": "../../package.json"

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

@@ -1,16 +1,24 @@
+import { trigger } from '../../lib/eventTarget';
+import type { WindowWithSpotlight } from '../../types';
 import type { Integration } from '../integration';
 import ConsoleTab from './console-tab';
-import { ConsoleMessage, Level } from './types';
+import type { ConsoleMessage, Level } from './types';
 
-const HEADER = 'application/x-spotlight-console';
-const PORT = 8969;
+const CONTENT_TYPE = 'application/x-spotlight-console';
 
+/**
+ * This integration is meant to run on the same page where
+ * the Spotlight UI is running. For standalone UI cases such
+ * as the Electron app, we should publish a separate version
+ * that takes in the sidecar URL.
+ * @returns Integration Console integration for Spotlight
+ */
 export default function consoleIntegration() {
   const pageloadId = window.crypto.randomUUID();
 
   return {
     name: 'console',
-    forwardedContentType: [HEADER],
+    forwardedContentType: [CONTENT_TYPE],
     tabs: ({ processedEvents }) => [
       {
         id: 'console',
@@ -37,34 +45,33 @@ export default function consoleIntegration() {
 }
 
 function instrumentConsole(level: Level, pageloadId: string) {
-  const originalConsoleLog = window.console[level];
+  const windowWithSpotlight = window as WindowWithSpotlight;
+  if (!windowWithSpotlight.__spotlight) {
+    windowWithSpotlight.__spotlight = {};
+  }
+  if (!windowWithSpotlight.__spotlight.console) {
+    windowWithSpotlight.__spotlight.console = {};
+  }
+  const originalConsole = windowWithSpotlight.__spotlight.console;
+  if (!originalConsole[level]) {
+    originalConsole[level] = window.console[level];
+  }
+  const originalConsoleMethod = originalConsole[level];
 
   window.console[level] = (...args: unknown[]) => {
     const serializedArgs = argsToString(args);
-    // Super dumb way to avoid endless loops (we're gonna regret that)
-    if (serializedArgs.find(a => a.toLowerCase().includes('spotlight'))) {
-      return originalConsoleLog(...args);
-    }
 
-    try {
-      void fetch(`http://localhost:${PORT}/stream`, {
-        method: 'POST',
-        body: JSON.stringify({
-          type: level,
-          args: serializedArgs,
-          msg: serializedArgs.join(' '),
-          sessionId: pageloadId,
-        } satisfies ConsoleMessage),
-        headers: {
-          'Content-Type': HEADER,
-        },
-        mode: 'cors',
-      }).catch(() => {});
-    } catch {
-      // ignore failed fetch requests
-    }
+    trigger('event', {
+      contentType: CONTENT_TYPE,
+      data: JSON.stringify({
+        type: level,
+        args: serializedArgs,
+        msg: serializedArgs.join(' '),
+        sessionId: pageloadId,
+      } satisfies ConsoleMessage),
+    });
 
-    return originalConsoleLog(...args);
+    return originalConsoleMethod.call(window, ...args);
   };
 }
 

packages/overlay/src/lib/logger.ts

@@ -1,21 +1,43 @@
-let loggerActive = false;
+import type { WindowWithSpotlight } from '../types';
+
+export const SPOTLIGHT_PREFIX = '🔎 [Spotlight]';
+
+const windowWithSpotlight = window as WindowWithSpotlight;
+if (!windowWithSpotlight.__spotlight) {
+  windowWithSpotlight.__spotlight = {};
+}
+if (!windowWithSpotlight.__spotlight.console) {
+  windowWithSpotlight.__spotlight.console = {};
+}
+
+if (!windowWithSpotlight.__spotlight.console.log) {
+  windowWithSpotlight.__spotlight.console.log = window.console.log;
+}
+
+if (!windowWithSpotlight.__spotlight.console.warn) {
+  windowWithSpotlight.__spotlight.console.warn = window.console.warn;
+}
+
+const original = windowWithSpotlight.__spotlight.console;
+
+const noop = (..._args: unknown[]) => {}; // eslint-disable-line @typescript-eslint/no-unused-vars
+let _log = noop;
+let _warn = noop;
 
 export function activateLogger() {
-  loggerActive = true;
+  _log = (...args: unknown[]) => original.log.call(window, SPOTLIGHT_PREFIX, ...args);
+  _warn = (...args: unknown[]) => original.warn.call(window, SPOTLIGHT_PREFIX, ...args);
 }
 
 export function deactivateLogger() {
-  loggerActive = false;
+  _log = noop;
+  _warn = noop;
 }
 
 export function log(...args: unknown[]) {
-  if (loggerActive) {
-    console.log('🔎 [Spotlight]', ...args);
-  }
+  _log(...args);
 }
 
 export function warn(...args: unknown[]) {
-  if (loggerActive) {
-    console.warn('🔎 [Spotlight]', ...args);
-  }
+  _warn(...args);
 }

packages/overlay/src/types.ts

@@ -123,5 +123,6 @@ export type WindowWithSpotlight = Window & {
   __spotlight?: {
     eventTarget?: EventTarget;
     initOptions?: SpotlightOverlayOptions;
+    console?: Record<string, (...args: unknown[]) => void>;
   };
 };

packages/overlay/vite.config.ts

@@ -52,7 +52,9 @@ export default defineConfig({
     },
     rollupOptions: {
       treeshake: 'smallest',
-      output: { footer: 'window.Spotlight && Spotlight.init()' },
+      output: {
+        footer: '(function(S){S && S.init({integrations: [S.sentry(), S.console()]})}(window.Spotlight))',
+      },
     },
     sourcemap: true,
   },

packages/overlay/vitest.config.ts

@@ -7,6 +7,7 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   //   plugins: [tsconfigPaths()],
   test: {
+    environment: 'happy-dom',
     coverage: {
       provider: 'v8',
       reporter: ['json'],