diff --git a/packages/browser/src/transports/fetch.ts b/packages/browser/src/transports/fetch.ts index 2d7bea31ae6a..4c7cc3230fde 100644 --- a/packages/browser/src/transports/fetch.ts +++ b/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, }; diff --git a/packages/browser/test/unit/transports/fetch.test.ts b/packages/browser/test/unit/transports/fetch.test.ts index 87ad77266106..6bf6671ea1da 100644 --- a/packages/browser/test/unit/transports/fetch.test.ts +++ b/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', };