chore: Make fetch our default request implementation

`fetch` is much more optimized in modern browsers, there shouldn't be any reason not to use it in place of `XMLHTTPRequest` as it's heavily supported. Also, we're still keeping the `XML` fallback if `fetch` doesn't exist.

Closes #1487

cypress/e2e/session-recording.cy.ts

@@ -281,7 +281,7 @@ describe('Session recording', () => {
                 })
             })
 
-            it('it captures XHR method correctly', () => {
+            it('it captures xhr and fetch methods correctly', () => {
                 cy.get('[data-cy-xhr-call-button]').click()
                 cy.wait('@example.com')
                 cy.wait('@session-recording')
@@ -304,7 +304,7 @@ describe('Session recording', () => {
                         [/http:\/\/localhost:\d+\/static\/array.js/, 'script'],
                         [
                             /http:\/\/localhost:\d+\/decide\/\?v=3&ip=1&_=\d+&ver=1\.\d\d\d\.\d+&compression=base64/,
-                            'xmlhttprequest',
+                            'fetch',
                         ],
                         [/http:\/\/localhost:\d+\/static\/recorder.js\?v=1\.\d\d\d\.\d+/, 'script'],
                         [/https:\/\/example.com/, 'xmlhttprequest'],
@@ -313,8 +313,10 @@ describe('Session recording', () => {
                     // yay, includes expected type 6 network data
                     expect(capturedRequests.length).to.equal(expectedCaptureds.length)
                     expectedCaptureds.forEach(([url, initiatorType], index) => {
-                        expect(capturedRequests[index].name).to.match(url)
-                        expect(capturedRequests[index].initiatorType).to.equal(initiatorType)
+                        const capturedRequest = capturedRequests[index]
+
+                        expect(capturedRequest.name).to.match(url)
+                        expect(capturedRequest.initiatorType).to.equal(initiatorType)
                     })
 
                     // the HTML file that cypress is operating on (playground/cypress/index.html)
@@ -324,7 +326,6 @@ describe('Session recording', () => {
 
                     expect(capturedFetchRequest.fetchStart).to.be.greaterThan(0) // proxy for including network timing info
 
-                    expect(capturedFetchRequest.initiatorType).to.eql('xmlhttprequest')
                     expect(capturedFetchRequest.method).to.eql('POST')
                     expect(capturedFetchRequest.isInitial).to.be.undefined
                     expect(capturedFetchRequest.requestBody).to.eq('i am the xhr body')

src/__tests__/featureflags.test.ts

@@ -475,7 +475,6 @@ describe('featureflags', () => {
             expect(instance._send_request).toHaveBeenCalledWith({
                 url: 'https://us.i.posthog.com/api/early_access_features/?token=random fake token',
                 method: 'GET',
-                transport: 'XHR',
                 callback: expect.any(Function),
             })
             expect(instance._send_request).toHaveBeenCalledTimes(1)
@@ -507,7 +506,6 @@ describe('featureflags', () => {
                 url: 'https://us.i.posthog.com/api/early_access_features/?token=random fake token',
                 method: 'GET',
                 callback: expect.any(Function),
-                transport: 'XHR',
             })
             expect(instance._send_request).toHaveBeenCalledTimes(1)
 

src/__tests__/surveys.test.ts

@@ -236,7 +236,6 @@ describe('surveys', () => {
         expect(instance._send_request).toHaveBeenCalledWith({
             url: 'https://us.i.posthog.com/api/surveys/?token=testtoken',
             method: 'GET',
-            transport: 'XHR',
             callback: expect.any(Function),
         })
         expect(instance._send_request).toHaveBeenCalledTimes(1)
@@ -281,7 +280,6 @@ describe('surveys', () => {
         expect(instance._send_request).toHaveBeenCalledWith({
             url: 'https://us.i.posthog.com/api/surveys/?token=testtoken',
             method: 'GET',
-            transport: 'XHR',
             callback: expect.any(Function),
         })
         expect(instance._send_request).toHaveBeenCalledTimes(1)

src/posthog-core.ts

@@ -575,8 +575,8 @@ export class PostHog {
             this.compression = includes(config['supportedCompression'], Compression.GZipJS)
                 ? Compression.GZipJS
                 : includes(config['supportedCompression'], Compression.Base64)
-                  ? Compression.Base64
-                  : undefined
+                ? Compression.Base64
+                : undefined
         }
 
         if (config.analytics?.endpoint) {
@@ -587,8 +587,8 @@ export class PostHog {
             person_profiles: this._initialPersonProfilesConfig
                 ? this._initialPersonProfilesConfig
                 : config['defaultIdentifiedOnly']
-                  ? 'identified_only'
-                  : 'always',
+                ? 'identified_only'
+                : 'always',
         })
 
         this.siteApps?.onRemoteConfig(config)
@@ -1710,7 +1710,7 @@ export class PostHog {
      *       // Capture rage clicks
      *       rageclick: true
      *
-     *       // transport for sending requests ('XHR' or 'sendBeacon')
+     *       // transport for sending requests ('XHR' | 'fetch' | 'sendBeacon')
      *       // NB: sendBeacon should only be used for scenarios such as
      *       // page unload where a "best-effort" attempt to send is
      *       // acceptable; the sendBeacon API does not support callbacks

src/posthog-featureflags.ts

@@ -433,7 +433,6 @@ export class PostHogFeatureFlags {
 
         if (!existing_early_access_features || force_reload) {
             this.instance._send_request({
-                transport: 'XHR',
                 url: this.instance.requestRouter.endpointFor(
                     'api',
                     `/api/early_access_features/?token=${this.instance.config.token}`

src/posthog-surveys.ts

@@ -118,7 +118,6 @@ export class PostHogSurveys {
                     `/api/surveys/?token=${this.instance.config.token}`
                 ),
                 method: 'GET',
-                transport: 'XHR',
                 callback: (response) => {
                     if (response.statusCode !== 200 || !response.json) {
                         return callback([])

src/request.ts

@@ -216,18 +216,17 @@ const _sendBeacon = (options: RequestOptions) => {
 const AVAILABLE_TRANSPORTS: { transport: RequestOptions['transport']; method: (options: RequestOptions) => void }[] = []
 
 // We add the transports in order of preference
-
-if (XMLHttpRequest) {
+if (fetch) {
     AVAILABLE_TRANSPORTS.push({
-        transport: 'XHR',
-        method: xhr,
+        transport: 'fetch',
+        method: _fetch,
     })
 }
 
-if (fetch) {
+if (XMLHttpRequest) {
     AVAILABLE_TRANSPORTS.push({
-        transport: 'fetch',
-        method: _fetch,
+        transport: 'XHR',
+        method: xhr,
     })
 }
 
@@ -250,7 +249,7 @@ export const request = (_options: RequestOptions) => {
         compression: options.compression,
     })
 
-    const transport = options.transport ?? 'XHR'
+    const transport = options.transport ?? 'fetch'
 
     const transportMethod =
         find(AVAILABLE_TRANSPORTS, (t) => t.transport === transport)?.method ?? AVAILABLE_TRANSPORTS[0].method

src/web-experiments.ts

@@ -151,7 +151,6 @@ export class WebExperiments {
                 `/api/web_experiments/?token=${this.instance.config.token}`
             ),
             method: 'GET',
-            transport: 'XHR',
             callback: (response) => {
                 if (response.statusCode !== 200 || !response.json) {
                     return callback([])