feat: link lcp attribution to image resource and navigation page load #448

williazz · 2023-09-11T19:30:08Z

Summary

LCP can be attributed to other RumEvents.

If LCP resource is an image, then a site owners want to know how that image was loaded
Site owners want to know if LCP is blocked by the page load sequence

Revision 1

Link LCP Attribution to ResourceEvent eventId for image load, if any
Link LCP Attribution to NavigationEntry eventId of page load, if any

Two callouts in revision 1

Caught a bug where EventBus was instantiated twice
Populate resourceEvent with startTime

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

williazz · 2023-09-11T23:31:58Z

src/utils/common-utils.ts

+ * Creates key to link a RumEvent to the PerformanceEntry that it is sourced from
+ * e.g. performanceKey(ResourceEvent) === performanceKey(PerformanceResourceTiming)
+ */
+export const performanceKey = (details: HasLatency) =>


Note: the general purpose of performanceKey() deserves some discussion.

All RumEvents that are sourced from PerformanceEntries share (or will share) fields duration and startTime. These fields are highly unique because they are DOMHighResTimestamps. The only edge case I am worried about for collisions are when startTime or duration is zero, which can happen when resources are cached.

This pattern can also used to link monkey patched HttpEvents to PerformanceResourceTimings where initatorType = Fetch || Xhr

Good discussion -- consider adding it to the method's JavaDoc comment for posterity.

startTime or duration is zero... can happen when resources are cached

Does this happen in practice? Do we need some logic in place to prevent conflicts?

Updated the comment. It was my initial worry that duration might be zero when resources are cached. But when attempting to produce this, I have not seen duration actually be zero. Also, startTime will still be extremely unique.

williazz · 2023-09-11T23:35:06Z

src/orchestration/Orchestration.ts

@@ -402,7 +402,8 @@ export class Orchestration {
                id: applicationId,
                version: applicationVersion
            },
-            this.config
+            this.config,
+            this.eventBus


Callout (1): this was a bug that was included in #445. Currently implementing robust tests to prevent this in the futrue

williazz · 2023-09-11T23:39:43Z

src/plugins/event-plugins/ResourcePlugin.ts

