Skip to content

Commit

Permalink
Scheduling Profiler: Show Suspense resource .displayName
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Brian Vaughn committed Sep 28, 2021
1 parent eba248c commit 09e4cfc
Show file tree
Hide file tree
Showing 11 changed files with 83 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
white-space: nowrap;
}

.DetailsGridURL {
.DetailsGridLongValue {
word-break: break-all;
max-height: 50vh;
overflow: hidden;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -335,6 +335,7 @@ const TooltipSuspenseEvent = ({
componentName,
duration,
phase,
promiseName,
resolution,
timestamp,
warning,
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};
}
Expand Down Expand Up @@ -113,6 +114,7 @@ export class SuspenseEventsView extends View {
depth,
duration,
phase,
promiseName,
resolution,
timestamp,
warning,
Expand Down Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -595,6 +599,7 @@ function processTimelineEvent(
duration: null,
id,
phase: ((phase: any): Phase),
promiseName: promiseName || null,
resolution: 'unresolved',
resuspendTimestamps: null,
timestamp: startTime,
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-scheduling-profiler/src/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
3 changes: 3 additions & 0 deletions packages/react-devtools-shared/src/dynamicImportCache.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down
3 changes: 3 additions & 0 deletions packages/react-devtools-shared/src/hookNamesCache.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions packages/react-devtools-shared/src/inspectedElementCache.js
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
9 changes: 8 additions & 1 deletion packages/react-reconciler/src/SchedulingProfiler.js
Original file line number Diff line number Diff line change
Expand Up @@ -194,9 +194,16 @@ export function markComponentSuspended(
const id = getWakeableID(wakeable);
const componentName = getComponentNameFromFiber(fiber) || 'Unknown';
const phase = fiber.alternate === null ? 'mount' : 'update';

// Following the non-standard fn.displayName convention,
// frameworks like Relay may also annotate Promises with a displayName,
// describing what operation/data the thrown Promise is related to.
// When this is available we should pass it along to the Scheduling Profiler.
const displayName = (wakeable: any).displayName || '';

// TODO (scheduling profiler) Add component stack id
markAndClear(
`--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}`,
`--suspense-${eventType}-${id}-${componentName}-${phase}-${lanes}-${displayName}`,
);
wakeable.then(
() => markAndClear(`--suspense-resolved-${id}-${componentName}`),
Expand Down

0 comments on commit 09e4cfc

Please sign in to comment.