[Flight] Color and badge non-primary environments (#31738)
Stacked on #31737. <img width="987" alt="Screenshot 2024-12-11 at 8 41 15 PM" src="https://github.com/user-attachments/assets/438379a9-0138-4d02-a53a-419402839558" /> When mixing environments (like "use cache" or third party RSC) it's useful to color and badge those components differently to differentiate. I'm not putting them in separate tracks because when they do actually execute, like cache misses or third party RSCs, they behave like they're part of the same tree.
Sebastian Markbåge committed
Dec 16, 2024 at 13:39 UTC
54e86bd0d0eac76320c8810090810e7a858125d6
2 files changed
+27
-6
packages/react-client/src/ReactFlightClient.js
+10
-1
@@ -649,7 +649,13 @@ export function reportGlobalError(response: Response, error: Error): void {
649
});
650
if (enableProfilerTimer && enableComponentPerformanceTrack) {
651
markAllTracksInOrder();
652
- flushComponentPerformance(getChunk(response, 0), 0, -Infinity, -Infinity);
652
+ flushComponentPerformance(
653
+ response,
654
+ getChunk(response, 0),
655
+ 0,
656
+ -Infinity,
657
+ -Infinity,
658
+ );
659
}
660
}
661
@@ -2748,6 +2754,7 @@ function resolveTypedArray(
2754
}
2755
2756
function flushComponentPerformance(
2757
+ response: Response,
2758
root: SomeChunk<any>,
2759
trackIdx: number, // Next available track
2760
trackTime: number, // The time after which it is available,
@@ -2838,6 +2845,7 @@ function flushComponentPerformance(
2845
let childTrackTime = trackTime;
2846
for (let i = 0; i < children.length; i++) {
2847
const childResult = flushComponentPerformance(
2848
+ response,
2849
children[i],
2850
childTrackIdx,
2851
childTrackTime,
@@ -2876,6 +2884,7 @@ function flushComponentPerformance(
2884
startTime,
2885
endTime,
2886
childrenEndTime,
2887
+ response._rootEnvironmentName,
2888
);
2889
// Track the root most component of the result for deduping logging.
2890
result.component = componentInfo;
packages/react-client/src/ReactFlightPerformanceTrack.js
+17
-5
@@ -72,22 +72,33 @@ export function logComponentRender(
72
startTime: number,
73
endTime: number,
74
childrenEndTime: number,
75
+ rootEnv: string,
76
): void {
77
if (supportsUserTiming && childrenEndTime >= 0 && trackIdx < 10) {
78
+ const env = componentInfo.env;
79
const name = componentInfo.name;
80
+ const isPrimaryEnv = env === rootEnv;
81
const selfTime = endTime - startTime;
82
reusableComponentDevToolDetails.color =
83
selfTime < 0.5
81
- ? 'primary-light'
84
+ ? isPrimaryEnv
85
+ ? 'primary-light'
86
+ : 'secondary-light'
87
: selfTime < 50
83
- ? 'primary'
88
+ ? isPrimaryEnv
89
+ ? 'primary'
90
+ : 'secondary'
91
: selfTime < 500
85
- ? 'primary-dark'
92
+ ? isPrimaryEnv
93
+ ? 'primary-dark'
94
+ : 'secondary-dark'
95
: 'error';
96
reusableComponentDevToolDetails.track = trackNames[trackIdx];
97
reusableComponentOptions.start = startTime < 0 ? 0 : startTime;
98
reusableComponentOptions.end = childrenEndTime;
90
- performance.measure(name, reusableComponentOptions);
99
+ const entryName =
100
+ isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
101
+ performance.measure(entryName, reusableComponentOptions);
102
}
103
}
104
@@ -103,6 +114,7 @@ export function logDedupedComponentRender(
114
reusableComponentDevToolDetails.track = trackNames[trackIdx];
115
reusableComponentOptions.start = startTime < 0 ? 0 : startTime;
116
reusableComponentOptions.end = endTime;
106
- performance.measure(name + ' [deduped]', reusableComponentOptions);
117
+ const entryName = name + ' [deduped]';
118
+ performance.measure(entryName, reusableComponentOptions);
119
}
120
}