@adobe/alloy 2.36.0 → 2.36.1-beta.0

package/dist/alloy.js

@@ -3750,7 +3750,14 @@
     /**
      * Send a network request and returns details about the response.
      */
-    return ({ requestId, url, payload, useSendBeacon, headers }) => {
+    return ({
+      requestId,
+      url,
+      payload,
+      useSendBeacon,
+      useKeepalive,
+      headers,
+    }) => {
       // We want to log raw payload and event data rather than
       // our fancy wrapper objects. Calling payload.toJSON() is
       // insufficient to get all the nested raw data, because it's
@@ -3771,53 +3778,55 @@
         // navigator.sendBeacon() has no way to attach custom headers, so a
         // request that needs any (e.g. authenticated Server API requests)
         // must always go through fetch, regardless of useSendBeacon.
-        const requestMethod =
-          useSendBeacon && !headers ? sendBeaconRequest : sendFetchRequest;
+        const request =
+          useSendBeacon && !headers
+            ? sendBeaconRequest(url, stringifiedPayload)
+            : sendFetchRequest(url, stringifiedPayload, headers, {
+                keepalive: Boolean(useKeepalive),
+              });
 
-        return requestMethod(url, stringifiedPayload, headers).then(
-          (response) => {
-            const requestIsRetryable = isRequestRetryable({
+        return request.then((response) => {
+          const requestIsRetryable = isRequestRetryable({
+            response,
+            retriesAttempted,
+          });
+
+          if (requestIsRetryable) {
+            const requestRetryDelay = getRequestRetryDelay({
               response,
               retriesAttempted,
             });
+            return new Promise((resolve) => {
+              setTimeout(() => {
+                resolve(executeRequest(retriesAttempted + 1));
+              }, requestRetryDelay);
+            });
+          }
 
-            if (requestIsRetryable) {
-              const requestRetryDelay = getRequestRetryDelay({
-                response,
-                retriesAttempted,
-              });
-              return new Promise((resolve) => {
-                setTimeout(() => {
-                  resolve(executeRequest(retriesAttempted + 1));
-                }, requestRetryDelay);
-              });
-            }
-
-            let parsedBody;
+          let parsedBody;
 
-            try {
-              parsedBody = JSON.parse(response.body);
-            } catch {
-              // Non-JSON. Something went wrong.
-            }
+          try {
+            parsedBody = JSON.parse(response.body);
+          } catch {
+            // Non-JSON. Something went wrong.
+          }
 
-            logger.logOnNetworkResponse({
-              requestId,
-              url,
-              payload: parsedPayload,
-              ...response,
-              parsedBody,
-              retriesAttempted,
-            });
+          logger.logOnNetworkResponse({
+            requestId,
+            url,
+            payload: parsedPayload,
+            ...response,
+            parsedBody,
+            retriesAttempted,
+          });
 
-            return {
-              statusCode: response.statusCode,
-              body: response.body,
-              parsedBody,
-              getHeader: response.getHeader,
-            };
-          },
-        );
+          return {
+            statusCode: response.statusCode,
+            body: response.body,
+            parsedBody,
+            getHeader: response.getHeader,
+          };
+        });
       };
 
       return executeRequest().catch((error) => {
@@ -5229,6 +5238,15 @@
       },
       logOnNetworkResponse(data) {
         notifyMonitors("onNetworkResponse", data);
+        if (data.sentWithBeacon) {
+          // sendBeacon only tells us the browser queued the request; there is
+          // no server response to report.
+          log(
+            "info",
+            `Request ${data.requestId}: Sent using sendBeacon. No response is available for sendBeacon requests. If the page navigates away, the browser keeps sending the request in the background, but its developer tools may show it as canceled.`,
+          );
+          return;
+        }
         const messagesSuffix =
           data.parsedBody || data.body ? `response body:` : `no response body.`;
         log(
@@ -5335,6 +5353,9 @@
    * @param {RequestPayload} options.payload
    * @param {function({isIdentityEstablished: boolean}): string} options.getAction
    * @param {function({isIdentityEstablished: boolean}): boolean} options.getUseSendBeacon
+   * @param {function(): boolean} [options.getUseKeepalive] Whether a fetch
+   *   request should be sent with `keepalive` so it survives a page unload.
+   *   Defaults to false.
    * @param {string} [options.datastreamIdOverride]
    * @param {string} [options.edgeSubPath]
    *
@@ -5358,6 +5379,7 @@
       payload,
       getAction,
       getUseSendBeacon,
+      getUseKeepalive = () => false,
       datastreamIdOverride,
       edgeSubPath,
       requestParams = {},
@@ -5383,6 +5405,9 @@
       getUseSendBeacon() {
         return getUseSendBeacon({ isIdentityEstablished });
       },
+      getUseKeepalive() {
+        return getUseKeepalive();
+      },
       getEdgeSubPath() {
         if (edgeSubPath) {
           return edgeSubPath;
@@ -5451,9 +5476,9 @@
       // No error will be thrown and an identity is established. This is good.
       // 3. The document is unloaded and Alloy does not receive the empty response
       // back from the collect endpoint before navigation is completed. In this
-      // case, no error is thrown, but no identity was established and it's
-      // more likely that the request never makes it to the server because we're
-      // using fetch instead of sendBeacon.
+      // case, no error is thrown, but no identity was established. Because the
+      // fetch is sent with `keepalive` (see getUseKeepalive below), the browser
+      // still delivers the request to the server after the page unloads.
       //
       // The second approach seemed preferable.
       return (
@@ -5462,6 +5487,12 @@
       );
     };
 
+    // When the document may be unloading but we use fetch anyway (for example,
+    // before an identity is established), send the fetch with `keepalive` so the
+    // browser doesn't cancel the request when the page navigates away.
+    const getUseKeepalive = () =>
+      dataCollectionRequestPayload.getDocumentMayUnload();
+
     return createRequest({
       payload: dataCollectionRequestPayload,
       getAction({ isIdentityEstablished }) {
@@ -5470,6 +5501,7 @@
           : "interact";
       },
       getUseSendBeacon,
+      getUseKeepalive,
       datastreamIdOverride,
     });
   };
@@ -6335,6 +6367,7 @@
             url,
             payload: outgoingPayload,
             useSendBeacon: request.getUseSendBeacon(),
+            useKeepalive: request.getUseKeepalive(),
             headers,
           });
         })
@@ -6355,6 +6388,7 @@
               url,
               payload,
               useSendBeacon: request.getUseSendBeacon(),
+              useKeepalive: request.getUseKeepalive(),
             });
           }
           return handleRequestFailure(onRequestFailureCallbackAggregator)(error);
