Format event with "warning" yellow and prefix with "Event: " (#31536)

sebmarkbage · web-flow · commit b01722d58533 · 2024-11-14T16:44:29.000-05:00
It's useful to quickly see where new events are kicking off new rendering. This uses the new "warning" color (yellow) to do that. This is to help distinguish it from the purple (secondary color) which is used for the commit phase which is more of a follow up and it's often that you have several rerenders within one event which makes it hard to tell a part where it starts and event otherwise. For the span marking between previous render within the same event and the next setState, I use secondary-light (light purple) since it's kind of still part of the same sequence at that point. It's usually a spawned render (e.g. setState in useEffect or microtask) but it can also be sequential flushSync. I was bothered by that the event name is the only thing that's lower case so I prefixed it with `Event: ` like the JS traces are. <img width="1499" alt="Screenshot 2024-11-13 at 7 15 45 PM" src="https://github.com/user-attachments/assets/0c81c810-6b5d-4fc7-9bc0-d15b53844ade"> It might be a little confusing why our track starts earlier than the JS one below in the "Main Thread" flamegraph which looks the same. That's because ours is the start of the event time which is when the click happens where as the Main Thread one is when the JS event loop gets around to processing the event.
diff --git a/packages/react-reconciler/src/ReactFiberPerformanceTrack.js b/packages/react-reconciler/src/ReactFiberPerformanceTrack.js
@@ -125,10 +125,15 @@ export function logBlockingStart(
     reusableLaneDevToolDetails.track = 'Blocking';
     if (eventTime > 0 && eventType !== null) {
       // Log the time from the event timeStamp until we called setState.
-      reusableLaneDevToolDetails.color = 'secondary-dark';
+      reusableLaneDevToolDetails.color = eventIsRepeat
+        ? 'secondary-light'
+        : 'warning';
       reusableLaneOptions.start = eventTime;
       reusableLaneOptions.end = updateTime > 0 ? updateTime : renderStartTime;
-      performance.measure(eventIsRepeat ? '' : eventType, reusableLaneOptions);
+      performance.measure(
+        eventIsRepeat ? '' : 'Event: ' + eventType,
+        reusableLaneOptions,
+      );
     }
     if (updateTime > 0) {
       // Log the time from when we called setState until we started rendering.
@@ -152,15 +157,20 @@ export function logTransitionStart(
     reusableLaneDevToolDetails.track = 'Transition';
     if (eventTime > 0 && eventType !== null) {
       // Log the time from the event timeStamp until we started a transition.
-      reusableLaneDevToolDetails.color = 'secondary-dark';
+      reusableLaneDevToolDetails.color = eventIsRepeat
+        ? 'secondary-light'
+        : 'warning';
       reusableLaneOptions.start = eventTime;
       reusableLaneOptions.end =
         startTime > 0
           ? startTime
           : updateTime > 0
             ? updateTime
             : renderStartTime;
-      performance.measure(eventIsRepeat ? '' : eventType, reusableLaneOptions);
+      performance.measure(
+        eventIsRepeat ? '' : 'Event: ' + eventType,
+        reusableLaneOptions,
+      );
     }
     if (startTime > 0) {
       // Log the time from when we started an async transition until we called setState or started rendering.
