Repository: facebook/react
File: packages/react-reconciler/src/ReactFiberPerformanceTrack.js (JavaScript)

Code before:

export function logRenderPhase(
  startTime: number,
  endTime: number,
  lanes: Lanes,
): void {
  if (supportsUserTiming) {
    const color = includesOnlyHydrationOrOffscreenLanes(lanes)
      ? 'tertiary-dark'
      : 'primary-dark';
    console.timeStamp(
      includesOnlyOffscreenLanes(lanes)
        ? 'Prepared'
        : includesOnlyHydrationLanes(lanes)
          ? 'Hydrated'
          : 'Render',
      startTime,
      endTime,
      currentTrack,
      LANES_TRACK_GROUP,
      color,
    );
  }
}

export function logInterruptedRenderPhase(
  startTime: number,
  endTime: number,
  lanes: Lanes,
): void {
  if (supportsUserTiming) {
    const color = includesOnlyHydrationOrOffscreenLanes(lanes)
      ? 'tertiary-dark'
      : 'primary-dark';
    console.timeStamp(
      includesOnlyOffscreenLanes(lanes)
        ? 'Prewarm'
        : includesOnlyHydrationLanes(lanes)
          ? 'Interrupted Hydration'
          : 'Interrupted Render',
      startTime,
      endTime,
      currentTrack,
      LANES_TRACK_GROUP,
      color,
    );
  }
}

export function logSuspendedRenderPhase(
  startTime: number,

Review comment (suggestion):
Right now it's using the one from the `setState` call that was wrapped in `startTransition`, right?

If I had to choose, I'd usually prefer the deeper one. Does `createTask` include the async stack? If not, you could set a breakpoint at the `setState` and find the corresponding `startTransition` that way if it's async. If the transition function is sync, having the deeper `setState` task is already perfect IMO.

The task for `startTransition` could leave you hanging if the transition function has multiple `setState` (maybe even in separate if-else).

Code after:
        debugTask.run(
          // $FlowFixMe[method-unbinding]
          console.timeStamp.bind(
            console,
            eventIsRepeat ? '' : 'Event: ' + eventType,
            eventTime,
            endTime,
            currentTrack,
            LANES_TRACK_GROUP,
            color,
          ),
        );
      } else {
        console.timeStamp(
          eventIsRepeat ? '' : 'Event: ' + eventType,
          eventTime,
          endTime,
          currentTrack,
          LANES_TRACK_GROUP,
          color,
        );
      }
    }
    if (startTime > 0) {
      // Log the time from when we started an async transition until we called setState or started rendering.
      // TODO: Ideally this would use the debugTask of the startTransition call perhaps.
      if (__DEV__ && debugTask) {
        debugTask.run(
          // $FlowFixMe[method-unbinding]
          console.timeStamp.bind(
            console,
            'Action',
            startTime,
            updateTime > 0 ? updateTime : renderStartTime,
            currentTrack,
            LANES_TRACK_GROUP,
            'primary-dark',
          ),
        );
      } else {
        console.timeStamp(
          'Action',
          startTime,
          updateTime > 0 ? updateTime : renderStartTime,
          currentTrack,
          LANES_TRACK_GROUP,
          'primary-dark',
        );
      }
    }
    if (updateTime > 0) {