Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Flight] Color and badge non-primary environments #31738

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Color and badge non-primary environments
sebmarkbage committed Dec 12, 2024
commit 0aa0aee7e61b15c6e2e2d4f4e9666832bdf26bcf
11 changes: 10 additions & 1 deletion packages/react-client/src/ReactFlightClient.js
Original file line number Diff line number Diff line change
@@ -655,7 +655,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,
);
}
}

@@ -2761,6 +2767,7 @@ function resolveTypedArray(
}

function flushComponentPerformance(
response: Response,
root: SomeChunk<any>,
trackIdx: number, // Next available track
trackTime: number, // The time after which it is available,
@@ -2851,6 +2858,7 @@ function flushComponentPerformance(
let childTrackTime = trackTime;
for (let i = 0; i < children.length; i++) {
const childResult = flushComponentPerformance(
response,
children[i],
childTrackIdx,
childTrackTime,
@@ -2889,6 +2897,7 @@ function flushComponentPerformance(
startTime,
endTime,
childrenEndTime,
response._rootEnvironmentName,
);
// Track the root most component of the result for deduping logging.
result.component = componentInfo;
22 changes: 17 additions & 5 deletions packages/react-client/src/ReactFlightPerformanceTrack.js
Original file line number Diff line number Diff line change
@@ -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);
}
}
Loading