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.

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

core(trace): use tracing-started event for frame tree info #13913

Merged
merged 3 commits into from
Apr 26, 2022

Conversation

brendankenny
Copy link
Member

@brendankenny brendankenny commented Apr 26, 2022

Part of the responsiveness in timespans implementation.

We've previously relied on FrameCommittedEvents to generate our knowledge of the frame tree, but for traces without navigations (like in a timespan), there typically aren't any FrameCommittedEvents generated because all the frames are already around. As a result, metric events from outside of the main frame wouldn't be included.

TracingStartedInBrowser events also have frame tree information, but for a typical navigation the main frame URL will change (from about:blank to the test url) and child frames won't be known at all, so that frame tree is useless for cross-frame metrics in navigations.

This PR combines the two sources, starting with the set from TracingStartedInBrowser and updating as FrameCommittedEvents come in (if they do). Navigationful and navigationless traces should now have their frame tree correctly figured out.

No test changes were needed for all the existing cross-frame tests, and I verified that for all existing tests the set of frames found in the trace are the same before and after this change. This PR includes a test that would fail without this change, but an upcoming PR with the responsiveness metric (edit: #13917) will add a real timespan trace that fails without this change.

@brendankenny brendankenny requested a review from a team as a code owner April 26, 2022 17:19
@brendankenny brendankenny requested review from connorjclark and removed request for a team April 26, 2022 17:19

// Update known frames if FrameCommittedInBrowser events come in, typically
// with updated `url` (as well as pid, etc). Some traces (like timespans) may
// not have any committed frames.
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

somewhat debatable if we really need to "update" the known frames if there are FrameCommittedInBrowser events, because only the url changes if there are entries for a frame in both TracingStartedInBrowser and a FrameCommittedInBrowser event, and as far as I can tell we never use those urls anywhere :)

However, it seems good to do because it makes sense conceptually, not updating doesn't really make this code any simpler, this is like a few dozen events at most, so 🤷

@@ -304,7 +304,6 @@ describe('Metrics: CLS', () => {
const cat = 'loading,rail,devtools.timeline';
trace.traceEvents.push(
/* eslint-disable max-len */
{name: 'FrameCommittedInBrowser', cat, args: {data: {frame: mainFrame, url: 'https://example.com'}}},
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Noticed these extra test entries when comparing the before/after. They don't hurt anything with our current setup, but createTestTrace creates a mainframe FrameCommittedInBrowser event already, so these end up doubled up

@@ -7850,7 +7850,7 @@
"description": "Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. [Learn more](https://web.dev/bootup-time/).",
"score": 1,
"scoreDisplayMode": "numeric",
"numericValue": 274.5320000000002,
"numericValue": 275.90400000000034,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@adamraine this looks right and the timespan wasn't looking cross frame for bootup time, but haven't verified yet. Hard to find where each step begins and ends in the big json files :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah trace processor was producing an empty list for frames in timespan

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hard to find where each step begins and ends in the big json files :)

I can open an issue for an assetSaver.saveFlowArtifacts that separates this stuff into separate files. Wouldn't hurt to have another 800,000+ line PR on my resume 😎

@@ -612,21 +612,41 @@ class TraceProcessor {
// Find the inspected frame
const mainFrameIds = this.findMainFrameIds(keyEvents);

const frames = keyEvents
/** @type {Map<string, {id: string, url: string, parent?: string}>} */
const framesById = new Map();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can remove this warning now:

log.warn(
'trace-of-tab',
'frameTreeEvents may be incomplete, make sure the trace has FrameCommittedInBrowser events'

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can update the message maybe? I feel like it's really just for the outdated tests now

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can update the message maybe?

SGTM

parent: frame.parent,
});
}
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: could reduce indentation if L621 did || [].

Copy link
Member Author

@brendankenny brendankenny Apr 26, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had that originally but it was bordering on unreadable. The indent isn't ideal but it doesn't seem too bad to me

@@ -8537,12 +8543,12 @@
],
"items": [
{
"url": "https://www.mikescerealshack.co/_next/static/chunks/framework.9d524150d48315f49e80.js",
"url": "https://www.mikescerealshack.co/",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what audit is this second chunk?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

long-tasks. Similar to bootup-time, it was getting an empty frames array here:

const {mainThreadEvents, frames, timestamps} = await ProcessedTrace.request(trace, context);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants