@amplitude/session-replay-browser 1.24.1 → 1.25.0

package/README.md

@@ -95,6 +95,17 @@ sessionReplay.shutdown()
 |`performanceConfig.timeout`|`number`|No|`undefined`|Optional timeout in milliseconds for the `requestIdleCallback` API. If specified, this value will be used to set a maximum time for the browser to wait before executing the deferred compression task, even if the browser is not idle.|
 |`experimental.useWebWorker`|`boolean`|No|`false`|If the SDK should compress the replay events using a webworker.|
 
+## Bundle Size Optimization
+The Session Replay SDK uses dynamic imports to optimize bundle size and improve initial page load performance. Key modules are loaded on-demand rather than being included in the initial bundle:
+
+- **`@amplitude/rrweb-record`**: The core recording functionality is dynamically imported when `sessionReplay.init()` is called and capture should begin. In cases where users are not sampled or have opted out, then the Session Replay SDK will not import these dependencies. 
+
+This approach ensures that:
+- Your application's initial JavaScript bundle remains as small as possible.
+- Only the necessary Session Replay dependencies are loaded.
+
+The dynamic imports happen asynchronously and won't block your application's initialization. If the imports fail for any reason, the SDK will not initiate capture.
+
 ## Privacy
 By default, the session replay will mask all inputs, meaning the text in inputs will appear in a session replay as asterisks: `***`. You may require more specific masking controls based on your use case, so we offer the following controls:
 
