[DevTools][Profile Event Parents] Added a stack of of component owners

You now get some idea of the context of a component that causes a state change, with a sidebar listing the component's hierarchy. This additionally allows user to click on components to link to their source code. resolves #24170
facebook · Jun 17, 2022 · b42f6db · b42f6db
1 parent 229c86a
commit b42f6db
Show file tree

Hide file tree

Showing 16 changed files with 432 additions and 91 deletions.
diff --git a/packages/react-devtools-extensions/webpack.backend.js b/packages/react-devtools-extensions/webpack.backend.js
@@ -69,6 +69,7 @@ module.exports = {
  new DefinePlugin({
  __DEV__: true,
  __PROFILE__: false,
+ __EXPERIMENTAL__: true,
  __DEV____DEV__: true,
  'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
  'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,

diff --git a/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js b/packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
@@ -1257,27 +1257,43 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000000000100",
+ "parents": Array [
+ 2,
+ 1,
+ ],
  "timestamp": 10,
  "type": "schedule-state-update",
  "warning": null,
  },
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000001000000",
+ "parents": Array [
+ 2,
+ 1,
+ ],
  "timestamp": 10,
  "type": "schedule-state-update",
  "warning": null,
  },
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000001000000",
+ "parents": Array [
+ 2,
+ 1,
+ ],
  "timestamp": 10,
  "type": "schedule-state-update",
  "warning": null,
  },
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000000010000",
+ "parents": Array [
+ 2,
+ 1,
+ ],
  "timestamp": 10,
  "type": "schedule-state-update",
  "warning": null,
@@ -1615,6 +1631,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000000000001",
+ "parents": Array [
+ 1,
+ 2,
+ ],
  "timestamp": 20,
  "type": "schedule-state-update",
  "warning": null,
@@ -1742,6 +1762,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000000010000",
+ "parents": Array [
+ 1,
+ 2,
+ ],
  "timestamp": 10,
  "type": "schedule-state-update",
  "warning": null,
@@ -1873,6 +1897,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000000000001",
+ "parents": Array [
+ 1,
+ 2,
+ ],
  "timestamp": 21,
  "type": "schedule-state-update",
  "warning": null,
@@ -1935,6 +1963,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000000010000",
+ "parents": Array [
+ 2,
+ 1,
+ ],
  "timestamp": 21,
  "type": "schedule-state-update",
  "warning": null,
@@ -1983,6 +2015,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "Example",
  "lanes": "0b0000000000000000000000000010000",
+ "parents": Array [
+ 1,
+ 2,
+ ],
  "timestamp": 20,
  "type": "schedule-state-update",
  "warning": null,
@@ -2066,6 +2102,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "ErrorBoundary",
  "lanes": "0b0000000000000000000000000000001",
+ "parents": Array [
+ 1,
+ 2,
+ ],
  "timestamp": 20,
  "type": "schedule-state-update",
  "warning": null,
@@ -2178,6 +2218,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "ErrorBoundary",
  "lanes": "0b0000000000000000000000000000001",
+ "parents": Array [
+ 1,
+ 2,
+ ],
  "timestamp": 30,
  "type": "schedule-state-update",
  "warning": null,

diff --git a/packages/react-devtools-shared/src/__tests__/preprocessData-test.js b/packages/react-devtools-shared/src/__tests__/preprocessData-test.js
@@ -325,90 +325,91 @@ describe('Timeline profiler', () => {
  randomSample,
  ]);
  expect(data).toMatchInlineSnapshot(`
- Object {
- "batchUIDToMeasuresMap": Map {},
- "componentMeasures": Array [],
- "duration": 0.005,
- "flamechart": Array [],
- "internalModuleSourceToRanges": Map {},
- "laneToLabelMap": Map {
- 0 => "Sync",
- 1 => "InputContinuousHydration",
- 2 => "InputContinuous",
- 3 => "DefaultHydration",
- 4 => "Default",
- 5 => "TransitionHydration",
- 6 => "Transition",
- 7 => "Transition",
- 8 => "Transition",
- 9 => "Transition",
- 10 => "Transition",
- 11 => "Transition",
- 12 => "Transition",
- 13 => "Transition",
- 14 => "Transition",
- 15 => "Transition",
- 16 => "Transition",
- 17 => "Transition",
- 18 => "Transition",
- 19 => "Transition",
- 20 => "Transition",
- 21 => "Transition",
- 22 => "Retry",
- 23 => "Retry",
- 24 => "Retry",
- 25 => "Retry",
- 26 => "Retry",
- 27 => "SelectiveHydration",
- 28 => "IdleHydration",
- 29 => "Idle",
- 30 => "Offscreen",
- },
- "laneToReactMeasureMap": Map {
- 0 => Array [],
- 1 => Array [],
- 2 => Array [],
- 3 => Array [],
- 4 => Array [],
- 5 => Array [],
- 6 => Array [],
- 7 => Array [],
- 8 => Array [],
- 9 => Array [],
- 10 => Array [],
- 11 => Array [],
- 12 => Array [],
- 13 => Array [],
- 14 => Array [],
- 15 => Array [],
- 16 => Array [],
- 17 => Array [],
- 18 => Array [],
- 19 => Array [],
- 20 => Array [],
- 21 => Array [],
- 22 => Array [],
- 23 => Array [],
- 24 => Array [],
- 25 => Array [],
- 26 => Array [],
- 27 => Array [],
- 28 => Array [],
- 29 => Array [],
- 30 => Array [],
- },
- "nativeEvents": Array [],
- "networkMeasures": Array [],
- "otherUserTimingMarks": Array [],
- "reactVersion": "<filtered-version>",
- "schedulingEvents": Array [],
- "snapshotHeight": 0,
- "snapshots": Array [],
- "startTime": 1,
- "suspenseEvents": Array [],
- "thrownErrors": Array [],
- }
- `);
+ Object {
+ "batchUIDToMeasuresMap": Map {},
+ "componentDisplayNames": Map {},
+ "componentMeasures": Array [],
+ "duration": 0.005,
+ "flamechart": Array [],
+ "internalModuleSourceToRanges": Map {},
+ "laneToLabelMap": Map {
+ 0 => "Sync",
+ 1 => "InputContinuousHydration",
+ 2 => "InputContinuous",
+ 3 => "DefaultHydration",
+ 4 => "Default",
+ 5 => "TransitionHydration",
+ 6 => "Transition",
+ 7 => "Transition",
+ 8 => "Transition",
+ 9 => "Transition",
+ 10 => "Transition",
+ 11 => "Transition",
+ 12 => "Transition",
+ 13 => "Transition",
+ 14 => "Transition",
+ 15 => "Transition",
+ 16 => "Transition",
+ 17 => "Transition",
+ 18 => "Transition",
+ 19 => "Transition",
+ 20 => "Transition",
+ 21 => "Transition",
+ 22 => "Retry",
+ 23 => "Retry",
+ 24 => "Retry",
+ 25 => "Retry",
+ 26 => "Retry",
+ 27 => "SelectiveHydration",
+ 28 => "IdleHydration",
+ 29 => "Idle",
+ 30 => "Offscreen",
+ },
+ "laneToReactMeasureMap": Map {
+ 0 => Array [],
+ 1 => Array [],
+ 2 => Array [],
+ 3 => Array [],
+ 4 => Array [],
+ 5 => Array [],
+ 6 => Array [],
+ 7 => Array [],
+ 8 => Array [],
+ 9 => Array [],
+ 10 => Array [],
+ 11 => Array [],
+ 12 => Array [],
+ 13 => Array [],
+ 14 => Array [],
+ 15 => Array [],
+ 16 => Array [],
+ 17 => Array [],
+ 18 => Array [],
+ 19 => Array [],
+ 20 => Array [],
+ 21 => Array [],
+ 22 => Array [],
+ 23 => Array [],
+ 24 => Array [],
+ 25 => Array [],
+ 26 => Array [],
+ 27 => Array [],
+ 28 => Array [],
+ 29 => Array [],
+ 30 => Array [],
+ },
+ "nativeEvents": Array [],
+ "networkMeasures": Array [],
+ "otherUserTimingMarks": Array [],
+ "reactVersion": "<filtered-version>",
+ "schedulingEvents": Array [],
+ "snapshotHeight": 0,
+ "snapshots": Array [],
+ "startTime": 1,
+ "suspenseEvents": Array [],
+ "thrownErrors": Array [],
+ }
+ `);
  });
 
  // @reactVersion >= 18.0
@@ -487,6 +488,7 @@ describe('Timeline profiler', () => {
  },
  ],
  },
+ "componentDisplayNames": Map {},
  "componentMeasures": Array [],
  "duration": 0.011,
  "flamechart": Array [],
@@ -657,6 +659,7 @@ describe('Timeline profiler', () => {
  },
  ],
  },
+ "componentDisplayNames": Map {},
  "componentMeasures": Array [],
  "duration": 0.016,
  "flamechart": Array [],
@@ -905,6 +908,7 @@ describe('Timeline profiler', () => {
  },
  ],
  },
+ "componentDisplayNames": Map {},
  "componentMeasures": Array [
  Object {
  "componentName": "App",
@@ -1116,6 +1120,7 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "App",
  "lanes": "0b0000000000000000000000000000100",
+ "parents": null,
  "timestamp": 0.021,
  "type": "schedule-state-update",
  "warning": null,
@@ -1991,6 +1996,9 @@ describe('Timeline profiler', () => {
  },
  ],
  },
+ "componentDisplayNames": Map {
+ Set {} => "Unknown",
+ },
  "componentMeasures": Array [],
  "duration": 20,
  "flamechart": Array [],
@@ -2222,6 +2230,12 @@ describe('Timeline profiler', () => {
  },
  ],
  },
+ "componentDisplayNames": Map {
+ Set {
+ 2,
+ 1,
+ } => "Unknown",
+ },
  "componentMeasures": Array [
  Object {
  "componentName": "App",
@@ -2416,6 +2430,10 @@ describe('Timeline profiler', () => {
  Object {
  "componentName": "App",
  "lanes": "0b0000000000000000000000000010000",
+ "parents": Array [
+ 2,
+ 1,
+ ],
  "timestamp": 10,
  "type": "schedule-state-update",
  "warning": null,