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>
This commit is contained in:
Kartik Choudhary
2020-08-10 14:51:25 +00:00
committed by GitHub
parent 0c52e24cb6
commit 2704bb5374
2 changed files with 54 additions and 10 deletions
+8
View File
@@ -15,6 +15,7 @@ import {
enableSchedulingProfiler,
enableSchedulingProfilerComponentStacks,
} from 'shared/ReactFeatureFlags';
import ReactVersion from 'shared/ReactVersion';
import getComponentName from 'shared/getComponentName';
import {getStackByFiberInDevAndProd} from './ReactFiberComponentStack';
@@ -29,6 +30,13 @@ function formatLanes(laneOrLanes: Lane | Lanes): string {
return ((laneOrLanes: any): number).toString();
}
// Create a mark on React initialization
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
performance.mark(`--react-init-${ReactVersion}`);
}
}
export function markCommitStarted(lanes: Lanes): void {
if (enableSchedulingProfiler) {
if (supportsUserTiming) {
@@ -10,6 +10,8 @@
'use strict';
import ReactVersion from 'shared/ReactVersion';
function normalizeCodeLocInfo(str) {
return (
str &&
@@ -54,6 +56,7 @@ describe('SchedulingProfiler', () => {
beforeEach(() => {
jest.resetModules();
global.performance = createUserTimingPolyfill();
marks = [];
React = require('react');
@@ -62,8 +65,6 @@ describe('SchedulingProfiler', () => {
ReactNoop = require('react-noop-renderer');
Scheduler = require('scheduler');
marks = [];
});
afterEach(() => {
@@ -76,11 +77,17 @@ describe('SchedulingProfiler', () => {
expect(marks).toEqual([]);
});
// @gate enableSchedulingProfiler
it('should log React version on initialization', () => {
expect(marks).toEqual([`--react-init-${ReactVersion}`]);
});
// @gate enableSchedulingProfiler
it('should mark sync render without suspends or state updates', () => {
ReactTestRenderer.create(<div />);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-1',
'--render-start-1',
'--render-stop',
@@ -95,7 +102,10 @@ describe('SchedulingProfiler', () => {
it('should mark concurrent render without suspends or state updates', () => {
ReactTestRenderer.create(<div />, {unstable_isConcurrent: true});
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -128,6 +138,7 @@ describe('SchedulingProfiler', () => {
expect(ReactNoop.flushNextYield()).toEqual(['Foo']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
'--render-start-512',
'--render-yield',
@@ -148,6 +159,7 @@ describe('SchedulingProfiler', () => {
);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-1',
'--render-start-1',
toggleComponentStacks(
@@ -184,6 +196,7 @@ describe('SchedulingProfiler', () => {
);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-1',
'--render-start-1',
toggleComponentStacks(
@@ -220,7 +233,10 @@ describe('SchedulingProfiler', () => {
{unstable_isConcurrent: true},
);
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -262,7 +278,10 @@ describe('SchedulingProfiler', () => {
{unstable_isConcurrent: true},
);
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -304,7 +323,10 @@ describe('SchedulingProfiler', () => {
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -340,7 +362,10 @@ describe('SchedulingProfiler', () => {
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -377,7 +402,10 @@ describe('SchedulingProfiler', () => {
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -414,7 +442,10 @@ describe('SchedulingProfiler', () => {
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -449,7 +480,10 @@ describe('SchedulingProfiler', () => {
ReactTestRenderer.create(<Example />, {unstable_isConcurrent: true});
expect(marks).toEqual(['--schedule-render-512']);
expect(marks).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
]);
marks.splice(0);
@@ -489,6 +523,7 @@ describe('SchedulingProfiler', () => {
gate(({old}) => {
if (old) {
expect(marks.map(normalizeCodeLocInfo)).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
'--render-start-512',
'--render-stop',
@@ -508,6 +543,7 @@ describe('SchedulingProfiler', () => {
]);
} else {
expect(marks.map(normalizeCodeLocInfo)).toEqual([
`--react-init-${ReactVersion}`,
'--schedule-render-512',
'--render-start-512',
'--render-stop',