Ensure beacon collectors are reattached after init

Author: josephwynn-sc

src/beacon.ts

@@ -19,7 +19,7 @@ type BeaconOptions = {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type CollectorFunction = (config: UserConfig) => any;
+export type CollectorFunction = (config: UserConfig) => any;
 
 const sendBeaconFallback = (url: string | URL, data?: BodyInit | null) => {
   const xhr = new XMLHttpRequest();

src/lux.ts

@@ -1,4 +1,10 @@
-import { Beacon, BeaconMetricKey, fitUserTimingEntries, shouldReportValue } from "./beacon";
+import {
+  Beacon,
+  BeaconMetricKey,
+  CollectorFunction,
+  fitUserTimingEntries,
+  shouldReportValue,
+} from "./beacon";
 import onPageLoad from "./beacon-triggers/page-load";
 import * as Config from "./config";
 import { BOOLEAN_TRUE, END_MARK, START_MARK } from "./constants";
@@ -121,17 +127,7 @@ LUX = (function () {
   // on the same page.
   let _thisCustomerId = LUX.customerid;
 
-  const initPostBeacon = () => {
-    return new Beacon({
-      config: globalConfig,
-      logger,
-      customerId: getCustomerId(),
-      sessionId: gUid,
-      pageId: gSyncId,
-    });
-  };
-
-  let beacon = initPostBeacon();
+  const beaconCollectors: [BeaconMetricKey, CollectorFunction][] = [];
 
   const logEntry = <T extends PerformanceEntry>(entry: T) => {
     logger.logEvent(LogEvent.PerformanceEntryReceived, [entry]);
@@ -157,7 +153,7 @@ LUX = (function () {
         LCP.processEntry(entry);
       })
     ) {
-      beacon.addCollector(BeaconMetricKey.LCP, LCP.getData);
+      beaconCollectors.push([BeaconMetricKey.LCP, LCP.getData]);
     }
 
     if (
@@ -166,7 +162,7 @@ LUX = (function () {
         logEntry(entry);
       })
     ) {
-      beacon.addCollector(BeaconMetricKey.CLS, CLS.getData);
+      beaconCollectors.push([BeaconMetricKey.CLS, CLS.getData]);
     }
 
     if (
@@ -175,7 +171,7 @@ LUX = (function () {
         logEntry(entry);
       })
     ) {
-      beacon.addCollector(BeaconMetricKey.LoAF, LoAF.getData);
+      beaconCollectors.push([BeaconMetricKey.LoAF, LoAF.getData]);
     }
 
     const handleINPEntry = (entry: PerformanceEventTiming) => {
@@ -220,12 +216,30 @@ LUX = (function () {
         { durationThreshold: 0 },
       )
     ) {
-      beacon.addCollector(BeaconMetricKey.INP, INP.getData);
+      beaconCollectors.push([BeaconMetricKey.INP, INP.getData]);
     }
   } catch (e) {
     logger.logEvent(LogEvent.PerformanceObserverError, [e]);
   }
 
+  const initPostBeacon = () => {
+    const b = new Beacon({
+      config: globalConfig,
+      logger,
+      customerId: getCustomerId(),
+      sessionId: gUid,
+      pageId: gSyncId,
+    });
+
+    beaconCollectors.forEach(([metric, collector]) => {
+      b.addCollector(metric, collector);
+    });
+
+    return b;
+  };
+
+  let beacon = initPostBeacon();
+
   if (_sample()) {
     logger.logEvent(LogEvent.SessionIsSampled, [globalConfig.samplerate]);
   } else {

tests/integration/post-beacon/cls.spec.ts

@@ -22,11 +22,11 @@ test.describe("POST beacon CLS", () => {
   });
 
   test("CLS is reset between SPA page transitions", async ({ page }) => {
+    const layoutShiftsSupported = await entryTypeSupported(page, "layout-shift");
     const luxRequests = new RequestInterceptor(page).createRequestMatcher("/store/");
     await page.goto("/layout-shifts.html?noShiftDelay&injectScript=LUX.auto=false;");
     await luxRequests.waitForMatchingRequest(() => page.evaluate(() => LUX.send()));
     let b = luxRequests.get(0)!.postDataJSON() as BeaconPayload;
-    const layoutShiftsSupported = await entryTypeSupported(page, "layout-shift");
 
     if (layoutShiftsSupported) {
       const responseEnd = await getNavigationTimingMs(page, "responseEnd");
@@ -41,6 +41,12 @@ test.describe("POST beacon CLS", () => {
     await luxRequests.waitForMatchingRequest(() => page.evaluate(() => LUX.send()));
 
     b = luxRequests.get(1)!.postDataJSON() as BeaconPayload;
-    expect(b.cls).toBeUndefined();
+
+    if (layoutShiftsSupported) {
+      expect(b.cls!.value).toEqual(0);
+      expect(b.cls!.startTime).toEqual(null);
+    } else {
+      expect(b.cls).toBeUndefined();
+    }
   });
 });

tests/integration/post-beacon/loaf.spec.ts

@@ -25,6 +25,61 @@ test.describe("POST beacon LoAF", () => {
     }
   });
 
+  test("LoAFs are reset between SPA page transitions", async ({ page }) => {
+    const loafSupported = await entryTypeSupported(page, "long-animation-frame");
+    const luxRequests = new RequestInterceptor(page).createRequestMatcher("/store/");
+    await page.goto("/long-animation-frames.html?injectScript=LUX.auto=false;", {
+      waitUntil: "networkidle",
+    });
+    await luxRequests.waitForMatchingRequest(() => page.evaluate(() => LUX.send()));
+    let b = luxRequests.get(0)!.postDataJSON() as BeaconPayload;
+
+    // First beacon has LoAFs
+    if (loafSupported) {
+      const loaf = b.loaf!;
+      expect(loaf.totalBlockingDuration).toBeGreaterThan(0);
+      expect(loaf.totalDuration).toBeGreaterThan(0);
+      expect(loaf.totalEntries).toBeGreaterThan(0);
+      expect(loaf.totalStyleAndLayoutDuration).toBeGreaterThan(0);
+      expect(loaf.totalWorkDuration).toBeGreaterThan(0);
+      expect(loaf.entries.length).toBeGreaterThan(0);
+      expect(loaf.scripts.length).toBeGreaterThan(0);
+    } else {
+      expect(b.loaf).toBeUndefined();
+    }
+
+    // Second beacon has no LoAFs
+    await page.evaluate(() => LUX.init());
+    await page.waitForTimeout(200);
+    await luxRequests.waitForMatchingRequest(() => page.evaluate(() => LUX.send()));
+    b = luxRequests.get(1)!.postDataJSON() as BeaconPayload;
+
+    if (loafSupported) {
+      const loaf = b.loaf!;
+      expect(loaf.totalDuration).toEqual(0);
+      expect(loaf.entries.length).toEqual(0);
+      expect(loaf.scripts.length).toEqual(0);
+    } else {
+      expect(b.loaf).toBeUndefined();
+    }
+
+    // Third beacon has LoAFs again
+    await page.evaluate(() => LUX.init());
+    await page.locator("#create-long-task").click();
+    await page.waitForTimeout(50);
+    await luxRequests.waitForMatchingRequest(() => page.evaluate(() => LUX.send()));
+    b = luxRequests.get(2)!.postDataJSON() as BeaconPayload;
+
+    if (loafSupported) {
+      const loaf = b.loaf!;
+      expect(loaf.totalDuration).toBeGreaterThan(0);
+      expect(loaf.entries.length).toBeGreaterThan(0);
+      expect(loaf.scripts.length).toBeGreaterThan(0);
+    } else {
+      expect(b.loaf).toBeUndefined();
+    }
+  });
+
   test("LoAFs are collected as INP attribution", async ({ page }) => {
     const luxRequests = new RequestInterceptor(page).createRequestMatcher("/store/");
     await page.goto("/long-animation-frames.html", { waitUntil: "networkidle" });