Skip to content

Commit

Permalink
[Fiber] Log Component Renders to Custom Performance Track (#30967)
Browse files Browse the repository at this point in the history
Stacked on #30960 and #30966. Behind the enableComponentPerformanceTrack
flag.

This is the first step of performance logging. This logs the start and
end time of a component render in the passive effect phase. We use the
data we're already tracking on components when the Profiler component or
DevTools is active in the Profiling or Dev builds. By backdating this
after committing we avoid adding more overhead in the hot path. By only
logging things that actually committed, we avoid the costly unwinding of
an interrupted render which was hard to maintain in earlier versions.

We already have the start time but we don't have the end time. That's
because `actualStartTime + actualDuration` isn't enough since
`actualDuration` counts the actual CPU time excluding yields and
suspending in the render.

Instead, we infer the end time to be the start time of the next sibling
or the complete time of the whole root if there are no more siblings. We
need to pass this down the passive effect tree. This will mean that any
overhead and yields are attributed to this component's span. In a follow
up, we'll need to start logging these yields to make it clear that this
is not part of the component's self-time.

In follow ups, I'll do the same for commit phases. We'll also need to
log more information about the phases in the top track. We'll also need
to filter out more components from the trees that we don't need to
highlight like the internal Offscreen components. It also needs polish
on colors etc.

Currently, I place the components into separate tracks depending on
which lane currently committed. That way you can see what was blocking
Transitions or Suspense etc. One problem that I've hit with the new
performance.measure extensions is that these tracks show up in the order
they're used which is not the order of priority that we use. Even when
you add fake markers they have to actually be within the performance run
since otherwise the calls are noops so it's not enough to do that once.

However, I think this visualization is actually not good because these
trees end up so large that you can't see any other lanes once you expand
one. Therefore, I think in a follow up I'll actually instead switch to a
model where Components is a single track regardless of lane since we
don't currently have overlap anyway. Then the description about what is
actually rendering can be separate lanes.

<img width="1512" alt="Screenshot 2024-09-15 at 10 55 55 PM"
src="https://github.com/user-attachments/assets/5ca3fa74-97ce-40c7-97f7-80c1dd7d6470">

<img width="1512" alt="Screenshot 2024-09-15 at 10 56 27 PM"
src="https://github.com/user-attachments/assets/557ad65b-4190-465f-843c-0bc6cbb9326d">

DiffTrain build for commit f2df569.
  • Loading branch information
sebmarkbage committed Sep 16, 2024
1 parent a2e2949 commit 4c73996
Show file tree
Hide file tree
Showing 14 changed files with 86 additions and 116 deletions.
2 changes: 1 addition & 1 deletion compiled-rn/VERSION_NATIVE_FB
Original file line number Diff line number Diff line change
@@ -1 +1 @@
19.0.0-native-fb-ee1a403a-20240916
19.0.0-native-fb-f2df5694-20240916
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<bda351a6bd74d56044bd86d2d6462273>>
* @generated SignedSource<<40679ac3de121003b93c964de30bcf93>>
*/

"use strict";
Expand Down Expand Up @@ -11605,25 +11605,16 @@ __DEV__ &&
}
var current = completedWork.alternate;
unitOfWork = completedWork.return;
0 === (completedWork.mode & 2)
? (current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
))
: (startProfilerTimer(completedWork),
(current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
)),
stopProfilerTimerIfRunningAndRecordIncompleteDuration(
completedWork
));
startProfilerTimer(completedWork);
current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
);
0 !== (completedWork.mode & 2) &&
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
if (null !== current) {
workInProgress = current;
return;
Expand Down Expand Up @@ -15140,11 +15131,11 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.0.0-native-fb-ee1a403a-20240916",
version: "19.0.0-native-fb-f2df5694-20240916",
rendererPackageName: "react-test-renderer",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getInstanceFromNode,
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
};
internals.overrideHookState = overrideHookState;
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
Expand Down Expand Up @@ -15289,5 +15280,5 @@ __DEV__ &&
flushSyncWorkAcrossRoots_impl(0, !0));
}
};
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
exports.version = "19.0.0-native-fb-f2df5694-20240916";
})();
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<ee4a02b5426c54dfb9fe96edd4b66161>>
* @generated SignedSource<<9a9fb251219beceaeffc6b69776d3434>>
*/