@@ -117,3 +128,4 @@ sessionReplay.init(AMPLITUDE_API_KEY, {
   }
 })
 ```
+

package/lib/cjs/hooks/click.d.ts

@@ -1,4 +1,5 @@
-import { mouseInteractionCallBack } from '@amplitude/rrweb-types';
+import type { mouseInteractionCallBack } from '@amplitude/rrweb-types';
+import { Mirror } from '../utils/rrweb';
 import { SessionReplayEventsManager as AmplitudeSessionReplayEventsManager } from '../typings/session-replay';
 import { PayloadBatcher } from 'src/track-destination';
 import { ILogger } from '@amplitude/analytics-core';
@@ -20,6 +21,7 @@ type Options = {
     sessionId: string | number;
     deviceIdFn: () => string | undefined;
     eventsManager: AmplitudeSessionReplayEventsManager<'interaction', string>;
+    mirror: Mirror;
     ugcFilterRules: UGCFilterRule[];
 };
 export declare const clickNonBatcher: PayloadBatcher;

package/lib/cjs/hooks/click.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../src/hooks/click.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAqB,MAAM,wBAAwB,CAAC;AAErF,OAAO,EAAE,0BAA0B,IAAI,mCAAmC,EAAE,MAAM,2BAA2B,CAAC;AAC9G,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAkB,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjE,KAAK,OAAO,GAAG;IACb,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,UAAU,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACrC,aAAa,EAAE,mCAAmC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1E,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,eAAe,EAAE,cAU7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,cAyB1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,wBAoD5D,CAAC"}
+{"version":3,"file":"click.d.ts","sourceRoot":"","sources":["../../../src/hooks/click.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAEvE,OAAO,EAAmB,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,0BAA0B,IAAI,mCAAmC,EAAE,MAAM,2BAA2B,CAAC;AAC9G,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,OAAO,EAAkB,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,EAAE,MAAM,CAAC;IAClB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjE,KAAK,OAAO,GAAG;IACb,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC;IAC3B,UAAU,EAAE,MAAM,MAAM,GAAG,SAAS,CAAC;IACrC,aAAa,EAAE,mCAAmC,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,aAAa,EAAE,CAAC;CACjC,CAAC;AAIF,eAAO,MAAM,eAAe,EAAE,cAU7B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,cAyB1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK,wBAoD5D,CAAC"}

package/lib/cjs/hooks/click.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.clickHook = exports.clickBatcher = exports.clickNonBatcher = void 0;
 var tslib_1 = require("tslib");
 var rrweb_types_1 = require("@amplitude/rrweb-types");
-var rrweb_1 = require("@amplitude/rrweb");
+var rrweb_1 = require("../utils/rrweb");
 var finder_1 = require("../libs/finder");
 var analytics_core_1 = require("@amplitude/analytics-core");
 var helpers_1 = require("../helpers");
@@ -47,7 +47,7 @@ var clickBatcher = function (_a) {
 };
 exports.clickBatcher = clickBatcher;
 var clickHook = function (logger, _a) {
-    var eventsManager = _a.eventsManager, sessionId = _a.sessionId, deviceIdFn = _a.deviceIdFn, ugcFilterRules = _a.ugcFilterRules;
+    var eventsManager = _a.eventsManager, sessionId = _a.sessionId, deviceIdFn = _a.deviceIdFn, mirror = _a.mirror, ugcFilterRules = _a.ugcFilterRules;
     return function (e) {
         if (e.type !== rrweb_types_1.MouseInteractions.Click) {
             return;
@@ -65,7 +65,7 @@ var clickHook = function (logger, _a) {
         if (x === undefined || y === undefined) {
             return;
         }
-        var node = rrweb_1.record.mirror.getNode(e.id);
+        var node = mirror.getNode(e.id);
         var selector;
         if (node) {
             try {
@@ -75,7 +75,7 @@ var clickHook = function (logger, _a) {
                 logger.debug('error resolving selector from finder');
             }
         }
-        var _a = rrweb_1.utils.getWindowScroll(globalScope), scrollX = _a.left, scrollY = _a.top;
+        var _a = (0, rrweb_1.getWindowScroll)(globalScope), scrollX = _a.left, scrollY = _a.top;
         var pageUrl = (0, helpers_1.getPageUrl)(location.href, ugcFilterRules);
         var event = {
             x: x + scrollX,

package/lib/cjs/hooks/click.js.map

@@ -1 +1 @@
-{"version":3,"file":"click.js","sourceRoot":"","sources":["../../../src/hooks/click.ts"],"names":[],"mappings":"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","sourcesContent":["import { mouseInteractionCallBack, MouseInteractions } from '@amplitude/rrweb-types';\nimport { record, utils } from '@amplitude/rrweb';\nimport { SessionReplayEventsManager as AmplitudeSessionReplayEventsManager } from '../typings/session-replay';\nimport { PayloadBatcher } from 'src/track-destination';\nimport { finder } from '../libs/finder';\nimport { getGlobalScope, ILogger } from '@amplitude/analytics-core';\nimport { UGCFilterRule } from 'src/config/types';\nimport { getPageUrl } from '../helpers';\n\n// exported for testing\nexport type ClickEvent = {\n  timestamp: number;\n  x: number;\n  y: number;\n  viewportWidth: number;\n  viewportHeight: number;\n  pageUrl: string;\n  selector?: string;\n  type: 'click';\n};\n\n// exported for testing\nexport type ClickEventWithCount = ClickEvent & { count: number };\n\ntype Options = {\n  sessionId: string | number;\n  deviceIdFn: () => string | undefined;\n  eventsManager: AmplitudeSessionReplayEventsManager<'interaction', string>;\n  ugcFilterRules: UGCFilterRule[];\n};\n\nconst HOUR_IN_MILLISECONDS = 3_600_000;\n\nexport const clickNonBatcher: PayloadBatcher = ({ version, events }) => {\n  const clickEvents: ClickEvent[] = [];\n  events.forEach((evt: string) => {\n    const record = JSON.parse(evt) as Record<string, unknown>;\n    record.count = 1;\n    if (record.type === 'click') {\n      clickEvents.push(record as ClickEvent);\n    }\n  });\n  return { version, events: clickEvents };\n};\n\nexport const clickBatcher: PayloadBatcher = ({ version, events }) => {\n  const clickEvents: ClickEvent[] = [];\n  events.forEach((evt: string) => {\n    const record = JSON.parse(evt) as Record<string, unknown>;\n    if (record.type === 'click') {\n      clickEvents.push(record as ClickEvent);\n    }\n  });\n\n  const reduced = clickEvents.reduce<Record<string, ClickEventWithCount>>((prev, curr) => {\n    const { x, y, selector, timestamp } = curr;\n\n    // round down to nearest hour.\n    const hour = timestamp - (timestamp % HOUR_IN_MILLISECONDS);\n\n    const k = `${x}:${y}:${selector ?? ''}:${hour}`;\n    if (!prev[k]) {\n      prev[k] = { ...curr, timestamp: hour, count: 1 };\n    } else {\n      prev[k].count += 1;\n    }\n    return prev;\n  }, {});\n\n  return { version, events: Object.values(reduced) };\n};\n\nexport const clickHook: (logger: ILogger, options: Options) => mouseInteractionCallBack =\n  (logger, { eventsManager, sessionId, deviceIdFn, ugcFilterRules }) =>\n  (e) => {\n    if (e.type !== MouseInteractions.Click) {\n      return;\n    }\n\n    const globalScope = getGlobalScope();\n    if (!globalScope) {\n      return;\n    }\n\n    const { location, innerHeight, innerWidth } = globalScope;\n    // it only makes sense to send events if a pageUrl exists\n    if (!location) {\n      return;\n    }\n\n    const { x, y } = e;\n    if (x === undefined || y === undefined) {\n      return;\n    }\n\n    const node = record.mirror.getNode(e.id);\n    let selector;\n    if (node) {\n      try {\n        selector = finder(node as Element);\n      } catch (err) {\n        logger.debug('error resolving selector from finder');\n      }\n    }\n\n    const { left: scrollX, top: scrollY } = utils.getWindowScroll(globalScope as unknown as Window);\n\n    const pageUrl = getPageUrl(location.href, ugcFilterRules);\n\n    const event: ClickEvent = {\n      x: x + scrollX,\n      y: y + scrollY,\n      selector,\n\n      viewportHeight: innerHeight,\n      viewportWidth: innerWidth,\n      pageUrl,\n      timestamp: Date.now(),\n      type: 'click',\n    };\n    const deviceId = deviceIdFn();\n    if (deviceId) {\n      eventsManager.addEvent({ sessionId, event: { type: 'interaction', data: JSON.stringify(event) }, deviceId });\n    }\n  };\n"]}
+{"version":3,"file":"click.js","sourceRoot":"","sources":["../../../src/hooks/click.ts"],"names":[],"mappings":"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","sourcesContent":["import type { mouseInteractionCallBack } from '@amplitude/rrweb-types';\nimport { MouseInteractions } from '@amplitude/rrweb-types';\nimport { getWindowScroll, Mirror } from '../utils/rrweb';\nimport { SessionReplayEventsManager as AmplitudeSessionReplayEventsManager } from '../typings/session-replay';\nimport { PayloadBatcher } from 'src/track-destination';\nimport { finder } from '../libs/finder';\nimport { getGlobalScope, ILogger } from '@amplitude/analytics-core';\nimport { UGCFilterRule } from 'src/config/types';\nimport { getPageUrl } from '../helpers';\n\n// exported for testing\nexport type ClickEvent = {\n  timestamp: number;\n  x: number;\n  y: number;\n  viewportWidth: number;\n  viewportHeight: number;\n  pageUrl: string;\n  selector?: string;\n  type: 'click';\n};\n\n// exported for testing\nexport type ClickEventWithCount = ClickEvent & { count: number };\n\ntype Options = {\n  sessionId: string | number;\n  deviceIdFn: () => string | undefined;\n  eventsManager: AmplitudeSessionReplayEventsManager<'interaction', string>;\n  mirror: Mirror;\n  ugcFilterRules: UGCFilterRule[];\n};\n\nconst HOUR_IN_MILLISECONDS = 3_600_000;\n\nexport const clickNonBatcher: PayloadBatcher = ({ version, events }) => {\n  const clickEvents: ClickEvent[] = [];\n  events.forEach((evt: string) => {\n    const record = JSON.parse(evt) as Record<string, unknown>;\n    record.count = 1;\n    if (record.type === 'click') {\n      clickEvents.push(record as ClickEvent);\n    }\n  });\n  return { version, events: clickEvents };\n};\n\nexport const clickBatcher: PayloadBatcher = ({ version, events }) => {\n  const clickEvents: ClickEvent[] = [];\n  events.forEach((evt: string) => {\n    const record = JSON.parse(evt) as Record<string, unknown>;\n    if (record.type === 'click') {\n      clickEvents.push(record as ClickEvent);\n    }\n  });\n\n  const reduced = clickEvents.reduce<Record<string, ClickEventWithCount>>((prev, curr) => {\n    const { x, y, selector, timestamp } = curr;\n\n    // round down to nearest hour.\n    const hour = timestamp - (timestamp % HOUR_IN_MILLISECONDS);\n\n    const k = `${x}:${y}:${selector ?? ''}:${hour}`;\n    if (!prev[k]) {\n      prev[k] = { ...curr, timestamp: hour, count: 1 };\n    } else {\n      prev[k].count += 1;\n    }\n    return prev;\n  }, {});\n\n  return { version, events: Object.values(reduced) };\n};\n\nexport const clickHook: (logger: ILogger, options: Options) => mouseInteractionCallBack =\n  (logger, { eventsManager, sessionId, deviceIdFn, mirror, ugcFilterRules }) =>\n  (e) => {\n    if (e.type !== MouseInteractions.Click) {\n      return;\n    }\n\n    const globalScope = getGlobalScope();\n    if (!globalScope) {\n      return;\n    }\n\n    const { location, innerHeight, innerWidth } = globalScope;\n    // it only makes sense to send events if a pageUrl exists\n    if (!location) {\n      return;\n    }\n\n    const { x, y } = e;\n    if (x === undefined || y === undefined) {\n      return;\n    }\n\n    const node = mirror.getNode(e.id);\n    let selector;\n    if (node) {\n      try {\n        selector = finder(node as Element);\n      } catch (err) {\n        logger.debug('error resolving selector from finder');\n      }\n    }\n\n    const { left: scrollX, top: scrollY } = getWindowScroll(globalScope as unknown as Window);\n\n    const pageUrl = getPageUrl(location.href, ugcFilterRules);\n\n    const event: ClickEvent = {\n      x: x + scrollX,\n      y: y + scrollY,\n      selector,\n\n      viewportHeight: innerHeight,\n      viewportWidth: innerWidth,\n      pageUrl,\n      timestamp: Date.now(),\n      type: 'click',\n    };\n    const deviceId = deviceIdFn();\n    if (deviceId) {\n      eventsManager.addEvent({ sessionId, event: { type: 'interaction', data: JSON.stringify(event) }, deviceId });\n    }\n  };\n"]}

package/lib/cjs/hooks/scroll.d.ts

@@ -1,4 +1,4 @@
-import { scrollCallback, scrollPosition } from '@amplitude/rrweb-types';
+import type { scrollCallback, scrollPosition } from '@amplitude/rrweb-types';
 import { BeaconTransport } from '../beacon-transport';
 import { SessionReplayJoinedConfig } from '../config/types';
 import { SessionReplayDestinationSessionMetadata } from '../typings/session-replay';

package/lib/cjs/hooks/scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/scroll.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,uCAAuC,EAAE,MAAM,2BAA2B,CAAC;AAKpF,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC;AAE5E;;;;;;GAMG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAsC;IAChE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA0E;IAEjG,MAAM,CAAC,OAAO,CACZ,OAAO,EAAE,IAAI,CAAC,uCAAuC,EAAE,UAAU,CAAC,EAClE,MAAM,EAAE,yBAAyB,GAChC,aAAa;gBAKd,SAAS,EAAE,eAAe,CAAC,kBAAkB,CAAC,EAC9C,MAAM,EAAE,IAAI,CAAC,yBAAyB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC;IAWjF,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,cAAc,IAAI,MAAM,CAElC;IAED,IAAW,eAAe,IAAI,MAAM,CAEnC;IAED,MAAM,CAAC,CAAC,EAAE,cAAc;IAuBxB,IAAI,EAAE,cAAc,CAElB;IAEF,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,CAAC,CAAC,EAAE,mBAAmB,GAAG,KAAK,KAAK,IAAI,CAsBtF;CACH"}
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/scroll.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,EAAE,uCAAuC,EAAE,MAAM,2BAA2B,CAAC;AAGpF,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC;AAE5E;;;;;;GAMG;AACH,qBAAa,aAAa;IACxB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAsC;IAChE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA0E;IAEjG,MAAM,CAAC,OAAO,CACZ,OAAO,EAAE,IAAI,CAAC,uCAAuC,EAAE,UAAU,CAAC,EAClE,MAAM,EAAE,yBAAyB,GAChC,aAAa;gBAKd,SAAS,EAAE,eAAe,CAAC,kBAAkB,CAAC,EAC9C,MAAM,EAAE,IAAI,CAAC,yBAAyB,EAAE,gBAAgB,GAAG,mBAAmB,CAAC;IAWjF,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,UAAU,IAAI,MAAM,CAE9B;IAED,IAAW,cAAc,IAAI,MAAM,CAElC;IAED,IAAW,eAAe,IAAI,MAAM,CAEnC;IAED,MAAM,CAAC,CAAC,EAAE,cAAc;IAuBxB,IAAI,EAAE,cAAc,CAElB;IAEF,IAAI,EAAE,CAAC,UAAU,EAAE,MAAM,MAAM,GAAG,SAAS,KAAK,CAAC,CAAC,EAAE,mBAAmB,GAAG,KAAK,KAAK,IAAI,CAsBtF;CACH"}

package/lib/cjs/hooks/scroll.js

@@ -1,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ScrollWatcher = void 0;
-var rrweb_1 = require("@amplitude/rrweb");
+var rrweb_1 = require("../utils/rrweb");
 var beacon_transport_1 = require("../beacon-transport");
 var analytics_core_1 = require("@amplitude/analytics-core");
 var helpers_1 = require("../helpers");
-var getWindowHeight = rrweb_1.utils.getWindowHeight, getWindowWidth = rrweb_1.utils.getWindowWidth;
 /**
  * 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
@@ -33,8 +32,8 @@ var ScrollWatcher = /** @class */ (function () {
                             maxScrollY: _this._maxScrollY,
                             maxScrollWidth: _this._maxScrollWidth,
                             maxScrollHeight: _this._maxScrollHeight,
-                            viewportHeight: getWindowHeight(),
-                            viewportWidth: getWindowWidth(),
+                            viewportHeight: (0, rrweb_1.getWindowHeight)(),
+                            viewportWidth: (0, rrweb_1.getWindowWidth)(),
                             pageUrl: (0, helpers_1.getPageUrl)(globalScope.location.href, (_b = (_a = _this.config.interactionConfig) === null || _a === void 0 ? void 0 : _a.ugcFilterRules) !== null && _b !== void 0 ? _b : []),
                             timestamp: _this.timestamp,
                             type: 'scroll',
@@ -45,8 +44,8 @@ var ScrollWatcher = /** @class */ (function () {
         }; };
         this._maxScrollX = 0;
         this._maxScrollY = 0;
-        this._maxScrollWidth = getWindowWidth();
-        this._maxScrollHeight = getWindowHeight();
+        this._maxScrollWidth = (0, rrweb_1.getWindowWidth)();
+        this._maxScrollHeight = (0, rrweb_1.getWindowHeight)();
         this.config = config;
         this.transport = transport;
     }
@@ -84,7 +83,7 @@ var ScrollWatcher = /** @class */ (function () {
     ScrollWatcher.prototype.update = function (e) {
         var now = Date.now();
         if (e.x > this._maxScrollX) {
-            var width = getWindowWidth();
+            var width = (0, rrweb_1.getWindowWidth)();
             this._maxScrollX = e.x;
             var maxScrollWidth = e.x + width;
             if (maxScrollWidth > this._maxScrollWidth) {
@@ -93,7 +92,7 @@ var ScrollWatcher = /** @class */ (function () {
             this.timestamp = now;
         }
         if (e.y > this._maxScrollY) {
-            var height = getWindowHeight();
+            var height = (0, rrweb_1.getWindowHeight)();
             this._maxScrollY = e.y;
             var maxScrollHeight = e.y + height;
             if (maxScrollHeight > this._maxScrollHeight) {

package/lib/cjs/hooks/scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../src/hooks/scroll.ts"],"names":[],"mappings":";;;AAAA,0CAAyC;AAEzC,wDAAsD;AACtD,4DAA2D;AAG3D,sCAAwC;AAEhC,IAAA,eAAe,GAAqB,aAAK,gBAA1B,EAAE,cAAc,GAAK,aAAK,eAAV,CAAW;AAgBlD;;;;;;GAMG;AACH;IAgBE,uBACE,SAA8C,EAC9C,MAA+E;QAFjF,iBAWC;QA1BO,cAAS,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAmE/B,SAAI,GAAmB,UAAC,CAAiB;YACvC,KAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC,CAAC;QAEF,SAAI,GAAuF,UAAC,UAAU,IAAK,OAAA,UAAC,CAAC;;YAC3G,IAAM,QAAQ,GAAG,UAAU,EAAE,CAAC;YAC9B,IAAM,WAAW,GAAG,IAAA,+BAAc,GAAE,CAAC;YACrC,IAAI,WAAW,IAAI,QAAQ,EAAE;gBAC3B,KAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,EAAE;oBAC5B,OAAO,EAAE,CAAC;oBACV,MAAM,EAAE;wBACN;4BACE,UAAU,EAAE,KAAI,CAAC,WAAW;4BAC5B,UAAU,EAAE,KAAI,CAAC,WAAW;4BAC5B,cAAc,EAAE,KAAI,CAAC,eAAe;4BACpC,eAAe,EAAE,KAAI,CAAC,gBAAgB;4BAEtC,cAAc,EAAE,eAAe,EAAE;4BACjC,aAAa,EAAE,cAAc,EAAE;4BAC/B,OAAO,EAAE,IAAA,oBAAU,EAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAA,MAAA,KAAI,CAAC,MAAM,CAAC,iBAAiB,0CAAE,cAAc,mCAAI,EAAE,CAAC;4BACnG,SAAS,EAAE,KAAI,CAAC,SAAS;4BACzB,IAAI,EAAE,QAAQ;yBACf;qBACF;iBACF,CAAC,CAAC;aACJ;QACH,CAAC,EAtB0G,CAsB1G,CAAC;QA1EA,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QACrB,IAAI,CAAC,eAAe,GAAG,cAAc,EAAE,CAAC;QACxC,IAAI,CAAC,gBAAgB,GAAG,eAAe,EAAE,CAAC;QAC1C,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QAErB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC7B,CAAC;IAlBM,qBAAO,GAAd,UACE,OAAkE,EAClE,MAAiC;QAEjC,OAAO,IAAI,aAAa,CAAC,IAAI,kCAAe,CAAqB,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IAC7F,CAAC;IAeD,sBAAW,qCAAU;aAArB;YACE,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;;;OAAA;IAED,sBAAW,qCAAU;aAArB;YACE,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;;;OAAA;IAED,sBAAW,yCAAc;aAAzB;YACE,OAAO,IAAI,CAAC,eAAe,CAAC;QAC9B,CAAC;;;OAAA;IAED,sBAAW,0CAAe;aAA1B;YACE,OAAO,IAAI,CAAC,gBAAgB,CAAC;QAC/B,CAAC;;;OAAA;IAED,8BAAM,GAAN,UAAO,CAAiB;QACtB,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QACvB,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE;YAC1B,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;YAC/B,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;YACvB,IAAM,cAAc,GAAG,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC;YACnC,IAAI,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE;gBACzC,IAAI,CAAC,eAAe,GAAG,cAAc,CAAC;aACvC;YACD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;SACtB;QAED,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE;YAC1B,IAAM,MAAM,GAAG,eAAe,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC;YACvB,IAAM,eAAe,GAAG,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;YACrC,IAAI,eAAe,GAAG,IAAI,CAAC,gBAAgB,EAAE;gBAC3C,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;aACzC;YACD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;SACtB;IACH,CAAC;IA6BH,oBAAC;AAAD,CAAC,AA/FD,IA+FC;AA/FY,sCAAa","sourcesContent":["import { utils } from '@amplitude/rrweb';\nimport { scrollCallback, scrollPosition } from '@amplitude/rrweb-types';\nimport { BeaconTransport } from '../beacon-transport';\nimport { getGlobalScope } from '@amplitude/analytics-core';\nimport { SessionReplayJoinedConfig } from '../config/types';\nimport { SessionReplayDestinationSessionMetadata } from '../typings/session-replay';\nimport { getPageUrl } from '../helpers';\n\nconst { getWindowHeight, getWindowWidth } = utils;\n\nexport type ScrollEvent = {\n  timestamp: number; // Timestamp the event occurred\n  maxScrollX: number; // Max window scroll X on a page\n  maxScrollY: number; // Max window scroll Y on a page\n  maxScrollHeight: number; // Max window scroll Y + window height on a page\n  maxScrollWidth: number; // Max window scroll X + window width on a page\n  viewportWidth: number;\n  viewportHeight: number;\n  pageUrl: string;\n  type: 'scroll';\n};\n\nexport type ScrollEventPayload = { version: number; events: ScrollEvent[] };\n\n/**\n * This is intended to watch and update max scroll activity when loaded for a particular page.\n * A new instance should be created if the page URL changes, since by default it does not reset\n * it's max scroll state. It is intended to send very few and very small events utilizing the\n * Beacon API.\n * @see {@link BeaconTransport} for more details on Beacon API usage.\n */\nexport class ScrollWatcher {\n  private timestamp = Date.now();\n  private _maxScrollX: number;\n  private _maxScrollY: number;\n  private _maxScrollWidth: number;\n  private _maxScrollHeight: number;\n  private readonly transport: BeaconTransport<ScrollEventPayload>;\n  private readonly config: Pick<SessionReplayJoinedConfig, 'loggerProvider' | 'interactionConfig'>;\n\n  static default(\n    context: Omit<SessionReplayDestinationSessionMetadata, 'deviceId'>,\n    config: SessionReplayJoinedConfig,\n  ): ScrollWatcher {\n    return new ScrollWatcher(new BeaconTransport<ScrollEventPayload>(context, config), config);\n  }\n\n  constructor(\n    transport: BeaconTransport<ScrollEventPayload>,\n    config: Pick<SessionReplayJoinedConfig, 'loggerProvider' | 'interactionConfig'>,\n  ) {\n    this._maxScrollX = 0;\n    this._maxScrollY = 0;\n    this._maxScrollWidth = getWindowWidth();\n    this._maxScrollHeight = getWindowHeight();\n    this.config = config;\n\n    this.transport = transport;\n  }\n\n  public get maxScrollX(): number {\n    return this._maxScrollX;\n  }\n\n  public get maxScrollY(): number {\n    return this._maxScrollY;\n  }\n\n  public get maxScrollWidth(): number {\n    return this._maxScrollWidth;\n  }\n\n  public get maxScrollHeight(): number {\n    return this._maxScrollHeight;\n  }\n\n  update(e: scrollPosition) {\n    const now = Date.now();\n    if (e.x > this._maxScrollX) {\n      const width = getWindowWidth();\n      this._maxScrollX = e.x;\n      const maxScrollWidth = e.x + width;\n      if (maxScrollWidth > this._maxScrollWidth) {\n        this._maxScrollWidth = maxScrollWidth;\n      }\n      this.timestamp = now;\n    }\n\n    if (e.y > this._maxScrollY) {\n      const height = getWindowHeight();\n      this._maxScrollY = e.y;\n      const maxScrollHeight = e.y + height;\n      if (maxScrollHeight > this._maxScrollHeight) {\n        this._maxScrollHeight = maxScrollHeight;\n      }\n      this.timestamp = now;\n    }\n  }\n\n  hook: scrollCallback = (e: scrollPosition) => {\n    this.update(e);\n  };\n\n  send: (deviceIdFn: () => string | undefined) => (_: PageTransitionEvent | Event) => void = (deviceIdFn) => (_) => {\n    const deviceId = deviceIdFn();\n    const globalScope = getGlobalScope();\n    if (globalScope && deviceId) {\n      this.transport.send(deviceId, {\n        version: 1,\n        events: [\n          {\n            maxScrollX: this._maxScrollX,\n            maxScrollY: this._maxScrollY,\n            maxScrollWidth: this._maxScrollWidth,\n            maxScrollHeight: this._maxScrollHeight,\n\n            viewportHeight: getWindowHeight(),\n            viewportWidth: getWindowWidth(),\n            pageUrl: getPageUrl(globalScope.location.href, this.config.interactionConfig?.ugcFilterRules ?? []),\n            timestamp: this.timestamp,\n            type: 'scroll',\n          },\n        ],\n      });\n    }\n  };\n}\n"]}
+{"version":3,"file":"scroll.js","sourceRoot":"","sources":["../../../src/hooks/scroll.ts"],"names":[],"mappings":"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","sourcesContent":["import { getWindowHeight, getWindowWidth } from '../utils/rrweb';\nimport type { scrollCallback, scrollPosition } from '@amplitude/rrweb-types';\nimport { BeaconTransport } from '../beacon-transport';\nimport { getGlobalScope } from '@amplitude/analytics-core';\nimport { SessionReplayJoinedConfig } from '../config/types';\nimport { SessionReplayDestinationSessionMetadata } from '../typings/session-replay';\nimport { getPageUrl } from '../helpers';\n\nexport type ScrollEvent = {\n  timestamp: number; // Timestamp the event occurred\n  maxScrollX: number; // Max window scroll X on a page\n  maxScrollY: number; // Max window scroll Y on a page\n  maxScrollHeight: number; // Max window scroll Y + window height on a page\n  maxScrollWidth: number; // Max window scroll X + window width on a page\n  viewportWidth: number;\n  viewportHeight: number;\n  pageUrl: string;\n  type: 'scroll';\n};\n\nexport type ScrollEventPayload = { version: number; events: ScrollEvent[] };\n\n/**\n * This is intended to watch and update max scroll activity when loaded for a particular page.\n * A new instance should be created if the page URL changes, since by default it does not reset\n * it's max scroll state. It is intended to send very few and very small events utilizing the\n * Beacon API.\n * @see {@link BeaconTransport} for more details on Beacon API usage.\n */\nexport class ScrollWatcher {\n  private timestamp = Date.now();\n  private _maxScrollX: number;\n  private _maxScrollY: number;\n  private _maxScrollWidth: number;\n  private _maxScrollHeight: number;\n  private readonly transport: BeaconTransport<ScrollEventPayload>;\n  private readonly config: Pick<SessionReplayJoinedConfig, 'loggerProvider' | 'interactionConfig'>;\n\n  static default(\n    context: Omit<SessionReplayDestinationSessionMetadata, 'deviceId'>,\n    config: SessionReplayJoinedConfig,\n  ): ScrollWatcher {\n    return new ScrollWatcher(new BeaconTransport<ScrollEventPayload>(context, config), config);\n  }\n\n  constructor(\n    transport: BeaconTransport<ScrollEventPayload>,\n    config: Pick<SessionReplayJoinedConfig, 'loggerProvider' | 'interactionConfig'>,\n  ) {\n    this._maxScrollX = 0;\n    this._maxScrollY = 0;\n    this._maxScrollWidth = getWindowWidth();\n    this._maxScrollHeight = getWindowHeight();\n    this.config = config;\n\n    this.transport = transport;\n  }\n\n  public get maxScrollX(): number {\n    return this._maxScrollX;\n  }\n\n  public get maxScrollY(): number {\n    return this._maxScrollY;\n  }\n\n  public get maxScrollWidth(): number {\n    return this._maxScrollWidth;\n  }\n\n  public get maxScrollHeight(): number {\n    return this._maxScrollHeight;\n  }\n\n  update(e: scrollPosition) {\n    const now = Date.now();\n    if (e.x > this._maxScrollX) {\n      const width = getWindowWidth();\n      this._maxScrollX = e.x;\n      const maxScrollWidth = e.x + width;\n      if (maxScrollWidth > this._maxScrollWidth) {\n        this._maxScrollWidth = maxScrollWidth;\n      }\n      this.timestamp = now;\n    }\n\n    if (e.y > this._maxScrollY) {\n      const height = getWindowHeight();\n      this._maxScrollY = e.y;\n      const maxScrollHeight = e.y + height;\n      if (maxScrollHeight > this._maxScrollHeight) {\n        this._maxScrollHeight = maxScrollHeight;\n      }\n      this.timestamp = now;\n    }\n  }\n\n  hook: scrollCallback = (e: scrollPosition) => {\n    this.update(e);\n  };\n\n  send: (deviceIdFn: () => string | undefined) => (_: PageTransitionEvent | Event) => void = (deviceIdFn) => (_) => {\n    const deviceId = deviceIdFn();\n    const globalScope = getGlobalScope();\n    if (globalScope && deviceId) {\n      this.transport.send(deviceId, {\n        version: 1,\n        events: [\n          {\n            maxScrollX: this._maxScrollX,\n            maxScrollY: this._maxScrollY,\n            maxScrollWidth: this._maxScrollWidth,\n            maxScrollHeight: this._maxScrollHeight,\n\n            viewportHeight: getWindowHeight(),\n            viewportWidth: getWindowWidth(),\n            pageUrl: getPageUrl(globalScope.location.href, this.config.interactionConfig?.ugcFilterRules ?? []),\n            timestamp: this.timestamp,\n            type: 'scroll',\n          },\n        ],\n      });\n    }\n  };\n}\n"]}

package/lib/cjs/observers/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../observers';
+//# sourceMappingURL=index.d.ts.map

package/lib/cjs/observers/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/observers/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC"}

package/lib/cjs/observers/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+// Re-export all observer types and classes
+tslib_1.__exportStar(require("../observers"), exports);
+//# sourceMappingURL=index.js.map

package/lib/cjs/observers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/observers/index.ts"],"names":[],"mappings":";;;AAAA,2CAA2C;AAC3C,uDAA6B","sourcesContent":["// Re-export all observer types and classes\nexport * from '../observers';\n"]}

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

@@ -1,9 +1,9 @@
 import { ILogger } from '@amplitude/analytics-core';
-import { record } from '@amplitude/rrweb';
 import { LoggingConfig, SessionReplayJoinedConfig, SessionReplayJoinedConfigGenerator } from './config/types';
 import { CustomRRwebEvent } from './constants';
 import { AmplitudeSessionReplay, SessionReplayEventsManager as AmplitudeSessionReplayEventsManager, SessionIdentifiers as ISessionIdentifiers, SessionReplayOptions } from './typings/session-replay';
 import { EventCompressor } from './events/event-compressor';
+import type { RecordFunction } from './utils/rrweb';
 type PageLeaveFn = (e: PageTransitionEvent | Event) => void;
 export declare class SessionReplay implements AmplitudeSessionReplay {
     name: string;
@@ -12,13 +12,14 @@ export declare class SessionReplay implements AmplitudeSessionReplay {
     identifiers: ISessionIdentifiers | undefined;
     eventsManager?: AmplitudeSessionReplayEventsManager<'replay' | 'interaction', string>;
     loggerProvider: ILogger;
-    recordCancelCallback: ReturnType<typeof record> | null;
+    recordCancelCallback: ReturnType<RecordFunction> | null;
     eventCount: number;
     eventCompressor: EventCompressor | undefined;
     pageLeaveFns: PageLeaveFn[];
     private scrollHook?;
     private networkObservers?;
     private metadata;
+    private recordFunction;
     constructor();
     init(apiKey: string, options: SessionReplayOptions): import("@amplitude/analytics-core").AmplitudeReturn<void>;
     private teardownEventListeners;
@@ -43,6 +44,7 @@ export declare class SessionReplay implements AmplitudeSessionReplay {
     getBlockSelectors(): string | string[] | undefined;
     getMaskTextSelectors(): string | undefined;
     getRecordingPlugins(loggingConfig: LoggingConfig | undefined): Promise<import("@amplitude/rrweb-types").RecordPlugin<unknown>[] | undefined>;
+    private getRecordFunction;
     recordEvents(shouldLogMetadata?: boolean): Promise<void>;
     addCustomRRWebEvent: (eventName: CustomRRwebEvent, eventData?: {
         [key: string]: any;
@@ -54,6 +56,7 @@ export declare class SessionReplay implements AmplitudeSessionReplay {
     shutdown(): void;
     private mapSDKType;
     private setMetadata;
+    private initializeNetworkObservers;
 }
 export {};
 //# sourceMappingURL=session-replay.d.ts.map

package/lib/cjs/session-replay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"session-replay.d.ts","sourceRoot":"","sources":["../../src/session-replay.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,OAAO,EAER,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAG1C,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,kCAAkC,EAInC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAEL,gBAAgB,EAMjB,MAAM,aAAa,CAAC;AAOrB,OAAO,EACL,sBAAsB,EACtB,0BAA0B,IAAI,mCAAmC,EAIjE,kBAAkB,IAAI,mBAAmB,EACzC,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAI5D,KAAK,WAAW,GAAG,CAAC,CAAC,EAAE,mBAAmB,GAAG,KAAK,KAAK,IAAI,CAAC;AAE5D,qBAAa,aAAc,YAAW,sBAAsB;IAC1D,IAAI,SAAuC;IAC3C,MAAM,EAAE,yBAAyB,GAAG,SAAS,CAAC;IAC9C,qBAAqB,EAAE,kCAAkC,GAAG,SAAS,CAAC;IACtE,WAAW,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC7C,aAAa,CAAC,EAAE,mCAAmC,CAAC,QAAQ,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;IACtF,cAAc,EAAE,OAAO,CAAC;IACxB,oBAAoB,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,GAAG,IAAI,CAAQ;IAC9D,UAAU,SAAK;IACf,eAAe,EAAE,eAAe,GAAG,SAAS,CAAC;IAG7C,YAAY,EAAE,WAAW,EAAE,CAAM;IACjC,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAoC;;IAMpD,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB;IAIlD,OAAO,CAAC,sBAAsB,CAmB5B;cAEc,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB;IA2FnE,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;IAIpD,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;IAqBrE,0BAA0B;;;IAsC1B,YAAY,aAEV;IAEF,aAAa,aAIX;IAEF;;;;OAIG;IACH,OAAO,CAAC,iBAAiB,CAIvB;IAEF,UAAU,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM;IAShC,UAAU,CAAC,sBAAsB,UAAQ;IAgB/C,YAAY;IAUZ,eAAe;IAwBf,iBAAiB,IAAI,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAWlD,oBAAoB,IAAI,MAAM,GAAG,SAAS;IAapC,mBAAmB,CAAC,aAAa,EAAE,aAAa,GAAG,SAAS;IA0B5D,YAAY,CAAC,iBAAiB,UAAO;IA+F3C,mBAAmB,cACN,gBAAgB;;kDAmC3B;IAEF,mBAAmB,aAUjB;IAEF,WAAW;IAIX,YAAY;IAIN,KAAK,CAAC,QAAQ,UAAQ;IAI5B,QAAQ;IAMR,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,WAAW;CAwBpB"}
+{"version":3,"file":"session-replay.d.ts","sourceRoot":"","sources":["../../src/session-replay.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,OAAO,EAER,MAAM,2BAA2B,CAAC;AAKnC,OAAO,EACL,aAAa,EACb,yBAAyB,EACzB,kCAAkC,EAInC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAEL,gBAAgB,EAMjB,MAAM,aAAa,CAAC;AAOrB,OAAO,EACL,sBAAsB,EACtB,0BAA0B,IAAI,mCAAmC,EAIjE,kBAAkB,IAAI,mBAAmB,EACzC,oBAAoB,EACrB,MAAM,0BAA0B,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAK5D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,KAAK,WAAW,GAAG,CAAC,CAAC,EAAE,mBAAmB,GAAG,KAAK,KAAK,IAAI,CAAC;AAE5D,qBAAa,aAAc,YAAW,sBAAsB;IAC1D,IAAI,SAAuC;IAC3C,MAAM,EAAE,yBAAyB,GAAG,SAAS,CAAC;IAC9C,qBAAqB,EAAE,kCAAkC,GAAG,SAAS,CAAC;IACtE,WAAW,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC7C,aAAa,CAAC,EAAE,mCAAmC,CAAC,QAAQ,GAAG,aAAa,EAAE,MAAM,CAAC,CAAC;IACtF,cAAc,EAAE,OAAO,CAAC;IACxB,oBAAoB,EAAE,UAAU,CAAC,cAAc,CAAC,GAAG,IAAI,CAAQ;IAC/D,UAAU,SAAK;IACf,eAAe,EAAE,eAAe,GAAG,SAAS,CAAC;IAG7C,YAAY,EAAE,WAAW,EAAE,CAAM;IACjC,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,gBAAgB,CAAC,CAAmB;IAC5C,OAAO,CAAC,QAAQ,CAAoC;IAGpD,OAAO,CAAC,cAAc,CAA+B;;IAMrD,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB;IAIlD,OAAO,CAAC,sBAAsB,CAmB5B;cAEc,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,oBAAoB;IAwFnE,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;IAIpD,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM;IAqBrE,0BAA0B;;;IAsC1B,YAAY,aAEV;IAEF,aAAa,aAIX;IAEF;;;;OAIG;IACH,OAAO,CAAC,iBAAiB,CAIvB;IAEF,UAAU,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM;IAShC,UAAU,CAAC,sBAAsB,UAAQ;IAgB/C,YAAY;IAUZ,eAAe;IAwBf,iBAAiB,IAAI,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAWlD,oBAAoB,IAAI,MAAM,GAAG,SAAS;IAapC,mBAAmB,CAAC,aAAa,EAAE,aAAa,GAAG,SAAS;YA2BpD,iBAAiB;IAezB,YAAY,CAAC,iBAAiB,UAAO;IAwG3C,mBAAmB,cACN,gBAAgB;;kDAmC3B;IAEF,mBAAmB,aAUjB;IAEF,WAAW;IAIX,YAAY;IAIN,KAAK,CAAC,QAAQ,UAAQ;IAI5B,QAAQ;IAMR,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,WAAW;YAyBL,0BAA0B;CAUzC"}

package/lib/cjs/session-replay.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SessionReplay = void 0;
 var tslib_1 = require("tslib");
 var analytics_core_1 = require("@amplitude/analytics-core");
-var rrweb_1 = require("@amplitude/rrweb");
+// Import only specific types to avoid pulling in the entire rrweb-types package
 var rrweb_types_1 = require("@amplitude/rrweb-types");
 var joined_config_1 = require("./config/joined-config");
 var constants_1 = require("./constants");
@@ -16,15 +16,16 @@ var identifiers_1 = require("./identifiers");
 var version_1 = require("./version");
 var event_compressor_1 = require("./events/event-compressor");
 var logger_1 = require("./logger");
-var observers_1 = require("./observers");
 var SessionReplay = /** @class */ (function () {
     function SessionReplay() {
         var _this = this;
         this.name = '@amplitude/session-replay-browser';
         this.recordCancelCallback = null;
         this.eventCount = 0;
-        // Visible for testing
+        // Visible for testing only
         this.pageLeaveFns = [];
+        // Cache the dynamically imported record function
+        this.recordFunction = null;
         this.teardownEventListeners = function (teardown) {
             var globalScope = (0, analytics_core_1.getGlobalScope)();
             if (globalScope) {
@@ -88,8 +89,8 @@ var SessionReplay = /** @class */ (function () {
                             _a.label = 2;
                         case 2:
                             // Check first to ensure we are recording
-                            if (this.recordCancelCallback) {
-                                rrweb_1.record.addCustomEvent(eventName, tslib_1.__assign(tslib_1.__assign({}, eventData), debugInfo));
+                            if (this.recordCancelCallback && this.recordFunction) {
+                                this.recordFunction.addCustomEvent(eventName, tslib_1.__assign(tslib_1.__assign({}, eventData), debugInfo));
                             }
                             else {
                                 this.loggerProvider.debug("Not able to add custom replay capture event ".concat(eventName, " due to no ongoing recording."));
@@ -123,23 +124,23 @@ var SessionReplay = /** @class */ (function () {
         return (0, analytics_core_1.returnWrapper)(this._init(apiKey, options));
     };
     SessionReplay.prototype._init = function (apiKey, options) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f;
         return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var _j, _k, joinedConfig, localConfig, remoteConfig, scrollWatcher, managers, storeType, rrwebEventManager, error_1, typedError, payloadBatcher, interactionEventManager, error_2, typedError;
-            return tslib_1.__generator(this, function (_l) {
-                switch (_l.label) {
+            var _g, _h, joinedConfig, localConfig, remoteConfig, scrollWatcher, managers, storeType, rrwebEventManager, error_1, typedError, payloadBatcher, interactionEventManager, error_2, typedError;
+            return tslib_1.__generator(this, function (_j) {
+                switch (_j.label) {
                     case 0:
                         this.loggerProvider = new logger_1.SafeLoggerProvider(options.loggerProvider || new analytics_core_1.Logger());
                         Object.prototype.hasOwnProperty.call(options, 'logLevel') &&
                             this.loggerProvider.enable(options.logLevel);
                         this.identifiers = new identifiers_1.SessionIdentifiers({ sessionId: options.sessionId, deviceId: options.deviceId });
-                        _j = this;
+                        _g = this;
                         return [4 /*yield*/, (0, joined_config_1.createSessionReplayJoinedConfigGenerator)(apiKey, options)];
                     case 1:
-                        _j.joinedConfigGenerator = _l.sent();
+                        _g.joinedConfigGenerator = _j.sent();
                         return [4 /*yield*/, this.joinedConfigGenerator.generateJoinedConfig(this.identifiers.sessionId)];
                     case 2:
-                        _k = _l.sent(), joinedConfig = _k.joinedConfig, localConfig = _k.localConfig, remoteConfig = _k.remoteConfig;
+                        _h = _j.sent(), joinedConfig = _h.joinedConfig, localConfig = _h.localConfig, remoteConfig = _h.remoteConfig;
                         this.config = joinedConfig;
                         this.setMetadata(options.sessionId, joinedConfig, localConfig, remoteConfig, (_a = options.version) === null || _a === void 0 ? void 0 : _a.version, version_1.VERSION, (_b = options.version) === null || _b === void 0 ? void 0 : _b.type);
                         if (options.sessionId && ((_c = this.config.interactionConfig) === null || _c === void 0 ? void 0 : _c.enabled)) {
@@ -157,9 +158,9 @@ var SessionReplay = /** @class */ (function () {
                             this.loggerProvider.warn('Could not use preferred indexedDB storage, reverting to in memory option.');
                         }
                         this.loggerProvider.log("Using ".concat(storeType, " for event storage."));
-                        _l.label = 3;
+                        _j.label = 3;
                     case 3:
-                        _l.trys.push([3, 5, , 6]);
+                        _j.trys.push([3, 5, , 6]);
                         return [4 /*yield*/, (0, events_manager_1.createEventsManager)({
                                 config: this.config,
                                 sessionId: this.identifiers.sessionId,
@@ -167,20 +168,20 @@ var SessionReplay = /** @class */ (function () {
                                 storeType: storeType,
                             })];
                     case 4:
-                        rrwebEventManager = _l.sent();
+                        rrwebEventManager = _j.sent();
                         managers.push({ name: 'replay', manager: rrwebEventManager });
                         return [3 /*break*/, 6];
                     case 5:
-                        error_1 = _l.sent();
+                        error_1 = _j.sent();
                         typedError = error_1;
                         this.loggerProvider.warn("Error occurred while creating replay events manager: ".concat(typedError.toString()));
                         return [3 /*break*/, 6];
                     case 6:
                         if (!((_e = this.config.interactionConfig) === null || _e === void 0 ? void 0 : _e.enabled)) return [3 /*break*/, 10];
                         payloadBatcher = this.config.interactionConfig.batch ? click_1.clickBatcher : click_1.clickNonBatcher;
-                        _l.label = 7;
+                        _j.label = 7;
                     case 7:
-                        _l.trys.push([7, 9, , 10]);
+                        _j.trys.push([7, 9, , 10]);
                         return [4 /*yield*/, (0, events_manager_1.createEventsManager)({
                                 config: this.config,
                                 sessionId: this.identifiers.sessionId,
@@ -191,11 +192,11 @@ var SessionReplay = /** @class */ (function () {
                                 storeType: storeType,
                             })];
                     case 8:
-                        interactionEventManager = _l.sent();
+                        interactionEventManager = _j.sent();
                         managers.push({ name: 'interaction', manager: interactionEventManager });
                         return [3 /*break*/, 10];
                     case 9:
-                        error_2 = _l.sent();
+                        error_2 = _j.sent();
                         typedError = error_2;
                         this.loggerProvider.warn("Error occurred while creating interaction events manager: ".concat(typedError.toString()));
                         return [3 /*break*/, 10];
@@ -206,10 +207,9 @@ var SessionReplay = /** @class */ (function () {
                             this.eventCompressor.terminate();
                         }
                         this.eventCompressor = new event_compressor_1.EventCompressor(this.eventsManager, this.config, this.getDeviceId());
-                        // Initialize network observers if logging is enabled
-                        if ((_h = (_g = this.config.loggingConfig) === null || _g === void 0 ? void 0 : _g.network) === null || _h === void 0 ? void 0 : _h.enabled) {
-                            this.networkObservers = new observers_1.NetworkObservers();
-                        }
+                        return [4 /*yield*/, this.initializeNetworkObservers()];
+                    case 11:
+                        _j.sent();
                         this.loggerProvider.log('Installing @amplitude/session-replay-browser.');
                         this.teardownEventListeners(false);
                         void this.initialize(true);
@@ -384,11 +384,37 @@ var SessionReplay = /** @class */ (function () {
             });
         });
     };
+    SessionReplay.prototype.getRecordFunction = function () {
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var record, error_4;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (this.recordFunction) {
+                            return [2 /*return*/, this.recordFunction];
+                        }
+                        _a.label = 1;
+                    case 1:
+                        _a.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, Promise.resolve().then(function () { return tslib_1.__importStar(require('@amplitude/rrweb-record')); })];
+                    case 2:
+                        record = (_a.sent()).record;
+                        this.recordFunction = record;
+                        return [2 /*return*/, record];
+                    case 3:
+                        error_4 = _a.sent();
+                        this.loggerProvider.warn('Failed to load rrweb-record module:', error_4);
+                        return [2 /*return*/, null];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     SessionReplay.prototype.recordEvents = function (shouldLogMetadata) {
         var _a, _b, _c;
         if (shouldLogMetadata === void 0) { shouldLogMetadata = true; }
         return tslib_1.__awaiter(this, void 0, void 0, function () {
-            var config, shouldRecord, sessionId, privacyConfig, interactionConfig, loggingConfig, hooks, ugcFilterRules, _d, _e, error_4;
+            var config, shouldRecord, sessionId, recordFunction, privacyConfig, interactionConfig, loggingConfig, hooks, ugcFilterRules, _d, _e, error_5;
             var _f;
             var _this = this;
             return tslib_1.__generator(this, function (_g) {
@@ -401,6 +427,16 @@ var SessionReplay = /** @class */ (function () {
                             return [2 /*return*/];
                         }
                         this.stopRecordingEvents();
+                        return [4 /*yield*/, this.getRecordFunction()];
+                    case 1:
+                        recordFunction = _g.sent();
+                        // May be undefined if cannot import rrweb-record
+                        if (!recordFunction) {
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, this.initializeNetworkObservers()];
+                    case 2:
+                        _g.sent();
                         (_b = this.networkObservers) === null || _b === void 0 ? void 0 : _b.start(function (event) {
                             void _this.addCustomRRWebEvent(constants_1.CustomRRwebEvent.FETCH_REQUEST, event);
                         });
@@ -412,6 +448,7 @@ var SessionReplay = /** @class */ (function () {
                                         eventsManager: this.eventsManager,
                                         sessionId: sessionId,
                                         deviceIdFn: this.getDeviceId.bind(this),
+                                        mirror: recordFunction.mirror,
                                         ugcFilterRules: (_c = interactionConfig.ugcFilterRules) !== null && _c !== void 0 ? _c : [],
                                     }),
                                 scroll: this.scrollHook,
@@ -419,11 +456,11 @@ var SessionReplay = /** @class */ (function () {
                             : {};
                         ugcFilterRules = (interactionConfig === null || interactionConfig === void 0 ? void 0 : interactionConfig.enabled) && interactionConfig.ugcFilterRules ? interactionConfig.ugcFilterRules : [];
                         this.loggerProvider.log("Session Replay capture beginning for ".concat(sessionId, "."));
-                        _g.label = 1;
-                    case 1:
-                        _g.trys.push([1, 3, , 4]);
+                        _g.label = 3;
+                    case 3:
+                        _g.trys.push([3, 5, , 6]);
                         _d = this;
-                        _e = rrweb_1.record;
+                        _e = recordFunction;
                         _f = {
                             emit: function (event) {
                                 if (_this.shouldOptOut()) {
@@ -445,12 +482,10 @@ var SessionReplay = /** @class */ (function () {
                             maskAllInputs: true,
                             maskTextClass: constants_1.MASK_TEXT_CLASS,
                             blockClass: constants_1.BLOCK_CLASS,
-                            // rrweb only exposes string type through its types, but arrays are also be supported. #class, ['#class', 'id']
                             blockSelector: this.getBlockSelectors(),
                             applyBackgroundColorToBlockedElements: config.applyBackgroundColorToBlockedElements,
                             maskInputFn: (0, helpers_1.maskFn)('input', privacyConfig),
                             maskTextFn: (0, helpers_1.maskFn)('text', privacyConfig),
-                            // rrweb only exposes string type through its types, but arrays are also be supported. since rrweb uses .matches() which supports arrays.
                             maskTextSelector: this.getMaskTextSelectors(),
                             recordCanvas: false,
                             errorHandler: function (error) {
@@ -471,19 +506,19 @@ var SessionReplay = /** @class */ (function () {
                             }
                         };
                         return [4 /*yield*/, this.getRecordingPlugins(loggingConfig)];
-                    case 2:
+                    case 4:
                         _d.recordCancelCallback = _e.apply(void 0, [(_f.plugins = _g.sent(),
                                 _f)]);
                         void this.addCustomRRWebEvent(constants_1.CustomRRwebEvent.DEBUG_INFO);
                         if (shouldLogMetadata) {
                             void this.addCustomRRWebEvent(constants_1.CustomRRwebEvent.METADATA, this.metadata);
                         }
-                        return [3 /*break*/, 4];
-                    case 3:
-                        error_4 = _g.sent();
-                        this.loggerProvider.warn('Failed to initialize session replay:', error_4);
-                        return [3 /*break*/, 4];
-                    case 4: return [2 /*return*/];
+                        return [3 /*break*/, 6];
+                    case 5:
+                        error_5 = _g.sent();
+                        this.loggerProvider.warn('Failed to initialize session replay:', error_5);
+                        return [3 /*break*/, 6];
+                    case 6: return [2 /*return*/];
                 }
             });
         });
@@ -534,6 +569,31 @@ var SessionReplay = /** @class */ (function () {
             standaloneSDKVersion: standaloneSDKVersion,
         };
     };
+    SessionReplay.prototype.initializeNetworkObservers = function () {
+        var _a, _b, _c;
+        return tslib_1.__awaiter(this, void 0, void 0, function () {
+            var NetworkObserversClass, error_6;
+            return tslib_1.__generator(this, function (_d) {
+                switch (_d.label) {
+                    case 0:
+                        if (!(((_c = (_b = (_a = this.config) === null || _a === void 0 ? void 0 : _a.loggingConfig) === null || _b === void 0 ? void 0 : _b.network) === null || _c === void 0 ? void 0 : _c.enabled) && !this.networkObservers)) return [3 /*break*/, 4];
+                        _d.label = 1;
+                    case 1:
+                        _d.trys.push([1, 3, , 4]);
+                        return [4 /*yield*/, Promise.resolve().then(function () { return tslib_1.__importStar(require('./observers')); })];
+                    case 2:
+                        NetworkObserversClass = (_d.sent()).NetworkObservers;
+                        this.networkObservers = new NetworkObserversClass();
+                        return [3 /*break*/, 4];
+                    case 3:
+                        error_6 = _d.sent();
+                        this.loggerProvider.warn('Failed to import or instantiate NetworkObservers:', error_6);
+                        return [3 /*break*/, 4];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
     return SessionReplay;
 }());
 exports.SessionReplay = SessionReplay;