fix: various improvements to debugger

Author: niieani

src/main.ts

@@ -58,7 +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 * from './v3/TraceManagerDebuggerLazy'
 export type * from './v3/traceRecordingTypes'
 export type * from './v3/types'
 export type * from './v3/typeUtils'

src/stories/mockComponentsv3/App.stories.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 import { createConsoleTraceLogger } from '../../v3/ConsoleTraceLogger'
-import { TraceManagerDebugger } from '../../v3/TraceManagerDebugger'
+import TraceManagerDebugger from '../../v3/TraceManagerDebugger'
 import { App } from './App'
 import { traceManager } from './traceManager'
 

src/v3/Trace.ts

@@ -593,6 +593,13 @@ export class TraceStateMachine<
               doesSpanMatch(idleRegressionCheckSpan, this.#context) &&
               doesSpanMatch.idleCheck
             ) {
+              // Sometimes spans are processed out of order, we update the lastRelevant if this span ends later
+              if (
+                spanAndAnnotation.annotation.operationRelativeEndTime >
+                (this.lastRelevant?.annotation.operationRelativeEndTime ?? 0)
+              ) {
+                this.lastRelevant = spanAndAnnotation
+              }
               // check if we regressed on "isIdle", and if so, transition to interrupted with reason
               return {
                 transitionToState: 'interrupted',
@@ -1252,12 +1259,10 @@ export class Trace<
     }
 
     this.recordedItemsByLabel = Object.fromEntries(
-      Object.entries(this.definition.labelMatching ?? {}).map(
-        ([label, matcher]) => [
-          label,
-          [] as SpanAndAnnotation<RelationSchemasT>[],
-        ],
-      ),
+      Object.keys(this.definition.labelMatching ?? {}).map((label) => [
+        label,
+        [] as SpanAndAnnotation<RelationSchemasT>[],
+      ]),
     )
 
     // definition is now set, we can initialize the state machine

src/v3/TraceManager.test.ts

@@ -570,7 +570,7 @@ describe('TraceManager', () => {
       // prettier-ignore
       const { spans } = getSpansFromTimeline<TicketIdRelationSchemasFixture>`
       Events: ${Render('start', 0)}-----${Render('component', 50, {isIdle: true})}-----${Render('component', 50, {isIdle: false})}
-      Time:   ${0}                      ${100}                                   ${200}
+      Time:   ${0}                      ${100}                                         ${200}
       `
 
       processSpans(spans, traceManager)

src/v3/TraceManagerDebugger.tsx

@@ -752,8 +752,6 @@ function DefinitionChip({
   )
 }
 
-// No longer needed - will directly use definition property
-
 // RequiredSpansList component to display required spans
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function RequiredSpansList<RelationSchemasT>({
@@ -903,7 +901,7 @@ function TraceItem<
               onClick={handleDownloadClick}
               title="Download trace recording as JSON"
             >
-              <span style={styles.downloadIcon}>⬇</span>
+              <span style={styles.downloadIcon}>🔽 JSON</span>
             </button>
           )}
           {/* Error indicator */}
@@ -1108,20 +1106,25 @@ function TraceItem<
   )
 }
 
+export interface TraceManagerDebuggerProps<
+  RelationSchemasT extends RelationSchemasBase<RelationSchemasT>,
+> {
+  traceManager: TraceManager<RelationSchemasT>
+  float?: boolean
+  traceHistoryLimit?: number
+}
+
 /**
  * A component that visualizes the current state of the TraceManager and its Traces
  */
-export function TraceManagerDebugger<
+// eslint-disable-next-line import/no-default-export
+export default function TraceManagerDebugger<
   RelationSchemasT extends RelationSchemasBase<RelationSchemasT>,
 >({
   traceManager,
   float = false,
   traceHistoryLimit = TRACE_HISTORY_LIMIT,
-}: {
-  traceManager: TraceManager<RelationSchemasT>
-  float?: boolean
-  traceHistoryLimit?: number
-}) {
+}: TraceManagerDebuggerProps<RelationSchemasT>) {
   const [currentTrace, setCurrentTrace] =
     useState<TraceInfo<RelationSchemasT> | null>(null)
   const [traceHistory, setTraceHistory] = useState<

src/v3/TraceManagerDebuggerLazy.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export const TraceManagerDebuggerLazy = React.lazy(
+  () => import('./TraceManagerDebugger'),
+)

src/v3/convertToRum.test.ts

@@ -72,6 +72,9 @@ describe('convertTraceToRUM', () => {
         transitionFromState: 'active',
         lastRelevantSpanAndAnnotation: undefined,
         transitionToState: 'complete',
+        completeSpanAndAnnotation: undefined,
+        cpuIdleSpanAndAnnotation: undefined,
+        lastRequiredSpanAndAnnotation: undefined,
       },
     )
 
@@ -165,6 +168,9 @@ describe('convertTraceToRUM', () => {
         transitionFromState: 'active',
         lastRelevantSpanAndAnnotation: undefined,
         transitionToState: 'complete',
+        completeSpanAndAnnotation: undefined,
+        cpuIdleSpanAndAnnotation: undefined,
+        lastRequiredSpanAndAnnotation: undefined,
       },
     )
 

src/v3/recordingComputeUtils.test.ts

@@ -63,6 +63,9 @@ describe('recordingComputeUtils', () => {
           transitionFromState: 'active',
           lastRelevantSpanAndAnnotation: undefined,
           transitionToState: 'complete',
+          completeSpanAndAnnotation: undefined,
+          cpuIdleSpanAndAnnotation: undefined,
+          lastRequiredSpanAndAnnotation: undefined,
         },
       )
 
@@ -100,6 +103,9 @@ describe('recordingComputeUtils', () => {
           transitionFromState: 'active',
           lastRelevantSpanAndAnnotation: undefined,
           transitionToState: 'complete',
+          completeSpanAndAnnotation: undefined,
+          cpuIdleSpanAndAnnotation: undefined,
+          lastRequiredSpanAndAnnotation: undefined,
         },
       )
 
@@ -139,6 +145,9 @@ describe('recordingComputeUtils', () => {
           transitionFromState: 'active',
           lastRelevantSpanAndAnnotation: undefined,
           transitionToState: 'complete',
+          completeSpanAndAnnotation: undefined,
+          cpuIdleSpanAndAnnotation: undefined,
+          lastRequiredSpanAndAnnotation: undefined,
         },
       )
 
@@ -693,6 +702,9 @@ describe('recordingComputeUtils', () => {
           transitionFromState: 'active',
           transitionToState: 'complete',
           lastRelevantSpanAndAnnotation: undefined,
+          completeSpanAndAnnotation: undefined,
+          cpuIdleSpanAndAnnotation: undefined,
+          lastRequiredSpanAndAnnotation: undefined,
         },
       )
 
@@ -730,6 +742,9 @@ describe('recordingComputeUtils', () => {
           transitionFromState: 'active',
           transitionToState: 'complete',
           lastRelevantSpanAndAnnotation: undefined,
+          completeSpanAndAnnotation: undefined,
+          cpuIdleSpanAndAnnotation: undefined,
+          lastRequiredSpanAndAnnotation: undefined,
         },
       )