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

@@ -255,7 +255,7 @@ describe('Session recording', () => {
                         [/https:\/\/example.com/, 'fetch'],
                     ]
 
-                    // yay, includes expected type 6 network data
+                    // yay, includes expected network data
                     expect(capturedRequests.length).to.equal(expectedCaptureds.length)
                     expectedCaptureds.forEach(([url, initiatorType], index) => {
                         expect(capturedRequests[index].name).to.match(url)
@@ -281,7 +281,7 @@ describe('Session recording', () => {
                 })
             })
 
-            it('it captures XHR method correctly', () => {
+            it('it captures xhr methods correctly', () => {
                 cy.get('[data-cy-xhr-call-button]').click()
                 cy.wait('@example.com')
                 cy.wait('@session-recording')
@@ -310,11 +310,13 @@ describe('Session recording', () => {
                         [/https:\/\/example.com/, 'xmlhttprequest'],
                     ]
 
-                    // yay, includes expected type 6 network data
+                    // yay, includes expected 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/posthog-core.ts

@@ -574,8 +574,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) {
@@ -586,8 +586,8 @@ export class PostHog {
             person_profiles: this._initialPersonProfilesConfig
                 ? this._initialPersonProfilesConfig
                 : config['defaultIdentifiedOnly']
-                  ? 'identified_only'
-                  : 'always',
+                ? 'identified_only'
+                : 'always',
         })
 
         this.siteApps?.onRemoteConfig(config)
@@ -1709,7 +1709,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/request.ts

@@ -218,18 +218,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,
     })
 }