Skip to content

Commit 12721fe

Browse files
hoxyqhoxyq
committed
devtools: emit performance entries only when profiling
1 parent 9406162 commit 12721fe

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)