Skip to content

Commit a657a3a

Browse files
sebmarkbagesebmarkbage
committed
Run console.timeStamp/performance.measure calls inside console.createTask
This ensures that we can get the owner stack of the currently rendering component when it emits its profiling information.
1 parent 887e0e0 commit a657a3a

File tree

2 files changed

+166
-52
lines changed

2 files changed

+166
-52
lines changed

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

Lines changed: 48 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -78,14 +78,30 @@ export function logComponentRender(
7878
: 'error';
7979
const entryName =
8080
isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
81-
console.timeStamp(
82-
entryName,
83-
startTime < 0 ? 0 : startTime,
84-
childrenEndTime,
85-
trackNames[trackIdx],
86-
COMPONENTS_TRACK,
87-
color,
88-
);
81+
const debugTask = componentInfo.debugTask;
82+
if (__DEV__ && debugTask) {
83+
debugTask.run(
84+
// $FlowFixMe[method-unbinding]
85+
console.timeStamp.bind(
86+
console,
87+
entryName,
88+
startTime < 0 ? 0 : startTime,
89+
childrenEndTime,
90+
trackNames[trackIdx],
91+
COMPONENTS_TRACK,
92+
color,
93+
),
94+
);
95+
} else {
96+
console.timeStamp(
97+
entryName,
98+
startTime < 0 ? 0 : startTime,
99+
childrenEndTime,
100+
trackNames[trackIdx],
101+
COMPONENTS_TRACK,
102+
color,
103+
);
104+
}
89105
}
90106
}
91107

@@ -154,13 +170,29 @@ export function logDedupedComponentRender(
154170
if (supportsUserTiming && endTime >= 0 && trackIdx < 10) {
155171
const name = componentInfo.name;
156172
const entryName = name + ' [deduped]';
157-
console.timeStamp(
158-
entryName,
159-
startTime < 0 ? 0 : startTime,
160-
endTime,
161-
trackNames[trackIdx],
162-
COMPONENTS_TRACK,
163-
'tertiary-light',
164-
);
173+
const debugTask = componentInfo.debugTask;
174+
if (__DEV__ && debugTask) {
175+
debugTask.run(
176+
// $FlowFixMe[method-unbinding]
177+
console.timeStamp.bind(
178+
console,
179+
entryName,
180+
startTime < 0 ? 0 : startTime,
181+
endTime,
182+
trackNames[trackIdx],
183+
COMPONENTS_TRACK,
184+
'tertiary-light',
185+
),
186+
);
187+
} else {
188+
console.timeStamp(
189+
entryName,
190+
startTime < 0 ? 0 : startTime,
191+
endTime,
192+
trackNames[trackIdx],
193+
COMPONENTS_TRACK,
194+
'tertiary-light',
195+
);
196+
}
165197
}
166198
}

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

Lines changed: 118 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -174,14 +174,30 @@ export function logComponentRender(
174174
? 'tertiary-dark'
175175
: 'primary-dark'
176176
: 'error';
177-
console.timeStamp(
178-
name,
179-
startTime,
180-
endTime,
181-
COMPONENTS_TRACK,
182-
undefined,
183-
color,
184-
);
177+
const debugTask = fiber._debugTask;
178+
if (__DEV__ && debugTask) {
179+
debugTask.run(
180+
// $FlowFixMe[method-unbinding]
181+
console.timeStamp.bind(
182+
console,
183+
name,
184+
startTime,
185+
endTime,
186+
COMPONENTS_TRACK,
187+
undefined,
188+
color,
189+
),
190+
);
191+
} else {
192+
console.timeStamp(
193+
name,
194+
startTime,
195+
endTime,
196+
COMPONENTS_TRACK,
197+
undefined,
198+
color,
199+
);
200+
}
185201
}
186202
}
187203

