From 30619ab76a9a47b79ab0728f07bea66892f55a64 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 6 Sep 2022 09:22:56 +0000 Subject: [PATCH 1/2] feat(browser): Use fetch `keepalive` flag --- packages/browser/src/transports/fetch.ts | 10 ++++++++++ packages/browser/test/unit/transports/fetch.test.ts | 3 ++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/browser/src/transports/fetch.ts b/packages/browser/src/transports/fetch.ts index 2d7bea31ae6a..4f56bfd23a51 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 wnen + // 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', }; From 10dc0bfffd16e9d98366800fa0216efd6665d6ab Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Tue, 6 Sep 2022 09:34:04 +0000 Subject: [PATCH 2/2] typo --- packages/browser/src/transports/fetch.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/browser/src/transports/fetch.ts b/packages/browser/src/transports/fetch.ts index 4f56bfd23a51..4c7cc3230fde 100644 --- a/packages/browser/src/transports/fetch.ts +++ b/packages/browser/src/transports/fetch.ts @@ -24,7 +24,7 @@ export function makeFetchTransport( // 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 wnen + // 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,