EMBR-10483: Switch to a buffered POST beacon for JS errors

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@speedcurve/lux",
-  "version": "4.4.3",
+  "version": "4.5.0",
   "config": {
     "snippetVersion": "2.0.0"
   },

src/beacon.ts

@@ -9,6 +9,7 @@ import type { NavigationTimingData } from "./metric/navigation-timing";
 import * as PROPS from "./minification";
 import now from "./now";
 import { getPageRestoreTime, getZeroTime, msSincePageInit } from "./timing";
+import { postJson } from "./transport";
 import { VERSION } from "./version";
 
 type BeaconOptions = {
@@ -23,18 +24,6 @@ type BeaconOptions = {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type CollectorFunction = (config: UserConfig) => any;
 
-const sendBeaconFallback = (url: string | URL, data?: BodyInit | null) => {
-  const xhr = new XMLHttpRequest();
-  xhr.open("POST", url, true);
-  xhr.setRequestHeader("content-type", "application/json");
-  xhr.send(String(data));
-
-  return true;
-};
-
-const sendBeacon =
-  "sendBeacon" in navigator ? navigator.sendBeacon.bind(navigator) : sendBeaconFallback;
-
 /**
  * Some values should only be reported if they are non-zero. The exception to this is when the page
  * was prerendered or restored from BF cache
@@ -213,7 +202,7 @@ export class Beacon {
     );
 
     try {
-      if (sendBeacon(beaconUrl, JSON.stringify(payload))) {
+      if (postJson(beaconUrl, JSON.stringify(payload))) {
         this.isSent = true;
         this.logger.logEvent(LogEvent.PostBeaconSent, [beaconUrl, payload]);
         Events.emit("beacon", payload);

src/config.ts

@@ -9,6 +9,7 @@ import type { UrlPatternMapping } from "./url-matcher";
 export interface ConfigObject {
   allowEmptyPostBeacon: boolean;
   auto: boolean;
+  errorBeaconDelay: number;
   beaconUrl: string;
   beaconUrlFallback?: string;
   beaconUrlV2: string;
@@ -48,20 +49,21 @@ export function fromObject(obj: UserConfig): ConfigObject {
   return {
     allowEmptyPostBeacon: getProperty(obj, "allowEmptyPostBeacon", false),
     auto: autoMode,
+    errorBeaconDelay: getProperty(obj, "errorBeaconDelay", 2000),
     beaconUrl: getProperty(obj, "beaconUrl", luxOrigin + "/lux/"),
     beaconUrlFallback: getProperty(obj, "beaconUrlFallback"),
     beaconUrlV2: getProperty(obj, "beaconUrlV2", "https://beacon.speedcurve.com/store"),
     conversions: getProperty(obj, "conversions"),
     cookieDomain: getProperty(obj, "cookieDomain"),
     customerid: getProperty(obj, "customerid"),
-    errorBeaconUrl: getProperty(obj, "errorBeaconUrl", luxOrigin + "/error/"),
+    errorBeaconUrl: getProperty(obj, "errorBeaconUrl", "https://beacon.speedcurve.com/store/error"),
     interactionBeaconDelay: getProperty(obj, "interactionBeaconDelay", 200),
     jspagelabel: getProperty(obj, "jspagelabel"),
     label: getProperty(obj, "label"),
     maxAttributionEntries: getProperty(obj, "maxAttributionEntries", 25),
     maxBeaconUrlLength: getProperty(obj, "maxBeaconUrlLength", 8190),
     maxBeaconUTEntries: getProperty(obj, "maxBeaconUTEntries", 20),
-    maxErrors: getProperty(obj, "maxErrors", 5),
+    maxErrors: getProperty(obj, "maxErrors", 64),
     maxMeasureTime: getProperty(obj, "maxMeasureTime", 60_000),
     measureUntil: getProperty(obj, "measureUntil", spaMode ? "pagehidden" : "onload"),
     minMeasureTime: getProperty(obj, "minMeasureTime", 0),

src/error-beacon.ts

@@ -0,0 +1,84 @@
+import type { ConfigObject } from "./config";
+import { postJson } from "./transport";
+
+type ErrorBeaconContext = {
+  customerId: string;
+  pageId: string;
+  sessionId: string;
+  scriptVersion: string;
+  hostname: string;
+  pathname: string;
+  pageLabel: string;
+  connectionType: string | undefined;
+  deliveryType: string | undefined;
+  navigationType: number | undefined;
+  deviceMemory: number | undefined;
+  flags: number;
+  customData: Record<string, unknown>;
+};
+
+type BufferedError = {
+  errorTime: number;
+  filename: string;
+  lineno: number;
+  colno: number;
+  message: string;
+};
+
+// This is the same value as MAX_ERRORS_PER_BEACON in speedcurve-rum-beacons-edge-service
+const MAX_ERRORS_PER_BEACON = 64;
+
+let buffer: BufferedError[] = [];
+let pendingContext: ErrorBeaconContext | null = null;
+let pendingConfig: ConfigObject | null = null;
+let flushTimer: ReturnType<typeof setTimeout> | null = null;
+
+export function queueErrorBeacon(
+  config: ConfigObject,
+  error: ErrorEvent,
+  errorTime: number,
+  context: ErrorBeaconContext,
+): void {
+  // If the page ID has changed since the last error (e.g. due to a SPA navigation), or if the
+  // buffer is full, flush the current beacon before adding the new error.
+  const pageChanged = pendingContext && pendingContext.pageId !== context.pageId;
+  const bufferFull = buffer.length >= MAX_ERRORS_PER_BEACON;
+
+  if (pageChanged || bufferFull) {
+    flushErrorBeacon();
+  }
+
+  pendingContext = context;
+  pendingConfig = config;
+  buffer.push({
+    errorTime,
+    filename: error.filename,
+    lineno: error.lineno,
+    colno: error.colno,
+    message: error.message,
+  });
+
+  if (flushTimer === null) {
+    flushTimer = setTimeout(flushErrorBeacon, config.errorBeaconDelay);
+  }
+}
+
+function flushErrorBeacon(): void {
+  if (flushTimer !== null) {
+    clearTimeout(flushTimer);
+    flushTimer = null;
+  }
+
+  if (buffer.length === 0 || !pendingContext || !pendingConfig) {
+    return;
+  }
+
+  postJson(
+    pendingConfig.errorBeaconUrl,
+    JSON.stringify(Object.assign({}, pendingContext, { errors: buffer })),
+  );
+
+  buffer = [];
+  pendingContext = null;
+  pendingConfig = null;
+}

src/lux.ts

@@ -12,6 +12,7 @@ import { SESSION_COOKIE_NAME } from "./cookie";
 import * as CustomData from "./custom-data";
 import { onVisible, isVisible, wasPrerendered, wasRedirected } from "./document";
 import { getNodeSelector } from "./dom";
+import { queueErrorBeacon } from "./error-beacon";
 import * as Events from "./events";
 import Flags, { addFlag } from "./flags";
 import type { Command, LuxGlobal } from "./global";
@@ -86,28 +87,22 @@ LUX = (function () {
 
       if (isLuxError || (nErrors <= globalConfig.maxErrors && _sample())) {
         // Sample & limit other errors.
-        // Send the error beacon.
-        new Image().src =
-          globalConfig.errorBeaconUrl +
-          "?v=" +
-          versionAsFloat() +
-          "&id=" +
-          getCustomerId() +
-          "&fn=" +
-          encodeURIComponent(e.filename) +
-          "&ln=" +
-          e.lineno +
-          "&cn=" +
-          e.colno +
-          "&msg=" +
-          encodeURIComponent(e.message) +
-          "&l=" +
-          encodeURIComponent(_getPageLabel()) +
-          (connectionType() ? "&ct=" + connectionType() : "") +
-          "&HN=" +
-          encodeURIComponent(document.location.hostname) +
-          "&PN=" +
-          encodeURIComponent(document.location.pathname);
+        queueErrorBeacon(globalConfig, e, msSincePageInit(), {
+          customerId: getCustomerId(),
+          pageId: gSyncId,
+          sessionId: gUid,
+          scriptVersion: VERSION,
+          hostname: document.location.hostname,
+          pathname: document.location.pathname,
+          pageLabel: _getPageLabel(),
+          connectionType: connectionType(),
+          deliveryType: deliveryType(),
+          navigationType: navigationType(),
+          deviceMemory:
+            typeof navigator.deviceMemory === "number" ? round(navigator.deviceMemory) : undefined,
+          flags: gFlags,
+          customData: CustomData.getAllCustomData(),
+        });
       }
     }
   }
@@ -1298,24 +1293,20 @@ LUX = (function () {
   }
 
   // Return the connection type based on Network Information API.
-  // Note this API is in flux.
-  function connectionType() {
+  function connectionType(): string | undefined {
     const c = navigator.connection;
-    let connType = "";
 
     if (c && c.effectiveType) {
-      connType = c.effectiveType;
+      const connType = c.effectiveType;
 
       if ("slow-2g" === connType) {
-        connType = "Slow 2G";
-      } else if ("2g" === connType || "3g" === connType || "4g" === connType || "5g" === connType) {
-        connType = connType.toUpperCase();
-      } else {
-        connType = connType.charAt(0).toUpperCase() + connType.slice(1);
+        return "Slow 2G";
       }
+
+      return connType.toUpperCase();
     }
 
-    return connType;
+    return undefined;
   }
 
   // Return an array of image elements that are in the top viewport.
@@ -1571,6 +1562,7 @@ LUX = (function () {
     const ds = docSize();
     const ct = connectionType();
     const dt = deliveryType();
+    const navType = navigationType();
 
     // Note some page stat values (the `PS` query string) are non-numeric. To make extracting these
     // values easier, we append an underscore "_" to the value. Values this is used for include
@@ -1614,7 +1606,7 @@ LUX = (function () {
       "er" +
       nErrors +
       "nt" +
-      navigationType() +
+      (typeof navType !== "undefined" ? navType : "") +
       (navigator.deviceMemory ? "dm" + round(navigator.deviceMemory) : "") + // device memory (GB)
       (sIx ? "&IX=" + sIx : "") +
       (typeof gFirstInputDelay !== "undefined" ? "&FID=" + gFirstInputDelay : "") +

src/performance.ts

@@ -16,12 +16,12 @@ export const timing = performance.timing || {
 // Older PerformanceTiming implementations allow for arbitrary keys to exist on the timing object
 export type PerfTimingKey = keyof Omit<PerformanceTiming, "toJSON">;
 
-export function navigationType() {
+export function navigationType(): number | undefined {
   if (performance.navigation && typeof performance.navigation.type !== "undefined") {
     return performance.navigation.type;
   }
 
-  return "";
+  return undefined;
 }
 
 /**

src/transport.ts

@@ -0,0 +1,15 @@
+const sendBeaconFallback = (url: string, data: string) => {
+  const xhr = new XMLHttpRequest();
+  xhr.open("POST", url, true);
+  xhr.setRequestHeader("content-type", "application/json");
+  xhr.send(data);
+
+  return true;
+};
+
+const sendBeaconImpl =
+  "sendBeacon" in navigator ? navigator.sendBeacon.bind(navigator) : sendBeaconFallback;
+
+export function postJson(url: string, data: string): boolean {
+  return sendBeaconImpl(url, data);
+}