feat: ConsoleTraceLogger

Author: niieani

src/stories/mockComponentsv3/App.stories.tsx

@@ -1,5 +1,6 @@
-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'
@@ -19,10 +20,10 @@ export const Primary: Story = {
 export const WithDebugger: Story = {
   render: () => (
     <div>
-      <App />
-      <div style={{ marginTop: '20px' }}>
+      <div style={{ marginBottom: '20px' }}>
         <TraceManagerDebugger traceManager={traceManager} />
       </div>
+      <App />
     </div>
   ),
 }
@@ -35,3 +36,37 @@ export const WithFloatingDebugger: Story = {
     </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/ticketOperationTracer.tsx

@@ -6,7 +6,7 @@ export const ticketOperationTracer = traceManager.createTracer({
   requiredSpans: [
     {
       name: 'TicketView',
-      matchingRelations: ['ticketId'],
+      matchingRelations: true,
       type: 'component-render',
       isIdle: true,
     },
@@ -19,13 +19,13 @@ export const ticketOperationTracer = traceManager.createTracer({
   debounceOnSpans: [
     {
       name: 'TicketView',
-      matchingRelations: ['ticketId'],
+      matchingRelations: true,
     },
   ],
   interruptOnSpans: [
     {
       name: 'TicketView',
-      matchingRelations: ['ticketId'],
+      matchingRelations: true,
       type: 'component-unmount',
     },
   ],