Scheduling Profiler: Show Suspense resource .displayName

Frameworks like Relay use a convention of attributing thrown Suspense values with a displayName that provides more information about what a component is suspending on specifically.

The Scheduling Profiler will now display this information instead of the component name when available. (If no displayName is available, the component name will still be shown as a fallback).

Hovering over the Suspended item will show both component name and suspended resource name. (See comment below for a fallback example.)

Author: Brian Vaughn

packages/react-devtools-scheduling-profiler/src/EventTooltip.css

@@ -46,7 +46,7 @@
   white-space: nowrap;
 }
 
-.DetailsGridURL {
+.DetailsGridLongValue {
   word-break: break-all;
   max-height: 50vh;
   overflow: hidden;

packages/react-devtools-scheduling-profiler/src/EventTooltip.js

@@ -335,6 +335,7 @@ const TooltipSuspenseEvent = ({
     componentName,
     duration,
     phase,
+    promiseName,
     resolution,
     timestamp,
     warning,
@@ -356,6 +357,12 @@ const TooltipSuspenseEvent = ({
         {label}
         <div className={styles.Divider} />
         <div className={styles.DetailsGrid}>
+          {promiseName !== null && (
+            <>
+              <div className={styles.DetailsGridLabel}>Resource:</div>
+              <div className={styles.DetailsGridLongValue}>{promiseName}</div>
+            </>
+          )}
           <div className={styles.DetailsGridLabel}>Status:</div>
           <div>{resolution}</div>
           <div className={styles.DetailsGridLabel}>Timestamp:</div>

packages/react-devtools-scheduling-profiler/src/content-views/SuspenseEventsView.js

@@ -80,6 +80,7 @@ export class SuspenseEventsView extends View {
     this._intrinsicSize = {
       width: duration,
       height: (this._maxDepth + 1) * ROW_WITH_BORDER_HEIGHT,
+      hideScrollBarIfLessThanHeight: ROW_WITH_BORDER_HEIGHT,
       maxInitialHeight: ROW_WITH_BORDER_HEIGHT * MAX_ROWS_TO_SHOW_INITIALLY,
     };
   }
@@ -113,6 +114,7 @@ export class SuspenseEventsView extends View {
       depth,
       duration,
       phase,
+      promiseName,
       resolution,
       timestamp,
       warning,
@@ -208,7 +210,9 @@ export class SuspenseEventsView extends View {
       );
 
       let label = 'suspended';
-      if (componentName != null) {
+      if (promiseName != null) {
+        label = promiseName;
+      } else if (componentName != null) {
         label = `${componentName} ${label}`;
       }
       if (phase !== null) {

packages/react-devtools-scheduling-profiler/src/import-worker/__tests__/preprocessData-test.internal.js

@@ -1195,6 +1195,46 @@ describe('preprocessData', () => {
     `);
   });
 
+  it('should include a suspended resource "displayName" if one is set', async () => {
+    let promise = null;
+    let resolvedValue = null;
+    function readValue(value) {
+      if (resolvedValue !== null) {
+        return resolvedValue;
+      } else if (promise === null) {
+        promise = Promise.resolve(true).then(() => {
+          resolvedValue = value;
+        });
+        promise.displayName = 'Testing displayName';
+      }
+      throw promise;
+    }
+
+    function Component() {
+      const value = readValue(123);
+      return value;
+    }
+
+    if (gate(flags => flags.enableSchedulingProfiler)) {
+      const testMarks = [creactCpuProfilerSample()];
+
+      const root = ReactDOM.createRoot(document.createElement('div'));
+      act(() =>
+        root.render(
+          <React.Suspense fallback="Loading...">
+            <Component />
+          </React.Suspense>,
+        ),
+      );
+
+      testMarks.push(...createUserTimingData(clearedMarks));
+
+      const data = await preprocessData(testMarks);
+      expect(data.suspenseEvents).toHaveLength(1);
+      expect(data.suspenseEvents[0].promiseName).toBe('Testing displayName');
+    }
+  });
+
   describe('warnings', () => {
     describe('long event handlers', () => {
       it('should not warn when React scedules a (sync) update inside of a short event handler', async () => {

packages/react-devtools-scheduling-profiler/src/import-worker/preprocessData.js

@@ -564,9 +564,13 @@ function processTimelineEvent(
 
       // React Events - suspense
       else if (name.startsWith('--suspense-suspend-')) {
-        const [id, componentName, phase, laneBitmaskString] = name
-          .substr(19)
-          .split('-');
+        const [
+          id,
+          componentName,
+          phase,
+          laneBitmaskString,
+          promiseName,
+        ] = name.substr(19).split('-');
         const lanes = getLanesFromTransportDecimalBitmask(laneBitmaskString);
 
         const availableDepths = new Array(
@@ -595,6 +599,7 @@ function processTimelineEvent(
           duration: null,
           id,
           phase: ((phase: any): Phase),
+          promiseName: promiseName || null,
           resolution: 'unresolved',
           resuspendTimestamps: null,
           timestamp: startTime,

packages/react-devtools-scheduling-profiler/src/types.js

@@ -60,6 +60,7 @@ export type SuspenseEvent = {|
   duration: number | null,
   +id: string,
   +phase: Phase | null,
+  promiseName: string | null,
   resolution: 'rejected' | 'resolved' | 'unresolved',
   resuspendTimestamps: Array<number> | null,
   +type: 'suspense',

packages/react-devtools-shared/src/devtools/views/ErrorBoundary/cache.js

@@ -70,6 +70,9 @@ export function findGitHubIssue(errorMessage: string): GitHubIssue | null {
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Searching GitHub issues for error "${errorMessage}"`,
     };
     const wake = () => {
       // This assumes they won't throw.

packages/react-devtools-shared/src/dynamicImportCache.js

@@ -73,6 +73,9 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module {
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Loading module "${moduleLoaderFunction.name}"`,
     };
 
     const wake = () => {

packages/react-devtools-shared/src/hookNamesCache.js

@@ -92,6 +92,9 @@ export function loadHookNames(
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Loading hook names for ${element.displayName || 'Unknown'}`,
     };
 
     let timeoutID;

packages/react-devtools-shared/src/inspectedElementCache.js

@@ -94,7 +94,11 @@ export function inspectElement(
       then(callback) {
         callbacks.add(callback);
       },
+
+      // Optional property used by Scheduling Profiler:
+      displayName: `Inspecting ${element.displayName || 'Unknown'}`,
     };
+
     const wake = () => {
       // This assumes they won't throw.
       callbacks.forEach(callback => callback());