@amplitude/session-replay-browser - npm Package Compare versions

Comparing version 1.10.0 to 1.11.0

lib/cjs/helpers.d.ts

 import { PrivacyConfig } from './config/types';
+import { ServerZone } from '@amplitude/analytics-types';
 export declare const maskFn: (elementType: 'text' | 'input', config?: PrivacyConfig) => (text: string, element: HTMLElement | null) => string;
@@ -7,2 +8,3 @@ export declare const generateHashCode: (str: string) => number;
 export declare const generateSessionReplayId: (sessionId: number, deviceId: string) => string;
+export declare const getServerUrl: (serverZone?: keyof typeof ServerZone) => string;
 //# sourceMappingURL=helpers.d.ts.map

lib/cjs/helpers.js

 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateSessionReplayId = exports.getCurrentUrl = exports.isSessionInSample = exports.generateHashCode = exports.maskFn = void 0;
+exports.getServerUrl = exports.generateSessionReplayId = exports.getCurrentUrl = exports.isSessionInSample = exports.generateHashCode = exports.maskFn = void 0;
 var analytics_client_common_1 = require("@amplitude/analytics-client-common");
@@ -7,2 +7,4 @@ var constants_1 = require("./constants");
 var rrweb_snapshot_1 = require("@amplitude/rrweb-snapshot");
+var analytics_types_1 = require("@amplitude/analytics-types");
+var constants_2 = require("./constants");
 /**
@@ -107,2 +109,12 @@ * Light: Subset of inputs
 exports.generateSessionReplayId = generateSessionReplayId;
+var getServerUrl = function (serverZone) {
+    if (serverZone === analytics_types_1.ServerZone.STAGING) {
+        return constants_2.SESSION_REPLAY_STAGING_URL;
+    }
+    if (serverZone === analytics_types_1.ServerZone.EU) {
+        return constants_2.SESSION_REPLAY_EU_URL;
+    }
+    return constants_2.SESSION_REPLAY_SERVER_URL;
+};
+exports.getServerUrl = getServerUrl;
 //# sourceMappingURL=helpers.js.map

lib/cjs/session-replay.d.ts

@@ -5,2 +5,3 @@ import { Logger as ILogger } from '@amplitude/analytics-types';
 import { AmplitudeSessionReplay, SessionReplayEventsManager as AmplitudeSessionReplayEventsManager, SessionIdentifiers as ISessionIdentifiers, SessionReplayOptions } from './typings/session-replay';
+type PageLeaveFn = (e: PageTransitionEvent | Event) => void;
 export declare class SessionReplay implements AmplitudeSessionReplay {
@@ -14,5 +15,8 @@ name: string;
     recordCancelCallback: ReturnType<typeof record> | null;
+    pageLeaveFns: PageLeaveFn[];
+    private scrollHook?;
     constructor();
     init(apiKey: string, options: SessionReplayOptions): import("@amplitude/analytics-types").AmplitudeReturn<void>;
     removeInvalidSelectors(): void;
+    private teardownEventListeners;
     protected _init(apiKey: string, options: SessionReplayOptions): Promise<void>;
@@ -27,2 +31,8 @@ setSessionId(sessionId: number, deviceId?: string): import("@amplitude/analytics-types").AmplitudeReturn<void>;
     focusListener: () => void;
+    /**
+     * This is an instance member so that if init is called multiple times
+     * it doesn't add another listener to the page leave event. This is to
+     * prevent duplicate listener actions from firing.
+     */
+    private pageLeaveListener;
     stopRecordingAndSendEvents(sessionId?: number): void;
@@ -41,2 +51,3 @@ initialize(shouldSendStoredEvents?: boolean): void;
 }
+export {};
 //# sourceMappingURL=session-replay.d.ts.map

lib/cjs/session-replay.js

@@ -13,2 +13,3 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var click_1 = require("./hooks/click");
+var scroll_1 = require("./hooks/scroll");
 var identifiers_1 = require("./identifiers");
