@sentry/replay 7.53.1 → 7.55.0

package/cjs/index.js

@@ -40,7 +40,12 @@ const NETWORK_BODY_MAX_SIZE = 150000;
 /* The max size of a single console arg that is captured. Any arg larger than this will be truncated. */
 const CONSOLE_ARG_MAX_SIZE = 5000;
 
-var NodeType$1;
+/* Min. time to wait before we consider something a slow click. */
+const SLOW_CLICK_THRESHOLD = 3000;
+/* For scroll actions after a click, we only look for a very short time period to detect programmatic scrolling. */
+const SLOW_CLICK_SCROLL_TIMEOUT = 300;
+
+var NodeType;
 (function (NodeType) {
     NodeType[NodeType["Document"] = 0] = "Document";
     NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
@@ -48,7 +53,7 @@ var NodeType$1;
     NodeType[NodeType["Text"] = 3] = "Text";
     NodeType[NodeType["CDATA"] = 4] = "CDATA";
     NodeType[NodeType["Comment"] = 5] = "Comment";
-})(NodeType$1 || (NodeType$1 = {}));
+})(NodeType || (NodeType = {}));
 
 function isElement(n) {
     return n.nodeType === n.ELEMENT_NODE;
@@ -452,7 +457,7 @@ function serializeNode(n, options) {
         case n.DOCUMENT_NODE:
             if (n.compatMode !== 'CSS1Compat') {
                 return {
-                    type: NodeType$1.Document,
+                    type: NodeType.Document,
                     childNodes: [],
                     compatMode: n.compatMode,
                     rootId,
@@ -460,14 +465,14 @@ function serializeNode(n, options) {
             }
             else {
                 return {
-                    type: NodeType$1.Document,
+                    type: NodeType.Document,
                     childNodes: [],
                     rootId,
                 };
             }
         case n.DOCUMENT_TYPE_NODE:
             return {
-                type: NodeType$1.DocumentType,
+                type: NodeType.DocumentType,
                 name: n.name,
                 publicId: n.publicId,
                 systemId: n.systemId,
@@ -611,7 +616,7 @@ function serializeNode(n, options) {
                 delete attributes.src;
             }
             return {
-                type: NodeType$1.Element,
+                type: NodeType.Element,
                 tagName,
                 attributes,
                 childNodes: [],
@@ -665,20 +670,20 @@ function serializeNode(n, options) {
                     : defaultMaskFn(textContent);
             }
             return {
-                type: NodeType$1.Text,
+                type: NodeType.Text,
                 textContent: textContent || '',
                 isStyle,
                 rootId,
             };
         case n.CDATA_SECTION_NODE:
             return {
-                type: NodeType$1.CDATA,
+                type: NodeType.CDATA,
                 textContent: '',
                 rootId,
             };
         case n.COMMENT_NODE:
             return {
-                type: NodeType$1.Comment,
+                type: NodeType.Comment,
                 textContent: n.textContent || '',
                 rootId,
             };
@@ -695,10 +700,10 @@ function lowerIfExists(maybeAttr) {
     }
 }
 function slimDOMExcluded(sn, slimDOMOptions) {
-    if (slimDOMOptions.comment && sn.type === NodeType$1.Comment) {
+    if (slimDOMOptions.comment && sn.type === NodeType.Comment) {
         return true;
     }
-    else if (sn.type === NodeType$1.Element) {
+    else if (sn.type === NodeType.Element) {
         if (slimDOMOptions.script &&
             (sn.tagName === 'script' ||
                 (sn.tagName === 'link' &&
@@ -799,7 +804,7 @@ function serializeNodeWithId(n, options) {
     }
     else if (slimDOMExcluded(_serializedNode, slimDOMOptions) ||
         (!preserveWhiteSpace &&
-            _serializedNode.type === NodeType$1.Text &&
+            _serializedNode.type === NodeType.Text &&
             !_serializedNode.isStyle &&
             !_serializedNode.textContent.replace(/^\s+|\s+$/gm, '').length)) {
         id = IGNORED_NODE;
@@ -817,17 +822,17 @@ function serializeNodeWithId(n, options) {
         onSerialize(n);
     }
     let recordChild = !skipChild;
-    if (serializedNode.type === NodeType$1.Element) {
+    if (serializedNode.type === NodeType.Element) {
         recordChild = recordChild && !serializedNode.needBlock;
         delete serializedNode.needBlock;
         if (n.shadowRoot)
             serializedNode.isShadowHost = true;
     }
-    if ((serializedNode.type === NodeType$1.Document ||
-        serializedNode.type === NodeType$1.Element) &&
+    if ((serializedNode.type === NodeType.Document ||
+        serializedNode.type === NodeType.Element) &&
         recordChild) {
         if (slimDOMOptions.headWhitespace &&
-            _serializedNode.type === NodeType$1.Element &&
+            _serializedNode.type === NodeType.Element &&
             _serializedNode.tagName === 'head') {
             preserveWhiteSpace = false;
         }
@@ -877,7 +882,7 @@ function serializeNodeWithId(n, options) {
     if (n.parentNode && isShadowRoot(n.parentNode)) {
         serializedNode.isShadow = true;
     }
-    if (serializedNode.type === NodeType$1.Element &&
+    if (serializedNode.type === NodeType.Element &&
         serializedNode.tagName === 'iframe') {
         onceIframeLoaded(n, () => {
             const iframeDoc = n.contentDocument;
@@ -993,7 +998,7 @@ function skipAttribute(tagName, attributeName, value) {
     return ((tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay');
 }
 
-var EventType$1;
+exports.EventType = void 0;
 (function (EventType) {
     EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
     EventType[EventType["Load"] = 1] = "Load";
@@ -1002,7 +1007,7 @@ var EventType$1;
     EventType[EventType["Meta"] = 4] = "Meta";
     EventType[EventType["Custom"] = 5] = "Custom";
     EventType[EventType["Plugin"] = 6] = "Plugin";
-})(EventType$1 || (EventType$1 = {}));
+})(exports.EventType || (exports.EventType = {}));
 var IncrementalSource;
 (function (IncrementalSource) {
     IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
@@ -1135,7 +1140,7 @@ if (typeof window !== 'undefined' && window.Proxy && window.Reflect) {
         },
     });
 }
-function throttle(func, wait, options = {}) {
+function throttle$1(func, wait, options = {}) {
     let timeout = null;
     let previous = 0;
     return function (arg) {
@@ -1302,7 +1307,7 @@ function polyfill(win = window) {
 }
 function isIframeINode(node) {
     if ('__sn' in node) {
-        return (node.__sn.type === NodeType$1.Element && node.__sn.tagName === 'iframe');
+        return (node.__sn.type === NodeType.Element && node.__sn.tagName === 'iframe');
     }
     return false;
 }
@@ -1870,7 +1875,7 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
         : 500;
     let positions = [];
     let timeBaseline;
-    const wrappedCb = throttle((source) => {
+    const wrappedCb = throttle$1((source) => {
         const totalOffset = Date.now() - timeBaseline;
         callbackWrapper(mousemoveCb)(positions.map((p) => {
             p.timeOffset -= totalOffset;
@@ -1879,7 +1884,7 @@ function initMoveObserver({ mousemoveCb, sampling, doc, mirror, }) {
         positions = [];
         timeBaseline = null;
     }, callbackThreshold);
-    const updatePosition = throttle((evt) => {
+    const updatePosition = throttle$1((evt) => {
         const target = getEventTarget(evt);
         const { clientX, clientY } = isTouchEvent(evt)
             ? evt.changedTouches[0]
@@ -1953,7 +1958,7 @@ function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror, blockCl
     });
 }
 function initScrollObserver({ scrollCb, doc, mirror, blockClass, blockSelector, unblockSelector, sampling, }) {
-    const updatePosition = throttle((evt) => {
+    const updatePosition = throttle$1((evt) => {
         const target = getEventTarget(evt);
         if (!target ||
             isBlocked(target, blockClass, blockSelector, unblockSelector)) {
@@ -1981,7 +1986,7 @@ function initScrollObserver({ scrollCb, doc, mirror, blockClass, blockSelector,
 function initViewportResizeObserver({ viewportResizeCb, }) {
     let lastH = -1;
     let lastW = -1;
-    const updateDimension = throttle(() => {
+    const updateDimension = throttle$1(() => {
         const height = getWindowHeight();
         const width = getWindowWidth();
         if (lastH !== height || lastW !== width) {
@@ -2270,7 +2275,7 @@ function initStyleDeclarationObserver({ styleDeclarationCb, mirror }, { win }) {
     });
 }
 function initMediaInteractionObserver({ mediaInteractionCb, blockClass, blockSelector, unblockSelector, mirror, sampling, }) {
-    const handler = (type) => throttle(callbackWrapper((event) => {
+    const handler = (type) => throttle$1(callbackWrapper((event) => {
         const target = getEventTarget(event);
         if (!target ||
             isBlocked(target, blockClass, blockSelector, unblockSelector)) {
@@ -2975,17 +2980,17 @@ function record(options = {}) {
     wrappedEmit = (e, isCheckout) => {
         var _a;
         if (((_a = mutationBuffers[0]) === null || _a === void 0 ? void 0 : _a.isFrozen()) &&
-            e.type !== EventType$1.FullSnapshot &&
-            !(e.type === EventType$1.IncrementalSnapshot &&
+            e.type !== exports.EventType.FullSnapshot &&
+            !(e.type === exports.EventType.IncrementalSnapshot &&
                 e.data.source === IncrementalSource.Mutation)) {
             mutationBuffers.forEach((buf) => buf.unfreeze());
         }
         emit(eventProcessor(e), isCheckout);
-        if (e.type === EventType$1.FullSnapshot) {
+        if (e.type === exports.EventType.FullSnapshot) {
             lastFullSnapshotEvent = e;
             incrementalSnapshotCount = 0;
         }
-        else if (e.type === EventType$1.IncrementalSnapshot) {
+        else if (e.type === exports.EventType.IncrementalSnapshot) {
             if (e.data.source === IncrementalSource.Mutation &&
                 e.data.isAttachIframe) {
                 return;
@@ -3001,16 +3006,16 @@ function record(options = {}) {
     };
     const wrappedMutationEmit = (m) => {
         wrappedEmit(wrapEvent({
-            type: EventType$1.IncrementalSnapshot,
+            type: exports.EventType.IncrementalSnapshot,
             data: Object.assign({ source: IncrementalSource.Mutation }, m),
         }));
     };
     const wrappedScrollEmit = (p) => wrappedEmit(wrapEvent({
-        type: EventType$1.IncrementalSnapshot,
+        type: exports.EventType.IncrementalSnapshot,
         data: Object.assign({ source: IncrementalSource.Scroll }, p),
     }));
     const wrappedCanvasMutationEmit = (p) => wrappedEmit(wrapEvent({
-        type: EventType$1.IncrementalSnapshot,
+        type: exports.EventType.IncrementalSnapshot,
         data: Object.assign({ source: IncrementalSource.CanvasMutation }, p),
     }));
     const iframeManager = new IframeManager({
@@ -3055,7 +3060,7 @@ function record(options = {}) {
     takeFullSnapshot = (isCheckout = false) => {
         var _a, _b, _c, _d;
         wrappedEmit(wrapEvent({
-            type: EventType$1.Meta,
+            type: exports.EventType.Meta,
             data: {
                 href: window.location.href,
                 width: getWindowWidth(),
@@ -3098,7 +3103,7 @@ function record(options = {}) {
         }
         mirror.map = idNodeMap;
         wrappedEmit(wrapEvent({
-            type: EventType$1.FullSnapshot,
+            type: exports.EventType.FullSnapshot,
             data: {
                 node,
                 initialOffset: {
@@ -3123,7 +3128,7 @@ function record(options = {}) {
         const handlers = [];
         handlers.push(on('DOMContentLoaded', () => {
             wrappedEmit(wrapEvent({
-                type: EventType$1.DomContentLoaded,
+                type: exports.EventType.DomContentLoaded,
                 data: {},
             }));
         }));
@@ -3133,40 +3138,40 @@ function record(options = {}) {
                 onMutation,
                 mutationCb: wrappedMutationEmit,
                 mousemoveCb: (positions, source) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: {
                         source,
                         positions,
                     },
                 })),
                 mouseInteractionCb: (d) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.MouseInteraction }, d),
                 })),
                 scrollCb: wrappedScrollEmit,
                 viewportResizeCb: (d) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.ViewportResize }, d),
                 })),
                 inputCb: (v) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.Input }, v),
                 })),
                 mediaInteractionCb: (p) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.MediaInteraction }, p),
                 })),
                 styleSheetRuleCb: (r) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.StyleSheetRule }, r),
                 })),
                 styleDeclarationCb: (r) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.StyleDeclaration }, r),
                 })),
                 canvasMutationCb: wrappedCanvasMutationEmit,
                 fontCb: (p) => wrappedEmit(wrapEvent({
-                    type: EventType$1.IncrementalSnapshot,
+                    type: exports.EventType.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.Font }, p),
                 })),
                 blockClass,
@@ -3199,7 +3204,7 @@ function record(options = {}) {
                     observer: p.observer,
                     options: p.options,
                     callback: (payload) => wrappedEmit(wrapEvent({
-                        type: EventType$1.Plugin,
+                        type: exports.EventType.Plugin,
                         data: {
                             plugin: p.name,
                             payload,
@@ -3227,7 +3232,7 @@ function record(options = {}) {
         else {
             handlers.push(on('load', () => {
                 wrappedEmit(wrapEvent({
-                    type: EventType$1.Load,
+                    type: exports.EventType.Load,
                     data: {},
                 }));
                 init();
@@ -3246,7 +3251,7 @@ record.addCustomEvent = (tag, payload) => {
         throw new Error('please add custom event after start recording');
     }
     wrappedEmit(wrapEvent({
-        type: EventType$1.Custom,
+        type: exports.EventType.Custom,
         data: {
             tag,
             payload,
@@ -3277,7 +3282,7 @@ function createBreadcrumb(
   };
 }
 
-var NodeType;
+exports.NodeType = void 0;
 (function (NodeType) {
     NodeType[NodeType["Document"] = 0] = "Document";
     NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
@@ -3285,90 +3290,7 @@ var NodeType;
     NodeType[NodeType["Text"] = 3] = "Text";
     NodeType[NodeType["CDATA"] = 4] = "CDATA";
     NodeType[NodeType["Comment"] = 5] = "Comment";
-})(NodeType || (NodeType = {}));
-
-/* eslint-disable @typescript-eslint/naming-convention */
-
-var EventType; (function (EventType) {
-  const DomContentLoaded = 0; EventType[EventType["DomContentLoaded"] = DomContentLoaded] = "DomContentLoaded";
-  const Load = 1; EventType[EventType["Load"] = Load] = "Load";
-  const FullSnapshot = 2; EventType[EventType["FullSnapshot"] = FullSnapshot] = "FullSnapshot";
-  const IncrementalSnapshot = 3; EventType[EventType["IncrementalSnapshot"] = IncrementalSnapshot] = "IncrementalSnapshot";
-  const Meta = 4; EventType[EventType["Meta"] = Meta] = "Meta";
-  const Custom = 5; EventType[EventType["Custom"] = Custom] = "Custom";
-  const Plugin = 6; EventType[EventType["Plugin"] = Plugin] = "Plugin";
-})(EventType || (EventType = {}));
-
-/**
- * This is a partial copy of rrweb's eventWithTime type which only contains the properties
- * we specifcally need in the SDK.
- */
-
-/**
- * Converts a timestamp to ms, if it was in s, or keeps it as ms.
- */
-function timestampToMs(timestamp) {
-  const isMs = timestamp > 9999999999;
-  return isMs ? timestamp : timestamp * 1000;
-}
-
-/**
- * Add an event to the event buffer.
- * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
- */
-async function addEvent(
-  replay,
-  event,
-  isCheckout,
-) {
-  if (!replay.eventBuffer) {
-    // This implies that `_isEnabled` is false
-    return null;
-  }
-
-  if (replay.isPaused()) {
-    // Do not add to event buffer when recording is paused
-    return null;
-  }
-
-  const timestampInMs = timestampToMs(event.timestamp);
-
-  // Throw out events that happen more than 5 minutes ago. This can happen if
-  // page has been left open and idle for a long period of time and user
-  // comes back to trigger a new session. The performance entries rely on
-  // `performance.timeOrigin`, which is when the page first opened.
-  if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
-    return null;
-  }
-
-  try {
-    if (isCheckout) {
-      replay.eventBuffer.clear();
-    }
-
-    const replayOptions = replay.getOptions();
-
-    const eventAfterPossibleCallback =
-      typeof replayOptions.beforeAddRecordingEvent === 'function' && event.type === EventType.Custom
-        ? replayOptions.beforeAddRecordingEvent(event)
-        : event;
-
-    if (!eventAfterPossibleCallback) {
-      return;
-    }
-
-    return await replay.eventBuffer.addEvent(eventAfterPossibleCallback);
-  } catch (error) {
-    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && utils.logger.error(error);
-    await replay.stop('addEvent');
-
-    const client = core.getCurrentHub().getClient();
-
-    if (client) {
-      client.recordDroppedEvent('internal_sdk_error', 'replay');
-    }
-  }
-}
+})(exports.NodeType || (exports.NodeType = {}));
 
 /**
  * Add a breadcrumb event to replay.
@@ -3385,8 +3307,8 @@ function addBreadcrumbEvent(replay, breadcrumb) {
   }
 
   replay.addUpdate(() => {
-    void addEvent(replay, {
-      type: EventType$1.Custom,
+    void replay.throttledAddEvent({
+      type: exports.EventType.Custom,
       // TODO: We were converting from ms to seconds for breadcrumbs, spans,
       // but maybe we should just keep them as milliseconds
       timestamp: (breadcrumb.timestamp || 0) * 1000,
@@ -3508,15 +3430,16 @@ function handleSlowClick(
   addBreadcrumbEvent(replay, breadcrumb);
 }
 
-const SLOW_CLICK_IGNORE_TAGS = ['SELECT', 'OPTION'];
+const SLOW_CLICK_TAGS = ['A', 'BUTTON', 'INPUT'];
 
+/** exported for tests only */
 function ignoreElement(node, config) {
-  // If <input> tag, we only want to consider input[type='submit'] & input[type='button']
-  if (node.tagName === 'INPUT' && !['submit', 'button'].includes(node.getAttribute('type') || '')) {
+  if (!SLOW_CLICK_TAGS.includes(node.tagName)) {
     return true;
   }
 
-  if (SLOW_CLICK_IGNORE_TAGS.includes(node.tagName)) {
+  // If <input> tag, we only want to consider input[type='submit'] & input[type='button']
+  if (node.tagName === 'INPUT' && !['submit', 'button'].includes(node.getAttribute('type') || '')) {
     return true;
   }
 
@@ -3549,6 +3472,8 @@ const ATTRIBUTES_TO_RECORD = new Set([
   'title',
   'data-test-id',
   'data-testid',
+  'disabled',
+  'aria-disabled',
 ]);
 
 /**
@@ -3574,14 +3499,14 @@ function getAttributesToRecord(attributes) {
 const handleDomListener = (
   replay,
 ) => {
-  const slowClickExperiment = replay.getOptions()._experiments.slowClicks;
+  const { slowClickTimeout, slowClickIgnoreSelectors } = replay.getOptions();
 
-  const slowClickConfig = slowClickExperiment
+  const slowClickConfig = slowClickTimeout
     ? {
-        threshold: slowClickExperiment.threshold,
-        timeout: slowClickExperiment.timeout,
-        scrollTimeout: slowClickExperiment.scrollTimeout,
-        ignoreSelector: slowClickExperiment.ignoreSelectors ? slowClickExperiment.ignoreSelectors.join(',') : '',
+        threshold: Math.min(SLOW_CLICK_THRESHOLD, slowClickTimeout),
+        timeout: slowClickTimeout,
+        scrollTimeout: SLOW_CLICK_SCROLL_TIMEOUT,
+        ignoreSelector: slowClickIgnoreSelectors ? slowClickIgnoreSelectors.join(',') : '',
       }
     : undefined;
 
@@ -3615,7 +3540,7 @@ const handleDomListener = (
 /** Get the base DOM breadcrumb. */
 function getBaseDomBreadcrumb(target, message) {
   // `__sn` property is the serialized node created by rrweb
-  const serializedNode = target && isRrwebNode(target) && target.__sn.type === NodeType.Element ? target.__sn : null;
+  const serializedNode = target && isRrwebNode(target) && target.__sn.type === exports.NodeType.Element ? target.__sn : null;
 
   return {
     message,
@@ -3628,7 +3553,7 @@ function getBaseDomBreadcrumb(target, message) {
             textContent: target
               ? Array.from(target.childNodes)
                   .map(
-                    (node) => '__sn' in node && node.__sn.type === NodeType.Text && node.__sn.textContent,
+                    (node) => '__sn' in node && node.__sn.type === exports.NodeType.Text && node.__sn.textContent,
                   )
                   .filter(Boolean) // filter out empty values
                   .map(text => (text ).trim())
@@ -3710,7 +3635,10 @@ function handleKeyboardEvent(replay, event) {
     return;
   }
 
-  replay.triggerUserActivity();
+  // Update user activity, but do not restart recording as it can create
+  // noisy/low-value replays (e.g. user comes back from idle, hits alt-tab, new
+  // session with a single "keydown" breadcrumb is created)
+  replay.updateUserActivity();
 
   const breadcrumb = getKeyboardBreadcrumb(event);
 
@@ -3726,7 +3654,7 @@ function getKeyboardBreadcrumb(event) {
   const { metaKey, shiftKey, ctrlKey, altKey, key, target } = event;
 
   // never capture for input fields
-  if (!target || isInputElement(target )) {
+  if (!target || isInputElement(target ) || !key) {
     return null;
   }
 
@@ -3898,6 +3826,14 @@ function t(t){let e=t.length;for(;--e>=0;)t[e]=0}const e=new Uint8Array([0,0,0,0
 
 function e(){const e=new Blob([r]);return URL.createObjectURL(e)}
 
+/**
+ * Converts a timestamp to ms, if it was in s, or keeps it as ms.
+ */
+function timestampToMs(timestamp) {
+  const isMs = timestamp > 9999999999;
+  return isMs ? timestamp : timestamp * 1000;
+}
+
 /**
  * A basic event buffer that does not do any compression.
  * Used as fallback if the compression worker cannot be loaded or is disabled.
@@ -4453,11 +4389,13 @@ function getSession({
     // within "max session time").
     const isExpired = isSessionExpired(session, timeouts);
 
-    if (!isExpired) {
+    if (!isExpired || (allowBuffering && session.shouldRefresh)) {
       return { type: 'saved', session };
     } else if (!session.shouldRefresh) {
-      // In this case, stop
-      // This is the case if we have an error session that is completed (=triggered an error)
+      // This is the case if we have an error session that is completed
+      // (=triggered an error). Session will continue as session-based replay,
+      // and when this session is expired, it will not be renewed until user
+      // reloads.
       const discardedSession = makeSession({ sampled: false });
       return { type: 'new', session: discardedSession };
     } else {
@@ -4475,6 +4413,68 @@ function getSession({
   return { type: 'new', session: newSession };
 }
 
+function isCustomEvent(event) {
+  return event.type === exports.EventType.Custom;
+}
+
+/**
+ * Add an event to the event buffer.
+ * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`.
+ */
+async function addEvent(
+  replay,
+  event,
+  isCheckout,
+) {
+  if (!replay.eventBuffer) {
+    // This implies that `_isEnabled` is false
+    return null;
+  }
+
+  if (replay.isPaused()) {
+    // Do not add to event buffer when recording is paused
+    return null;
+  }
+
+  const timestampInMs = timestampToMs(event.timestamp);
+
+  // Throw out events that happen more than 5 minutes ago. This can happen if
+  // page has been left open and idle for a long period of time and user
+  // comes back to trigger a new session. The performance entries rely on
+  // `performance.timeOrigin`, which is when the page first opened.
+  if (timestampInMs + replay.timeouts.sessionIdlePause < Date.now()) {
+    return null;
+  }
+
+  try {
+    if (isCheckout) {
+      replay.eventBuffer.clear();
+    }
+
+    const replayOptions = replay.getOptions();
+
+    const eventAfterPossibleCallback =
+      typeof replayOptions.beforeAddRecordingEvent === 'function' && isCustomEvent(event)
+        ? replayOptions.beforeAddRecordingEvent(event)
+        : event;
+
+    if (!eventAfterPossibleCallback) {
+      return;
+    }
+
+    return await replay.eventBuffer.addEvent(eventAfterPossibleCallback);
+  } catch (error) {
+    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && utils.logger.error(error);
+    await replay.stop('addEvent');
+
+    const client = core.getCurrentHub().getClient();
+
+    if (client) {
+      client.recordDroppedEvent('internal_sdk_error', 'replay');
+    }
+  }
+}
+
 /** If the event is an error event */
 function isErrorEvent(event) {
   return !event.type;
@@ -4649,13 +4649,6 @@ function handleGlobalEventListener(
       event.tags = { ...event.tags, replayId: replay.getSessionId() };
     }
 
-    if ((typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && replay.getOptions()._experiments.traceInternals && isErrorEvent(event)) {
-      const exc = getEventExceptionValues(event);
-      addInternalBreadcrumb({
-        message: `Tagging event (${event.event_id}) - ${event.message} - ${exc.type}: ${exc.value}`,
-      });
-    }
-
     // In cases where a custom client is used that does not support the new hooks (yet),
     // we manually call this hook method here
     if (afterSendHandler) {
@@ -4667,35 +4660,16 @@ function handleGlobalEventListener(
   };
 }
 
-function addInternalBreadcrumb(arg) {
-  const { category, level, message, ...rest } = arg;
-
-  core.addBreadcrumb({
-    category: category || 'console',
-    level: level || 'debug',
-    message: `[debug]: ${message}`,
-    ...rest,
-  });
-}
-
-function getEventExceptionValues(event) {
-  return {
-    type: 'Unknown',
-    value: 'n/a',
-    ...(event.exception && event.exception.values && event.exception.values[0]),
-  };
-}
-
 /**
- * Create a "span" for each performance entry. The parent transaction is `this.replayEvent`.
+ * Create a "span" for each performance entry.
  */
 function createPerformanceSpans(
   replay,
   entries,
 ) {
-  return entries.map(({ type, start, end, name, data }) =>
-    addEvent(replay, {
-      type: EventType$1.Custom,
+  return entries.map(({ type, start, end, name, data }) => {
+    const response = replay.throttledAddEvent({
+      type: exports.EventType.Custom,
       timestamp: start,
       data: {
         tag: 'performanceSpan',
@@ -4707,8 +4681,11 @@ function createPerformanceSpans(
           data,
         },
       },
-    }),
-  );
+    });
+
+    // If response is a string, it means its either THROTTLED or SKIPPED
+    return typeof response === 'string' ? Promise.resolve(null) : response;
+  });
 }
 
 function handleHistory(handlerData) {
@@ -5926,6 +5903,10 @@ function _isFetchHint(hint) {
 
 let _LAST_BREADCRUMB = null;
 
+function isBreadcrumbWithCategory(breadcrumb) {
+  return !!breadcrumb.category;
+}
+
 const handleScopeListener =
   (replay) =>
   (scope) => {
@@ -5961,9 +5942,9 @@ function handleScope(scope) {
   _LAST_BREADCRUMB = newBreadcrumb;
 
   if (
-    newBreadcrumb.category &&
-    (['fetch', 'xhr', 'sentry.event', 'sentry.transaction'].includes(newBreadcrumb.category) ||
-      newBreadcrumb.category.startsWith('ui.'))
+    !isBreadcrumbWithCategory(newBreadcrumb) ||
+    ['fetch', 'xhr', 'sentry.event', 'sentry.transaction'].includes(newBreadcrumb.category) ||
+    newBreadcrumb.category.startsWith('ui.')
   ) {
     return null;
   }
@@ -5976,7 +5957,9 @@ function handleScope(scope) {
 }
 
 /** exported for tests only */
-function normalizeConsoleBreadcrumb(breadcrumb) {
+function normalizeConsoleBreadcrumb(
+  breadcrumb,
+) {
   const args = breadcrumb.data && breadcrumb.data.arguments;
 
   if (!Array.isArray(args) || args.length === 0) {
@@ -6057,6 +6040,16 @@ function addGlobalListeners(replay) {
         dsc.replay_id = replayId;
       }
     });
+
+    client.on('startTransaction', transaction => {
+      replay.lastTransaction = transaction;
+    });
+
+    // We may be missing the initial startTransaction due to timing issues,
+    // so we capture it on finish again.
+    client.on('finishTransaction', transaction => {
+      replay.lastTransaction = transaction;
+    });
   }
 }
 
@@ -6415,6 +6408,10 @@ function getHandleRecordingEmit(replay) {
         // a previous session ID. In this case, we want to buffer events
         // for a set amount of time before flushing. This can help avoid
         // capturing replays of users that immediately close the window.
+        // TODO: We should check `recordingMode` here and do nothing if it's
+        // buffer, instead of checking inside of timeout, this will make our
+        // tests a bit cleaner as we will need to wait on the delay in order to
+        // do nothing.
         setTimeout(() => replay.conditionalFlush(), options._experiments.delayFlushOnCheckout);
 
         // Cancel any previously debounced flushes to ensure there are no [near]
@@ -6450,7 +6447,7 @@ function getHandleRecordingEmit(replay) {
 function createOptionsEvent(replay) {
   const options = replay.getOptions();
   return {
-    type: EventType.Custom,
+    type: exports.EventType.Custom,
     timestamp: Date.now(),
     data: {
       tag: 'options',
@@ -6780,6 +6777,62 @@ async function sendReplay(
   }
 }
 
+const THROTTLED = '__THROTTLED';
+const SKIPPED = '__SKIPPED';
+
+/**
+ * Create a throttled function off a given function.
+ * When calling the throttled function, it will call the original function only
+ * if it hasn't been called more than `maxCount` times in the last `durationSeconds`.
+ *
+ * Returns `THROTTLED` if throttled for the first time, after that `SKIPPED`,
+ * or else the return value of the original function.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function throttle(
+  fn,
+  maxCount,
+  durationSeconds,
+) {
+  const counter = new Map();
+
+  const _cleanup = (now) => {
+    const threshold = now - durationSeconds;
+    counter.forEach((_value, key) => {
+      if (key < threshold) {
+        counter.delete(key);
+      }
+    });
+  };
+
+  const _getTotalCount = () => {
+    return [...counter.values()].reduce((a, b) => a + b, 0);
+  };
+
+  let isThrottled = false;
+
+  return (...rest) => {
+    // Date in second-precision, which we use as basis for the throttling
+    const now = Math.floor(Date.now() / 1000);
+
+    // First, make sure to delete any old entries
+    _cleanup(now);
+
+    // If already over limit, do nothing
+    if (_getTotalCount() >= maxCount) {
+      const wasThrottled = isThrottled;
+      isThrottled = true;
+      return wasThrottled ? SKIPPED : THROTTLED;
+    }
+
+    isThrottled = false;
+    const count = counter.get(now) || 0;
+    counter.set(now, count + 1);
+
+    return fn(...rest);
+  };
+}
+
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 
 /**
@@ -6802,6 +6855,11 @@ class ReplayContainer  {
    */
    __init3() {this.recordingMode = 'session';}
 
+  /**
+   * The current or last active transcation.
+   * This is only available when performance is enabled.
+   */
+
   /**
    * These are here so we can overwrite them in tests etc.
    * @hidden
@@ -6868,6 +6926,14 @@ class ReplayContainer  {
     this._debouncedFlush = debounce(() => this._flush(), this._options.flushMinDelay, {
       maxWait: this._options.flushMaxDelay,
     });
+
+    this._throttledAddEvent = throttle(
+      (event, isCheckout) => addEvent(this, event, isCheckout),
+      // Max 300 events...
+      300,
+      // ... per 5s
+      5,
+    );
   }
 
   /** Get the event context. */
@@ -7112,6 +7178,8 @@ class ReplayContainer  {
       return this.flushImmediate();
     }
 
+    const activityTime = Date.now();
+
     // Allow flush to complete before resuming as a session recording, otherwise
     // the checkout from `startRecording` may be included in the payload.
     // Prefer to keep the error replay as a separate (and smaller) segment
@@ -7133,6 +7201,18 @@ class ReplayContainer  {
     // Once this session ends, we do not want to refresh it
     if (this.session) {
       this.session.shouldRefresh = false;
+
+      // It's possible that the session lifespan is > max session lifespan
+      // because we have been buffering beyond max session lifespan (we ignore
+      // expiration given that `shouldRefresh` is true). Since we flip
+      // `shouldRefresh`, the session could be considered expired due to
+      // lifespan, which is not what we want. Update session start date to be
+      // the current timestamp, so that session is not considered to be
+      // expired. This means that max replay duration can be MAX_SESSION_LIFE +
+      // (length of buffer), which we are ok with.
+      this._updateUserActivity(activityTime);
+      this._updateSessionActivity(activityTime);
+      this.session.started = activityTime;
       this._maybeSaveSession();
     }
 
@@ -7196,6 +7276,18 @@ class ReplayContainer  {
     this._updateSessionActivity();
   }
 
+  /**
+   * Updates the user activity timestamp *without* resuming
+   * recording. Some user events (e.g. keydown) can be create
+   * low-value replays that only contain the keypress as a
+   * breadcrumb. Instead this would require other events to
+   * create a new replay after a session has expired.
+   */
+   updateUserActivity() {
+    this._updateUserActivity();
+    this._updateSessionActivity();
+  }
+
   /**
    * Only flush if `this.recordingMode === 'session'`
    */
@@ -7297,6 +7389,52 @@ class ReplayContainer  {
     this._context.urls.push(url);
   }
 
+  /**
+   * Add a breadcrumb event, that may be throttled.
+   * If it was throttled, we add a custom breadcrumb to indicate that.
+   */
+   throttledAddEvent(
+    event,
+    isCheckout,
+  ) {
+    const res = this._throttledAddEvent(event, isCheckout);
+
+    // If this is THROTTLED, it means we have throttled the event for the first time
+    // In this case, we want to add a breadcrumb indicating that something was skipped
+    if (res === THROTTLED) {
+      const breadcrumb = createBreadcrumb({
+        category: 'replay.throttled',
+      });
+
+      this.addUpdate(() => {
+        void addEvent(this, {
+          type: exports.EventType.Custom,
+          timestamp: breadcrumb.timestamp || 0,
+          data: {
+            tag: 'breadcrumb',
+            payload: breadcrumb,
+            metric: true,
+          },
+        });
+      });
+    }
+
+    return res;
+  }
+
+  /**
+   * This will get the parametrized route name of the current page.
+   * This is only available if performance is enabled, and if an instrumented router is used.
+   */
+   getCurrentRoute() {
+    const lastTransaction = this.lastTransaction || core.getCurrentHub().getScope().getTransaction();
+    if (!lastTransaction || !['route', 'custom'].includes(lastTransaction.metadata.source)) {
+      return undefined;
+    }
+
+    return lastTransaction.name;
+  }
+
   /**
    * Initialize and start all listeners to varying events (DOM,
    * Performance Observer, Recording, Sentry SDK, etc)
@@ -7340,7 +7478,7 @@ class ReplayContainer  {
       stickySession: Boolean(this._options.stickySession),
       currentSession: this.session,
       sessionSampleRate: this._options.sessionSampleRate,
-      allowBuffering: this._options.errorSampleRate > 0,
+      allowBuffering: this._options.errorSampleRate > 0 || this.recordingMode === 'buffer',
     });
 
     // If session was newly created (i.e. was not loaded from storage), then
@@ -7535,8 +7673,8 @@ class ReplayContainer  {
    */
    _createCustomBreadcrumb(breadcrumb) {
     this.addUpdate(() => {
-      void addEvent(this, {
-        type: EventType$1.Custom,
+      void this.throttledAddEvent({
+        type: exports.EventType.Custom,
         timestamp: breadcrumb.timestamp || 0,
         data: {
           tag: 'breadcrumb',
@@ -7734,8 +7872,8 @@ class ReplayContainer  {
    __init18() {this._onMutationHandler = (mutations) => {
     const count = mutations.length;
 
-    const mutationLimit = this._options._experiments.mutationLimit || 0;
-    const mutationBreadcrumbLimit = this._options._experiments.mutationBreadcrumbLimit || 1000;
+    const mutationLimit = this._options.mutationLimit;
+    const mutationBreadcrumbLimit = this._options.mutationBreadcrumbLimit;
     const overMutationLimit = mutationLimit && count > mutationLimit;
 
     // Create a breadcrumb if a lot of mutations happen at the same time
@@ -7745,15 +7883,15 @@ class ReplayContainer  {
         category: 'replay.mutations',
         data: {
           count,
+          limit: overMutationLimit,
         },
       });
       this._createCustomBreadcrumb(breadcrumb);
     }
 
+    // Stop replay if over the mutation limit
     if (overMutationLimit) {
-      // We want to skip doing an incremental snapshot if there are too many mutations
-      // Instead, we do a full snapshot
-      this._triggerFullSnapshot(false);
+      void this.stop('mutationLimit');
       return false;
     }
 
@@ -7907,6 +8045,12 @@ class Replay  {
     maskAllInputs = true,
     blockAllMedia = true,
 
+    mutationBreadcrumbLimit = 750,
+    mutationLimit = 10000,
+
+    slowClickTimeout = 7000,
+    slowClickIgnoreSelectors = [],
+
     networkDetailAllowUrls = [],
     networkCaptureBodies = true,
     networkRequestHeaders = [],
@@ -7974,6 +8118,10 @@ class Replay  {
       blockAllMedia,
       maskAllInputs,
       maskAllText,
+      mutationBreadcrumbLimit,
+      mutationLimit,
+      slowClickTimeout,
+      slowClickIgnoreSelectors,
       networkDetailAllowUrls,
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),