fix(session-replay-browser): use proper event payload for scroll events

amplitude · Sep 9, 2024 · a5e22fb · a5e22fb
1 parent 3db05b4
commit a5e22fb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 26 deletions.
diff --git a/packages/session-replay-browser/src/hooks/scroll.ts b/packages/session-replay-browser/src/hooks/scroll.ts
@@ -19,6 +19,8 @@ export type ScrollEvent = {
   type: 'scroll';
 };
 
+export type ScrollEventPayload = { version: number; events: ScrollEvent[] };
+
 /**
  * This is intended to watch and update max scroll activity when loaded for a particular page.
  * A new instance should be created if the page URL changes, since by default it does not reset
@@ -32,16 +34,16 @@ export class ScrollWatcher {
   private _maxScrollY: number;
   private _maxScrollWidth: number;
   private _maxScrollHeight: number;
-  private readonly transport: BeaconTransport<ScrollEvent>;
+  private readonly transport: BeaconTransport<ScrollEventPayload>;
 
   static default(
     context: Omit<SessionReplayDestinationSessionMetadata, 'deviceId'>,
     config: SessionReplayJoinedConfig,
   ): ScrollWatcher {
-    return new ScrollWatcher(new BeaconTransport<ScrollEvent>(context, config));
+    return new ScrollWatcher(new BeaconTransport<ScrollEventPayload>(context, config));
   }
 
-  constructor(transport: BeaconTransport<ScrollEvent>) {
+  constructor(transport: BeaconTransport<ScrollEventPayload>) {
     this._maxScrollX = 0;
     this._maxScrollY = 0;
     this._maxScrollWidth = getWindowWidth();
@@ -98,16 +100,21 @@ export class ScrollWatcher {
     const globalScope = getGlobalScope();
     if (globalScope && deviceId) {
       this.transport.send(deviceId, {
-        maxScrollX: this._maxScrollX,
-        maxScrollY: this._maxScrollY,
-        maxScrollWidth: this._maxScrollWidth,
-        maxScrollHeight: this._maxScrollHeight,
-
-        viewportHeight: getWindowHeight(),
-        viewportWidth: getWindowWidth(),
-        pageUrl: globalScope.location.href,
-        timestamp: this.timestamp,
-        type: 'scroll',
+        version: 1,
+        events: [
+          {
+            maxScrollX: this._maxScrollX,
+            maxScrollY: this._maxScrollY,
+            maxScrollWidth: this._maxScrollWidth,
+            maxScrollHeight: this._maxScrollHeight,
+
+            viewportHeight: getWindowHeight(),
+            viewportWidth: getWindowWidth(),
+            pageUrl: globalScope.location.href,
+            timestamp: this.timestamp,
+            type: 'scroll',
+          },
+        ],
       });
     }
   };

diff --git a/packages/session-replay-browser/test/hooks/scroll.test.ts b/packages/session-replay-browser/test/hooks/scroll.test.ts
@@ -2,7 +2,7 @@
 /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "expectMaxScrolls"] }] */
 import * as AnalyticsClientCommon from '@amplitude/analytics-client-common';
 import { BeaconTransport } from '../../src/beacon-transport';
-import { ScrollEvent, ScrollWatcher } from '../../src/hooks/scroll';
+import { ScrollEventPayload, ScrollWatcher } from '../../src/hooks/scroll';
 import { utils } from '@amplitude/rrweb';
 import { randomUUID } from 'crypto';
 
@@ -33,9 +33,11 @@ describe('scroll', () => {
   };
 
   describe('ScrollWatcher', () => {
-    const mockTransport = BeaconTransport<ScrollEvent> as jest.MockedClass<typeof BeaconTransport<ScrollEvent>>;
+    const mockTransport = BeaconTransport<ScrollEventPayload> as jest.MockedClass<
+      typeof BeaconTransport<ScrollEventPayload>
+    >;
 
-    let mockTransportInstance: BeaconTransport<ScrollEvent>;
+    let mockTransportInstance: BeaconTransport<ScrollEventPayload>;
     let scrollWatcher: ScrollWatcher;
 
     beforeEach(() => {
@@ -84,16 +86,21 @@ describe('scroll', () => {
 
         expect(mockTransport.prototype.send.mock.calls[0][0]).toStrictEqual(deviceId);
         expect(mockTransport.prototype.send.mock.calls[0][1]).toStrictEqual({
-          maxScrollX: 3,
-          maxScrollY: 5,
-          maxScrollWidth: 3,
-          maxScrollHeight: 5,
-
-          viewportHeight: 0,
-          viewportWidth: 0,
-          pageUrl: 'http://localhost',
-          timestamp: expect.any(Number),
-          type: 'scroll',
+          version: 1,
+          events: [
+            {
+              maxScrollX: 3,
+              maxScrollY: 5,
+              maxScrollWidth: 3,
+              maxScrollHeight: 5,
+
+              viewportHeight: 0,
+              viewportWidth: 0,
+              pageUrl: 'http://localhost',
+              timestamp: expect.any(Number),
+              type: 'scroll',
+            },
+          ],
         });
       });
     });