@@ -20,2 +21,25 @@ var SessionReplay = /** @class */ (function () {
         this.recordCancelCallback = null;
+        // Visible for testing
+        this.pageLeaveFns = [];
+        this.teardownEventListeners = function (teardown) {
+            var globalScope = (0, analytics_client_common_1.getGlobalScope)();
+            if (globalScope) {
+                globalScope.removeEventListener('blur', _this.blurListener);
+                globalScope.removeEventListener('focus', _this.focusListener);
+                !teardown && globalScope.addEventListener('blur', _this.blurListener);
+                !teardown && globalScope.addEventListener('focus', _this.focusListener);
+                // prefer pagehide to unload events, this is the standard going forward. it is not
+                // 100% reliable, but is bfcache-compatible.
+                if (globalScope.self && 'onpagehide' in globalScope.self) {
+                    globalScope.removeEventListener('pagehide', _this.pageLeaveListener);
+                    !teardown && globalScope.addEventListener('pagehide', _this.pageLeaveListener);
+                }
+                else {
+                    // this has performance implications, but is the only way we can reliably send events
+                    // in browser that don't support pagehide.
+                    globalScope.removeEventListener('beforeunload', _this.pageLeaveListener);
+                    !teardown && globalScope.addEventListener('beforeunload', _this.pageLeaveListener);
+                }
+            }
+        };
         this.blurListener = function () {
@@ -27,2 +51,12 @@ _this.stopRecordingAndSendEvents();
         };
+        /**
+         * This is an instance member so that if init is called multiple times
+         * it doesn't add another listener to the page leave event. This is to
+         * prevent duplicate listener actions from firing.
+         */
+        this.pageLeaveListener = function (e) {
+            _this.pageLeaveFns.forEach(function (fn) {
+                fn(e);
+            });
+        };
         this.stopRecordingEvents = function () {
@@ -76,7 +110,7 @@ try {
     SessionReplay.prototype._init = function (apiKey, options) {
-        var _a, _b;
+        var _a, _b, _c;
         return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _c, _d, managers, rrwebEventManager, interactionEventManager, globalScope;
-            return tslib_1.__generator(this, function (_e) {
-                switch (_e.label) {
+            var _d, _e, scrollWatcher, managers, rrwebEventManager, interactionEventManager, globalScope;
+            return tslib_1.__generator(this, function (_f) {
+                switch (_f.label) {
                     case 0:
@@ -87,11 +121,19 @@ this.loggerProvider = options.loggerProvider || new analytics_core_1.Logger();
                         this.identifiers = new identifiers_1.SessionIdentifiers({ sessionId: options.sessionId, deviceId: options.deviceId });
-                        _c = this;
+                        _d = this;
                         return [4 /*yield*/, (0, joined_config_1.createSessionReplayJoinedConfigGenerator)(apiKey, options)];
                     case 1:
-                        _c.joinedConfigGenerator = _e.sent();
-                        _d = this;
+                        _d.joinedConfigGenerator = _f.sent();
+                        _e = this;
                         return [4 /*yield*/, this.joinedConfigGenerator.generateJoinedConfig(this.identifiers.sessionId)];
                     case 2:
-                        _d.config = _e.sent();
+                        _e.config = _f.sent();
                         this.loggerProvider.debug(JSON.stringify({ name: 'session replay joined privacy config', privacyConfig: this.config.privacyConfig }, null, 2));
+                        if (options.sessionId && ((_a = this.config.interactionConfig) === null || _a === void 0 ? void 0 : _a.enabled)) {
+                            scrollWatcher = scroll_1.ScrollWatcher.default({
+                                sessionId: options.sessionId,
+                                type: 'interaction',
+                            }, this.config);
+                            this.pageLeaveFns = [scrollWatcher.send(this.getDeviceId.bind(this))];
+                            this.scrollHook = scrollWatcher.hook.bind(scrollWatcher);
+                        }
                         this.removeInvalidSelectors();
@@ -105,5 +147,5 @@ managers = [];
                     case 3:
-                        rrwebEventManager = _e.sent();
+                        rrwebEventManager = _f.sent();
                         managers.push({ name: 'replay', manager: rrwebEventManager });
-                        if (!((_a = this.config.interactionConfig) === null || _a === void 0 ? void 0 : _a.enabled)) return [3 /*break*/, 5];
+                        if (!((_b = this.config.interactionConfig) === null || _b === void 0 ? void 0 : _b.enabled)) return [3 /*break*/, 5];
                         return [4 /*yield*/, (0, events_manager_1.createEventsManager)({
@@ -113,3 +155,3 @@ config: this.config,
                                 type: 'interaction',
-                                minInterval: (_b = this.config.interactionConfig.trackEveryNms) !== null && _b !== void 0 ? _b : constants_1.INTERACTION_MIN_INTERVAL,
+                                minInterval: (_c = this.config.interactionConfig.trackEveryNms) !== null && _c !== void 0 ? _c : constants_1.INTERACTION_MIN_INTERVAL,
                                 maxInterval: constants_1.INTERACTION_MAX_INTERVAL,
@@ -119,15 +161,10 @@ payloadBatcher: click_1.clickBatcher,
                     case 4:
-                        interactionEventManager = _e.sent();
+                        interactionEventManager = _f.sent();
                         managers.push({ name: 'interaction', manager: interactionEventManager });
-                        _e.label = 5;
+                        _f.label = 5;
                     case 5:
                         this.eventsManager = new (multi_manager_1.MultiEventManager.bind.apply(multi_manager_1.MultiEventManager, tslib_1.__spreadArray([void 0], tslib_1.__read(managers), false)))();
                         this.loggerProvider.log('Installing @amplitude/session-replay-browser.');
+                        this.teardownEventListeners(false);
                         globalScope = (0, analytics_client_common_1.getGlobalScope)();
-                        if (globalScope) {
-                            globalScope.removeEventListener('blur', this.blurListener);
-                            globalScope.removeEventListener('focus', this.focusListener);
-                            globalScope.addEventListener('blur', this.blurListener);
-                            globalScope.addEventListener('focus', this.focusListener);
-                        }
                         if (globalScope && globalScope.document && globalScope.document.hasFocus()) {
@@ -315,2 +352,3 @@ this.initialize(true);
                     }),
+                scroll: this.scrollHook,
             },
@@ -368,7 +406,3 @@ maskAllInputs: true,
     SessionReplay.prototype.shutdown = function () {
-        var globalScope = (0, analytics_client_common_1.getGlobalScope)();
-        if (globalScope) {
-            globalScope.removeEventListener('blur', this.blurListener);
-            globalScope.removeEventListener('focus', this.focusListener);
-        }
+        this.teardownEventListeners(true);
         this.stopRecordingAndSendEvents();
@@ -375,0 +409,0 @@ };

lib/cjs/track-destination.d.ts

@@ -1,2 +0,2 @@
-import { Logger as ILogger, ServerZone } from '@amplitude/analytics-types';
+import { Logger as ILogger } from '@amplitude/analytics-types';
 import { SessionReplayTrackDestination as AmplitudeSessionReplayTrackDestination, SessionReplayDestination, SessionReplayDestinationContext } from './typings/session-replay';
@@ -22,3 +22,2 @@ export type PayloadBatcher = ({ version, events }: {
     sendEventsList(destinationData: SessionReplayDestination): void;
-    getServerUrl(serverZone?: keyof typeof ServerZone): "https://api-sr.amplitude.com/sessions/v2/track" | "https://api-sr.eu.amplitude.com/sessions/v2/track" | "https://api-sr.stag2.amplitude.com/sessions/v2/track";
     addToQueue(...list: SessionReplayDestinationContext[]): void;
@@ -25,0 +24,0 @@ schedule(timeout: number): void;

lib/cjs/track-destination.js

@@ -6,3 +6,2 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var analytics_types_1 = require("@amplitude/analytics-types");
-var constants_1 = require("./constants");
 var helpers_1 = require("./helpers");
@@ -24,11 +23,2 @@ var messages_1 = require("./messages");
     };
-    SessionReplayTrackDestination.prototype.getServerUrl = function (serverZone) {
-        if (serverZone === analytics_types_1.ServerZone.STAGING) {
-            return constants_1.SESSION_REPLAY_STAGING_URL;
-        }
-        if (serverZone === analytics_types_1.ServerZone.EU) {
-            return constants_1.SESSION_REPLAY_EU_URL;
-        }
-        return constants_1.SESSION_REPLAY_SERVER_URL;
-    };
     SessionReplayTrackDestination.prototype.addToQueue = function () {
@@ -146,3 +136,3 @@ var _this = this;
                         };
-                        server_url = "".concat(this.getServerUrl(context.serverZone), "?").concat(urlParams.toString());
+                        server_url = "".concat((0, helpers_1.getServerUrl)(context.serverZone), "?").concat(urlParams.toString());
                         return [4 /*yield*/, fetch(server_url, options)];
@@ -149,0 +139,0 @@ case 2:

lib/cjs/typings/session-replay.d.ts

@@ -5,14 +5,16 @@ import { AmplitudeReturn, ServerZone } from '@amplitude/analytics-types';
 export type EventType = 'replay' | 'interaction';
-export interface SessionReplayDestination {
+export interface SessionReplayDestinationSessionMetadata {
+    type: EventType;
+    sessionId: number;
+    deviceId?: string;
+}
+export type SessionReplayDestination = {
     events: Events;
     sequenceId: number;
-    type: EventType;
-    sessionId: number;
     flushMaxRetries?: number;
     apiKey?: string;
-    deviceId?: string;
     sampleRate: number;
     serverZone?: keyof typeof ServerZone;
     onComplete: (sequenceId: number) => Promise<void>;
-}
+} & SessionReplayDestinationSessionMetadata;
 export interface SessionReplayDestinationContext extends SessionReplayDestination {
@@ -19,0 +21,0 @@ attempts: number;

lib/esm/helpers.d.ts

 import { PrivacyConfig } from './config/types';
+import { ServerZone } from '@amplitude/analytics-types';
 export declare const maskFn: (elementType: 'text' | 'input', config?: PrivacyConfig) => (text: string, element: HTMLElement | null) => string;
@@ -7,2 +8,3 @@ export declare const generateHashCode: (str: string) => number;
 export declare const generateSessionReplayId: (sessionId: number, deviceId: string) => string;
+export declare const getServerUrl: (serverZone?: keyof typeof ServerZone) => string;
 //# sourceMappingURL=helpers.d.ts.map

lib/esm/helpers.js

@@ -5,2 +5,4 @@ import { getGlobalScope } from '@amplitude/analytics-client-common';
 import { getInputType } from '@amplitude/rrweb-snapshot';
+import { ServerZone } from '@amplitude/analytics-types';
+import { SESSION_REPLAY_EU_URL as SESSION_REPLAY_EU_SERVER_URL, SESSION_REPLAY_SERVER_URL, SESSION_REPLAY_STAGING_URL as SESSION_REPLAY_STAGING_SERVER_URL, } from './constants';
 /**
@@ -100,2 +102,11 @@ * Light: Subset of inputs
 };
+export var getServerUrl = function (serverZone) {
+    if (serverZone === ServerZone.STAGING) {
+        return SESSION_REPLAY_STAGING_SERVER_URL;
+    }
+    if (serverZone === ServerZone.EU) {
+        return SESSION_REPLAY_EU_SERVER_URL;
+    }
+    return SESSION_REPLAY_SERVER_URL;
+};
 //# sourceMappingURL=helpers.js.map

lib/esm/session-replay.d.ts

@@ -5,2 +5,3 @@ import { Logger as ILogger } from '@amplitude/analytics-types';
 import { AmplitudeSessionReplay, SessionReplayEventsManager as AmplitudeSessionReplayEventsManager, SessionIdentifiers as ISessionIdentifiers, SessionReplayOptions } from './typings/session-replay';
+type PageLeaveFn = (e: PageTransitionEvent | Event) => void;
 export declare class SessionReplay implements AmplitudeSessionReplay {
@@ -14,5 +15,8 @@ name: string;
     recordCancelCallback: ReturnType<typeof record> | null;
+    pageLeaveFns: PageLeaveFn[];
+    private scrollHook?;
     constructor();
     init(apiKey: string, options: SessionReplayOptions): import("@amplitude/analytics-types").AmplitudeReturn<void>;
     removeInvalidSelectors(): void;
+    private teardownEventListeners;
     protected _init(apiKey: string, options: SessionReplayOptions): Promise<void>;
@@ -27,2 +31,8 @@ setSessionId(sessionId: number, deviceId?: string): import("@amplitude/analytics-types").AmplitudeReturn<void>;
     focusListener: () => void;
+    /**
+     * This is an instance member so that if init is called multiple times
+     * it doesn't add another listener to the page leave event. This is to
+     * prevent duplicate listener actions from firing.
+     */
+    private pageLeaveListener;
     stopRecordingAndSendEvents(sessionId?: number): void;
@@ -41,2 +51,3 @@ initialize(shouldSendStoredEvents?: boolean): void;
 }
+export {};
 //# sourceMappingURL=session-replay.d.ts.map

lib/esm/session-replay.js

@@ -11,2 +11,3 @@ import { __awaiter, __generator, __read, __spreadArray } from "tslib";
 import { clickBatcher, clickHook } from './hooks/click';
+import { ScrollWatcher } from './hooks/scroll';
 import { SessionIdentifiers } from './identifiers';
@@ -18,2 +19,25 @@ var SessionReplay = /** @class */ (function () {
         this.recordCancelCallback = null;
+        // Visible for testing
+        this.pageLeaveFns = [];
+        this.teardownEventListeners = function (teardown) {
+            var globalScope = getGlobalScope();
+            if (globalScope) {
+                globalScope.removeEventListener('blur', _this.blurListener);
+                globalScope.removeEventListener('focus', _this.focusListener);
+                !teardown && globalScope.addEventListener('blur', _this.blurListener);
+                !teardown && globalScope.addEventListener('focus', _this.focusListener);
+                // prefer pagehide to unload events, this is the standard going forward. it is not
+                // 100% reliable, but is bfcache-compatible.
+                if (globalScope.self && 'onpagehide' in globalScope.self) {
+                    globalScope.removeEventListener('pagehide', _this.pageLeaveListener);
+                    !teardown && globalScope.addEventListener('pagehide', _this.pageLeaveListener);
+                }
+                else {
+                    // this has performance implications, but is the only way we can reliably send events
+                    // in browser that don't support pagehide.
+                    globalScope.removeEventListener('beforeunload', _this.pageLeaveListener);
+                    !teardown && globalScope.addEventListener('beforeunload', _this.pageLeaveListener);
+                }
+            }
+        };
         this.blurListener = function () {
@@ -25,2 +49,12 @@ _this.stopRecordingAndSendEvents();
         };
+        /**
+         * This is an instance member so that if init is called multiple times
+         * it doesn't add another listener to the page leave event. This is to
+         * prevent duplicate listener actions from firing.
+         */
+        this.pageLeaveListener = function (e) {
+            _this.pageLeaveFns.forEach(function (fn) {
+                fn(e);
+            });
+        };
         this.stopRecordingEvents = function () {
@@ -74,7 +108,7 @@ try {
     SessionReplay.prototype._init = function (apiKey, options) {
-        var _a, _b;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function () {
-            var _c, _d, managers, rrwebEventManager, interactionEventManager, globalScope;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
+            var _d, _e, scrollWatcher, managers, rrwebEventManager, interactionEventManager, globalScope;
+            return __generator(this, function (_f) {
+                switch (_f.label) {
                     case 0:
@@ -85,11 +119,19 @@ this.loggerProvider = options.loggerProvider || new Logger();
                         this.identifiers = new SessionIdentifiers({ sessionId: options.sessionId, deviceId: options.deviceId });
-                        _c = this;
+                        _d = this;
                         return [4 /*yield*/, createSessionReplayJoinedConfigGenerator(apiKey, options)];
                     case 1:
-                        _c.joinedConfigGenerator = _e.sent();
-                        _d = this;
+                        _d.joinedConfigGenerator = _f.sent();
+                        _e = this;
                         return [4 /*yield*/, this.joinedConfigGenerator.generateJoinedConfig(this.identifiers.sessionId)];
                     case 2:
-                        _d.config = _e.sent();
+                        _e.config = _f.sent();
                         this.loggerProvider.debug(JSON.stringify({ name: 'session replay joined privacy config', privacyConfig: this.config.privacyConfig }, null, 2));
+                        if (options.sessionId && ((_a = this.config.interactionConfig) === null || _a === void 0 ? void 0 : _a.enabled)) {
+                            scrollWatcher = ScrollWatcher.default({
+                                sessionId: options.sessionId,
+                                type: 'interaction',
+                            }, this.config);
+                            this.pageLeaveFns = [scrollWatcher.send(this.getDeviceId.bind(this))];
+                            this.scrollHook = scrollWatcher.hook.bind(scrollWatcher);
+                        }
                         this.removeInvalidSelectors();
@@ -103,5 +145,5 @@ managers = [];
                     case 3:
-                        rrwebEventManager = _e.sent();
+                        rrwebEventManager = _f.sent();
                         managers.push({ name: 'replay', manager: rrwebEventManager });
-                        if (!((_a = this.config.interactionConfig) === null || _a === void 0 ? void 0 : _a.enabled)) return [3 /*break*/, 5];
+                        if (!((_b = this.config.interactionConfig) === null || _b === void 0 ? void 0 : _b.enabled)) return [3 /*break*/, 5];
                         return [4 /*yield*/, createEventsManager({
@@ -111,3 +153,3 @@ config: this.config,
                                 type: 'interaction',
-                                minInterval: (_b = this.config.interactionConfig.trackEveryNms) !== null && _b !== void 0 ? _b : INTERACTION_MIN_INTERVAL,
+                                minInterval: (_c = this.config.interactionConfig.trackEveryNms) !== null && _c !== void 0 ? _c : INTERACTION_MIN_INTERVAL,
                                 maxInterval: INTERACTION_MAX_INTERVAL,
@@ -117,15 +159,10 @@ payloadBatcher: clickBatcher,
                     case 4:
-                        interactionEventManager = _e.sent();
+                        interactionEventManager = _f.sent();
                         managers.push({ name: 'interaction', manager: interactionEventManager });
-                        _e.label = 5;
+                        _f.label = 5;
                     case 5:
                         this.eventsManager = new (MultiEventManager.bind.apply(MultiEventManager, __spreadArray([void 0], __read(managers), false)))();
                         this.loggerProvider.log('Installing @amplitude/session-replay-browser.');
+                        this.teardownEventListeners(false);
                         globalScope = getGlobalScope();
-                        if (globalScope) {
-                            globalScope.removeEventListener('blur', this.blurListener);
-                            globalScope.removeEventListener('focus', this.focusListener);
-                            globalScope.addEventListener('blur', this.blurListener);
-                            globalScope.addEventListener('focus', this.focusListener);
-                        }
                         if (globalScope && globalScope.document && globalScope.document.hasFocus()) {
@@ -313,2 +350,3 @@ this.initialize(true);
                     }),
+                scroll: this.scrollHook,
             },
@@ -366,7 +404,3 @@ maskAllInputs: true,
     SessionReplay.prototype.shutdown = function () {
-        var globalScope = getGlobalScope();
-        if (globalScope) {
-            globalScope.removeEventListener('blur', this.blurListener);
-            globalScope.removeEventListener('focus', this.focusListener);
-        }
+        this.teardownEventListeners(true);
         this.stopRecordingAndSendEvents();
@@ -373,0 +407,0 @@ };

lib/esm/track-destination.d.ts

@@ -1,2 +0,2 @@
-import { Logger as ILogger, ServerZone } from '@amplitude/analytics-types';
+import { Logger as ILogger } from '@amplitude/analytics-types';
 import { SessionReplayTrackDestination as AmplitudeSessionReplayTrackDestination, SessionReplayDestination, SessionReplayDestinationContext } from './typings/session-replay';
@@ -22,3 +22,2 @@ export type PayloadBatcher = ({ version, events }: {
     sendEventsList(destinationData: SessionReplayDestination): void;
-    getServerUrl(serverZone?: keyof typeof ServerZone): "https://api-sr.amplitude.com/sessions/v2/track" | "https://api-sr.eu.amplitude.com/sessions/v2/track" | "https://api-sr.stag2.amplitude.com/sessions/v2/track";
     addToQueue(...list: SessionReplayDestinationContext[]): void;
@@ -25,0 +24,0 @@ schedule(timeout: number): void;

lib/esm/track-destination.js

 import { __assign, __awaiter, __generator } from "tslib";
 import { BaseTransport } from '@amplitude/analytics-core';
-import { ServerZone, Status } from '@amplitude/analytics-types';
-import { SESSION_REPLAY_EU_URL as SESSION_REPLAY_EU_SERVER_URL, SESSION_REPLAY_SERVER_URL, SESSION_REPLAY_STAGING_URL as SESSION_REPLAY_STAGING_SERVER_URL, } from './constants';
-import { getCurrentUrl } from './helpers';
+import { Status } from '@amplitude/analytics-types';
+import { getCurrentUrl, getServerUrl } from './helpers';
 import { MAX_RETRIES_EXCEEDED_MESSAGE, MISSING_API_KEY_MESSAGE, MISSING_DEVICE_ID_MESSAGE, UNEXPECTED_ERROR_MESSAGE, UNEXPECTED_NETWORK_ERROR_MESSAGE, getSuccessMessage, } from './messages';
@@ -21,11 +20,2 @@ import { VERSION } from './version';
     };
-    SessionReplayTrackDestination.prototype.getServerUrl = function (serverZone) {
-        if (serverZone === ServerZone.STAGING) {
-            return SESSION_REPLAY_STAGING_SERVER_URL;
-        }
-        if (serverZone === ServerZone.EU) {
-            return SESSION_REPLAY_EU_SERVER_URL;
-        }
-        return SESSION_REPLAY_SERVER_URL;
-    };
     SessionReplayTrackDestination.prototype.addToQueue = function () {
@@ -143,3 +133,3 @@ var _this = this;
                         };
-                        server_url = "".concat(this.getServerUrl(context.serverZone), "?").concat(urlParams.toString());
+                        server_url = "".concat(getServerUrl(context.serverZone), "?").concat(urlParams.toString());
                         return [4 /*yield*/, fetch(server_url, options)];
@@ -146,0 +136,0 @@ case 2:

lib/esm/typings/session-replay.d.ts

@@ -5,14 +5,16 @@ import { AmplitudeReturn, ServerZone } from '@amplitude/analytics-types';
 export type EventType = 'replay' | 'interaction';
-export interface SessionReplayDestination {
+export interface SessionReplayDestinationSessionMetadata {
+    type: EventType;
+    sessionId: number;
+    deviceId?: string;
+}
+export type SessionReplayDestination = {
     events: Events;
     sequenceId: number;
-    type: EventType;
-    sessionId: number;
     flushMaxRetries?: number;
     apiKey?: string;
-    deviceId?: string;
     sampleRate: number;
     serverZone?: keyof typeof ServerZone;
     onComplete: (sequenceId: number) => Promise<void>;
-}
+} & SessionReplayDestinationSessionMetadata;
 export interface SessionReplayDestinationContext extends SessionReplayDestination {
@@ -19,0 +21,0 @@ attempts: number;

lib/scripts/helpers.d.ts

 import { PrivacyConfig } from './config/types';
+import { ServerZone } from '@amplitude/analytics-types';
 export declare const maskFn: (elementType: 'text' | 'input', config?: PrivacyConfig) => (text: string, element: HTMLElement | null) => string;
@@ -7,2 +8,3 @@ export declare const generateHashCode: (str: string) => number;
 export declare const generateSessionReplayId: (sessionId: number, deviceId: string) => string;
+export declare const getServerUrl: (serverZone?: keyof typeof ServerZone) => string;
 //# sourceMappingURL=helpers.d.ts.map

lib/scripts/session-replay.d.ts

@@ -5,2 +5,3 @@ import { Logger as ILogger } from '@amplitude/analytics-types';
 import { AmplitudeSessionReplay, SessionReplayEventsManager as AmplitudeSessionReplayEventsManager, SessionIdentifiers as ISessionIdentifiers, SessionReplayOptions } from './typings/session-replay';
+type PageLeaveFn = (e: PageTransitionEvent | Event) => void;
 export declare class SessionReplay implements AmplitudeSessionReplay {
@@ -14,5 +15,8 @@ name: string;
     recordCancelCallback: ReturnType<typeof record> | null;
+    pageLeaveFns: PageLeaveFn[];
+    private scrollHook?;
     constructor();
     init(apiKey: string, options: SessionReplayOptions): import("@amplitude/analytics-types").AmplitudeReturn<void>;
     removeInvalidSelectors(): void;
+    private teardownEventListeners;
     protected _init(apiKey: string, options: SessionReplayOptions): Promise<void>;
@@ -27,2 +31,8 @@ setSessionId(sessionId: number, deviceId?: string): import("@amplitude/analytics-types").AmplitudeReturn<void>;
     focusListener: () => void;
+    /**
+     * This is an instance member so that if init is called multiple times
+     * it doesn't add another listener to the page leave event. This is to
+     * prevent duplicate listener actions from firing.
+     */
+    private pageLeaveListener;
     stopRecordingAndSendEvents(sessionId?: number): void;
@@ -41,2 +51,3 @@ initialize(shouldSendStoredEvents?: boolean): void;
 }
+export {};
 //# sourceMappingURL=session-replay.d.ts.map

lib/scripts/track-destination.d.ts

@@ -1,2 +0,2 @@
-import { Logger as ILogger, ServerZone } from '@amplitude/analytics-types';
+import { Logger as ILogger } from '@amplitude/analytics-types';
 import { SessionReplayTrackDestination as AmplitudeSessionReplayTrackDestination, SessionReplayDestination, SessionReplayDestinationContext } from './typings/session-replay';
@@ -22,3 +22,2 @@ export type PayloadBatcher = ({ version, events }: {
     sendEventsList(destinationData: SessionReplayDestination): void;
-    getServerUrl(serverZone?: keyof typeof ServerZone): "https://api-sr.amplitude.com/sessions/v2/track" | "https://api-sr.eu.amplitude.com/sessions/v2/track" | "https://api-sr.stag2.amplitude.com/sessions/v2/track";
     addToQueue(...list: SessionReplayDestinationContext[]): void;
@@ -25,0 +24,0 @@ schedule(timeout: number): void;

lib/scripts/typings/session-replay.d.ts

@@ -5,14 +5,16 @@ import { AmplitudeReturn, ServerZone } from '@amplitude/analytics-types';
 export type EventType = 'replay' | 'interaction';
-export interface SessionReplayDestination {
+export interface SessionReplayDestinationSessionMetadata {
+    type: EventType;
+    sessionId: number;
+    deviceId?: string;
+}
+export type SessionReplayDestination = {
     events: Events;
     sequenceId: number;
-    type: EventType;
-    sessionId: number;
     flushMaxRetries?: number;
     apiKey?: string;
-    deviceId?: string;
     sampleRate: number;
     serverZone?: keyof typeof ServerZone;
     onComplete: (sequenceId: number) => Promise<void>;
-}
+} & SessionReplayDestinationSessionMetadata;
 export interface SessionReplayDestinationContext extends SessionReplayDestination {
@@ -19,0 +21,0 @@ attempts: number;

package.json

 {
   "name": "@amplitude/session-replay-browser",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "",
@@ -66,3 +66,3 @@ "author": "Amplitude Inc",
   ],
-  "gitHead": "537585f50779c8d4f465f21f99aba389a0d5d08e"
+  "gitHead": "85aa39f538a8127a162ed8efe34e20f0a5e00a03"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1000706

increased by7.38%

Number of package files

217

increased by10.15%

Lines of code

7205

increased by9.92%

No dependency changes