fix: Use PerformanceObserver to act as a second check to prevent returning 0 for duration and loadEventEnd (#101)

Author: Reno

src/plugins/event-plugins/NavigationPlugin.ts

@@ -23,16 +23,19 @@ export class NavigationPlugin implements Plugin {
     }
 
     /**
-     * If the client is initialized after the window has fired a load event,
-     * invoke the callback method directly to trigger the record event.
-     * Otherwise, keep the original implementation to add callback method to eventListener.
-     * However, if the page finishes loading right before adding addEventListener, we still cannot provide data
+     * loadEventEnd is populated as 0 if the web page has not loaded completely, even though LOAD has been fired.
+     * As a result, if loadEventEnd is populated, we can ignore eventListener and record the data directly.
+     * On the other hand, if not, we have to use eventListener to initializes PerformanceObserver.
+     * PerformanceObserver will act as a second check for the final load timings.
      */
     load(context: PluginContext): void {
         this.recordEvent = context.record;
         if (this.enabled) {
             if (this.hasTheWindowLoadEventFired()) {
-                this.eventListener();
+                const navData = window.performance.getEntriesByType(
+                    NAVIGATION
+                )[0] as PerformanceNavigationTiming;
+                this.performanceNavigationEventHandlerTimingLevel2(navData);
             } else {
                 window.addEventListener(LOAD, this.eventListener);
             }
@@ -94,9 +97,18 @@ export class NavigationPlugin implements Plugin {
         if (performance.getEntriesByType(NAVIGATION).length === 0) {
             this.performanceNavigationEventHandlerTimingLevel1();
         } else {
-            this.performanceNavigationEventHandlerTimingLevel2(
-                performance.getEntriesByType(NAVIGATION)[0]
-            );
+            const navigationObserver = new PerformanceObserver((list) => {
+                list.getEntries().forEach((event) => {
+                    if (event.entryType === NAVIGATION) {
+                        this.performanceNavigationEventHandlerTimingLevel2(
+                            event
+                        );
+                    }
+                });
+            });
+            navigationObserver.observe({
+                entryTypes: [NAVIGATION]
+            });
         }
     };
 

src/plugins/event-plugins/__integ__/NavigationPlugin.test.ts

@@ -122,7 +122,9 @@ test('when plugin loads after window.load then navigation timing events are reco
         .contains(DURATION)
 
         .expect(RESPONSE_STATUS.textContent)
-        .eql(STATUS_202.toString());
+        .eql(STATUS_202.toString())
+        .expect((await REQUEST_BODY.textContent).indexOf(DURATION))
+        .gt(0);
 
     /**
      * Deprecated Timing Level1 used for Safari browser do not contain following attributes

src/plugins/event-plugins/__integ__/PerformancePlugin.test.ts

@@ -131,7 +131,9 @@ test('PerformanceEvent records navigation event', async (t: TestController) => {
         .contains(DURATION)
 
         .expect(RESPONSE_STATUS.textContent)
-        .eql(STATUS_202.toString());
+        .eql(STATUS_202.toString())
+        .expect((await REQUEST_BODY.textContent).indexOf(DURATION))
+        .gt(0);
 
     /**
      * Deprecated Timing Level1 used for Safari browser do not contain following attributes