@@ -217,7 +233,7 @@ export function logComponentErrored(
217233
String(error);
218234
properties.push(['Error', message]);
219235
}
220-
performance.measure(name, {
236+
const options = {
221237
start: startTime,
222238
end: endTime,
223239
detail: {
@@ -231,7 +247,16 @@ export function logComponentErrored(
231247
properties,
232248
},
233249
},
234-
});
250+
};
251+
const debugTask = fiber._debugTask;
252+
if (__DEV__ && debugTask) {
253+
debugTask.run(
254+
// $FlowFixMe[method-unbinding]
255+
performance.measure.bind(performance, name, options),
256+
);
257+
} else {
258+
performance.measure(name, options);
259+
}
235260
} else {
236261
console.timeStamp(
237262
name,
@@ -277,7 +302,7 @@ function logComponentEffectErrored(
277302
String(error);
278303
properties.push(['Error', message]);
279304
}
280-
performance.measure(name, {
305+
const options = {
281306
start: startTime,
282307
end: endTime,
283308
detail: {
@@ -288,7 +313,16 @@ function logComponentEffectErrored(
288313
properties,
289314
},
290315
},
291-
});
316+
};
317+
const debugTask = fiber._debugTask;
318+
if (debugTask) {
319+
debugTask.run(
320+
// $FlowFixMe[method-unbinding]
321+
performance.measure.bind(performance, name, options),
322+
);
323+
} else {
324+
performance.measure(name, options);
325+
}
292326
} else {
293327
console.timeStamp(
294328
name,
@@ -327,14 +361,30 @@ export function logComponentEffect(
327361
: selfTime < 500
328362
? 'secondary-dark'
329363
: 'error';
330-
console.timeStamp(
331-
name,
332-
startTime,
333-
endTime,
334-
COMPONENTS_TRACK,
335-
undefined,
336-
color,
337-
);
364+
const debugTask = fiber._debugTask;
365+
if (__DEV__ && debugTask) {
366+
debugTask.run(
367+
// $FlowFixMe[method-unbinding]
368+
console.timeStamp.bind(
369+
console,
370+
name,
371+
startTime,
372+
endTime,
373+
COMPONENTS_TRACK,
374+
undefined,
375+
color,
376+
),
377+
);
378+
} else {
379+
console.timeStamp(
380+
name,
381+
startTime,
382+
endTime,
383+
COMPONENTS_TRACK,
384+
undefined,
385+
color,
386+
);
387+
}
338388
}
339389
}
340390

@@ -375,14 +425,30 @@ export function logSuspendedYieldTime(
375425
suspendedFiber: Fiber,
376426
): void {
377427
if (supportsUserTiming) {
378-
console.timeStamp(
379-
'Suspended',
380-
startTime,
381-
endTime,
382-
COMPONENTS_TRACK,
383-
undefined,
384-
'primary-light',
385-
);
428+
const debugTask = suspendedFiber._debugTask;
429+
if (__DEV__ && debugTask) {
430+
debugTask.run(
431+
// $FlowFixMe[method-unbinding]
432+
console.timeStamp.bind(
433+
console,
434+
'Suspended',
435+
startTime,
436+
endTime,
437+
COMPONENTS_TRACK,
438+
undefined,
439+
'primary-light',
440+
),
441+
);
442+
} else {
443+
console.timeStamp(
444+
'Suspended',
445+
startTime,
446+
endTime,
447+
COMPONENTS_TRACK,
448+
undefined,
449+
'primary-light',
450+
);
451+
}
386452
}
387453
}
388454

@@ -392,14 +458,30 @@ export function logActionYieldTime(
392458
suspendedFiber: Fiber,
393459
): void {
394460
if (supportsUserTiming) {
395-
console.timeStamp(
396-
'Action',
397-
startTime,
398-
endTime,
399-
COMPONENTS_TRACK,
400-
undefined,
401-
'primary-light',
402-
);
461+
const debugTask = suspendedFiber._debugTask;
462+
if (__DEV__ && debugTask) {
463+
debugTask.run(
464+
// $FlowFixMe[method-unbinding]
465+
console.timeStamp.bind(
466+
console,
467+
'Action',
468+
startTime,
469+
endTime,
470+
COMPONENTS_TRACK,
471+
undefined,
472+
'primary-light',
473+
),
474+
);
475+
} else {
476+
console.timeStamp(
477+
'Action',
478+
startTime,
479+
endTime,
480+
COMPONENTS_TRACK,
481+
undefined,
482+
'primary-light',
483+
);
484+
}
403485
}
404486
}
405487

0 commit comments

Comments
 (0)