"use strict";
Expand Down Expand Up @@ -9494,14 +9494,14 @@ function wrapFiber(fiber) {
}
var internals$jscomp$inline_1266 = {
bundleType: 0,
version: "19.0.0-native-fb-ee1a403a-20240916",
version: "19.0.0-native-fb-f2df5694-20240916",
rendererPackageName: "react-test-renderer",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: function (mockNode) {
mockNode = nodeToInstanceMap.get(mockNode);
return void 0 !== mockNode ? mockNode.internalInstanceHandle : null;
},
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
};
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
var hook$jscomp$inline_1267 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
Expand Down Expand Up @@ -9637,4 +9637,4 @@ exports.unstable_batchedUpdates = function (fn, a) {
flushSyncWorkAcrossRoots_impl(0, !0));
}
};
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
exports.version = "19.0.0-native-fb-f2df5694-20240916";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<148286d52fdfff50aaf8f615ce1cc99d>>
* @generated SignedSource<<a850c1d37ecaa9e50bd6abf532024fd1>>
*/

"use strict";
Expand Down Expand Up @@ -8973,11 +8973,10 @@ function completeUnitOfWork(unitOfWork) {
}
var current = completedWork.alternate;
unitOfWork = completedWork.return;
0 === (completedWork.mode & 2)
? (current = completeWork(current, completedWork, entangledRenderLanes))
: (startProfilerTimer(completedWork),
(current = completeWork(current, completedWork, entangledRenderLanes)),
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork));
startProfilerTimer(completedWork);
current = completeWork(current, completedWork, entangledRenderLanes);
0 !== (completedWork.mode & 2) &&
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
if (null !== current) {
workInProgress = current;
return;
Expand Down Expand Up @@ -10067,14 +10066,14 @@ function wrapFiber(fiber) {
}
var internals$jscomp$inline_1144 = {
bundleType: 0,
version: "19.0.0-native-fb-ee1a403a-20240916",
version: "19.0.0-native-fb-f2df5694-20240916",
rendererPackageName: "react-test-renderer",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: function (mockNode) {
mockNode = nodeToInstanceMap.get(mockNode);
return void 0 !== mockNode ? mockNode.internalInstanceHandle : null;
},
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916",
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916",
getLaneLabelMap: function () {
for (
var map = new Map(), lane = 1, index$137 = 0;
Expand Down Expand Up @@ -10225,4 +10224,4 @@ exports.unstable_batchedUpdates = function (fn, a) {
flushSyncWorkAcrossRoots_impl(0, !0));
}
};
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
exports.version = "19.0.0-native-fb-f2df5694-20240916";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<91a77775e387cb297cc53a2299fa7817>>
* @generated SignedSource<<1c1b9763e7b42284daff249459a54514>>
*/

"use strict";
Expand Down Expand Up @@ -1705,7 +1705,7 @@ __DEV__ &&
exports.useTransition = function () {
return resolveDispatcher().useTransition();
};
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
exports.version = "19.0.0-native-fb-f2df5694-20240916";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<2536265a79e4e86f341da6a1b5221361>>
* @generated SignedSource<<e678c9ab4742aa7571f90a33fc0dfaa6>>
*/

"use strict";
Expand Down Expand Up @@ -580,4 +580,4 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
exports.version = "19.0.0-native-fb-f2df5694-20240916";
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<91f824f51eabcd1c2ea47371eea0f9aa>>
* @generated SignedSource<<0f502daf85a556bae5016204bf6af630>>
*/

"use strict";
Expand Down Expand Up @@ -584,7 +584,7 @@ exports.useSyncExternalStore = function (
exports.useTransition = function () {
return ReactSharedInternals.H.useTransition();
};
exports.version = "19.0.0-native-fb-ee1a403a-20240916";
exports.version = "19.0.0-native-fb-f2df5694-20240916";
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
"function" ===
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
ee1a403a3019dd8bffb12174d269d8c85bfab8a1
f2df5694f2be141954f22618fd3ad035203241a3
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<61b41ac0200620cb757aa1d27f6fbc6d>>
* @generated SignedSource<<5ba7f2de6a46de16f61e9f39daee3a39>>
*/

"use strict";
Expand Down Expand Up @@ -12810,25 +12810,16 @@ __DEV__ &&
}
var current = completedWork.alternate;
unitOfWork = completedWork.return;
0 === (completedWork.mode & 2)
? (current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
))
: (startProfilerTimer(completedWork),
(current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
)),
stopProfilerTimerIfRunningAndRecordIncompleteDuration(
completedWork
));
startProfilerTimer(completedWork);
current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
);
0 !== (completedWork.mode & 2) &&
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
if (null !== current) {
workInProgress = current;
return;
Expand Down Expand Up @@ -17189,11 +17180,11 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.0.0-native-fb-ee1a403a-20240916",
version: "19.0.0-native-fb-f2df5694-20240916",
rendererPackageName: "react-native-renderer",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getInstanceFromNode,
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
};
null !== extraDevToolsConfig &&
(internals.rendererConfig = extraDevToolsConfig);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<7f9e61ef45310ef46f7d0986a6e32f98>>
* @generated SignedSource<<22685561eb8e04f40bed9d1b32d45795>>
*/

