Skip to content

Commit b9ec735

Browse files
hoxyqhoxyq
authored
[Perf Tracks]: Clear potentially large measures (#34803)
Fixes #34770. We need to clear measures at some point, otherwise all these copies of props that we end up recording will allocate too much memory in Chromium. This adds `performance.clearMeasures(...)` calls to such cases in DEV. Validated that entries are still shown on Performance panel timeline.
1 parent 47905a7 commit b9ec735

File tree

2 files changed

+48
-18
lines changed

2 files changed

+48
-18
lines changed

‎packages/react-client/src/ReactFlightPerformanceTrack.js‎

Lines changed: 27 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ export function logComponentRender(
102102
const entryName =
103103
isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
104104
const debugTask = componentInfo.debugTask;
105+
const measureName = '\u200b' + entryName;
105106
if (__DEV__ && debugTask) {
106107
const properties: Array<[string, string]> = [];
107108
if (componentInfo.key != null) {
@@ -110,9 +111,10 @@ export function logComponentRender(
110111
if (componentInfo.props != null) {
111112
addObjectToProperties(componentInfo.props, properties, 0, '');
112113
}
114+
113115
debugTask.run(
114116
// $FlowFixMe[method-unbinding]
115-
performance.measure.bind(performance, '\u200b' + entryName, {
117+
performance.measure.bind(performance, measureName, {
116118
start: startTime < 0 ? 0 : startTime,
117119
end: childrenEndTime,
118120
detail: {
@@ -125,9 +127,10 @@ export function logComponentRender(
125127
},
126128
}),
127129
);
130+
performance.clearMeasures(measureName);
128131
} else {
129132
console.timeStamp(
130-
'\u200b' + entryName,
133+
measureName,
131134
startTime < 0 ? 0 : startTime,
132135
childrenEndTime,
133136
trackNames[trackIdx],
@@ -152,6 +155,7 @@ export function logComponentAborted(
152155
const isPrimaryEnv = env === rootEnv;
153156
const entryName =
154157
isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
158+
const measureName = '\u200b' + entryName;
155159
if (__DEV__) {
156160
const properties: Array<[string, string]> = [
157161
[
@@ -165,7 +169,8 @@ export function logComponentAborted(
165169
if (componentInfo.props != null) {
166170
addObjectToProperties(componentInfo.props, properties, 0, '');
167171
}
168-
performance.measure('\u200b' + entryName, {
172+
173+
performance.measure(measureName, {
169174
start: startTime < 0 ? 0 : startTime,
170175
end: childrenEndTime,
171176
detail: {
@@ -178,9 +183,10 @@ export function logComponentAborted(
178183
},
179184
},
180185
});
186+
performance.clearMeasures(measureName);
181187
} else {
182188
console.timeStamp(
183-
entryName,
189+
measureName,
184190
startTime < 0 ? 0 : startTime,
185191
childrenEndTime,
186192
trackNames[trackIdx],
@@ -206,6 +212,7 @@ export function logComponentErrored(
206212
const isPrimaryEnv = env === rootEnv;
207213
const entryName =
208214
isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
215+
const measureName = '\u200b' + entryName;
209216
if (__DEV__) {
210217
const message =
211218
typeof error === 'object' &&
@@ -222,7 +229,8 @@ export function logComponentErrored(
222229
if (componentInfo.props != null) {
223230
addObjectToProperties(componentInfo.props, properties, 0, '');
224231
}
225-
performance.measure('\u200b' + entryName, {
232+
233+
performance.measure(measureName, {
226234
start: startTime < 0 ? 0 : startTime,
227235
end: childrenEndTime,
228236
detail: {
@@ -235,9 +243,10 @@ export function logComponentErrored(
235243
},
236244
},
237245
});
246+
performance.clearMeasures(measureName);
238247
} else {
239248
console.timeStamp(
240-
entryName,
249+
measureName,
241250
startTime < 0 ? 0 : startTime,
242251
childrenEndTime,
243252
trackNames[trackIdx],
@@ -397,6 +406,7 @@ export function logComponentAwaitAborted(
397406
},
398407
}),
399408
);
409+
performance.clearMeasures(entryName);
400410
} else {
401411
console.timeStamp(
402412
entryName,
@@ -453,6 +463,7 @@ export function logComponentAwaitErrored(
453463
},
454464
}),
455465
);
466+
performance.clearMeasures(entryName);
456467
} else {
457468
console.timeStamp(
458469
entryName,
@@ -514,6 +525,7 @@ export function logComponentAwait(
514525
},
515526
}),
516527
);
528+
performance.clearMeasures(entryName);
517529
} else {
518530
console.timeStamp(
519531
entryName,
@@ -538,6 +550,7 @@ export function logIOInfoErrored(
538550
const description = getIODescription(error);
539551
const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv);
540552
const debugTask = ioInfo.debugTask;
553+
const measureName = '\u200b' + entryName;
541554
if (__DEV__ && debugTask) {
542555
const message =
543556
typeof error === 'object' &&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
const properties = [['rejected with', message]];
551564
const tooltipText =
552565
getIOLongName(ioInfo, description, ioInfo.env, rootEnv) + ' Rejected';
566+
553567
debugTask.run(
554568
// $FlowFixMe[method-unbinding]
555-
performance.measure.bind(performance, '\u200b' + entryName, {
569+
performance.measure.bind(performance, measureName, {
556570
start: startTime < 0 ? 0 : startTime,
557571
end: endTime,
558572
detail: {
@@ -565,9 +579,10 @@ export function logIOInfoErrored(
565579
},
566580
}),
567581
);
582+
performance.clearMeasures(measureName);
568583
} else {
569584
console.timeStamp(
570-
entryName,
585+
measureName,
571586
startTime < 0 ? 0 : startTime,
572587
endTime,
573588
IO_TRACK,
@@ -590,6 +605,7 @@ export function logIOInfo(
590605
const entryName = getIOShortName(ioInfo, description, ioInfo.env, rootEnv);
591606
const color = getIOColor(entryName);
592607
const debugTask = ioInfo.debugTask;
608+
const measureName = '\u200b' + entryName;
593609
if (__DEV__ && debugTask) {
594610
const properties: Array<[string, string]> = [];
595611
if (typeof value === 'object' && value !== null) {
@@ -605,7 +621,7 @@ export function logIOInfo(
605621
);
606622
debugTask.run(
607623
// $FlowFixMe[method-unbinding]
608-
performance.measure.bind(performance, '\u200b' + entryName, {
624+
performance.measure.bind(performance, measureName, {
609625
start: startTime < 0 ? 0 : startTime,
610626
end: endTime,
611627
detail: {
@@ -618,9 +634,10 @@ export function logIOInfo(
618634
},
619635
}),
620636
);
637+
performance.clearMeasures(measureName);
621638
} else {
622639
console.timeStamp(
623-
entryName,
640+
measureName,
624641
startTime < 0 ? 0 : startTime,
625642
endTime,
626643
IO_TRACK,

‎packages/react-reconciler/src/ReactFiberPerformanceTrack.js‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -133,6 +133,7 @@ function logComponentTrigger(
133133
} else {
134134
performance.measure(trigger, reusableComponentOptions);
135135
}
136+
performance.clearMeasures(trigger);
136137
}
137138
}
138139

@@ -200,7 +201,7 @@ const reusableComponentOptions: PerformanceMeasureOptions = {
200201
},
201202
};
202203

203-
const resuableChangedPropsEntry = ['Changed Props', ''];
204+
const reusableChangedPropsEntry = ['Changed Props', ''];
204205

205206
const DEEP_EQUALITY_WARNING =
206207
'This component received deeply equal props. It might benefit from useMemo or the React Compiler in its owner.';
@@ -261,7 +262,7 @@ export function logComponentRender(
261262
alternate.memoizedProps !== props
262263
) {
263264
// If this is an update, we'll diff the props and emit which ones changed.
264-
const properties: Array<[string, string]> = [resuableChangedPropsEntry];
265+
const properties: Array<[string, string]> = [reusableChangedPropsEntry];
265266
const isDeeplyEqual = addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start = startTime;
294295
reusableComponentOptions.end = endTime;
295296

297+
const measureName = '\u200b' + name;
296298
if (debugTask != null) {
297299
debugTask.run(
298300
// $FlowFixMe[method-unbinding]
299301
performance.measure.bind(
300302
performance,
301-
'\u200b' + name,
303+
measureName,
302304
reusableComponentOptions,
303305
),
304306
);
305307
} else {
306-
performance.measure('\u200b' + name, reusableComponentOptions);
308+
performance.measure(measureName, reusableComponentOptions);
307309
}
310+
performance.clearMeasures(measureName);
308311
} else {
309312
if (debugTask != null) {
310313
debugTask.run(
@@ -421,14 +424,17 @@ export function logComponentErrored(
421424
},
422425
},
423426
};
427+
428+
const measureName = '\u200b' + name;
424429
if (__DEV__ && debugTask) {
425430
debugTask.run(
426431
// $FlowFixMe[method-unbinding]
427-
performance.measure.bind(performance, '\u200b' + name, options),
432+
performance.measure.bind(performance, measureName, options),
428433
);
429434
} else {
430-
performance.measure('\u200b' + name, options);
435+
performance.measure(measureName, options);
431436
}
437+
performance.clearMeasures(measureName);
432438
} else {
433439
console.timeStamp(
434440
name,
@@ -488,14 +494,16 @@ function logComponentEffectErrored(
488494
},
489495
};
490496
const debugTask = fiber._debugTask;
497+
const measureName = '\u200b' + name;
491498
if (debugTask) {
492499
debugTask.run(
493500
// $FlowFixMe[method-unbinding]
494-
performance.measure.bind(performance, '\u200b' + name, options),
501+
performance.measure.bind(performance, measureName, options),
495502
);
496503
} else {
497-
performance.measure('\u200b' + name, options);
504+
performance.measure(measureName, options);
498505
}
506+
performance.clearMeasures(measureName);
499507
} else {
500508
console.timeStamp(
501509
name,
@@ -762,6 +770,7 @@ export function logBlockingStart(
762770
} else {
763771
performance.measure(label, measureOptions);
764772
}
773+
performance.clearMeasures(label);
765774
} else {
766775
console.timeStamp(
767776
label,
@@ -867,6 +876,7 @@ export function logGestureStart(
867876
} else {
868877
performance.measure(label, measureOptions);
869878
}
879+
performance.clearMeasures(label);
870880
} else {
871881
console.timeStamp(
872882
label,
@@ -1007,6 +1017,7 @@ export function logTransitionStart(
10071017
} else {
10081018
performance.measure(label, measureOptions);
10091019
}
1020+
performance.clearMeasures(label);
10101021
} else {
10111022
console.timeStamp(
10121023
label,
@@ -1238,6 +1249,7 @@ export function logRecoveredRenderPhase(
12381249
} else {
12391250
performance.measure('Recovered', options);
12401251
}
1252+
performance.clearMeasures('Recovered');
12411253
} else {
12421254
console.timeStamp(
12431255
'Recovered',
@@ -1449,6 +1461,7 @@ export function logCommitErrored(
14491461
} else {
14501462
performance.measure('Errored', options);
14511463
}
1464+
performance.clearMeasures('Errored');
14521465
} else {
14531466
console.timeStamp(
14541467
'Errored',

0 commit comments

Comments
 (0)