@@ -120,6 +120,7 @@ export class ResourcePlugin extends InternalPlugin {
            const eventData: ResourceEvent = {
                version: '1.0.0',
                initiatorType: entryData.initiatorType,
+                startTime: entryData.startTime,


Callout (2): startTime needs to be captured in order for ResourceEvent to be linked to its source PerformanceEvent

qhanam · 2023-09-12T00:49:57Z

src/plugins/event-plugins/WebVitalsPlugin.ts

    }
+    private resourceEventIds = new Map<string, string>();
+    private navigationEventsIds: string[] = [];


nit: Since we only ever use the first, this doesn't need to be an array.

agreed, changed to a private string var

ps863 · 2023-09-13T17:17:07Z

comment: I think the tests here need an update based on these changes

williazz · 2023-09-14T07:07:34Z

comment: I think the tests here need an update based on these changes

It was still in draft state, but made ready for review after adding unit tests.

src/plugins/event-plugins/WebVitalsPlugin.ts

qhanam · 2023-09-14T17:35:12Z

src/plugins/event-plugins/WebVitalsPlugin.ts


 export const WEB_VITAL_EVENT_PLUGIN_ID = 'web-vitals';

 export class WebVitalsPlugin extends InternalPlugin {
    constructor() {
        super(WEB_VITAL_EVENT_PLUGIN_ID);
+        this.lcpHelper = this.lcpHelper.bind(this);


suggestion: If you use an arrow function to declare lcpHelper, it will bind lcpHelper to the 'class' as you are explicitly doing here (because arrow functions are bound to the object which declared them).

qhanam · 2023-09-14T17:36:19Z

src/plugins/event-plugins/WebVitalsPlugin.ts

@@ -34,28 +47,66 @@ export class WebVitalsPlugin extends InternalPlugin {
    configure(config: any): void {}

    protected onload(): void {
+        this.context.eventBus.subscribe(Topic.EVENT, this.lcpHelper); // eslint-disable-line


question (non-blocking): Why doesn't eslint like this?

qhanam · 2023-09-14T17:57:09Z

src/plugins/event-plugins/WebVitalsPlugin.ts

        const a = (metric as LCPMetricWithAttribution).attribution;
+        const attribution: any = {


suggestion: Add some type safety by adding an Attribution type.

interface RumLCPAttribution { element?: string; url?: string; timeToFirstByte: number; resourceLoadDelay: number; resourceLoadTime: number; elementRenderDelay: number; lcpResourceEntry?: string; navigationEntry?: string; }

Suggested change

const attribution: any = {

const attribution: RumLCPAttribution = {

qhanam · 2023-09-14T18:06:03Z

src/plugins/event-plugins/__tests__/WebVitalsPlugin.test.ts

+        onLCP: jest.fn().mockImplementation((callback) => {
+            context.eventBus.dispatch(Topic.EVENT, imageResourceRumEvent);
+            context.eventBus.dispatch(Topic.EVENT, navigationRumEvent);
+            callback(mockLCPDataWithImage);
+        }),


question (blocking): Should we test any integrations? I'd like some evidence that everything works together as intended.

E.g.,

Between nav/resource and web vitals plugin.

Between browser and web vitals plugin.

Between web vitals lib and web vitals plugin.

Good idea. FWIW manual testing had no problems so far

qhanam · 2023-09-14T18:11:33Z

src/event-bus/__tests__/EventBus.test.ts

+    disable(): void {} // eslint-disable-line
+
+    protected onload(): void {
+        this.context.eventBus.subscribe(Topic.EVENT, this.subscriber); // eslint-disable-line


nit: I don't see any lint errors... could we remove this?

Suggested change

this.context.eventBus.subscribe(Topic.EVENT, this.subscriber); // eslint-disable-line

this.context.eventBus.subscribe(Topic.EVENT, this.subscriber);

@typescript-eslint/unbound-method

oh nvm this is test code

i'll add the specific rule in my next revision where necessary

qhanam · 2023-09-14T22:19:09Z

src/plugins/event-plugins/WebVitalsPlugin.ts

@@ -34,28 +47,63 @@ export class WebVitalsPlugin extends InternalPlugin {
    configure(config: any): void {}

    protected onload(): void {
+        this.context.eventBus.subscribe(Topic.EVENT, this.handleEvent); // eslint-disable-line


nit: Instead of disabling es-lint here, you can fix this warning by (A) using an arrow function to declare handleEvent, or (B) annotating the function with this: WebVitalsPlugin.

williazz · 2023-09-14T23:29:16Z

Problem

There is something about TestCafe that prevents the ResourcePlugin from recording the LCP resource's image. This prevents me from testing the event linking for LCPAttribution.lcpResourceEntry. However, this works every time during manual testing with npm run server

My setup:

// fs
    app/
       ...
       web_vital_event.html
       assets/
           lcp.jpg

// web_vital_event.html
... body {
    ...
    <img src="assets/lcp.jpg" />
}...

// loader-web-vital.js
...
loader('cwr', 'abc123', '1.0', 'us-west-2', './rum_javascript_telemetry.js', {
    dispatchInterval: 0,
    metaDataPluginsToLoad: [],
    eventPluginsToLoad: [
        new ResourcePlugin(),
        new NavigationPlugin(),
        new WebVitalsPlugin()
    ],
    telemetries: [],
    clientBuilder: showRequestClientBuilder
});
...

// WebVitalsPlugin.test.ts (integ)
test('when lcp image resource is recorded then it is attributed to lcp', async (t: TestController) => {
    const browser = t.browser.name;
    if (browser === 'Safari' || browser === 'Firefox') {
        return 'Test is skipped';
    }
    await t.wait(300);

    await t
        // Interact with page to trigger lcp event
        .click(testButton)
        .click(makePageHidden)
        .expect(RESPONSE_STATUS.textContent)
        .eql(STATUS_202.toString())
        .expect(REQUEST_BODY.textContent)
        .contains('BatchId');

    const events = JSON.parse(await REQUEST_BODY.textContent).RumEvents;
    // console.log(events);
    const lcp = events.filter(
        (x: { type: string }) => x.type === LCP_EVENT_TYPE
    )[0];
    const resource = events.filter(
        (x: { details: string; type: string }) =>
            x.type === PERFORMANCE_RESOURCE_EVENT_TYPE &&
            x.details.includes('lcp.jpg')
    )[0];
    await t.expect(lcp.details).contains(`"lcpResourceEntry":"${resource.id}"`);
    // NOTE: lcp.details does include the correct targetUrl
    // Therefore, the PerformanceAPI is working under the hood, but not the ResourcePlugin
});

williazz · 2023-09-15T00:01:53Z

There is something about TestCafe

This was fixed by upgrading test cafe XD

williazz · 2023-09-20T07:18:35Z

This is an anti-pattern, but I have included #451 in this PR because it is required to pass the integ tests. Please merge #451 before merging #448

Edit: #451 has been merged

qhanam · 2023-09-22T14:54:59Z

src/utils/common-utils.ts

+ * Creates key to link a RumEvent to the PerformanceEntry that it is sourced from
+ * e.g. performanceKey(ResourceEvent) === performanceKey(PerformanceResourceTiming)
+ */
+export const performanceKey = (details: HasLatency) =>


Good discussion -- consider adding it to the method's JavaDoc comment for posterity.

startTime or duration is zero... can happen when resources are cached

Does this happen in practice? Do we need some logic in place to prevent conflicts?

williazz · 2023-09-22T17:36:22Z

issue: WebVitals plugin needs to know if onLCP is supported before caching image resources to avoid memory leak

williazz · 2023-09-25T19:08:36Z

issue: WebVitals plugin needs to know if onLCP is supported before caching image resources to avoid memory leak

There are two solutions to this:

Check browser support at runtime.
After 10 seconds, cleanup cache and stop listening for LCP resource candidates.

(1) is explicitly not recommended by by the owners of web-vitals GoogleChrome/web-vitals#37 (comment).

If we implemented (1) anyways, we would check support for PerformanceObserver + PerformancePaintTiming. Some additional analysis is needed to see what other dependencies the web-vitals requires. In the worst case, we never cleanup resourceEventIds and cause a small memory leak. If web-vitals package implements a polyfill for LCP in the future, this would have to be updated to avoid data loss.

(2) looks janky but is the simplest solution and my recommendation. The benefit is that we do not have to worry about many edge cases or do any maintenance work. The risk is that we are setting a hard limit--if it takes longer than ~10 seconds to report LCP, then we do not attribute lcpResourceEntry

ps863 · 2023-09-26T17:21:03Z

issue: WebVitals plugin needs to know if onLCP is supported before caching image resources to avoid memory leak

There are two solutions to this:

Check browser support at runtime.

After 10 seconds, cleanup cache and stop listening for LCP resource candidates.

(1) is explicitly not recommended by by the owners of web-vitals GoogleChrome/web-vitals#37 (comment).

If we implemented (1) anyways, we would check support for PerformanceObserver + PerformancePaintTiming. Some additional analysis is needed to see what other dependencies the web-vitals requires. In the worst case, we never cleanup resourceEventIds and cause a small memory leak. If web-vitals package implements a polyfill for LCP in the future, this would have to be updated to avoid data loss.

(2) looks janky but is the simplest solution and my recommendation. The benefit is that we do not have to worry about many edge cases or do any maintenance work. The risk is that we are setting a hard limit--if it takes longer than ~10 seconds to report LCP, then we do not attribute lcpResourceEntry

I think approach 1 has other issues as well:

Browser support can change anytime (with new releases of browser versions, etc). This approach would require far more maintenance potentially if you are doing an explicit check.

Question on approach 2:

Why 10 seconds? Is this based on a recommendation? What if the time window were smaller?

williazz · 2023-09-27T06:22:33Z

Follow up on offline conversation...

Why 10 seconds? Is this based on a recommendation? What if the time window were smaller?

10 sec is an arbitrary duration where LCP has probably been recorded already, if supported. We could do another time.

We ultimately opted for (1), and should keep an eye on updates to LargestContentfulPaint browser support and web-vitals.

williazz force-pushed the LinkLCPAttr branch 2 times, most recently from b54956b to 931c30c Compare September 11, 2023 20:33

williazz changed the title ~~chore: link lcp to image resource and nav event~~ chore: link lcp attribution to image resource and navigation page load Sep 11, 2023

williazz changed the title ~~chore: link lcp attribution to image resource and navigation page load~~ feat: link lcp attribution to image resource and navigation page load Sep 11, 2023

williazz force-pushed the LinkLCPAttr branch 3 times, most recently from 7f4b711 to 24b9ddc Compare September 11, 2023 23:24

williazz commented Sep 11, 2023

View reviewed changes

williazz requested review from qhanam and ps863 September 12, 2023 00:17

qhanam reviewed Sep 12, 2023

View reviewed changes

williazz force-pushed the LinkLCPAttr branch 2 times, most recently from 7efdf50 to b11850a Compare September 14, 2023 07:05

williazz marked this pull request as ready for review September 14, 2023 07:06

williazz requested a review from qhanam September 14, 2023 07:08

ps863 approved these changes Sep 14, 2023

View reviewed changes

qhanam reviewed Sep 14, 2023

View reviewed changes

src/plugins/event-plugins/WebVitalsPlugin.ts Outdated Show resolved Hide resolved

qhanam reviewed Sep 14, 2023

View reviewed changes

src/plugins/event-plugins/WebVitalsPlugin.ts Outdated Show resolved Hide resolved

williazz force-pushed the LinkLCPAttr branch from 65cf8a2 to 69e9ce4 Compare September 14, 2023 17:40

williazz requested a review from qhanam September 14, 2023 17:44

qhanam reviewed Sep 14, 2023

View reviewed changes

williazz force-pushed the LinkLCPAttr branch from 7aeca45 to 89b9a63 Compare September 14, 2023 23:30

williazz force-pushed the LinkLCPAttr branch from 732997d to faf4fbb Compare September 20, 2023 01:36

williazz reopened this Sep 20, 2023

williazz mentioned this pull request Sep 20, 2023

feat: getResourceType() uses initiatorType when file extension missing #451

Merged

williazz force-pushed the LinkLCPAttr branch 2 times, most recently from 9ca95f0 to 732997d Compare September 20, 2023 21:09

qhanam approved these changes Sep 22, 2023

View reviewed changes

williazz requested a review from ps863 September 25, 2023 18:56

williazz added 13 commits September 26, 2023 23:25

chore: link lcp to image resource and nav event

891d7d5

chore: add unit tests

af0af93

fix: add suggestions from review

a9f3577

test: navigation integ test

f7ff2ff

chore: add integ test for lcp resource linking

16c0457

fix: resovle suggestions from rev 2

3ff9987

fix: switch order

b17ae07

fix: replace unsplash image with blank screenshot

d49821f

chore: remove initiatorType check

c9a6854

fix: remove iniatorType test

63d3fd0

feat: fix resource type mislabels by using initiatorType as backup

bc482c6

feat: use initiatorType when getResourceFileType() fails

595bf9b

chore: add comment to performanceKey() jsdoc

589125a

williazz force-pushed the LinkLCPAttr branch from 2f70841 to babd255 Compare September 27, 2023 06:34

feat: avoid memory leak when caching LCP candidates

b67bcb5

williazz force-pushed the LinkLCPAttr branch from babd255 to b67bcb5 Compare September 27, 2023 06:40

ps863 approved these changes Sep 28, 2023

View reviewed changes

ps863 merged commit 4b8506e into aws-observability:main Oct 2, 2023
3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: link lcp attribution to image resource and navigation page load #448

feat: link lcp attribution to image resource and navigation page load #448

williazz commented Sep 11, 2023 •

edited

Loading

williazz Sep 11, 2023 •

edited

Loading

qhanam Sep 22, 2023

williazz Sep 22, 2023

williazz Sep 11, 2023 •

edited

Loading

williazz Sep 11, 2023 •

edited

Loading

qhanam Sep 12, 2023

williazz Sep 13, 2023

ps863 commented Sep 13, 2023

williazz commented Sep 14, 2023 •

edited

Loading

qhanam Sep 14, 2023

qhanam Sep 14, 2023

qhanam Sep 14, 2023

qhanam Sep 14, 2023 •

edited

Loading

williazz Sep 14, 2023

qhanam Sep 14, 2023

williazz Sep 14, 2023

qhanam Sep 14, 2023

williazz Sep 14, 2023

qhanam Sep 14, 2023

williazz commented Sep 14, 2023 •

edited

Loading

williazz commented Sep 15, 2023

williazz commented Sep 20, 2023 •

edited

Loading

qhanam Sep 22, 2023

williazz commented Sep 22, 2023

williazz commented Sep 25, 2023 •

edited

Loading

ps863 commented Sep 26, 2023

williazz commented Sep 27, 2023 •

edited

Loading

		const a = (metric as LCPMetricWithAttribution).attribution;
		const attribution: any = {

	const attribution: any = {
	const attribution: RumLCPAttribution = {

	this.context.eventBus.subscribe(Topic.EVENT, this.subscriber); // eslint-disable-line
	this.context.eventBus.subscribe(Topic.EVENT, this.subscriber);

feat: link lcp attribution to image resource and navigation page load #448

feat: link lcp attribution to image resource and navigation page load #448

Conversation

williazz commented Sep 11, 2023 • edited Loading

Summary

Revision 1

williazz Sep 11, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williazz Sep 11, 2023 • edited Loading

Choose a reason for hiding this comment

williazz Sep 11, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ps863 commented Sep 13, 2023

williazz commented Sep 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

qhanam Sep 14, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

williazz commented Sep 14, 2023 • edited Loading

Problem

williazz commented Sep 15, 2023

williazz commented Sep 20, 2023 • edited Loading

Choose a reason for hiding this comment

williazz commented Sep 22, 2023

williazz commented Sep 25, 2023 • edited Loading

ps863 commented Sep 26, 2023

williazz commented Sep 27, 2023 • edited Loading

williazz commented Sep 11, 2023 •

edited

Loading

williazz Sep 11, 2023 •

edited

Loading

williazz Sep 11, 2023 •

edited

Loading

williazz Sep 11, 2023 •

edited

Loading

williazz commented Sep 14, 2023 •

edited

Loading

qhanam Sep 14, 2023 •

edited

Loading

williazz commented Sep 14, 2023 •

edited

Loading

williazz commented Sep 20, 2023 •

edited

Loading

williazz commented Sep 25, 2023 •

edited

Loading

williazz commented Sep 27, 2023 •

edited

Loading