feat: TraceManagerDebugger

Author: niieani

package.json

@@ -200,5 +200,8 @@
     "cjs",
     "esm",
     "docs"
-  ]
+  ],
+  "dependencies": {
+    "rxjs": "^7.8.2"
+  }
 }

src/main.ts

@@ -29,22 +29,6 @@ export { performanceMark, performanceMeasure } from './performanceMark'
 export { switchFn } from './switchFn'
 export { getCurrentBrowserSupportForNonResponsiveStateDetection } from './utilities'
 
-// visualizer
-// export {
-//   getTimingDisplayModule,
-//   onActionAddedCallback,
-//   useVisualizer,
-// } from './lazyVisualizer'
-
-// operation tracking (v2)
-// export * from './v2/constants'
-// export * from './v2/defaultEventProcessor'
-// export * from './v2/element'
-// export * from './v2/getCommonUrlForTracing'
-// export * from './v2/hooks'
-// export * from './v2/operation'
-// export type * from './v2/types'
-
 // v3
 export * from './v3/constants'
 export * from './v3/convertToRum'
@@ -60,6 +44,8 @@ export * from './v3/Tracer'
 // eslint-disable-next-line import/first, import/newline-after-import
 import * as match from './v3/matchSpan'
 export { match }
+export * from './v3/ConsoleTraceLogger'
+export type * from './v3/debugTypes'
 export type {
   NameMatcher,
   SpanMatch,
@@ -72,6 +58,7 @@ export * from './v3/recordingComputeUtils'
 export type * from './v3/spanAnnotationTypes'
 export type * from './v3/spanTypes'
 export * from './v3/TraceManager'
+export * from './v3/TraceManagerDebugger'
 export type * from './v3/traceRecordingTypes'
 export type * from './v3/types'
 export type * from './v3/typeUtils'

src/stories/mockComponentsv3/App.stories.tsx

@@ -1,6 +1,9 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
+import { createConsoleTraceLogger } from '../../v3/ConsoleTraceLogger'
+import { TraceManagerDebugger } from '../../v3/TraceManagerDebugger'
 import { App } from './App'
+import { traceManager } from './traceManager'
 
 const meta: Meta<typeof App> = {
   component: App,
@@ -13,3 +16,57 @@ type Story = StoryObj<typeof App>
 export const Primary: Story = {
   render: () => <App />,
 }
+
+export const WithDebugger: Story = {
+  render: () => (
+    <div>
+      <div style={{ marginBottom: '20px' }}>
+        <TraceManagerDebugger traceManager={traceManager} />
+      </div>
+      <App />
+    </div>
+  ),
+}
+
+export const WithFloatingDebugger: Story = {
+  render: () => (
+    <div>
+      <App />
+      <TraceManagerDebugger traceManager={traceManager} float={true} />
+    </div>
+  ),
+}
+
+export const WithConsoleTraceLogger: Story = {
+  render: () => {
+    // Initialize the console trace logger when the story renders
+    useEffect(() => {
+      const consoleLogger = createConsoleTraceLogger(traceManager, {
+        verbose: true,
+      })
+
+      // Log a message to explain how to use the console
+      console.info(
+        'ConsoleTraceLogger is active. Open your browser console to see trace events. ' +
+          'Try clicking on tickets to see trace events logged in real-time.',
+      )
+
+      // Example of custom logger function if needed
+      // consoleLogger.setOptions({
+      //   logFn: (message) => {
+      //     console.log(`%c${message}`, 'color: blue');
+      //   }
+      // });
+
+      // Clean up the logger when the component unmounts
+      return () => {
+        consoleLogger.cleanup()
+        console.info(
+          'ConsoleTraceLogger has been cleaned up and unsubscribed from all events.',
+        )
+      }
+    }, [])
+
+    return <App />
+  },
+}

src/stories/mockComponentsv3/App.tsx

@@ -21,40 +21,8 @@ import { ReactComponent as ZendeskIcon } from '@zendeskgarden/svg-icons/src/26/z
 // CYN: NEED UPDATE
 import { mockTickets } from './mockTickets'
 import { TicketList } from './TicketList'
+import { ticketOperationTracer } from './ticketOperationTracer'
 import { TicketView } from './TicketView'
-import { traceManager } from './traceManager'
-
-const ticketOperationTracer = traceManager.createTracer({
-  name: `ticket-activation`,
-  type: 'operation',
-  requiredSpans: [
-    {
-      name: 'TicketView',
-      matchingRelations: ['ticketId'],
-      type: 'component-render',
-      isIdle: true,
-    },
-  ],
-  relationSchemaName: 'ticket',
-  variants: {
-    click: { timeout: 45_000 },
-  },
-  // debounceWindow: 1_000,
-  debounceOnSpans: [
-    {
-      name: 'TicketView',
-      matchingRelations: ['ticketId'],
-    },
-  ],
-  interruptOnSpans: [
-    {
-      name: 'TicketView',
-      matchingRelations: ['ticketId'],
-      type: 'component-unmount',
-    },
-  ],
-  captureInteractive: true,
-})
 
 // simulate an event every 2 seconds
 const simulateEventPeriodically = (ticketId: number | null) => {
@@ -74,27 +42,6 @@ export const App: React.FC = () => {
   )
 
   const handleTicketClick = (id: number) => {
-    // traceManager.startOperation({
-    //   operationName: `ticket-activation`,
-    //   track: [
-    //     {
-    //       match: { type: 'component-unmount', attributes: { ticketId: id } },
-    //       interruptWhenSeen: true,
-    //     },
-    //     {
-    //       match: { attributes: { ticketId: id } },
-    //       debounceEndWhenSeen: { debounceBy: 1_000 },
-    //     },
-    //     {
-    //       match: { attributes: { ticketId: id, visibleState: 'complete' } },
-    //       requiredToEnd: true,
-    //     },
-    //   ],
-    //   onTracked,
-    //   onEnd: onTracked,
-    //   waitUntilInteractive: true,
-    //   interruptSelf: true,
-    // })
     ticketOperationTracer.start({
       relatedTo: { ticketId: id },
       variant: 'click',

src/stories/mockComponentsv3/simulateLongTasks.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 export function triggerLongTasks({
   minTime,
   maxTime,
@@ -20,25 +19,25 @@ export function triggerLongTasks({
     const endTime = Date.now()
 
     if (controller.signal.aborted) {
-      console.log('Cluster aborted.')
+      // console.log('Cluster aborted.')
       return
     }
 
     if (endTime - startTime < totalClusterDuration) {
-      console.log(`Starting long task for ${taskDuration} ms`)
+      // console.log(`Starting long task for ${taskDuration} ms`)
       const taskEnd = Date.now() + taskDuration
 
       // Simulating a blocking long task
       while (Date.now() < taskEnd) {
         if (controller.signal.aborted) {
-          console.log('Task aborted.')
+          // console.log('Task aborted.')
           return
         }
       }
 
       executeLongTask() // Trigger the next task
     } else {
-      console.log('Completed all tasks within the cluster duration.')
+      // console.log('Completed all tasks within the cluster duration.')
     }
   }
 

src/stories/mockComponentsv3/ticketOperationTracer.tsx

@@ -0,0 +1,33 @@
+import { traceManager } from './traceManager'
+
+export const ticketOperationTracer = traceManager.createTracer({
+  name: `ticket-activation`,
+  type: 'operation',
+  requiredSpans: [
+    {
+      name: 'TicketView',
+      matchingRelations: true,
+      type: 'component-render',
+      isIdle: true,
+    },
+  ],
+  relationSchemaName: 'ticket',
+  variants: {
+    click: { timeout: 45_000 },
+  },
+  // debounceWindow: 1_000,
+  debounceOnSpans: [
+    {
+      name: 'TicketView',
+      matchingRelations: true,
+    },
+  ],
+  interruptOnSpans: [
+    {
+      name: 'TicketView',
+      matchingRelations: true,
+      type: 'component-unmount',
+    },
+  ],
+  captureInteractive: true,
+})