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

Author: williazz

app/assets/lcp.png

@@ -111,5 +111,6 @@
                 <td id="response_body"></td>
             </tr>
         </table>
+        <img src="assets/lcp.png" alt="LCP resource image" />
     </body>
 </html>

app/web_vital_event.html

@@ -5,6 +5,8 @@
 // use the type definitions from the CloudWatch RUM SDK, we have made a copy of
 // them here to completely remove the dependency on the CloudWatch RUM SDK.
 
+import { MetaData } from '../events/meta-data';
+
 export interface PutRumEventsRequest {
     BatchId: string;
     AppMonitorDetails: AppMonitorDetails;
@@ -29,3 +31,11 @@ export interface RumEvent {
     metadata?: string;
     details: string;
 }
+
+export interface ParsedRumEvent {
+    id: string;
+    timestamp: Date;
+    type: string;
+    metadata?: MetaData;
+    details: object;
+}

src/dispatch/dataplane.ts

@@ -10,7 +10,7 @@ export default class EventBus<T = Topic> {
 
     subscribe(topic: T, subscriber: Subscriber): void {
         const list = this.subscribers.get(topic) ?? [];
-        if (list.length === 0) {
+        if (!list.length) {
             this.subscribers.set(topic, list);
         }
         list.push(subscriber);

src/event-bus/EventBus.ts

@@ -1,9 +1,34 @@
-import EventBus from '../EventBus';
+import { context } from '../../test-utils/test-utils';
+import EventBus, { Topic } from '../EventBus';
+import { InternalPlugin } from '../../plugins/InternalPlugin';
+import { PluginContext } from '../../plugins/types';
 
 export enum MockTopics {
     FOOD = 'food',
     BOOKS = 'books'
 }
+
+const MockPluginId = 'Mock-Plugin';
+class MockPlugin extends InternalPlugin {
+    count = 0;
+
+    constructor() {
+        super(MockPluginId);
+        this.subscriber = this.subscriber.bind(this);
+    }
+
+    enable(): void {} // eslint-disable-line
+    disable(): void {} // eslint-disable-line
+
+    protected onload(): void {
+        this.context.eventBus.subscribe(Topic.EVENT, this.subscriber); // eslint-disable-line
+    }
+
+    subscriber(msg: any) {
+        this.count++;
+    }
+}
+
 describe('EventBus tests', () => {
     let eventBus: EventBus<MockTopics>;
     const l1 = jest.fn();
@@ -50,4 +75,14 @@ describe('EventBus tests', () => {
         // assert
         expect(l2).not.toHaveBeenCalled();
     });
+
+    test('when plugin subscribes then observes events', async () => {
+        const plugin = new MockPlugin();
+        const spy = jest.spyOn(plugin, 'subscriber');
+
+        plugin.load(context);
+        context.eventBus.dispatch(Topic.EVENT, 'hat');
+
+        expect(spy).toHaveBeenCalledWith('hat');
+    });
 });

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

@@ -40,6 +40,14 @@
                 "elementRenderDelay": {
                     "type": "number",
                     "description": "Duration rendering the LCP resource"
+                },
+                "navigationEntry": {
+                    "type": "string",
+                    "description": "Event id of the navigation event for the current page"
+                },
+                "lcpResourceEntry": {
+                    "type": "string",
+                    "description": "Event id of the resource event for the LCP resource, if any"
                 }
             },
             "required": [

src/event-schemas/largest-contentful-paint-event.json

@@ -1,10 +1,16 @@
 import { loader } from './loader';
 import { showRequestClientBuilder } from '../test-utils/mock-http-handler';
 import { WebVitalsPlugin } from '../plugins/event-plugins/WebVitalsPlugin';
+import { NavigationPlugin } from '../plugins/event-plugins/NavigationPlugin';
+import { ResourcePlugin } from '../plugins/event-plugins/ResourcePlugin';
 loader('cwr', 'abc123', '1.0', 'us-west-2', './rum_javascript_telemetry.js', {
     dispatchInterval: 0,
     metaDataPluginsToLoad: [],
-    eventPluginsToLoad: [new WebVitalsPlugin()],
+    eventPluginsToLoad: [
+        new ResourcePlugin(),
+        new NavigationPlugin(),
+        new WebVitalsPlugin()
+    ],
     telemetries: [],
     clientBuilder: showRequestClientBuilder
 });

src/loader/loader-web-vital-event.js

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

src/orchestration/Orchestration.ts

@@ -21,6 +21,15 @@ jest.mock('../../dispatch/Dispatch', () => ({
     }))
 }));
 
+jest.mock('../../utils/common-utils', () => {
+    const originalModule = jest.requireActual('../../utils/common-utils');
+    return {
+        __esModule: true,
+        ...originalModule,
+        isLCPSupported: jest.fn().mockReturnValue(true)
+    };
+});
+
 const enableEventCache = jest.fn();
 const disableEventCache = jest.fn();
 const recordPageView = jest.fn();

src/orchestration/__tests__/Orchestration.test.ts

@@ -84,6 +84,7 @@ export class ResourcePlugin extends InternalPlugin {
 
     recordResourceEvent = ({
         name,
+        startTime,
         initiatorType,
         duration,
         transferSize
@@ -105,6 +106,7 @@ export class ResourcePlugin extends InternalPlugin {
             const eventData: ResourceEvent = {
                 version: '1.0.0',
                 initiatorType,
+                startTime,
                 duration,
                 fileType: getResourceFileType(name, initiatorType),
                 transferSize