@@ -7956,10 +7990,10 @@
   governing permissions and limitations under the License.
   */
 
-  // The 2.36.0 keyword will be replace at alloy build time with the package.json version.
+  // The 2.36.1-beta.0 keyword will be replace at alloy build time with the package.json version.
   // see babel-plugin-version
 
-  var libraryVersion = "2.36.0";
+  var libraryVersion = "2.36.1-beta.0";
 
   /*
   Copyright 2019 Adobe. All rights reserved.
@@ -22117,9 +22151,23 @@
   governing permissions and limitations under the License.
   */
 
-  var injectSendFetchRequest = ({ fetch }) => {
-    return (url, body, headers) => {
-      return fetch(url, {
+  /** @import { NetworkService } from "@adobe/alloy-core/services" */
+
+  /**
+   * @param {Object} params
+   * @param {typeof window.fetch} params.fetch
+   * @param {{ info: (...args: any[]) => void }} params.logger
+   * @returns {NetworkService["sendFetchRequest"]}
+   */
+  var injectSendFetchRequest = ({ fetch, logger }) => {
+    /**
+     * @param {string} url
+     * @param {string} body
+     * @param {Record<string, string> | undefined} headers
+     * @param {boolean} keepalive
+     */
+    const startFetch = (url, body, headers, keepalive) =>
+      fetch(url, {
         method: "POST",
         cache: "no-cache",
         credentials: "include", // To set the cookie header in the request.
@@ -22129,7 +22177,30 @@
         },
         referrerPolicy: "no-referrer-when-downgrade",
         body,
-      }).then((response) => {
+        ...(keepalive ? { keepalive: true } : {}),
+      });
+
+    return (url, body, headers, { keepalive = false } = {}) => {
+      let responsePromise = startFetch(url, body, headers, keepalive);
+
+      if (keepalive) {
+        // Browsers reject keepalive requests whose body, together with every
+        // other in-flight keepalive request and sendBeacon on the page, exceeds
+        // 64 KiB. The rejection is a TypeError that looks the same as any other
+        // network error ("Failed to fetch", "NetworkError when attempting to
+        // fetch resource.", "Load failed") and arrives before anything is sent,
+        // so retry once without keepalive. Only fetch() itself is covered here;
+        // a failure while reading the response is not retried because the
+        // server already received the request.
+        responsePromise = responsePromise.catch(() => {
+          logger.info(
+            "Unable to send the request with `keepalive`; falling back to a regular `fetch`.",
+          );
+          return startFetch(url, body, headers, false);
+        });
+      }
+
+      return responsePromise.then((response) => {
         return response.text().then((responseBody) => ({
           statusCode: response.status,
           // We expose headers through a function instead of creating an object
@@ -22166,13 +22237,15 @@
 
       // Using sendBeacon, we technically don't get a response back from
       // the server, but we'll resolve the promise with an object to maintain
-      // consistency with other network strategies.
+      // consistency with other network strategies. `sentWithBeacon` marks the
+      // response as synthetic so it isn't logged as a real server response.
       return Promise.resolve({
         statusCode: 204,
         getHeader() {
           return null;
         },
         body: "",
+        sentWithBeacon: true,
       });
     };
   };
@@ -22196,7 +22269,7 @@
    */
   const createBrowserNetworkService = ({ logger }) => {
     const { fetch, navigator } = window;
-    const sendFetchRequest = injectSendFetchRequest({ fetch });
+    const sendFetchRequest = injectSendFetchRequest({ fetch, logger });
     const sendBeaconRequest =
       typeof navigator.sendBeacon === "function"
         ? injectSendBeaconRequest({