diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 52c7ec73a4c41..8e00df7c1c2e9 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -649,7 +649,13 @@ export function reportGlobalError(response: Response, error: Error): void { }); if (enableProfilerTimer && enableComponentPerformanceTrack) { markAllTracksInOrder(); - flushComponentPerformance(getChunk(response, 0), 0, -Infinity, -Infinity); + flushComponentPerformance( + response, + getChunk(response, 0), + 0, + -Infinity, + -Infinity, + ); } } @@ -2748,6 +2754,7 @@ function resolveTypedArray( } function flushComponentPerformance( + response: Response, root: SomeChunk, trackIdx: number, // Next available track trackTime: number, // The time after which it is available, @@ -2838,6 +2845,7 @@ function flushComponentPerformance( let childTrackTime = trackTime; for (let i = 0; i < children.length; i++) { const childResult = flushComponentPerformance( + response, children[i], childTrackIdx, childTrackTime, @@ -2876,6 +2884,7 @@ function flushComponentPerformance( startTime, endTime, childrenEndTime, + response._rootEnvironmentName, ); // Track the root most component of the result for deduping logging. result.component = componentInfo; diff --git a/packages/react-client/src/ReactFlightPerformanceTrack.js b/packages/react-client/src/ReactFlightPerformanceTrack.js index cfd8ca96b3359..d2860e407cc65 100644 --- a/packages/react-client/src/ReactFlightPerformanceTrack.js +++ b/packages/react-client/src/ReactFlightPerformanceTrack.js @@ -72,22 +72,33 @@ export function logComponentRender( startTime: number, endTime: number, childrenEndTime: number, + rootEnv: string, ): void { if (supportsUserTiming && childrenEndTime >= 0 && trackIdx < 10) { + const env = componentInfo.env; const name = componentInfo.name; + const isPrimaryEnv = env === rootEnv; const selfTime = endTime - startTime; reusableComponentDevToolDetails.color = selfTime < 0.5 - ? 'primary-light' + ? isPrimaryEnv + ? 'primary-light' + : 'secondary-light' : selfTime < 50 - ? 'primary' + ? isPrimaryEnv + ? 'primary' + : 'secondary' : selfTime < 500 - ? 'primary-dark' + ? isPrimaryEnv + ? 'primary-dark' + : 'secondary-dark' : 'error'; reusableComponentDevToolDetails.track = trackNames[trackIdx]; reusableComponentOptions.start = startTime < 0 ? 0 : startTime; reusableComponentOptions.end = childrenEndTime; - performance.measure(name, reusableComponentOptions); + const entryName = + isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']'; + performance.measure(entryName, reusableComponentOptions); } } @@ -103,6 +114,7 @@ export function logDedupedComponentRender( reusableComponentDevToolDetails.track = trackNames[trackIdx]; reusableComponentOptions.start = startTime < 0 ? 0 : startTime; reusableComponentOptions.end = endTime; - performance.measure(name + ' [deduped]', reusableComponentOptions); + const entryName = name + ' [deduped]'; + performance.measure(entryName, reusableComponentOptions); } }