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>

Author: kartikcho

packages/react-reconciler/src/SchedulingProfiler.js

@@ -15,6 +15,7 @@ import {
 enableSchedulingProfiler,
 enableSchedulingProfilerComponentStacks,
 }from'shared/ReactFeatureFlags';
+importReactVersionfrom'shared/ReactVersion';
 importgetComponentNamefrom'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}`);
+}
+}
+
 exportfunctionmarkCommitStarted(lanes: Lanes): void{
 if(enableSchedulingProfiler){
 if(supportsUserTiming){

packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js

@@ -10,6 +10,8 @@
 
 'use strict';
 
+importReactVersionfrom'shared/ReactVersion';
+
 functionnormalizeCodeLocInfo(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',