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
PostHog · Dec 16, 2024 · af98f16 · af98f16
1 parent 6f9e089
commit af98f16
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 20 deletions.
diff --git a/src/__tests__/featureflags.test.ts b/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)
 

diff --git a/src/__tests__/surveys.test.ts b/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)

diff --git a/src/posthog-core.ts b/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

diff --git a/src/posthog-featureflags.ts b/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}`

diff --git a/src/posthog-surveys.ts b/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([])

diff --git a/src/request.ts b/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

diff --git a/src/web-experiments.ts b/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([])