feat: improve server/client logging via flag, fix bugs and duplicate events

Author: AlemTuzlak

examples/react/start/src/components/client-plugin.tsx

@@ -1,19 +1,26 @@
 import { queryPlugin } from '@/plugin'
 import { useEffect, useState } from 'react'
-queryPlugin.on('query-devtools:test', (event) => {
-  console.log('Received message in here:', event)
-})
+
 export default function ClientPlugin() {
-  const [events] = useState<
+  const [events, setEvents] = useState<
     Array<{ type: string; payload: { title: string; description: string } }>
   >([])
+  useEffect(() => {
+    const cleanup = queryPlugin.on('query-devtools:test', (event) => {
+      console.log('Received message in here:', event)
+      setEvents((prev) => [...prev, event])
+    })
 
+    return cleanup
+  }, [])
   return (
     <div>
       <h1>Client Plugin Initialized</h1>
       <p>Devtools Client is connected.</p>
       <button
-        onClick={() =>
+        className="bg-blue-500 text-white px-4 py-2 rounded"
+        onClick={() => {
+          console.log('Button clicked, emitting event')
           queryPlugin.emit({
             type: 'query-devtools:test',
             payload: {
@@ -22,9 +29,9 @@ export default function ClientPlugin() {
                 'This is a custom event triggered by the client plugin.',
             },
           })
-        }
+        }}
       >
-        Click me bro
+        Click me
       </button>
       {events.map((event, i) => (
         <div key={i}>

examples/react/start/src/components/devtools.tsx

@@ -12,7 +12,7 @@ export default function DevtoolsExample() {
     <>
       <QueryClientProvider client={queryClient}>
         <TanstackDevtools
-          hasDevtoolsServer={true}
+          hasDevtoolsServer={false}
           plugins={[
             {
               name: 'Tanstack Query',

examples/react/start/vite.config.ts

@@ -3,7 +3,7 @@ import { tanstackStart } from '@tanstack/react-start/plugin/vite'
 import viteReact from '@vitejs/plugin-react'
 import viteTsConfigPaths from 'vite-tsconfig-paths'
 import tailwindcss from '@tailwindcss/vite'
-import { devtoolsServer } from './src/server-setup'
+//import { devtoolsServer } from './src/server-setup'
 
 const config = defineConfig({
   plugins: [

packages/devtools/src/core.tsx

@@ -8,6 +8,24 @@ import type {
   TanStackDevtoolsPlugin,
 } from './context/devtools-context'
 
+export interface EventBusConfig {
+  /**
+   * Optional flag to indicate if the devtools server event bus is available to connect to.
+   * This is used to determine if the devtools can connect to the server for real-time event streams.
+   */
+  hasServer?: boolean
+
+  /**
+   * Optional flag to enable debug mode for the event bus.
+   */
+  debug?: boolean
+
+  /**
+   * Optional port to connect to the devtools server event bus.
+   * Defaults to 42069.
+   */
+  port?: number
+}
 export interface TanStackDevtoolsInit {
   /**
    * Configuration for the devtools shell. These configuration options are used to set the
@@ -35,11 +53,7 @@ export interface TanStackDevtoolsInit {
    * ```
    */
   plugins?: Array<TanStackDevtoolsPlugin>
-  /**
-   * Optional flag to indicate if the devtools server is available.
-   * This is used to determine if the devtools can connect to the server for real-time event streams.
-   */
-  hasDevtoolsServer?: boolean
+  eventBusConfig?: EventBusConfig
 }
 
 export class TanStackDevtoolsCore {
@@ -51,11 +65,11 @@ export class TanStackDevtoolsCore {
   #dispose?: () => void
   #Component: any
   #eventBus: TanstackDevtoolsClientEventBus | undefined
-  #hasDevtoolsServer = false
+  #eventBusConfig: EventBusConfig | undefined
 
   constructor(init: TanStackDevtoolsInit) {
     this.#plugins = init.plugins || []
-    this.#hasDevtoolsServer = init.hasDevtoolsServer ?? false
+    this.#eventBusConfig = init.eventBusConfig
     this.#config = {
       ...this.#config,
       ...init.config,
@@ -69,10 +83,10 @@ export class TanStackDevtoolsCore {
     const mountTo = el
     const dispose = render(() => {
       this.#Component = lazy(() => import('./devtools'))
-
+      const { hasServer, ...rest } = this.#eventBusConfig || {}
       const Devtools = this.#Component
-      this.#eventBus = new TanstackDevtoolsClientEventBus()
-      this.#eventBus.start(this.#hasDevtoolsServer)
+      this.#eventBus = new TanstackDevtoolsClientEventBus(rest)
+      this.#eventBus.start(hasServer)
       return (
         <DevtoolsProvider plugins={this.#plugins} config={this.#config}>
           <Portal mount={mountTo}>

packages/devtools/src/index.ts

@@ -1,6 +1,6 @@
 export { PLUGIN_CONTAINER_ID, PLUGIN_TITLE_CONTAINER_ID } from './constants'
 export { TanStackDevtoolsCore } from './core'
-export type { TanStackDevtoolsInit } from './core'
+export type { TanStackDevtoolsInit, EventBusConfig } from './core'
 export type {
   TanStackDevtoolsPlugin,
   TanStackDevtoolsConfig,

packages/event-bus-plugin/src/plugin.ts

@@ -32,25 +32,41 @@ export class TanstackDevtoolsEventSubscription<
 > {
   #pluginId: TPluginId
   #eventTarget: () => EventTarget
-
-  constructor({ pluginId }: { pluginId: TPluginId }) {
+  #debug: boolean
+  constructor({
+    pluginId,
+    debug = false,
+  }: {
+    pluginId: TPluginId
+    debug?: boolean
+  }) {
     this.#pluginId = pluginId
     this.#eventTarget = this.getGlobalTarget
+    this.#debug = debug
+    this.debugLog(' Initializing event subscription for plugin', this.#pluginId)
   }
 
+  private debugLog(...args: Array<any>) {
+    if (this.#debug) {
+      console.log(`🌴 [tanstack-devtools:${this.#pluginId}-plugin]`, ...args)
+    }
+  }
   private getGlobalTarget() {
     // CLient event target is the window object
     if (typeof window !== 'undefined') {
+      this.debugLog('Using window as event target')
       return window
     }
     // server one is the global event target
     if (
       typeof globalThis !== 'undefined' &&
       globalThis.__TANSTACK_EVENT_TARGET__
     ) {
+      this.debugLog('Using global event target')
       return globalThis.__TANSTACK_EVENT_TARGET__
     }
 
+    this.debugLog('Using new EventTarget as fallback')
     return new EventTarget()
   }
 
@@ -59,7 +75,7 @@ export class TanstackDevtoolsEventSubscription<
   }
 
   private emitEventToBus(event: TanStackDevtoolsEvent<string, any>) {
-    console.log('🌴 [tanstack-devtools] Emitting event to client bus', event)
+    this.debugLog('Emitting event to client bus', event)
     this.#eventTarget().dispatchEvent(
       new CustomEvent('tanstack-dispatch-event', { detail: event }),
     )
@@ -84,14 +100,11 @@ export class TanstackDevtoolsEventSubscription<
     ) => void,
   ) {
     const handler = (e: Event) => {
-      console.log(
-        '🌴 [tanstack-devtools] Received event from bus',
-        (e as CustomEvent).detail,
-      )
+      this.debugLog('Received event from bus', (e as CustomEvent).detail)
       cb((e as CustomEvent).detail)
     }
     this.#eventTarget().addEventListener(eventName as string, handler)
-    console.log('🌴 [tanstack-devtools] Registered event to bus', eventName)
+    this.debugLog('Registered event to bus', eventName)
     return () => {
       this.#eventTarget().removeEventListener(eventName as string, handler)
     }

packages/event-bus/src/client/client.ts

@@ -9,38 +9,43 @@ export class TanstackDevtoolsClientEventBus {
   #socket: WebSocket | null
   #eventSource: EventSource | null
   #eventTarget: EventTarget
+  #debug: boolean
   #dispatcher = (e: Event) => {
-    const event = (e as CustomEvent).detail as TanStackDevtoolsEvent<
-      string,
-      any
-    >
+    const event = (e as CustomEvent).detail
     this.emitToServer(event)
     this.emitToClients(event)
   }
-  constructor({ port = 42069 } = {}) {
+  constructor({ port = 42069, debug = false } = {}) {
+    this.#debug = debug
     this.#eventSource = null
     this.#port = port
     this.#socket = null
     this.#eventTarget = this.getGlobalTarget()
+    this.debugLog('Initializing client event bus')
   }
 
   private emitToClients(event: TanStackDevtoolsEvent<string>) {
-    console.log('🌴 [tanstack-devtools] Emitting event from client bus', event)
-    this.#eventTarget.dispatchEvent(
-      new CustomEvent(event.type, { detail: event }),
-    )
-    this.#eventTarget.dispatchEvent(
-      new CustomEvent('tanstack-devtools-global', { detail: event }),
-    )
+    this.debugLog('Emitting event from client bus', event)
+    const specificEvent = new CustomEvent(event.type, { detail: event })
+    this.debugLog('Emitting event to specific client listeners', specificEvent)
+    this.#eventTarget.dispatchEvent(specificEvent)
+    const globalEvent = new CustomEvent('tanstack-devtools-global', {
+      detail: event,
+    })
+    this.debugLog('Emitting event to global client listeners', globalEvent)
+    this.#eventTarget.dispatchEvent(globalEvent)
   }
 
   private emitToServer(event: TanStackDevtoolsEvent<string, any>) {
     const json = JSON.stringify(event)
     // try to emit it to the event bus first
     if (this.#socket && this.#socket.readyState === WebSocket.OPEN) {
+      this.debugLog('Emitting event to server via WS', event)
       this.#socket.send(json)
       // try to emit to SSE if WebSocket is not available (this will only happen on the client side)
     } else if (this.#eventSource) {
+      this.debugLog('Emitting event to server via SSE', event)
+
       fetch(`http://localhost:${this.#port}/__devtools/send`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
@@ -49,7 +54,7 @@ export class TanstackDevtoolsClientEventBus {
     }
   }
   start(hasServer?: boolean) {
-    console.log('🌴 [tanstack-devtools] Starting client event bus')
+    this.debugLog('Starting client event bus')
     if (typeof window === 'undefined') {
       return
     }
@@ -63,6 +68,7 @@ export class TanstackDevtoolsClientEventBus {
     )
   }
   stop() {
+    this.debugLog('Stopping client event bus')
     if (typeof window === 'undefined') {
       return
     }
@@ -82,21 +88,36 @@ export class TanstackDevtoolsClientEventBus {
 
     return new EventTarget()
   }
+  private debugLog(...messages: Array<any>) {
+    if (this.#debug) {
+      console.log('🌴 [tanstack-devtools:client-bus]', ...messages)
+    }
+  }
   private connectSSE() {
+    this.debugLog('Connecting to SSE server')
     this.#eventSource = new EventSource(
       `http://localhost:${this.#port}/__devtools/sse`,
     )
-    this.#eventSource.onmessage = (e) => this.handleEventReceived(e.data)
+    this.#eventSource.onmessage = (e) => {
+      this.debugLog('Received message from SSE server', e.data)
+      this.handleEventReceived(e.data)
+    }
   }
 
   private connectWebSocket() {
+    this.debugLog('Connecting to WebSocket server')
+
     this.#socket = new WebSocket(`ws://localhost:${this.#port}/__devtools/ws`)
-    this.#socket.onmessage = (e) => this.handleEventReceived(e.data)
+    this.#socket.onmessage = (e) => {
+      this.debugLog('Received message from server', e.data)
+      this.handleEventReceived(e.data)
+    }
     this.#socket.onclose = () => {
+      this.debugLog('WebSocket connection closed')
       this.#socket = null
     }
     this.#socket.onerror = () => {
-      // Prevent default error logging
+      this.debugLog('WebSocket connection error')
     }
   }