feat(session replay): add metadata to headers

amplitude · Oct 6, 2023 · d4a1b33 · d4a1b33
1 parent 0fd37e7
commit d4a1b33
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 5 deletions.
diff --git a/packages/plugin-session-replay-browser/package.json b/packages/plugin-session-replay-browser/package.json
@@ -31,7 +31,8 @@
     "publish": "node ../../scripts/publish/upload-to-s3.js",
     "test": "jest",
     "typecheck": "tsc -p ./tsconfig.json",
-    "version": "yarn add @amplitude/analytics-types@\">=1 <3\" @amplitude/analytics-client-common@\">=1 <3\" @amplitude/analytics-core@\">=1 <3\""
+    "version": "yarn add @amplitude/analytics-types@\">=1 <3\" @amplitude/analytics-client-common@\">=1 <3\" @amplitude/analytics-core@\">=1 <3\"",
+    "version-file": "node -p \"'export const VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts"
   },
   "bugs": {
     "url": "https://github.com/amplitude/Amplitude-TypeScript/issues"

diff --git a/packages/plugin-session-replay-browser/src/version.ts b/packages/plugin-session-replay-browser/src/version.ts
@@ -0,0 +1 @@
+export const VERSION = '0.6.14';
diff --git a/packages/session-replay-browser/package.json b/packages/session-replay-browser/package.json
@@ -31,7 +31,8 @@
     "publish": "node ../../scripts/publish/upload-to-s3.js",
     "test": "jest",
     "typecheck": "tsc -p ./tsconfig.json",
-    "version": "yarn add @amplitude/analytics-types@\">=1 <3\" @amplitude/analytics-client-common@\">=1 <3\" @amplitude/analytics-core@\">=1 <3\""
+    "version": "yarn add @amplitude/analytics-types@\">=1 <3\" @amplitude/analytics-client-common@\">=1 <3\" @amplitude/analytics-core@\">=1 <3\"",
+    "version-file": "node -p \"'export const VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts"
   },
   "bugs": {
     "url": "https://github.com/amplitude/Amplitude-TypeScript/issues"

diff --git a/packages/session-replay-browser/src/constants.ts b/packages/session-replay-browser/src/constants.ts
@@ -6,6 +6,7 @@ export const DEFAULT_EVENT_PROPERTY_PREFIX = '[Amplitude]';
 export const DEFAULT_SESSION_REPLAY_PROPERTY = `${DEFAULT_EVENT_PROPERTY_PREFIX} Session Recorded`;
 export const DEFAULT_SESSION_START_EVENT = 'session_start';
 export const DEFAULT_SESSION_END_EVENT = 'session_end';
+export const DEFAULT_SAMPLE_RATE = 1;
 
 export const BLOCK_CLASS = 'amp-block';
 export const MASK_TEXT_CLASS = 'amp-mask';

diff --git a/packages/session-replay-browser/src/helpers.ts b/packages/session-replay-browser/src/helpers.ts
@@ -25,3 +25,8 @@ export const isSessionInSample = function (sessionId: number, sampleRate: number
   const mod = absHashMultiply % 100;
   return mod / 100 < sampleRate;
 };
+
+export const getCurrentUrl = () => {
+  // eslint-disable-next-line no-restricted-globals
+  return typeof window !== 'undefined' ? window.location.href : '';
+};
diff --git a/packages/session-replay-browser/src/session-replay.ts b/packages/session-replay-browser/src/session-replay.ts
@@ -6,6 +6,7 @@ import { pack, record } from 'rrweb';
 import { SessionReplayConfig } from './config';
 import {
   BLOCK_CLASS,
+  DEFAULT_SAMPLE_RATE,
   DEFAULT_SESSION_REPLAY_PROPERTY,
   MASK_TEXT_CLASS,
   MAX_EVENT_LIST_SIZE_IN_BYTES,
@@ -17,7 +18,7 @@ import {
   STORAGE_PREFIX,
   defaultSessionStore,
 } from './constants';
-import { isSessionInSample, maskInputFn } from './helpers';
+import { isSessionInSample, maskInputFn, getCurrentUrl } from './helpers';
 import {
   MAX_RETRIES_EXCEEDED_MESSAGE,
   MISSING_API_KEY_MESSAGE,
@@ -37,6 +38,7 @@ import {
   SessionReplayContext,
   SessionReplayOptions,
 } from './typings/session-replay';
+import { VERSION } from './verstion';
 
 export class SessionReplay implements AmplitudeSessionReplay {
   name = '@amplitude/session-replay-browser';
@@ -384,6 +386,10 @@ export class SessionReplay implements AmplitudeSessionReplay {
       return this.completeRequest({ context, err: MISSING_DEVICE_ID_MESSAGE });
     }
 
+    const url = getCurrentUrl();
+    const version = VERSION;
+    const sampleRate = this.config?.sampleRate || DEFAULT_SAMPLE_RATE;
+
     const urlParams = new URLSearchParams({
       device_id: deviceId,
       session_id: `${context.sessionId}`,
@@ -400,6 +406,9 @@ export class SessionReplay implements AmplitudeSessionReplay {
           'Content-Type': 'application/json',
           Accept: '*/*',
           Authorization: `Bearer ${apiKey}`,
+          'X-Client-Version': version,
+          'X-Client-Url': url,
+          'X-Client-Sample-Rate': `${sampleRate}`,
         },
         body: JSON.stringify(payload),
         method: 'POST',

diff --git a/packages/session-replay-browser/src/verstion.ts b/packages/session-replay-browser/src/verstion.ts
@@ -0,0 +1 @@
+export const VERSION = '0.2.5';
diff --git a/packages/session-replay-browser/test/session-replay.test.ts b/packages/session-replay-browser/test/session-replay.test.ts
@@ -8,6 +8,7 @@ import * as Helpers from '../src/helpers';
 import { UNEXPECTED_ERROR_MESSAGE, getSuccessMessage } from '../src/messages';
 import { SessionReplay } from '../src/session-replay';
 import { IDBStore, RecordingStatus, SessionReplayConfig, SessionReplayOptions } from '../src/typings/session-replay';
+import { VERSION } from '../src/verstion';
 
 jest.mock('idb-keyval');
 type MockedIDBKeyVal = jest.Mocked<typeof import('idb-keyval')>;
@@ -1054,7 +1055,14 @@ describe('SessionReplayPlugin', () => {
         'https://api-sr.amplitude.com/sessions/v2/track?device_id=1a2b3c&session_id=123&seq_number=1',
         {
           body: JSON.stringify({ version: 1, events: [mockEventString] }),
-          headers: { Accept: '*/*', 'Content-Type': 'application/json', Authorization: 'Bearer static_key' },
+          headers: {
+            Accept: '*/*',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer static_key',
+            'X-Client-Sample-Rate': '1',
+            'X-Client-Url': window.location.href,
+            'X-Client-Version': VERSION,
+          },
           method: 'POST',
         },
       );
@@ -1077,7 +1085,14 @@ describe('SessionReplayPlugin', () => {
         'https://api-sr.eu.amplitude.com/sessions/v2/track?device_id=1a2b3c&session_id=123&seq_number=1',
         {
           body: JSON.stringify({ version: 1, events: [mockEventString] }),
-          headers: { Accept: '*/*', 'Content-Type': 'application/json', Authorization: 'Bearer static_key' },
+          headers: {
+            Accept: '*/*',
+            'Content-Type': 'application/json',
+            Authorization: 'Bearer static_key',
+            'X-Client-Sample-Rate': '1',
+            'X-Client-Url': window.location.href,
+            'X-Client-Version': VERSION,
+          },
           method: 'POST',
         },
       );