Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update user timing to record the timeout deadline with 'waiting' events #12479

Merged
merged 3 commits into from
Mar 29, 2018
Merged

Update user timing to record the timeout deadline with 'waiting' events #12479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f996b92
Update user timing to record the timeout deadline with 'waiting' events
flarnie Mar 28, 2018
430de07
Improve wording of message
flarnie Mar 29, 2018
f065c9e
ran prettier
flarnie Mar 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/react-reconciler/src/ReactDebugFiberPerf.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,13 +248,18 @@ export function startRequestCallbackTimer(): void {
}
}

export function stopRequestCallbackTimer(didExpire: boolean): void {
export function stopRequestCallbackTimer(
didExpire: boolean,
expirationTime: number,
): void {
if (enableUserTimingAPI) {
if (supportsUserTiming) {
isWaitingForCallback = false;
const warning = didExpire ? 'React was blocked by main thread' : null;
endMark(
'(Waiting for async callback...)',
`(Waiting for async callback... will force flush in ${
expirationTime
} ms)`,
'(Waiting for async callback...)',
warning,
);
Expand Down
3 changes: 2 additions & 1 deletion packages/react-reconciler/src/ReactFiberScheduler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1432,7 +1432,8 @@ export default function<T, P, I, TI, HI, PI, C, CC, CX, PL>(

if (enableUserTimingAPI && deadline !== null) {
const didExpire = nextFlushedExpirationTime < recalculateCurrentTime();
stopRequestCallbackTimer(didExpire);
const timeout = expirationTimeToMs(nextFlushedExpirationTime);
stopRequestCallbackTimer(didExpire, timeout);
}

if (isAsync) {
Expand Down
50 changes: 25 additions & 25 deletions ...s/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Mount
⚛ (React Tree Reconciliation)
Expand All @@ -15,7 +15,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
⚛ (Calling Lifecycle Methods: 1 Total)
⚛ AllLifecycles.componentDidMount

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Update
⚛ (React Tree Reconciliation)
Expand All @@ -31,7 +31,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
⚛ (Calling Lifecycle Methods: 2 Total)
⚛ AllLifecycles.componentDidUpdate

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Unmount
⚛ (React Tree Reconciliation)
Expand All @@ -45,7 +45,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = `
`;

exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduce overhead 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// The commit phase should mention A and B just once
⚛ (React Tree Reconciliation)
Expand All @@ -62,7 +62,7 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc
⚛ A.componentDidUpdate
⚛ B.componentDidUpdate

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Because of deduplication, we don't know B was cascading,
// but we should still see the warning for the commit phase.
Expand Down Expand Up @@ -112,7 +112,7 @@ exports[`ReactDebugFiberPerf does not schedule an extra callback if setState is
`;

exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascading 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Should not print a warning
⚛ (React Tree Reconciliation)
Expand All @@ -125,7 +125,7 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
⚛ (Committing Host Effects: 1 Total)
⚛ (Calling Lifecycle Methods: 0 Total)

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Should not print a warning
⚛ (React Tree Reconciliation)
Expand All @@ -141,7 +141,7 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi
`;

exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Mount
⚛ (React Tree Reconciliation)
Expand All @@ -153,7 +153,7 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
⚛ (Committing Host Effects: 1 Total)
⚛ (Calling Lifecycle Methods: 0 Total)

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Update
⚛ (React Tree Reconciliation)
Expand All @@ -165,7 +165,7 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
⚛ (Committing Host Effects: 2 Total)
⚛ (Calling Lifecycle Methods: 2 Total)

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Unmount
⚛ (React Tree Reconciliation)
Expand All @@ -178,22 +178,22 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = `
`;

exports[`ReactDebugFiberPerf measures deferred work in chunks 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Start mounting Parent and A
⚛ (React Tree Reconciliation)
⚛ Parent [mount]
⚛ A [mount]
⚛ Child [mount]

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Mount B just a little (but not enough to memoize)
⚛ (React Tree Reconciliation)
⚛ Parent [mount]
⚛ B [mount]

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Complete B and Parent
⚛ (React Tree Reconciliation)
Expand All @@ -218,7 +218,7 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
⚛ (Committing Host Effects: 1 Total)
⚛ (Calling Lifecycle Methods: 0 Total)

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 10737418210 ms)

// Flush the child
⚛ (React Tree Reconciliation)
Expand All @@ -232,7 +232,7 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = `
`;

exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Stop on Baddie and restart from Boundary
⚛ (React Tree Reconciliation)
Expand Down Expand Up @@ -262,7 +262,7 @@ exports[`ReactDebugFiberPerf recovers from caught errors 1`] = `
`;

exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Will fatal
⚛ (React Tree Reconciliation)
Expand All @@ -276,7 +276,7 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
⚛ (Committing Host Effects: 1 Total)
⚛ (Calling Lifecycle Methods: 0 Total)

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)

// Will reconcile from a clean state
⚛ (React Tree Reconciliation)
Expand All @@ -291,7 +291,7 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = `
`;

exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Should include just A and B, no Parents
⚛ (React Tree Reconciliation)
Expand All @@ -306,7 +306,7 @@ exports[`ReactDebugFiberPerf skips parents during setState 1`] = `
`;

exports[`ReactDebugFiberPerf supports portals 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

⚛ (React Tree Reconciliation)
⚛ Parent [mount]
Expand All @@ -320,7 +320,7 @@ exports[`ReactDebugFiberPerf supports portals 1`] = `
`;

exports[`ReactDebugFiberPerf supports returns 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

⚛ (React Tree Reconciliation)
⚛ App [mount]
Expand All @@ -339,12 +339,12 @@ exports[`ReactDebugFiberPerf supports returns 1`] = `
`;

exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

⚛ (React Tree Reconciliation)
⚛ Foo [mount]

⚛ (Waiting for async callback...)
⚛ (Waiting for async callback... will force flush in 5230 ms)
⛔ (React Tree Reconciliation) Warning: A top-level update interrupted the previous render
⚛ Foo [mount]
⚛ (Committing Changes)
Expand All @@ -362,7 +362,7 @@ exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] =
`;

exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
"⛔ (Waiting for async callback...) Warning: React was blocked by main thread
"⛔ (Waiting for async callback... will force flush in 5230 ms) Warning: React was blocked by main thread

⚛ (React Tree Reconciliation)
⚛ Foo [mount]
Expand All @@ -375,7 +375,7 @@ exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = `
`;

exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Should print a warning
⚛ (React Tree Reconciliation)
Expand All @@ -399,7 +399,7 @@ exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = `
`;

exports[`ReactDebugFiberPerf warns on cascading renders from top-level render 1`] = `
"⚛ (Waiting for async callback...)
"⚛ (Waiting for async callback... will force flush in 5230 ms)

// Rendering the first root
⚛ (React Tree Reconciliation)
Expand Down