Skip to content

Commit 58ac15c

Browse files
hoxyqhoxyq
authored
devtools: emit performance entries only when profiling (#33652)
## Summary This floods Timings track in dev mode and also hurts performance in dev. Making sure we are buffering Performance entries (all of them are marks) only when profiling in RDT. This should be removed once we roll out Perf tracks.
1 parent bfc8801 commit 58ac15c

File tree

1 file changed

+119
-147
lines changed

1 file changed

+119
-147
lines changed

‎packages/react-devtools-shared/src/backend/profilingHooks.js‎

Lines changed: 119 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -329,21 +329,17 @@ export function createProfilingHooks({
329329
}
330330

331331
function markComponentRenderStarted(fiber: Fiber): void {
332-
if (isProfiling || supportsUserTimingV3) {
332+
if (isProfiling) {
333333
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
334334

335-
if (isProfiling) {
336-
// TODO (timeline) Record and cache component stack
337-
if (isProfiling) {
338-
currentReactComponentMeasure = {
339-
componentName,
340-
duration: 0,
341-
timestamp: getRelativeTime(),
342-
type: 'render',
343-
warning: null,
344-
};
345-
}
346-
}
335+
// TODO (timeline) Record and cache component stack
336+
currentReactComponentMeasure = {
337+
componentName,
338+
duration: 0,
339+
timestamp: getRelativeTime(),
340+
type: 'render',
341+
warning: null,
342+
};
347343

348344
if (supportsUserTimingV3) {
349345
markAndClear(`--component-render-start-${componentName}`);
@@ -374,21 +370,17 @@ export function createProfilingHooks({
374370
}
375371

376372
function markComponentLayoutEffectMountStarted(fiber: Fiber): void {
377-
if (isProfiling || supportsUserTimingV3) {
373+
if (isProfiling) {
378374
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
379375

380-
if (isProfiling) {
381-
// TODO (timeline) Record and cache component stack
382-
if (isProfiling) {
383-
currentReactComponentMeasure = {
384-
componentName,
385-
duration: 0,
386-
timestamp: getRelativeTime(),
387-
type: 'layout-effect-mount',
388-
warning: null,
389-
};
390-
}
391-
}
376+
// TODO (timeline) Record and cache component stack
377+
currentReactComponentMeasure = {
378+
componentName,
379+
duration: 0,
380+
timestamp: getRelativeTime(),
381+
type: 'layout-effect-mount',
382+
warning: null,
383+
};
392384

393385
if (supportsUserTimingV3) {
394386
markAndClear(`--component-layout-effect-mount-start-${componentName}`);
@@ -419,21 +411,17 @@ export function createProfilingHooks({
419411
}
420412

421413
function markComponentLayoutEffectUnmountStarted(fiber: Fiber): void {
422-
if (isProfiling || supportsUserTimingV3) {
414+
if (isProfiling) {
423415
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
424416

425-
if (isProfiling) {
426-
// TODO (timeline) Record and cache component stack
427-
if (isProfiling) {
428-
currentReactComponentMeasure = {
429-
componentName,
430-
duration: 0,
431-
timestamp: getRelativeTime(),
432-
type: 'layout-effect-unmount',
433-
warning: null,
434-
};
435-
}
436-
}
417+
// TODO (timeline) Record and cache component stack
418+
currentReactComponentMeasure = {
419+
componentName,
420+
duration: 0,
421+
timestamp: getRelativeTime(),
422+
type: 'layout-effect-unmount',
423+
warning: null,
424+
};
437425

438426
if (supportsUserTimingV3) {
439427
markAndClear(
@@ -466,21 +454,17 @@ export function createProfilingHooks({
466454
}
467455

468456
function markComponentPassiveEffectMountStarted(fiber: Fiber): void {
469-
if (isProfiling || supportsUserTimingV3) {
457+
if (isProfiling) {
470458
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
471459

472-
if (isProfiling) {
473-
// TODO (timeline) Record and cache component stack
474-
if (isProfiling) {
475-
currentReactComponentMeasure = {
476-
componentName,
477-
duration: 0,
478-
timestamp: getRelativeTime(),
479-
type: 'passive-effect-mount',
480-
warning: null,
481-
};
482-
}
483-
}
460+
// TODO (timeline) Record and cache component stack
461+
currentReactComponentMeasure = {
462+
componentName,
463+
duration: 0,
464+
timestamp: getRelativeTime(),
465+
type: 'passive-effect-mount',
466+
warning: null,
467+
};
484468

485469
if (supportsUserTimingV3) {
486470
markAndClear(`--component-passive-effect-mount-start-${componentName}`);
@@ -511,21 +495,17 @@ export function createProfilingHooks({
511495
}
512496

513497
function markComponentPassiveEffectUnmountStarted(fiber: Fiber): void {
514-
if (isProfiling || supportsUserTimingV3) {
498+
if (isProfiling) {
515499
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
516500

517-
if (isProfiling) {
518-
// TODO (timeline) Record and cache component stack
519-
if (isProfiling) {
520-
currentReactComponentMeasure = {
521-
componentName,
522-
duration: 0,
523-
timestamp: getRelativeTime(),
524-
type: 'passive-effect-unmount',
525-
warning: null,
526-
};
527-
}
528-
}
501+
// TODO (timeline) Record and cache component stack
502+
currentReactComponentMeasure = {
503+
componentName,
504+
duration: 0,
505+
timestamp: getRelativeTime(),
506+
type: 'passive-effect-unmount',
507+
warning: null,
508+
};
529509

530510
if (supportsUserTimingV3) {
531511
markAndClear(
@@ -562,7 +542,7 @@ export function createProfilingHooks({
562542
thrownValue: mixed,
563543
lanes: Lanes,
564544
): void {
565-
if (isProfiling || supportsUserTimingV3) {
545+
if (isProfiling) {
566546
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
567547
const phase = fiber.alternate === null ? 'mount' : 'update';
568548

@@ -577,17 +557,15 @@ export function createProfilingHooks({
577557
message = thrownValue;
578558
}
579559

580-
if (isProfiling) {
581-
// TODO (timeline) Record and cache component stack
582-
if (currentTimelineData) {
583-
currentTimelineData.thrownErrors.push({
584-
componentName,
585-
message,
586-
phase,
587-
timestamp: getRelativeTime(),
588-
type: 'thrown-error',
589-
});
590-
}
560+
// TODO (timeline) Record and cache component stack
561+
if (currentTimelineData) {
562+
currentTimelineData.thrownErrors.push({
563+
componentName,
564+
message,
565+
phase,
566+
timestamp: getRelativeTime(),
567+
type: 'thrown-error',
568+
});
591569
}
592570

593571
if (supportsUserTimingV3) {
@@ -613,7 +591,7 @@ export function createProfilingHooks({
613591
wakeable: Wakeable,
614592
lanes: Lanes,
615593
): void {
616-
if (isProfiling || supportsUserTimingV3) {
594+
if (isProfiling) {
617595
const eventType = wakeableIDs.has(wakeable) ? 'resuspend' : 'suspend';
618596
const id = getWakeableID(wakeable);
619597
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
@@ -626,56 +604,54 @@ export function createProfilingHooks({
626604
const displayName = (wakeable: any).displayName || '';
627605

628606
let suspenseEvent: SuspenseEvent | null = null;
629-
if (isProfiling) {
630-
// TODO (timeline) Record and cache component stack
631-
suspenseEvent = {
632-
componentName,
633-
depth: 0,
634-
duration: 0,
635-
id: `${id}`,
636-
phase,
637-
promiseName: displayName,
638-
resolution: 'unresolved',
639-
timestamp: getRelativeTime(),
640-
type: 'suspense',
641-
warning: null,
642-
};
607+
// TODO (timeline) Record and cache component stack
608+
suspenseEvent = {
609+
componentName,
610+
depth: 0,
611+
duration: 0,
612+
id: `${id}`,
613+
phase,
614+
promiseName: displayName,
615+
resolution: 'unresolved',
616+
timestamp: getRelativeTime(),
617+
type: 'suspense',
618+
warning: null,
619+
};
643620

644-
if (currentTimelineData) {
645-
currentTimelineData.suspenseEvents.push(suspenseEvent);
646-
}
621+
if (currentTimelineData) {
622+
currentTimelineData.suspenseEvents.push(suspenseEvent);
647623
}
648624

649625
if (supportsUserTimingV3) {
650626
markAndClear(
651627
`--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
652628
);
653-
}
654629

655-
wakeable.then(
656-
() => {
657-
if (suspenseEvent) {
658-
suspenseEvent.duration =
659-
getRelativeTime() - suspenseEvent.timestamp;
660-
suspenseEvent.resolution = 'resolved';
661-
}
630+
wakeable.then(
631+
() => {
632+
if (suspenseEvent) {
633+
suspenseEvent.duration =
634+
getRelativeTime() - suspenseEvent.timestamp;
635+
suspenseEvent.resolution = 'resolved';
636+
}
662637

663-
if (supportsUserTimingV3) {
664-
markAndClear(`--suspense-resolved-${id}-${componentName}`);
665-
}
666-
},
667-
() => {
668-
if (suspenseEvent) {
669-
suspenseEvent.duration =
670-
getRelativeTime() - suspenseEvent.timestamp;
671-
suspenseEvent.resolution = 'rejected';
672-
}
638+
if (supportsUserTimingV3) {
639+
markAndClear(`--suspense-resolved-${id}-${componentName}`);
640+
}
641+
},
642+
() => {
643+
if (suspenseEvent) {
644+
suspenseEvent.duration =
645+
getRelativeTime() - suspenseEvent.timestamp;
646+
suspenseEvent.resolution = 'rejected';
647+
}
673648

674-
if (supportsUserTimingV3) {
675-
markAndClear(`--suspense-rejected-${id}-${componentName}`);
676-
}
677-
},
678-
);
649+
if (supportsUserTimingV3) {
650+
markAndClear(`--suspense-rejected-${id}-${componentName}`);
651+
}
652+
},
653+
);
654+
}
679655
}
680656
}
681657

@@ -782,20 +758,18 @@ export function createProfilingHooks({
782758
}
783759

784760
function markForceUpdateScheduled(fiber: Fiber, lane: Lane): void {
785-
if (isProfiling || supportsUserTimingV3) {
761+
if (isProfiling) {
786762
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
787763

788-
if (isProfiling) {
789-
// TODO (timeline) Record and cache component stack
790-
if (currentTimelineData) {
791-
currentTimelineData.schedulingEvents.push({
792-
componentName,
793-
lanes: laneToLanesArray(lane),
794-
timestamp: getRelativeTime(),
795-
type: 'schedule-force-update',
796-
warning: null,
797-
});
798-
}
764+
// TODO (timeline) Record and cache component stack
765+
if (currentTimelineData) {
766+
currentTimelineData.schedulingEvents.push({
767+
componentName,
768+
lanes: laneToLanesArray(lane),
769+
timestamp: getRelativeTime(),
770+
type: 'schedule-force-update',
771+
warning: null,
772+
});
799773
}
800774

801775
if (supportsUserTimingV3) {
@@ -815,25 +789,23 @@ export function createProfilingHooks({
815789
}
816790

817791
function markStateUpdateScheduled(fiber: Fiber, lane: Lane): void {
818-
if (isProfiling || supportsUserTimingV3) {
792+
if (isProfiling) {
819793
const componentName = getDisplayNameForFiber(fiber) || 'Unknown';
820794

821-
if (isProfiling) {
822-
// TODO (timeline) Record and cache component stack
823-
if (currentTimelineData) {
824-
const event: ReactScheduleStateUpdateEvent = {
825-
componentName,
826-
// Store the parent fibers so we can post process
827-
// them after we finish profiling
828-
lanes: laneToLanesArray(lane),
829-
timestamp: getRelativeTime(),
830-
type: 'schedule-state-update',
831-
warning: null,
832-
};
833-
currentFiberStacks.set(event, getParentFibers(fiber));
834-
// $FlowFixMe[incompatible-use] found when upgrading Flow
835-
currentTimelineData.schedulingEvents.push(event);
836-
}
795+
// TODO (timeline) Record and cache component stack
796+
if (currentTimelineData) {
797+
const event: ReactScheduleStateUpdateEvent = {
798+
componentName,
799+
// Store the parent fibers so we can post process
800+
// them after we finish profiling
801+
lanes: laneToLanesArray(lane),
802+
timestamp: getRelativeTime(),
803+
type: 'schedule-state-update',
804+
warning: null,
805+
};
806+
currentFiberStacks.set(event, getParentFibers(fiber));
807+
// $FlowFixMe[incompatible-use] found when upgrading Flow
808+
currentTimelineData.schedulingEvents.push(event);
837809
}
838810

839811
if (supportsUserTimingV3) {

0 commit comments

Comments
 (0)