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

⚗️ [RUM-1020] Collect core web vitals target selectors #2418

Merged
merged 21 commits into from
Sep 14, 2023

Conversation

amortemousque
Copy link
Contributor

@amortemousque amortemousque commented Sep 6, 2023

Motivation

Currently the web vitals are reported with a single value representing the vital score. These scores provide valuable insights to customers, allowing them to determine the performance quality of their website. However, to effectively improve them, it is crucial to identify the specific component to which a vital refers.

Changes

  • Move CWV telemetry to their dedicated metric module
  • Collect LCP element selector
  • Collect FID target selector
  • Collect INP target selector
  • Collect CLS first element (in document order) of the largest layout shift
  • Introduce appendElement() test helper
  • Do not flatten intermediary metric data structure
before after
image image
image image

Testing

  • Local
  • Staging
  • Unit
  • End to end

I have gone over the contributing documentation.

@amortemousque amortemousque force-pushed the aymeric/collect-cwv-node-attribution branch from 8d5be59 to b842e5e Compare September 6, 2023 14:15
@codecov-commenter
Copy link

codecov-commenter commented Sep 6, 2023

Codecov Report

Merging #2418 (09b1905) into main (e93c5a8) will increase coverage by 0.03%.
The diff coverage is 97.33%.

@@            Coverage Diff             @@
##             main    #2418      +/-   ##
==========================================
+ Coverage   93.96%   94.00%   +0.03%     
==========================================
  Files         222      222              
  Lines        6465     6535      +70     
  Branches     1417     1448      +31     
==========================================
+ Hits         6075     6143      +68     
- Misses        390      392       +2     
Files Changed Coverage Δ
...es/rum-core/src/domain/action/trackClickActions.ts 98.31% <ø> (ø)
...ages/rum-core/src/domain/getSelectorFromElement.ts 98.63% <ø> (ø)
packages/rum-core/test/fixtures.ts 86.66% <71.42%> (-13.34%) ⬇️
packages/core/src/tools/experimentalFeatures.ts 100.00% <100.00%> (ø)
...ages/rum-core/src/browser/performanceCollection.ts 55.88% <100.00%> (+1.33%) ⬆️
...rum-core/src/domain/longTask/longTaskCollection.ts 100.00% <100.00%> (ø)
...rum-core/src/domain/resource/resourceCollection.ts 100.00% <100.00%> (ø)
...ackages/rum-core/src/domain/view/viewCollection.ts 100.00% <100.00%> (ø)
.../domain/view/viewMetrics/trackCommonViewMetrics.ts 92.85% <100.00%> (-0.90%) ⬇️
...ain/view/viewMetrics/trackCumulativeLayoutShift.ts 100.00% <100.00%> (+5.26%) ⬆️
... and 8 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

@amortemousque amortemousque force-pushed the aymeric/collect-cwv-node-attribution branch from b842e5e to eec8702 Compare September 6, 2023 14:52
@amortemousque amortemousque changed the title ⚗️ collect core web vitals target selectors ⚗️ [RUM-1020] Collect core web vitals target selectors Sep 6, 2023
@amortemousque amortemousque marked this pull request as ready for review September 6, 2023 15:37
@amortemousque amortemousque requested a review from a team as a code owner September 6, 2023 15:37
@amortemousque amortemousque force-pushed the aymeric/collect-cwv-node-attribution branch from c2653c8 to 7c3e131 Compare September 11, 2023 08:06
packages/rum-core/src/domain/view/viewCollection.ts Outdated Show resolved Hide resolved
packages/rum-core/test/dom.ts Show resolved Hide resolved
Comment on lines 369 to 371
const rumPerformanceEntries = entries.filter((entry): entry is RumPerformanceEntry =>
objectHasValue(RumPerformanceEntryType, entry)
)
Copy link
Member

Choose a reason for hiding this comment

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

💭 thought: ‏I wonder if we really need to keep filtering entries like this.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Interesting 🤔. Do you remember why it was done in the first place?

Copy link
Member

Choose a reason for hiding this comment

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

FMU, I did this in 15da132 , where I changed entries.getEntriesByType('xxx') to entries.filter(entry => entry.entryType === 'xxx') and then we iterated over this, but I don't see any good reason to do it anymore.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

FMU, we still have this case to filter

if (supportPerformanceObject()) {
const performanceEntries = performance.getEntries()

Copy link
Member

Choose a reason for hiding this comment

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

Ah right that's why :D Ok nevermind then. We can always change things if/when we work on my suggestion here: #2355 (comment)

packages/rum-core/src/domain/view/viewCollection.ts Outdated Show resolved Hide resolved
@amortemousque amortemousque force-pushed the aymeric/collect-cwv-node-attribution branch from 12b3189 to 62947b1 Compare September 12, 2023 12:44
@amortemousque amortemousque force-pushed the aymeric/collect-cwv-node-attribution branch from 62947b1 to bb0e1ee Compare September 13, 2023 07:23
@amortemousque amortemousque force-pushed the aymeric/collect-cwv-node-attribution branch from 42f000e to df23557 Compare September 14, 2023 08:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants