[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 facebook#24170
blakef · Jun 17, 2022 · 178a099 · 178a099
1 parent 229c86a
commit 178a099
Show file tree

Hide file tree

Showing 16 changed files with 426 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,7 @@ describe('Timeline profiler', () => {
               },
             ],
           },
+          "componentDisplayNames": Map {},
           "componentMeasures": Array [],
           "duration": 20,
           "flamechart": Array [],
@@ -2222,6 +2228,10 @@ describe('Timeline profiler', () => {
               },
             ],
           },
+          "componentDisplayNames": Map {
+            2 => "App",
+            1 => "createRoot()",
+          },
           "componentMeasures": Array [
             Object {
               "componentName": "App",
@@ -2416,6 +2426,10 @@ describe('Timeline profiler', () => {
             Object {
               "componentName": "App",
               "lanes": "0b0000000000000000000000000010000",
+              "parents": Array [
+                2,
+                1,
+              ],
               "timestamp": 10,
               "type": "schedule-state-update",
               "warning": null,