From 21999ae5989ab33e3e0a1a8b0cfc20158062d1aa Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Tue, 3 Aug 2021 11:08:48 -0400 Subject: [PATCH] Updated test data --- .../__tests__/preprocessData-test.internal.js | 45 +++++++++++++------ .../src/import-worker/preprocessData.js | 4 ++ .../src/ReactFiberThrow.new.js | 6 ++- .../src/ReactFiberThrow.old.js | 6 ++- .../SchedulingProfiler-test.internal.js | 26 +++++++++++ 5 files changed, 71 insertions(+), 16 deletions(-) diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js index bb10bca4d8552..f47200c6f0e21 100644 --- a/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js +++ b/packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js @@ -203,6 +203,7 @@ describe(preprocessData, () => { }); expect(preprocessData([cpuProfilerSample, randomSample])).toStrictEqual({ + componentMeasures: [], duration: 0.002, flamechart: [], measures: [], @@ -259,6 +260,7 @@ describe(preprocessData, () => { }), ]), ).toStrictEqual({ + componentMeasures: [], duration: 0.008, flamechart: [], measures: [ @@ -323,6 +325,7 @@ describe(preprocessData, () => { const userTimingData = createUserTimingData(clearedMarks); expect(preprocessData(userTimingData)).toStrictEqual({ + componentMeasures: [], duration: 0.011, flamechart: [], measures: [ @@ -405,13 +408,27 @@ describe(preprocessData, () => { const userTimingData = createUserTimingData(clearedMarks); expect(preprocessData(userTimingData)).toStrictEqual({ - duration: 0.022, + componentMeasures: [ + { + componentName: 'App', + duration: 0.001, + timestamp: 0.007, + warning: null, + }, + { + componentName: 'App', + duration: 0.0010000000000000009, + timestamp: 0.018, + warning: null, + }, + ], + duration: 0.026, flamechart: [], measures: [ { batchUID: 0, depth: 0, - duration: 0.004999999999999999, + duration: 0.006999999999999999, laneLabels: ['Default'], lanes: [4], timestamp: 0.006, @@ -420,7 +437,7 @@ describe(preprocessData, () => { { batchUID: 0, depth: 0, - duration: 0.001, + duration: 0.002999999999999999, laneLabels: ['Default'], lanes: [4], timestamp: 0.006, @@ -432,7 +449,7 @@ describe(preprocessData, () => { duration: 0.002999999999999999, laneLabels: ['Default'], lanes: [4], - timestamp: 0.008, + timestamp: 0.01, type: 'commit', }, { @@ -441,7 +458,7 @@ describe(preprocessData, () => { duration: 0.0010000000000000009, laneLabels: ['Default'], lanes: [4], - timestamp: 0.009, + timestamp: 0.011, type: 'layout-effects', }, { @@ -450,25 +467,25 @@ describe(preprocessData, () => { duration: 0.002, laneLabels: ['Default'], lanes: [4], - timestamp: 0.012, + timestamp: 0.014, type: 'passive-effects', }, { batchUID: 1, depth: 0, - duration: 0.005000000000000001, + duration: 0.006999999999999999, laneLabels: ['Default'], lanes: [4], - timestamp: 0.015, + timestamp: 0.017, type: 'render-idle', }, { batchUID: 1, depth: 0, - duration: 0.0010000000000000009, + duration: 0.002999999999999999, laneLabels: ['Default'], lanes: [4], - timestamp: 0.015, + timestamp: 0.017, type: 'render', }, { @@ -477,7 +494,7 @@ describe(preprocessData, () => { duration: 0.002999999999999999, laneLabels: ['Default'], lanes: [4], - timestamp: 0.017, + timestamp: 0.021, type: 'commit', }, { @@ -486,7 +503,7 @@ describe(preprocessData, () => { duration: 0.0010000000000000009, laneLabels: ['Default'], lanes: [4], - timestamp: 0.018, + timestamp: 0.022, type: 'layout-effects', }, { @@ -495,7 +512,7 @@ describe(preprocessData, () => { duration: 0.0009999999999999974, laneLabels: ['Default'], lanes: [4], - timestamp: 0.021, + timestamp: 0.025, type: 'passive-effects', }, ], @@ -522,7 +539,7 @@ describe(preprocessData, () => { componentName: 'App', laneLabels: ['Default'], lanes: [4], - timestamp: 0.013, + timestamp: 0.015, type: 'schedule-state-update', warning: null, }, diff --git a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js index 9a08ca5cdf3b8..1f280280d3a0d 100644 --- a/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js +++ b/packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js @@ -245,6 +245,10 @@ function processTimelineEvent( if (name.startsWith('--component-render-start-')) { const [componentName] = name.substr(25).split('-'); + if (state.currentReactComponentMeasure !== null) { + console.error('Render started while another render in progress:', state.currentReactComponentMeasure); + } + state.currentReactComponentMeasure = { componentName, timestamp: startTime, diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js index cfe900de65805..79b0ed6bc39ee 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.new.js +++ b/packages/react-reconciler/src/ReactFiberThrow.new.js @@ -70,7 +70,10 @@ import { import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.new'; import {logCapturedError} from './ReactFiberErrorLogger'; import {logComponentSuspended} from './DebugTracing'; -import {markComponentSuspended} from './SchedulingProfiler'; +import { + markComponentRenderStopped, + markComponentSuspended, +} from './SchedulingProfiler'; import {isDevToolsPresent} from './ReactFiberDevToolsHook.new'; import { SyncLane, @@ -244,6 +247,7 @@ function throwException( } if (enableSchedulingProfiler) { + markComponentRenderStopped(); markComponentSuspended(sourceFiber, wakeable, rootRenderLanes); } diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js index d7f4803620ba4..9c2df828f817e 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.old.js +++ b/packages/react-reconciler/src/ReactFiberThrow.old.js @@ -70,7 +70,10 @@ import { import {propagateParentContextChangesToDeferredTree} from './ReactFiberNewContext.old'; import {logCapturedError} from './ReactFiberErrorLogger'; import {logComponentSuspended} from './DebugTracing'; -import {markComponentSuspended} from './SchedulingProfiler'; +import { + markComponentRenderStopped, + markComponentSuspended, +} from './SchedulingProfiler'; import {isDevToolsPresent} from './ReactFiberDevToolsHook.old'; import { SyncLane, @@ -244,6 +247,7 @@ function throwException( } if (enableSchedulingProfiler) { + markComponentRenderStopped(); markComponentSuspended(sourceFiber, wakeable, rootRenderLanes); } diff --git a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js index 62da05e0e851b..4b496b732a21d 100644 --- a/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js +++ b/packages/react-reconciler/src/__tests__/SchedulingProfiler-test.internal.js @@ -174,6 +174,8 @@ describe('SchedulingProfiler', () => { `--react-init-${ReactVersion}`, `--schedule-render-${formatLanes(ReactFiberLane.TransitionLane1)}`, `--render-start-${formatLanes(ReactFiberLane.TransitionLane1)}`, + '--component-render-start-Foo', + '--component-render-stop', '--render-yield', ]); } else { @@ -208,6 +210,8 @@ describe('SchedulingProfiler', () => { `--react-init-${ReactVersion}`, `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`, `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--suspense-suspend-0-Example-mount-1-Sync', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`, @@ -239,6 +243,8 @@ describe('SchedulingProfiler', () => { `--react-init-${ReactVersion}`, `--schedule-render-${formatLanes(ReactFiberLane.SyncLane)}`, `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--suspense-suspend-0-Example-mount-1-Sync', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`, @@ -278,6 +284,8 @@ describe('SchedulingProfiler', () => { expectMarksToEqual([ `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--suspense-suspend-0-Example-mount-16-Default', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`, @@ -317,6 +325,8 @@ describe('SchedulingProfiler', () => { expectMarksToEqual([ `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--suspense-suspend-0-Example-mount-16-Default', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`, @@ -356,12 +366,16 @@ describe('SchedulingProfiler', () => { expectMarksToEqual([ `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`, `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`, `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`, '--layout-effects-stop', `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`, '--commit-stop', @@ -393,6 +407,8 @@ describe('SchedulingProfiler', () => { expectMarksToEqual([ `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`, `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`, @@ -401,6 +417,8 @@ describe('SchedulingProfiler', () => { )}-Example`, '--layout-effects-stop', `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`, '--commit-stop', @@ -495,12 +513,16 @@ describe('SchedulingProfiler', () => { expectMarksToEqual([ `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`, `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`, `--schedule-state-update-${formatLanes(ReactFiberLane.SyncLane)}-Example`, '--layout-effects-stop', `--render-start-${formatLanes(ReactFiberLane.SyncLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.SyncLane)}`, '--commit-stop', @@ -528,6 +550,8 @@ describe('SchedulingProfiler', () => { `--react-init-${ReactVersion}`, `--schedule-render-${formatLanes(ReactFiberLane.DefaultLane)}`, `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`, `--layout-effects-start-${formatLanes(ReactFiberLane.DefaultLane)}`, @@ -539,6 +563,8 @@ describe('SchedulingProfiler', () => { )}-Example`, '--passive-effects-stop', `--render-start-${formatLanes(ReactFiberLane.DefaultLane)}`, + '--component-render-start-Example', + '--component-render-stop', '--render-stop', `--commit-start-${formatLanes(ReactFiberLane.DefaultLane)}`, '--commit-stop',