fix: resolve npe in web vitals attribution (#716)

Author: williazz

src/plugins/event-plugins/WebVitalsPlugin.ts

@@ -91,22 +91,22 @@ export class WebVitalsPlugin extends InternalPlugin {
     private handleLCP(metric: LCPMetricWithAttribution | Metric) {
         const a = (metric as LCPMetricWithAttribution).attribution;
         const attribution: RumLCPAttribution = {
-            element: a.element,
-            url: a.url,
-            timeToFirstByte: a.timeToFirstByte,
-            resourceLoadDelay: a.resourceLoadDelay,
+            element: a?.element,
+            url: a?.url,
+            timeToFirstByte: a?.timeToFirstByte,
+            resourceLoadDelay: a?.resourceLoadDelay,
             /**
              * `resourceLoadTime` was renamed to `resourceLoadDuration` in web-vitals 4.x
              * This is a cosmetic change, and does not affect the underlying value.
              * We can update the name to `resourceLoadDuration` in RUM's next major version.
              * (See https://github.com/GoogleChrome/web-vitals/pull/450)
              */
-            resourceLoadTime: a.resourceLoadDuration,
+            resourceLoadTime: a?.resourceLoadDuration,
             // See https://github.com/GoogleChrome/web-vitals/pull/450
-            elementRenderDelay: a.elementRenderDelay
+            elementRenderDelay: a?.elementRenderDelay
         };
-        if (a.lcpResourceEntry) {
-            const key = performanceKey(a.lcpResourceEntry as HasLatency);
+        if (a?.lcpResourceEntry) {
+            const key = performanceKey(a?.lcpResourceEntry as HasLatency);
             attribution.lcpResourceEntry = this.resourceEventIds.get(key);
         }
         if (this.navigationEventId) {
@@ -131,10 +131,10 @@ export class WebVitalsPlugin extends InternalPlugin {
             version: '1.0.0',
             value: metric.value,
             attribution: {
-                largestShiftTarget: a.largestShiftTarget,
-                largestShiftValue: a.largestShiftValue,
-                largestShiftTime: a.largestShiftTime,
-                loadState: a.loadState
+                largestShiftTarget: a?.largestShiftTarget,
+                largestShiftValue: a?.largestShiftValue,
+                largestShiftTime: a?.largestShiftTime,
+                loadState: a?.loadState
             }
         } as CumulativeLayoutShiftEvent);
     }
@@ -145,10 +145,10 @@ export class WebVitalsPlugin extends InternalPlugin {
             version: '1.0.0',
             value: metric.value,
             attribution: {
-                eventTarget: a.eventTarget,
-                eventType: a.eventType,
-                eventTime: a.eventTime,
-                loadState: a.loadState
+                eventTarget: a?.eventTarget,
+                eventType: a?.eventType,
+                eventTime: a?.eventTime,
+                loadState: a?.loadState
             }
         } as FirstInputDelayEvent);
     }
@@ -160,14 +160,14 @@ export class WebVitalsPlugin extends InternalPlugin {
             version: '1.0.0',
             value: metric.value,
             attribution: {
-                interactionTarget: a.interactionTarget,
-                interactionTime: a.interactionTime,
-                nextPaintTime: a.nextPaintTime,
-                interactionType: a.interactionType,
-                inputDelay: a.inputDelay,
-                processingDuration: a.processingDuration,
-                presentationDelay: a.presentationDelay,
-                loadState: a.loadState
+                interactionTarget: a?.interactionTarget,
+                interactionTime: a?.interactionTime,
+                nextPaintTime: a?.nextPaintTime,
+                interactionType: a?.interactionType,
+                inputDelay: a?.inputDelay,
+                processingDuration: a?.processingDuration,
+                presentationDelay: a?.presentationDelay,
+                loadState: a?.loadState
             }
         } as InteractionToNextPaintEvent);
     }

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

@@ -453,4 +453,90 @@ describe('WebVitalsPlugin tests', () => {
             expect.anything()
         );
     });
+
+    test('When web vitals have null attribution then they handle gracefully', async () => {
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const webVitals = require('web-vitals/attribution');
+
+        // Test LCP with null attribution
+        webVitals.onLCP.mockImplementationOnce((callback) => {
+            callback({ ...mockLCPData, attribution: null });
+        });
+
+        // Test FID with null attribution
+        webVitals.onFID.mockImplementationOnce((callback) => {
+            callback({ ...mockFIDData, attribution: null });
+        });
+
+        // Test CLS with null attribution
+        webVitals.onCLS.mockImplementationOnce((callback) => {
+            callback({ ...mockCLSData, attribution: null });
+        });
+
+        // Test INP with null attribution
+        webVitals.onINP.mockImplementationOnce((callback) => {
+            callback({ ...mockINPData, attribution: null });
+        });
+
+        const plugin = new WebVitalsPlugin();
+        plugin.load(context);
+
+        // Verify LCP handles null attribution
+        expect(record).toHaveBeenCalledWith(
+            LCP_EVENT_TYPE,
+            expect.objectContaining({
+                attribution: expect.objectContaining({
+                    element: undefined,
+                    url: undefined,
+                    timeToFirstByte: undefined,
+                    resourceLoadDelay: undefined,
+                    resourceLoadTime: undefined,
+                    elementRenderDelay: undefined
+                })
+            })
+        );
+
+        // Verify FID handles null attribution
+        expect(record).toHaveBeenCalledWith(
+            FID_EVENT_TYPE,
+            expect.objectContaining({
+                attribution: expect.objectContaining({
+                    eventTarget: undefined,
+                    eventType: undefined,
+                    eventTime: undefined,
+                    loadState: undefined
+                })
+            })
+        );
+
+        // Verify CLS handles null attribution
+        expect(recordCandidate).toHaveBeenCalledWith(
+            CLS_EVENT_TYPE,
+            expect.objectContaining({
+                attribution: expect.objectContaining({
+                    largestShiftTarget: undefined,
+                    largestShiftValue: undefined,
+                    largestShiftTime: undefined,
+                    loadState: undefined
+                })
+            })
+        );
+
+        // Verify INP handles null attribution
+        expect(recordCandidate).toHaveBeenCalledWith(
+            INP_EVENT_TYPE,
+            expect.objectContaining({
+                attribution: expect.objectContaining({
+                    interactionTarget: undefined,
+                    interactionTime: undefined,
+                    nextPaintTime: undefined,
+                    interactionType: undefined,
+                    inputDelay: undefined,
+                    processingDuration: undefined,
+                    presentationDelay: undefined,
+                    loadState: undefined
+                })
+            })
+        );
+    });
 });