"use strict";
Expand Down Expand Up @@ -11085,11 +11085,11 @@ batchedUpdatesImpl = function (fn, a) {
var roots = new Map(),
internals$jscomp$inline_1164 = {
bundleType: 0,
version: "19.0.0-native-fb-ee1a403a-20240916",
version: "19.0.0-native-fb-f2df5694-20240916",
rendererPackageName: "react-native-renderer",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getInstanceFromNode,
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
};
null !== extraDevToolsConfig &&
(internals$jscomp$inline_1164.rendererConfig = extraDevToolsConfig);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<22acb37b2cd38769b44252bf796f3563>>
* @generated SignedSource<<f2fdab5d82153a58466983660146b7da>>
*/

"use strict";
Expand Down Expand Up @@ -10625,11 +10625,10 @@ function completeUnitOfWork(unitOfWork) {
}
var current = completedWork.alternate;
unitOfWork = completedWork.return;
0 === (completedWork.mode & 2)
? (current = completeWork(current, completedWork, entangledRenderLanes))
: (startProfilerTimer(completedWork),
(current = completeWork(current, completedWork, entangledRenderLanes)),
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork));
startProfilerTimer(completedWork);
current = completeWork(current, completedWork, entangledRenderLanes);
0 !== (completedWork.mode & 2) &&
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
if (null !== current) {
workInProgress = current;
return;
Expand Down Expand Up @@ -11760,11 +11759,11 @@ batchedUpdatesImpl = function (fn, a) {
var roots = new Map(),
internals$jscomp$inline_1252 = {
bundleType: 0,
version: "19.0.0-native-fb-ee1a403a-20240916",
version: "19.0.0-native-fb-f2df5694-20240916",
rendererPackageName: "react-native-renderer",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getInstanceFromNode,
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
};
null !== extraDevToolsConfig &&
(internals$jscomp$inline_1252.rendererConfig = extraDevToolsConfig);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @noflow
* @nolint
* @preventMunge
* @generated SignedSource<<f8459dc8ddf715f7caf969e89173c9ee>>
* @generated SignedSource<<9f63429df6d4924262869195b61b0a6d>>
*/

"use strict";
Expand Down Expand Up @@ -13178,25 +13178,16 @@ __DEV__ &&
}
var current = completedWork.alternate;
unitOfWork = completedWork.return;
0 === (completedWork.mode & 2)
? (current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
))
: (startProfilerTimer(completedWork),
(current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
)),
stopProfilerTimerIfRunningAndRecordIncompleteDuration(
completedWork
));
startProfilerTimer(completedWork);
current = runWithFiberInDEV(
completedWork,
completeWork,
current,
completedWork,
entangledRenderLanes
);
0 !== (completedWork.mode & 2) &&
stopProfilerTimerIfRunningAndRecordIncompleteDuration(completedWork);
if (null !== current) {
workInProgress = current;
return;
Expand Down Expand Up @@ -17415,11 +17406,11 @@ __DEV__ &&
shouldSuspendImpl = newShouldSuspendImpl;
};
var isomorphicReactPackageVersion = React.version;
if ("19.0.0-native-fb-ee1a403a-20240916" !== isomorphicReactPackageVersion)
if ("19.0.0-native-fb-f2df5694-20240916" !== isomorphicReactPackageVersion)
throw Error(
'Incompatible React versions: The "react" and "react-native-renderer" packages must have the exact same version. Instead got:\n - react: ' +
(isomorphicReactPackageVersion +
"\n - react-native-renderer: 19.0.0-native-fb-ee1a403a-20240916\nLearn more: https://react.dev/warnings/version-mismatch")
"\n - react-native-renderer: 19.0.0-native-fb-f2df5694-20240916\nLearn more: https://react.dev/warnings/version-mismatch")
);
if (
"function" !==
Expand All @@ -17445,11 +17436,11 @@ __DEV__ &&
(function () {
var internals = {
bundleType: 1,
version: "19.0.0-native-fb-ee1a403a-20240916",
version: "19.0.0-native-fb-f2df5694-20240916",
rendererPackageName: "react-native-renderer",
currentDispatcherRef: ReactSharedInternals,
findFiberByHostInstance: getInstanceFromTag,
reconcilerVersion: "19.0.0-native-fb-ee1a403a-20240916"
reconcilerVersion: "19.0.0-native-fb-f2df5694-20240916"
};
null !== extraDevToolsConfig &&
(internals.rendererConfig = extraDevToolsConfig);
Expand Down
Loading

0 comments on commit 4c73996

Please sign in to comment.