fix(browser): Send gzipped request body as ArrayBuffer (#3172)

* fix(browser): Send gzipped request body as ArrayBuffer

In WebKit, calling `fetch` with a `Blob` in the body results in an empty
request. Using an ArrayBuffer allows the bytes to be written directly to
the request body buffer, while Blobs require a seperate lookup in a blob
registry. Presumably this step is failing (seems like a bug?).

* chore(browser): add changeset

* test: update expected body type

Author: dustinbyrne

.changeset/tired-rings-fry.md

@@ -0,0 +1,5 @@
+---
+'posthog-js': patch
+---
+
+fix: Compressed requests use ArrayBuffer

packages/browser/src/__tests__/request.test.ts

@@ -1,6 +1,7 @@
 /* eslint-disable compat/compat */
 /// <reference lib="dom" />
 
+import { TextDecoder } from 'util'
 import { extendURLParams, request } from '../request'
 import { Compression, RequestWithOptions } from '../types'
 
@@ -400,14 +401,10 @@ describe('request', () => {
                     })
                 )
                 expect(mockedXHR.send).toHaveBeenCalledTimes(1)
-                expect(mockedXHR.send.mock.calls[0][0]).toBeInstanceOf(Blob)
-                // Decode and check the blob content
+                expect(mockedXHR.send.mock.calls[0][0]).toBeInstanceOf(ArrayBuffer)
+                // Decode and check the ArrayBuffer content
 
-                const res = await new Promise((resolve) => {
-                    const reader = new FileReader()
-                    reader.onload = () => resolve(reader.result)
-                    reader.readAsText(mockedXHR.send.mock.calls[0][0])
-                })
+                const res = new TextDecoder().decode(mockedXHR.send.mock.calls[0][0] as ArrayBuffer)
 
                 expect(res).toMatchInlineSnapshot(`
                 "��VJ��W�RJJ,R���+�
@@ -505,15 +502,11 @@ describe('request', () => {
 
                 expect(mockedNavigator?.sendBeacon).toHaveBeenCalledWith(
                     'https://any.posthog-instance.com/?_=1700000000000&ver=1.23.45&compression=gzip-js&beacon=1',
-                    expect.any(Blob)
+                    expect.any(ArrayBuffer)
                 )
-                const blob = mockedNavigator?.sendBeacon.mock.calls[0][1] as Blob
+                const arrayBuffer = mockedNavigator?.sendBeacon.mock.calls[0][1] as ArrayBuffer
 
-                const reader = new FileReader()
-                const result = await new Promise((resolve) => {
-                    reader.onload = () => resolve(reader.result)
-                    reader.readAsText(blob)
-                })
+                const result = new TextDecoder().decode(arrayBuffer)
 
                 expect(result).toMatchInlineSnapshot(`
                 "��VJ��W�RJJ,R���+�

packages/browser/src/request.ts

@@ -24,7 +24,7 @@ const SIXTY_FOUR_KILOBYTES = 64 * 1024
 const KEEP_ALIVE_THRESHOLD = SIXTY_FOUR_KILOBYTES * 0.8
 type EncodedBody = {
     contentType: string
-    body: string | BlobPart
+    body: string | BlobPart | ArrayBuffer
     estimatedSize: number
 }
 
@@ -75,11 +75,10 @@ const encodePostData = ({ data, compression }: RequestWithOptions): EncodedBody
 
     if (compression === Compression.GZipJS) {
         const gzipData = gzipSync(strToU8(jsonStringify(data)), { mtime: 0 })
-        const blob = new Blob([gzipData], { type: CONTENT_TYPE_PLAIN })
         return {
             contentType: CONTENT_TYPE_PLAIN,
-            body: blob,
-            estimatedSize: blob.size,
+            body: gzipData.buffer.slice(gzipData.byteOffset, gzipData.byteOffset + gzipData.byteLength) as ArrayBuffer,
+            estimatedSize: gzipData.byteLength,
         }
     }