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>

packages/react-reconciler/src/SchedulingProfiler.js

@@ -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) {

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

@@ -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',