Add ReactVersion to SchedulingProfiler render scheduled marks (#19553)
* Add ReactVersion to SchedulingProfiler render scheduled marks * Move ReactVersion to a new --react-init-* mark Co-authored-by: E-Liang Tan <eliang@eliangtan.com>
Kartik Choudhary committed
Aug 10, 2020 at 14:51 UTC
2704bb5374e52ed548db96df2d975dae42158dfb
2 files changed
+54
-10
packages/react-reconciler/src/SchedulingProfiler.js
+8
@@ -15,6 +15,7 @@ import {
15
enableSchedulingProfiler,
16
enableSchedulingProfilerComponentStacks,
17
} from 'shared/ReactFeatureFlags';
18
+import ReactVersion from 'shared/ReactVersion';
19
import getComponentName from 'shared/getComponentName';
20
import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
21
@@ -29,6 +30,13 @@ function formatLanes(laneOrLanes: Lane | Lanes): string {
30
return ((laneOrLanes: any): number).toString();
31
}
32
33
+// Create a mark on React initialization
34
+if (enableSchedulingProfiler) {
35
+ if (supportsUserTiming) {
36
+ performance.mark(`--react-init-${ReactVersion}`);
37
+ }
38
+}
39
+
40
export function markCommitStarted(lanes: Lanes): void {
41
if (enableSchedulingProfiler) {
42
if (supportsUserTiming) {
packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js
+46
-10
@@ -10,6 +10,8 @@
10
11
'use strict';
12
13
+import ReactVersion from 'shared/ReactVersion';
14
+
15
function normalizeCodeLocInfo(str) {
16
return (
17
str &&
@@ -54,6 +56,7 @@ describe('SchedulingProfiler', () => {
56
beforeEach(() => {
57
jest.resetModules();
58
global.performance = createUserTimingPolyfill();
59
+ marks = [];
60
61
React = require('react');
62
@@ -62,8 +65,6 @@ describe('SchedulingProfiler', () => {
65
ReactNoop = require('react-noop-renderer');
66
67
Scheduler = require('scheduler');
65
-
66
- marks = [];
68
});
69
70
afterEach(() => {
@@ -76,11 +77,17 @@ describe('SchedulingProfiler', () => {
77
expect(marks).toEqual([]);
78
});
79
80
+ // @gate enableSchedulingProfiler
81
+ it('should log React version on initialization', () => {
82
+ expect(marks).toEqual([`--react-init-${ReactVersion}`]);
83
+ });
84
+
85
// @gate enableSchedulingProfiler
86
it('should mark sync render without suspends or state updates', () => {
87
ReactTestRenderer.create(<div />);
88
89
expect(marks).toEqual([
90
+ `--react-init-${ReactVersion}`,
91
'--schedule-render-1',
92
'--render-start-1',
93
'--render-stop',
@@ -95,7 +102,10 @@ describe('SchedulingProfiler', () => {
102
it('should mark concurrent render without suspends or state updates', () => {
103
ReactTestRenderer.create(<div />, {unstable_isConcurrent: true});
104
98
- expect(marks).toEqual(['--schedule-render-512']);
105
+ expect(marks).toEqual([
106
+ `--react-init-${ReactVersion}`,
107
+ '--schedule-render-512',
108
+ ]);
109
110
marks.splice(0);
111
@@ -128,6 +138,7 @@ describe('SchedulingProfiler', () => {
138
expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
139
140
expect(marks).toEqual([
141
+ `--react-init-${ReactVersion}`,
142
'--schedule-render-512',
143
'--render-start-512',
144
'--render-yield',
@@ -148,6 +159,7 @@ describe('SchedulingProfiler', () => {
159
);
160
161
expect(marks).toEqual([
162
+ `--react-init-${ReactVersion}`,
163
'--schedule-render-1',
164
'--render-start-1',
165
toggleComponentStacks(
@@ -184,6 +196,7 @@ describe('SchedulingProfiler', () => {
196
);
197
198
expect(marks).toEqual([
199
+ `--react-init-${ReactVersion}`,
200
'--schedule-render-1',
201
'--render-start-1',
202
toggleComponentStacks(
@@ -220,7 +233,10 @@ describe('SchedulingProfiler', () => {
233
{unstable_isConcurrent: true},
234
);
235
223
- expect(marks).toEqual(['--schedule-render-512']);
236
+ expect(marks).toEqual([
237
+ `--react-init-${ReactVersion}`,
238
+ '--schedule-render-512',
239
+ ]);
240
241
marks.splice(0);
242
@@ -262,7 +278,10 @@ describe('SchedulingProfiler', () => {
278
{unstable_isConcurrent: true},
279
);
280
265
- expect(marks).toEqual(['--schedule-render-512']);
281
+ expect(marks).toEqual([
282
+ `--react-init-${ReactVersion}`,
283
+ '--schedule-render-512',
284
+ ]);
285
286
marks.splice(0);
287
@@ -304,7 +323,10 @@ describe('SchedulingProfiler', () => {
323
324
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
325
307
- expect(marks).toEqual(['--schedule-render-512']);
326
+ expect(marks).toEqual([
327
+ `--react-init-${ReactVersion}`,
328
+ '--schedule-render-512',
329
+ ]);
330
331
marks.splice(0);
332
@@ -340,7 +362,10 @@ describe('SchedulingProfiler', () => {
362
363
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
364
343
- expect(marks).toEqual(['--schedule-render-512']);
365
+ expect(marks).toEqual([
366
+ `--react-init-${ReactVersion}`,
367
+ '--schedule-render-512',
368
+ ]);
369
370
marks.splice(0);
371
@@ -377,7 +402,10 @@ describe('SchedulingProfiler', () => {
402
403
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
404
380
- expect(marks).toEqual(['--schedule-render-512']);
405
+ expect(marks).toEqual([
406
+ `--react-init-${ReactVersion}`,
407
+ '--schedule-render-512',
408
+ ]);
409
410
marks.splice(0);
411
@@ -414,7 +442,10 @@ describe('SchedulingProfiler', () => {
442
443
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
444
417
- expect(marks).toEqual(['--schedule-render-512']);
445
+ expect(marks).toEqual([
446
+ `--react-init-${ReactVersion}`,
447
+ '--schedule-render-512',
448
+ ]);
449
450
marks.splice(0);
451
@@ -449,7 +480,10 @@ describe('SchedulingProfiler', () => {
480
481
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
482
452
- expect(marks).toEqual(['--schedule-render-512']);
483
+ expect(marks).toEqual([
484
+ `--react-init-${ReactVersion}`,
485
+ '--schedule-render-512',
486
+ ]);
487
488
marks.splice(0);
489
@@ -489,6 +523,7 @@ describe('SchedulingProfiler', () => {
523
gate(({old}) => {
524
if (old) {
525
expect(marks.map(normalizeCodeLocInfo)).toEqual([
526
+ `--react-init-${ReactVersion}`,
527
'--schedule-render-512',
528
'--render-start-512',
529
'--render-stop',
@@ -508,6 +543,7 @@ describe('SchedulingProfiler', () => {
543
]);
544
} else {
545
expect(marks.map(normalizeCodeLocInfo)).toEqual([
546
+ `--react-init-${ReactVersion}`,
547
'--schedule-render-512',
548
'--render-start-512',
549
'--render-stop',