feat: support partial payload compression (#25183)

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Sep 25, 2024 · 0a3e220 · 0a3e220
1 parent 2196aea
commit 0a3e220
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 4 deletions.
diff --git a/frontend/src/loadPostHogJS.tsx b/frontend/src/loadPostHogJS.tsx
@@ -50,6 +50,10 @@ export function loadPostHogJS(): void {
                 _onCapture: (window as any)._cypress_posthog_captures
                     ? (_, event) => (window as any)._cypress_posthog_captures.push(event)
                     : undefined,
+
+                session_recording: {
+                    compress_events: true,
+                },
             })
         )
 

diff --git a/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts b/frontend/src/scenes/session-recordings/player/sessionRecordingDataLogic.ts
@@ -1,6 +1,7 @@
 import posthogEE from '@posthog/ee/exports'
-import { customEvent, EventType, eventWithTime, fullSnapshotEvent } from '@rrweb/types'
+import { customEvent, EventType, eventWithTime, fullSnapshotEvent, IncrementalSource } from '@rrweb/types'
 import { captureException, captureMessage } from '@sentry/react'
+import { gunzipSync, strFromU8, strToU8 } from 'fflate'
 import {
     actions,
     afterMount,
@@ -25,6 +26,7 @@ import { isObject } from 'lib/utils'
 import { chainToElements } from 'lib/utils/elements-chain'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import posthog from 'posthog-js'
+import { compressedEventWithTime } from 'posthog-js/lib/src/extensions/replay/sessionrecording'
 
 import { HogQLQuery, NodeKind } from '~/queries/schema'
 import { hogql } from '~/queries/utils'
@@ -112,6 +114,68 @@ function hasAnyWireframes(snapshotData: Record<string, any>[]): boolean {
     })
 }
 
+function isCompressedEvent(ev: unknown): ev is compressedEventWithTime {
+    return typeof ev === 'object' && ev !== null && 'cv' in ev
+}
+
+function unzip(compressedStr: string): any {
+    return JSON.parse(strFromU8(gunzipSync(strToU8(compressedStr, true))))
+}
+
+function decompressEvent(ev: eventWithTime | compressedEventWithTime): eventWithTime {
+    try {
+        if (isCompressedEvent(ev)) {
+            if (ev.cv === '2024-10') {
+                if (ev.type === EventType.FullSnapshot) {
+                    return {
+                        ...ev,
+                        data: unzip(ev.data),
+                    }
+                } else if (ev.type === EventType.IncrementalSnapshot) {
+                    if (ev.data.source === IncrementalSource.StyleSheetRule) {
+                        return {
+                            ...ev,
+                            data: {
+                                ...ev.data,
+                                source: IncrementalSource.StyleSheetRule,
+                                adds: unzip(ev.data.adds),
+                                removes: unzip(ev.data.removes),
+                            },
+                        }
+                    } else if (ev.data.source === IncrementalSource.Mutation) {
+                        return {
+                            ...ev,
+                            data: {
+                                ...ev.data,
+                                source: IncrementalSource.Mutation,
+                                adds: unzip(ev.data.adds),
+                                removes: unzip(ev.data.removes),
+                                texts: unzip(ev.data.texts),
+                                attributes: unzip(ev.data.attributes),
+                            },
+                        }
+                    }
+                }
+            } else {
+                posthog.captureException(new Error('Unknown compressed event version'), {
+                    feature: 'session-recording-compressed-event-decompression',
+                    compressedEvent: ev,
+                    compressionVersion: ev.cv,
+                })
+                // probably unplayable but we don't know how to decompress it
+                return ev as eventWithTime
+            }
+        }
+        return ev as eventWithTime
+    } catch (e) {
+        posthog.captureException((e as Error) || new Error('Cound not decompress event'), {
+            feature: 'session-recording-compressed-event-decompression',
+            compressedEvent: ev,
+        })
+        return ev as eventWithTime
+    }
+}
+
 export const parseEncodedSnapshots = async (
     items: (RecordingSnapshot | EncodedRecordingSnapshot | string)[],
     sessionId: string,
@@ -140,9 +204,11 @@ export const parseEncodedSnapshots = async (
             }
 
             return snapshotData.map((d: unknown) => {
-                const snap = withMobileTransformer
-                    ? postHogEEModule?.mobileReplay?.transformEventToWeb(d) || (d as eventWithTime)
-                    : (d as eventWithTime)
+                const snap = decompressEvent(
+                    withMobileTransformer
+                        ? postHogEEModule?.mobileReplay?.transformEventToWeb(d) || (d as eventWithTime)
+                        : (d as eventWithTime)
+                )
                 return {
                     // this handles parsing data that was loaded from blob storage "window_id"
                     // and data that was exported from the front-end "windowId"