feat(browser): Use fetch keepalive flag (#5697)

Author: Luca Forstner

packages/browser/src/transports/fetch.ts

@@ -17,6 +17,16 @@ export function makeFetchTransport(
       method: 'POST',
       referrerPolicy: 'origin',
       headers: options.headers,
+      // Outgoing requests are usually cancelled when navigating to a different page, causing a "TypeError: Failed to
+      // fetch" error and sending a "network_error" client-outcome - in Chrome, the request status shows "(cancelled)".
+      // The `keepalive` flag keeps outgoing requests alive, even when switching pages. We want this since we're
+      // frequently sending events right before the user is switching pages (eg. whenfinishing navigation transactions).
+      // Gotchas:
+      // - `keepalive` isn't supported by Firefox
+      // - As per spec (https://fetch.spec.whatwg.org/#http-network-or-cache-fetch), a request with `keepalive: true`
+      //   and a content length of > 64 kibibytes returns a network error. We will therefore only activate the flag when
+      //   we're below that limit.
+      keepalive: request.body.length <= 65536,
       ...options.fetchOptions,
     };
 

packages/browser/test/unit/transports/fetch.test.ts

@@ -44,6 +44,7 @@ describe('NewFetchTransport', () => {
     expect(mockFetch).toHaveBeenLastCalledWith(DEFAULT_FETCH_TRANSPORT_OPTIONS.url, {
       body: serializeEnvelope(ERROR_ENVELOPE, new TextEncoder()),
       method: 'POST',
+      keepalive: true,
       referrerPolicy: 'origin',
     });
   });
@@ -81,7 +82,7 @@ describe('NewFetchTransport', () => {
 
     const REQUEST_OPTIONS: RequestInit = {
       referrerPolicy: 'strict-origin',
-      keepalive: true,
+      keepalive: false,
       referrer: 'http://example.org',
     };