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

2 files changed

Lines changed: 48 additions & 18 deletions

File tree

‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

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
2 files changed
Lines changed: 48 additions & 18 deletions
File tree
‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
2 files changed
Lines changed: 48 additions & 18 deletions
File tree
‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
2 files changed
Lines changed: 48 additions & 18 deletions
File tree
‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

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
2 files changed
Lines changed: 48 additions & 18 deletions
File tree
‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
2 files changed
Lines changed: 48 additions & 18 deletions
File tree
‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

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
2 files changed
Lines changed: 48 additions & 18 deletions
File tree
‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

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
2 files changed
Lines changed: 48 additions & 18 deletions
File tree
‎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
constentryName=
103103
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
104104
constdebugTask=componentInfo.debugTask;
105+
constmeasureName='\u200b'+entryName;
105106
if(__DEV__&&debugTask){
106107
constproperties: 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
constisPrimaryEnv=env===rootEnv;
153156
constentryName=
154157
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
158+
constmeasureName='\u200b'+entryName;
155159
if(__DEV__){
156160
constproperties: 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
constisPrimaryEnv=env===rootEnv;
207213
constentryName=
208214
isPrimaryEnv||env===undefined ? name : name+' ['+env+']';
215+
constmeasureName='\u200b'+entryName;
209216
if(__DEV__){
210217
constmessage=
211218
typeoferror==='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
constdescription=getIODescription(error);
539551
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
540552
constdebugTask=ioInfo.debugTask;
553+
constmeasureName='\u200b'+entryName;
541554
if(__DEV__&&debugTask){
542555
constmessage=
543556
typeoferror==='object'&&
@@ -550,9 +563,10 @@ export function logIOInfoErrored(
550563
constproperties=[['rejected with',message]];
551564
consttooltipText=
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
constentryName=getIOShortName(ioInfo,description,ioInfo.env,rootEnv);
591606
constcolor=getIOColor(entryName);
592607
constdebugTask=ioInfo.debugTask;
608+
constmeasureName='\u200b'+entryName;
593609
if(__DEV__&&debugTask){
594610
constproperties: Array<[string,string]>=[];
595611
if(typeofvalue==='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-
constresuableChangedPropsEntry=['Changed Props',''];
204+
constreusableChangedPropsEntry=['Changed Props',''];
204205

205206
constDEEP_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-
constproperties: Array<[string,string]>=[resuableChangedPropsEntry];
265+
constproperties: Array<[string,string]>=[reusableChangedPropsEntry];
265266
constisDeeplyEqual=addObjectDiffToProperties(
266267
alternate.memoizedProps,
267268
props,
@@ -293,18 +294,20 @@ export function logComponentRender(
293294
reusableComponentOptions.start=startTime;
294295
reusableComponentOptions.end=endTime;
295296

297+
constmeasureName='\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+
constmeasureName='\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
constdebugTask=fiber._debugTask;
497+
constmeasureName='\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)