@myinterview/widget-react 1.1.22-development-2bfa0c3 → 1.1.22-development-1379a04

package/dist/esm/index.js

@@ -2071,7 +2071,10 @@ function visit(
   const [memoize, unmemoize] = memo;
 
   // Get the simple cases out of the way first
-  if (value === null || (['number', 'boolean', 'string'].includes(typeof value) && !isNaN$1(value))) {
+  if (
+    value == null || // this matches null and undefined -> eqeq not eqeqeq
+    (['number', 'boolean', 'string'].includes(typeof value) && !isNaN$1(value))
+  ) {
     return value ;
   }
 
@@ -2209,11 +2212,6 @@ function stringifyValue(
       return '[NaN]';
     }
 
-    // this catches `undefined` (but not `null`, which is a primitive and can be serialized on its own)
-    if (value === void 0) {
-      return '[undefined]';
-    }
-
     if (typeof value === 'function') {
       return `[Function: ${getFunctionName(value)}]`;
     }
@@ -5796,7 +5794,7 @@ function getEventForEnvelopeItem(item, type) {
   return Array.isArray(item) ? (item )[1] : undefined;
 }
 
-const SDK_VERSION = '7.50.0';
+const SDK_VERSION = '7.52.1';
 
 let originalFunctionToString;
 
@@ -5977,8 +5975,9 @@ function _getPossibleEventMessages(event) {
     return [event.message];
   }
   if (event.exception) {
+    const { values } = event.exception;
     try {
-      const { type = '', value = '' } = (event.exception.values && event.exception.values[0]) || {};
+      const { type = '', value = '' } = (values && values[values.length - 1]) || {};
       return [`${value}`, `${type}: ${value}`];
     } catch (oO) {
       (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(`Cannot extract message for event ${getEventDescription(event)}`);
@@ -8335,7 +8334,7 @@ function maskInputValue({ input, maskInputSelector, unmaskInputSelector, maskInp
     if (unmaskInputSelector && input.matches(unmaskInputSelector)) {
         return text;
     }
-    if (input.hasAttribute('rr_is_password')) {
+    if (input.hasAttribute('data-rr-is-password')) {
         type = 'password';
     }
     if (isInputTypeMasked({ maskInputOptions, tagName, type }) ||
@@ -8368,6 +8367,21 @@ function is2DCanvasBlank(canvas) {
     }
     return true;
 }
+function getInputType(element) {
+    const type = element.type;
+    return element.hasAttribute('data-rr-is-password')
+        ? 'password'
+        : type
+            ? type.toLowerCase()
+            : null;
+}
+function getInputValue(el, tagName, type) {
+    typeof type === 'string' ? type.toLowerCase() : '';
+    if (tagName === 'INPUT' && (type === 'radio' || type === 'checkbox')) {
+        return el.getAttribute('value') || '';
+    }
+    return el.value;
+}
 
 let _id = 1;
 const tagNameRegex = new RegExp('[^a-z0-9-_:]');
@@ -8406,6 +8420,13 @@ function getCssRuleString(rule) {
         catch (_a) {
         }
     }
+    return validateStringifiedCssRule(cssStringified);
+}
+function validateStringifiedCssRule(cssStringified) {
+    if (cssStringified.indexOf(':') > -1) {
+        const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm;
+        return cssStringified.replace(regex, '$1\\$2');
+    }
     return cssStringified;
 }
 function isCSSImportRule(rule) {
@@ -8414,7 +8435,7 @@ function isCSSImportRule(rule) {
 function stringifyStyleSheet(sheet) {
     return sheet.cssRules
         ? Array.from(sheet.cssRules)
-            .map((rule) => rule.cssText || '')
+            .map((rule) => rule.cssText ? validateStringifiedCssRule(rule.cssText) : '')
             .join('')
         : '';
 }
@@ -8749,14 +8770,15 @@ function serializeNode(n, options) {
                 tagName === 'select' ||
                 tagName === 'option') {
                 const el = n;
-                const value = getInputValue(tagName, el, attributes);
+                const type = getInputType(el);
+                const value = getInputValue(el, tagName.toUpperCase(), type);
                 const checked = n.checked;
-                if (attributes.type !== 'submit' &&
-                    attributes.type !== 'button' &&
+                if (type !== 'submit' &&
+                    type !== 'button' &&
                     value) {
                     attributes.value = maskInputValue({
                         input: el,
-                        type: attributes.type,
+                        type,
                         tagName,
                         value,
                         maskInputSelector,
@@ -9229,15 +9251,8 @@ function snapshot(n, options) {
 function skipAttribute(tagName, attributeName, value) {
     return ((tagName === 'video' || tagName === 'audio') && attributeName === 'autoplay');
 }
-function getInputValue(tagName, el, attributes) {
-    if (tagName === 'input' &&
-        (attributes.type === 'radio' || attributes.type === 'checkbox')) {
-        return el.getAttribute('value') || '';
-    }
-    return el.value;
-}
 
-var EventType;
+var EventType$1;
 (function (EventType) {
     EventType[EventType["DomContentLoaded"] = 0] = "DomContentLoaded";
     EventType[EventType["Load"] = 1] = "Load";
@@ -9246,7 +9261,7 @@ var EventType;
     EventType[EventType["Meta"] = 4] = "Meta";
     EventType[EventType["Custom"] = 5] = "Custom";
     EventType[EventType["Plugin"] = 6] = "Plugin";
-})(EventType || (EventType = {}));
+})(EventType$1 || (EventType$1 = {}));
 var IncrementalSource;
 (function (IncrementalSource) {
     IncrementalSource[IncrementalSource["Mutation"] = 0] = "Mutation";
@@ -9861,9 +9876,9 @@ class MutationBuffer {
                         this.attributes.push(item);
                     }
                     if (m.attributeName === 'type' &&
-                        m.target.tagName === 'INPUT' &&
+                        target.tagName === 'INPUT' &&
                         (m.oldValue || '').toLowerCase() === 'password') {
-                        m.target.setAttribute('rr_is_password', 'true');
+                        target.setAttribute('data-rr-is-password', 'true');
                     }
                     if (m.attributeName === 'style') {
                         const old = this.doc.createElement('span');
@@ -10260,27 +10275,25 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, un
             isBlocked(target, blockClass, blockSelector, unblockSelector)) {
             return;
         }
-        let type = target.type;
-        if (target.classList.contains(ignoreClass) ||
-            (ignoreSelector && target.matches(ignoreSelector))) {
+        const el = target;
+        const type = getInputType(el);
+        if (el.classList.contains(ignoreClass) ||
+            (ignoreSelector && el.matches(ignoreSelector))) {
             return;
         }
-        let text = target.value;
+        let text = getInputValue(el, tagName, type);
         let isChecked = false;
-        if (target.hasAttribute('rr_is_password')) {
-            type = 'password';
-        }
         if (type === 'radio' || type === 'checkbox') {
             isChecked = target.checked;
         }
-        else if (hasInputMaskOptions({
+        if (hasInputMaskOptions({
             maskInputOptions,
             maskInputSelector,
             tagName,
             type,
         })) {
             text = maskInputValue({
-                input: target,
+                input: el,
                 maskInputOptions,
                 maskInputSelector,
                 unmaskInputSelector,
@@ -10297,8 +10310,18 @@ function initInputObserver({ inputCb, doc, mirror, blockClass, blockSelector, un
                 .querySelectorAll(`input[type="radio"][name="${name}"]`)
                 .forEach((el) => {
                 if (el !== target) {
+                    const text = maskInputValue({
+                        input: el,
+                        maskInputOptions,
+                        maskInputSelector,
+                        unmaskInputSelector,
+                        tagName,
+                        type,
+                        value: getInputValue(el, tagName, type),
+                        maskInputFn,
+                    });
                     cbWithDedup(el, callbackWrapper(wrapEventWithUserTriggeredFlag)({
-                        text: el.value,
+                        text,
                         isChecked: !isChecked,
                         userTriggered: false,
                     }, userTriggeredOnInput));
@@ -11211,17 +11234,17 @@ function record(options = {}) {
     wrappedEmit = (e, isCheckout) => {
         var _a;
         if (((_a = mutationBuffers[0]) === null || _a === void 0 ? void 0 : _a.isFrozen()) &&
-            e.type !== EventType.FullSnapshot &&
-            !(e.type === EventType.IncrementalSnapshot &&
+            e.type !== EventType$1.FullSnapshot &&
+            !(e.type === EventType$1.IncrementalSnapshot &&
                 e.data.source === IncrementalSource.Mutation)) {
             mutationBuffers.forEach((buf) => buf.unfreeze());
         }
         emit(eventProcessor(e), isCheckout);
-        if (e.type === EventType.FullSnapshot) {
+        if (e.type === EventType$1.FullSnapshot) {
             lastFullSnapshotEvent = e;
             incrementalSnapshotCount = 0;
         }
-        else if (e.type === EventType.IncrementalSnapshot) {
+        else if (e.type === EventType$1.IncrementalSnapshot) {
             if (e.data.source === IncrementalSource.Mutation &&
                 e.data.isAttachIframe) {
                 return;
@@ -11237,16 +11260,16 @@ function record(options = {}) {
     };
     const wrappedMutationEmit = (m) => {
         wrappedEmit(wrapEvent({
-            type: EventType.IncrementalSnapshot,
+            type: EventType$1.IncrementalSnapshot,
             data: Object.assign({ source: IncrementalSource.Mutation }, m),
         }));
     };
     const wrappedScrollEmit = (p) => wrappedEmit(wrapEvent({
-        type: EventType.IncrementalSnapshot,
+        type: EventType$1.IncrementalSnapshot,
         data: Object.assign({ source: IncrementalSource.Scroll }, p),
     }));
     const wrappedCanvasMutationEmit = (p) => wrappedEmit(wrapEvent({
-        type: EventType.IncrementalSnapshot,
+        type: EventType$1.IncrementalSnapshot,
         data: Object.assign({ source: IncrementalSource.CanvasMutation }, p),
     }));
     const iframeManager = new IframeManager({
@@ -11291,7 +11314,7 @@ function record(options = {}) {
     takeFullSnapshot = (isCheckout = false) => {
         var _a, _b, _c, _d;
         wrappedEmit(wrapEvent({
-            type: EventType.Meta,
+            type: EventType$1.Meta,
             data: {
                 href: window.location.href,
                 width: getWindowWidth(),
@@ -11334,7 +11357,7 @@ function record(options = {}) {
         }
         mirror.map = idNodeMap;
         wrappedEmit(wrapEvent({
-            type: EventType.FullSnapshot,
+            type: EventType$1.FullSnapshot,
             data: {
                 node,
                 initialOffset: {
@@ -11359,7 +11382,7 @@ function record(options = {}) {
         const handlers = [];
         handlers.push(on$1('DOMContentLoaded', () => {
             wrappedEmit(wrapEvent({
-                type: EventType.DomContentLoaded,
+                type: EventType$1.DomContentLoaded,
                 data: {},
             }));
         }));
@@ -11369,40 +11392,40 @@ function record(options = {}) {
                 onMutation,
                 mutationCb: wrappedMutationEmit,
                 mousemoveCb: (positions, source) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: {
                         source,
                         positions,
                     },
                 })),
                 mouseInteractionCb: (d) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.MouseInteraction }, d),
                 })),
                 scrollCb: wrappedScrollEmit,
                 viewportResizeCb: (d) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.ViewportResize }, d),
                 })),
                 inputCb: (v) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.Input }, v),
                 })),
                 mediaInteractionCb: (p) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.MediaInteraction }, p),
                 })),
                 styleSheetRuleCb: (r) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.StyleSheetRule }, r),
                 })),
                 styleDeclarationCb: (r) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.StyleDeclaration }, r),
                 })),
                 canvasMutationCb: wrappedCanvasMutationEmit,
                 fontCb: (p) => wrappedEmit(wrapEvent({
-                    type: EventType.IncrementalSnapshot,
+                    type: EventType$1.IncrementalSnapshot,
                     data: Object.assign({ source: IncrementalSource.Font }, p),
                 })),
                 blockClass,
@@ -11435,7 +11458,7 @@ function record(options = {}) {
                     observer: p.observer,
                     options: p.options,
                     callback: (payload) => wrappedEmit(wrapEvent({
-                        type: EventType.Plugin,
+                        type: EventType$1.Plugin,
                         data: {
                             plugin: p.name,
                             payload,
@@ -11463,7 +11486,7 @@ function record(options = {}) {
         else {
             handlers.push(on$1('load', () => {
                 wrappedEmit(wrapEvent({
-                    type: EventType.Load,
+                    type: EventType$1.Load,
                     data: {},
                 }));
                 init();
@@ -11482,7 +11505,7 @@ record.addCustomEvent = (tag, payload) => {
         throw new Error('please add custom event after start recording');
     }
     wrappedEmit(wrapEvent({
-        type: EventType.Custom,
+        type: EventType$1.Custom,
         data: {
             tag,
             payload,
@@ -11500,6 +11523,475 @@ record.takeFullSnapshot = (isCheckout) => {
 };
 record.mirror = mirror;
 
+/**
+ * Create a breadcrumb for a replay.
+ */
+function createBreadcrumb(
+  breadcrumb,
+) {
+  return {
+    timestamp: Date.now() / 1000,
+    type: 'default',
+    ...breadcrumb,
+  };
+}
+
+var NodeType;
+(function (NodeType) {
+    NodeType[NodeType["Document"] = 0] = "Document";
+    NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
+    NodeType[NodeType["Element"] = 2] = "Element";
+    NodeType[NodeType["Text"] = 3] = "Text";
+    NodeType[NodeType["CDATA"] = 4] = "CDATA";
+    NodeType[NodeType["Comment"] = 5] = "Comment";
+})(NodeType || (NodeType = {}));
+
+/**
+ * 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();
+    }
+
+    return await replay.eventBuffer.addEvent(event);
+  } catch (error) {
+    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
+    await replay.stop('addEvent');
+
+    const client = getCurrentHub().getClient();
+
+    if (client) {
+      client.recordDroppedEvent('internal_sdk_error', 'replay');
+    }
+  }
+}
+
+/**
+ * Add a breadcrumb event to replay.
+ */
+function addBreadcrumbEvent(replay, breadcrumb) {
+  if (breadcrumb.category === 'sentry.transaction') {
+    return;
+  }
+
+  if (['ui.click', 'ui.input'].includes(breadcrumb.category )) {
+    replay.triggerUserActivity();
+  } else {
+    replay.checkAndHandleExpiredSession();
+  }
+
+  replay.addUpdate(() => {
+    void addEvent(replay, {
+      type: EventType$1.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,
+      data: {
+        tag: 'breadcrumb',
+        // normalize to max. 10 depth and 1_000 properties per object
+        payload: normalize(breadcrumb, 10, 1000),
+      },
+    });
+
+    // Do not flush after console log messages
+    return breadcrumb.category === 'console';
+  });
+}
+
+/**
+ * Detect a slow click on a button/a tag,
+ * and potentially create a corresponding breadcrumb.
+ */
+function detectSlowClick(
+  replay,
+  config,
+  clickBreadcrumb,
+  node,
+) {
+  if (ignoreElement(node, config)) {
+    return;
+  }
+
+  /*
+    We consider a slow click a click on a button/a, which does not trigger one of:
+     - DOM mutation
+     - Scroll (within 100ms)
+     Within the given threshold time.
+     After time timeout time, we stop listening and mark it as a slow click anyhow.
+  */
+
+  let cleanup = () => {
+    // replaced further down
+  };
+
+  // After timeout time, def. consider this a slow click, and stop watching for mutations
+  const timeout = setTimeout(() => {
+    handleSlowClick(replay, clickBreadcrumb, config.timeout, 'timeout');
+    cleanup();
+  }, config.timeout);
+
+  const mutationHandler = () => {
+    maybeHandleSlowClick(replay, clickBreadcrumb, config.threshold, config.timeout, 'mutation');
+    cleanup();
+  };
+
+  const scrollHandler = () => {
+    maybeHandleSlowClick(replay, clickBreadcrumb, config.scrollTimeout, config.timeout, 'scroll');
+    cleanup();
+  };
+
+  const obs = new MutationObserver(mutationHandler);
+
+  obs.observe(WINDOW.document.documentElement, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true,
+  });
+
+  WINDOW.addEventListener('scroll', scrollHandler);
+
+  // Stop listening to scroll timeouts early
+  const scrollTimeout = setTimeout(() => {
+    WINDOW.removeEventListener('scroll', scrollHandler);
+  }, config.scrollTimeout);
+
+  cleanup = () => {
+    clearTimeout(timeout);
+    clearTimeout(scrollTimeout);
+    obs.disconnect();
+    WINDOW.removeEventListener('scroll', scrollHandler);
+  };
+}
+
+function maybeHandleSlowClick(
+  replay,
+  clickBreadcrumb,
+  threshold,
+  timeout,
+  endReason,
+) {
+  const now = Date.now();
+  const timeAfterClickMs = now - clickBreadcrumb.timestamp * 1000;
+
+  if (timeAfterClickMs > threshold) {
+    handleSlowClick(replay, clickBreadcrumb, Math.min(timeAfterClickMs, timeout), endReason);
+    return true;
+  }
+
+  return false;
+}
+
+function handleSlowClick(
+  replay,
+  clickBreadcrumb,
+  timeAfterClickMs,
+  endReason,
+) {
+  const breadcrumb = {
+    message: clickBreadcrumb.message,
+    timestamp: clickBreadcrumb.timestamp,
+    category: 'ui.slowClickDetected',
+    data: {
+      ...clickBreadcrumb.data,
+      url: WINDOW.location.href,
+      // TODO FN: add parametrized route, when possible
+      timeAfterClickMs,
+      endReason,
+    },
+  };
+
+  addBreadcrumbEvent(replay, breadcrumb);
+}
+
+const SLOW_CLICK_IGNORE_TAGS = ['SELECT', 'OPTION'];
+
+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') || '')) {
+    return true;
+  }
+
+  if (SLOW_CLICK_IGNORE_TAGS.includes(node.tagName)) {
+    return true;
+  }
+
+  // If <a> tag, detect special variants that may not lead to an action
+  // If target !== _self, we may open the link somewhere else, which would lead to no action
+  // Also, when downloading a file, we may not leave the page, but still not trigger an action
+  if (
+    node.tagName === 'A' &&
+    (node.hasAttribute('download') || (node.hasAttribute('target') && node.getAttribute('target') !== '_self'))
+  ) {
+    return true;
+  }
+
+  if (config.ignoreSelector && node.matches(config.ignoreSelector)) {
+    return true;
+  }
+
+  return false;
+}
+
+// Note that these are the serialized attributes and not attributes directly on
+// the DOM Node. Attributes we are interested in:
+const ATTRIBUTES_TO_RECORD = new Set([
+  'id',
+  'class',
+  'aria-label',
+  'role',
+  'name',
+  'alt',
+  'title',
+  'data-test-id',
+  'data-testid',
+]);
+
+/**
+ * Inclusion list of attributes that we want to record from the DOM element
+ */
+function getAttributesToRecord(attributes) {
+  const obj = {};
+  for (const key in attributes) {
+    if (ATTRIBUTES_TO_RECORD.has(key)) {
+      let normalizedKey = key;
+
+      if (key === 'data-testid' || key === 'data-test-id') {
+        normalizedKey = 'testId';
+      }
+
+      obj[normalizedKey] = attributes[key];
+    }
+  }
+
+  return obj;
+}
+
+const handleDomListener = (
+  replay,
+) => {
+  const slowClickExperiment = replay.getOptions()._experiments.slowClicks;
+
+  const slowClickConfig = slowClickExperiment
+    ? {
+        threshold: slowClickExperiment.threshold,
+        timeout: slowClickExperiment.timeout,
+        scrollTimeout: slowClickExperiment.scrollTimeout,
+        ignoreSelector: slowClickExperiment.ignoreSelectors ? slowClickExperiment.ignoreSelectors.join(',') : '',
+      }
+    : undefined;
+
+  return (handlerData) => {
+    if (!replay.isEnabled()) {
+      return;
+    }
+
+    const result = handleDom(handlerData);
+
+    if (!result) {
+      return;
+    }
+
+    const isClick = handlerData.name === 'click';
+    const event = isClick && (handlerData.event );
+    // Ignore clicks if ctrl/alt/meta keys are held down as they alter behavior of clicks (e.g. open in new tab)
+    if (isClick && slowClickConfig && event && !event.altKey && !event.metaKey && !event.ctrlKey) {
+      detectSlowClick(
+        replay,
+        slowClickConfig,
+        result ,
+        getClickTargetNode(handlerData.event) ,
+      );
+    }
+
+    addBreadcrumbEvent(replay, result);
+  };
+};
+
+/** 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;
+
+  return {
+    message,
+    data: serializedNode
+      ? {
+          nodeId: serializedNode.id,
+          node: {
+            id: serializedNode.id,
+            tagName: serializedNode.tagName,
+            textContent: target
+              ? Array.from(target.childNodes)
+                  .map(
+                    (node) => '__sn' in node && node.__sn.type === NodeType.Text && node.__sn.textContent,
+                  )
+                  .filter(Boolean) // filter out empty values
+                  .map(text => (text ).trim())
+                  .join('')
+              : '',
+            attributes: getAttributesToRecord(serializedNode.attributes),
+          },
+        }
+      : {},
+  };
+}
+
+/**
+ * An event handler to react to DOM events.
+ * Exported for tests.
+ */
+function handleDom(handlerData) {
+  const { target, message } = getDomTarget(handlerData);
+
+  return createBreadcrumb({
+    category: `ui.${handlerData.name}`,
+    ...getBaseDomBreadcrumb(target, message),
+  });
+}
+
+function getDomTarget(handlerData) {
+  const isClick = handlerData.name === 'click';
+
+  let message;
+  let target = null;
+
+  // Accessing event.target can throw (see getsentry/raven-js#838, #768)
+  try {
+    target = isClick ? getClickTargetNode(handlerData.event) : getTargetNode(handlerData.event);
+    message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
+  } catch (e) {
+    message = '<unknown>';
+  }
+
+  return { target, message };
+}
+
+function isRrwebNode(node) {
+  return '__sn' in node;
+}
+
+function getTargetNode(event) {
+  if (isEventWithTarget(event)) {
+    return event.target ;
+  }
+
+  return event;
+}
+
+const INTERACTIVE_SELECTOR = 'button,a';
+
+// For clicks, we check if the target is inside of a button or link
+// If so, we use this as the target instead
+// This is useful because if you click on the image in <button><img></button>,
+// The target will be the image, not the button, which we don't want here
+function getClickTargetNode(event) {
+  const target = getTargetNode(event);
+
+  if (!target || !(target instanceof Element)) {
+    return target;
+  }
+
+  const closestInteractive = target.closest(INTERACTIVE_SELECTOR);
+  return closestInteractive || target;
+}
+
+function isEventWithTarget(event) {
+  return typeof event === 'object' && !!event && 'target' in event;
+}
+
+/** Handle keyboard events & create breadcrumbs. */
+function handleKeyboardEvent(replay, event) {
+  if (!replay.isEnabled()) {
+    return;
+  }
+
+  replay.triggerUserActivity();
+
+  const breadcrumb = getKeyboardBreadcrumb(event);
+
+  if (!breadcrumb) {
+    return;
+  }
+
+  addBreadcrumbEvent(replay, breadcrumb);
+}
+
+/** exported only for tests */
+function getKeyboardBreadcrumb(event) {
+  const { metaKey, shiftKey, ctrlKey, altKey, key, target } = event;
+
+  // never capture for input fields
+  if (!target || isInputElement(target )) {
+    return null;
+  }
+
+  // Note: We do not consider shift here, as that means "uppercase"
+  const hasModifierKey = metaKey || ctrlKey || altKey;
+  const isCharacterKey = key.length === 1; // other keys like Escape, Tab, etc have a longer length
+
+  // Do not capture breadcrumb if only a word key is pressed
+  // This could leak e.g. user input
+  if (!hasModifierKey && isCharacterKey) {
+    return null;
+  }
+
+  const message = htmlTreeAsString(target, { maxStringLength: 200 }) || '<unknown>';
+  const baseBreadcrumb = getBaseDomBreadcrumb(target , message);
+
+  return createBreadcrumb({
+    category: 'ui.keyDown',
+    message,
+    data: {
+      ...baseBreadcrumb.data,
+      metaKey,
+      shiftKey,
+      ctrlKey,
+      altKey,
+      key,
+    },
+  });
+}
+
+function isInputElement(target) {
+  return target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable;
+}
+
 const NAVIGATION_ENTRY_KEYS = [
   'name',
   'type',
@@ -11653,20 +12145,19 @@ class EventBufferArray  {
     return this.events.length > 0;
   }
 
+  /** @inheritdoc */
+   get type() {
+    return 'sync';
+  }
+
   /** @inheritdoc */
    destroy() {
     this.events = [];
   }
 
   /** @inheritdoc */
-   async addEvent(event, isCheckout) {
-    if (isCheckout) {
-      this.events = [event];
-      return;
-    }
-
+   async addEvent(event) {
     this.events.push(event);
-    return;
   }
 
   /** @inheritdoc */
@@ -11680,6 +12171,22 @@ class EventBufferArray  {
       resolve(JSON.stringify(eventsRet));
     });
   }
+
+  /** @inheritdoc */
+   clear() {
+    this.events = [];
+  }
+
+  /** @inheritdoc */
+   getEarliestTimestamp() {
+    const timestamp = this.events.map(event => event.timestamp).sort()[0];
+
+    if (!timestamp) {
+      return null;
+    }
+
+    return timestampToMs(timestamp);
+  }
 }
 
 /**
@@ -11787,11 +12294,20 @@ class WorkerHandler {
  * Exported only for testing.
  */
 class EventBufferCompressionWorker  {
-  /** @inheritdoc */
 
    constructor(worker) {
     this._worker = new WorkerHandler(worker);
-    this.hasEvents = false;
+    this._earliestTimestamp = null;
+  }
+
+  /** @inheritdoc */
+   get hasEvents() {
+    return !!this._earliestTimestamp;
+  }
+
+  /** @inheritdoc */
+   get type() {
+    return 'worker';
   }
 
   /**
@@ -11814,13 +12330,10 @@ class EventBufferCompressionWorker  {
    *
    * Returns true if event was successfuly received and processed by worker.
    */
-   async addEvent(event, isCheckout) {
-    this.hasEvents = true;
-
-    if (isCheckout) {
-      // This event is a checkout, make sure worker buffer is cleared before
-      // proceeding.
-      await this._clear();
+   addEvent(event) {
+    const timestamp = timestampToMs(event.timestamp);
+    if (!this._earliestTimestamp || timestamp < this._earliestTimestamp) {
+      this._earliestTimestamp = timestamp;
     }
 
     return this._sendEventToWorker(event);
@@ -11833,6 +12346,18 @@ class EventBufferCompressionWorker  {
     return this._finishRequest();
   }
 
+  /** @inheritdoc */
+   clear() {
+    this._earliestTimestamp = null;
+    // We do not wait on this, as we assume the order of messages is consistent for the worker
+    void this._worker.postMessage('clear');
+  }
+
+  /** @inheritdoc */
+   getEarliestTimestamp() {
+    return this._earliestTimestamp;
+  }
+
   /**
    * Send the event to the worker.
    */
@@ -11846,15 +12371,10 @@ class EventBufferCompressionWorker  {
    async _finishRequest() {
     const response = await this._worker.postMessage('finish');
 
-    this.hasEvents = false;
+    this._earliestTimestamp = null;
 
     return response;
   }
-
-  /** Clear any pending events from the worker. */
-   _clear() {
-    return this._worker.postMessage('clear');
-  }
 }
 
 /**
@@ -11872,6 +12392,11 @@ class EventBufferProxy  {
     this._ensureWorkerIsLoadedPromise = this._ensureWorkerIsLoaded();
   }
 
+  /** @inheritdoc */
+   get type() {
+    return this._used.type;
+  }
+
   /** @inheritDoc */
    get hasEvents() {
     return this._used.hasEvents;
@@ -11883,13 +12408,23 @@ class EventBufferProxy  {
     this._compression.destroy();
   }
 
+  /** @inheritdoc */
+   clear() {
+    return this._used.clear();
+  }
+
+  /** @inheritdoc */
+   getEarliestTimestamp() {
+    return this._used.getEarliestTimestamp();
+  }
+
   /**
    * Add an event to the event buffer.
    *
    * Returns true if event was successfully added.
    */
-   addEvent(event, isCheckout) {
-    return this._used.addEvent(event, isCheckout);
+   addEvent(event) {
+    return this._used.addEvent(event);
   }
 
   /** @inheritDoc */
@@ -12171,59 +12706,6 @@ function getSession({
   return { type: 'new', session: newSession };
 }
 
-/**
- * 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;
-  }
-
-  // TODO: sadness -- we will want to normalize timestamps to be in ms -
-  // requires coordination with frontend
-  const isMs = event.timestamp > 9999999999;
-  const timestampInMs = isMs ? event.timestamp : event.timestamp * 1000;
-
-  // 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;
-  }
-
-  // Only record earliest event if a new session was created, otherwise it
-  // shouldn't be relevant
-  const earliestEvent = replay.getContext().earliestEvent;
-  if (replay.session && replay.session.segmentId === 0 && (!earliestEvent || timestampInMs < earliestEvent)) {
-    replay.getContext().earliestEvent = timestampInMs;
-  }
-
-  try {
-    return await replay.eventBuffer.addEvent(event, isCheckout);
-  } catch (error) {
-    (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error(error);
-    await replay.stop('addEvent');
-
-    const client = getCurrentHub().getClient();
-
-    if (client) {
-      client.recordDroppedEvent('internal_sdk_error', 'replay');
-    }
-  }
-}
-
 /** If the event is an error event */
 function isErrorEvent(event) {
   return !event.type;
@@ -12273,22 +12755,18 @@ function handleAfterSendEvent(replay) {
       return;
     }
 
-    // Add error to list of errorIds of replay
+    // Add error to list of errorIds of replay. This is ok to do even if not
+    // sampled because context will get reset at next checkout.
+    // XXX: There is also a race condition where it's possible to capture an
+    // error to Sentry before Replay SDK has loaded, but response returns after
+    // it was loaded, and this gets called.
     if (event.event_id) {
       replay.getContext().errorIds.add(event.event_id);
     }
 
-    // Trigger error recording
+    // If error event is tagged with replay id it means it was sampled (when in buffer mode)
     // Need to be very careful that this does not cause an infinite loop
-    if (
-      replay.recordingMode === 'buffer' &&
-      event.exception &&
-      event.message !== UNABLE_TO_SEND_REPLAY // ignore this error because otherwise we could loop indefinitely with trying to capture replay and failing
-    ) {
-      if (!isSampled(replay.getOptions().errorSampleRate)) {
-        return;
-      }
-
+    if (replay.recordingMode === 'buffer' && event.tags && event.tags.replayId) {
       setTimeout(() => {
         // Capture current event buffer as new replay
         void replay.sendBufferedReplayOrFlush();
@@ -12313,167 +12791,6 @@ function isBaseTransportSend() {
   );
 }
 
-var NodeType;
-(function (NodeType) {
-    NodeType[NodeType["Document"] = 0] = "Document";
-    NodeType[NodeType["DocumentType"] = 1] = "DocumentType";
-    NodeType[NodeType["Element"] = 2] = "Element";
-    NodeType[NodeType["Text"] = 3] = "Text";
-    NodeType[NodeType["CDATA"] = 4] = "CDATA";
-    NodeType[NodeType["Comment"] = 5] = "Comment";
-})(NodeType || (NodeType = {}));
-
-/**
- * Create a breadcrumb for a replay.
- */
-function createBreadcrumb(
-  breadcrumb,
-) {
-  return {
-    timestamp: Date.now() / 1000,
-    type: 'default',
-    ...breadcrumb,
-  };
-}
-
-/**
- * Add a breadcrumb event to replay.
- */
-function addBreadcrumbEvent(replay, breadcrumb) {
-  if (breadcrumb.category === 'sentry.transaction') {
-    return;
-  }
-
-  if (['ui.click', 'ui.input'].includes(breadcrumb.category )) {
-    replay.triggerUserActivity();
-  } else {
-    replay.checkAndHandleExpiredSession();
-  }
-
-  replay.addUpdate(() => {
-    void addEvent(replay, {
-      type: 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,
-      data: {
-        tag: 'breadcrumb',
-        // normalize to max. 10 depth and 1_000 properties per object
-        payload: normalize(breadcrumb, 10, 1000),
-      },
-    });
-
-    // Do not flush after console log messages
-    return breadcrumb.category === 'console';
-  });
-}
-
-// Note that these are the serialized attributes and not attributes directly on
-// the DOM Node. Attributes we are interested in:
-const ATTRIBUTES_TO_RECORD = new Set([
-  'id',
-  'class',
-  'aria-label',
-  'role',
-  'name',
-  'alt',
-  'title',
-  'data-test-id',
-  'data-testid',
-]);
-
-/**
- * Inclusion list of attributes that we want to record from the DOM element
- */
-function getAttributesToRecord(attributes) {
-  const obj = {};
-  for (const key in attributes) {
-    if (ATTRIBUTES_TO_RECORD.has(key)) {
-      let normalizedKey = key;
-
-      if (key === 'data-testid' || key === 'data-test-id') {
-        normalizedKey = 'testId';
-      }
-
-      obj[normalizedKey] = attributes[key];
-    }
-  }
-
-  return obj;
-}
-
-const handleDomListener =
-  (replay) =>
-  (handlerData) => {
-    if (!replay.isEnabled()) {
-      return;
-    }
-
-    const result = handleDom(handlerData);
-
-    if (!result) {
-      return;
-    }
-
-    addBreadcrumbEvent(replay, result);
-  };
-
-/**
- * An event handler to react to DOM events.
- */
-function handleDom(handlerData) {
-  let target;
-  let targetNode;
-
-  // Accessing event.target can throw (see getsentry/raven-js#838, #768)
-  try {
-    targetNode = getTargetNode(handlerData);
-    target = htmlTreeAsString(targetNode);
-  } catch (e) {
-    target = '<unknown>';
-  }
-
-  // `__sn` property is the serialized node created by rrweb
-  const serializedNode =
-    targetNode && '__sn' in targetNode && targetNode.__sn.type === NodeType.Element ? targetNode.__sn : null;
-
-  return createBreadcrumb({
-    category: `ui.${handlerData.name}`,
-    message: target,
-    data: serializedNode
-      ? {
-          nodeId: serializedNode.id,
-          node: {
-            id: serializedNode.id,
-            tagName: serializedNode.tagName,
-            textContent: targetNode
-              ? Array.from(targetNode.childNodes)
-                  .map(
-                    (node) => '__sn' in node && node.__sn.type === NodeType.Text && node.__sn.textContent,
-                  )
-                  .filter(Boolean) // filter out empty values
-                  .map(text => (text ).trim())
-                  .join('')
-              : '',
-            attributes: getAttributesToRecord(serializedNode.attributes),
-          },
-        }
-      : {},
-  });
-}
-
-function getTargetNode(handlerData) {
-  if (isEventWithTarget(handlerData.event)) {
-    return handlerData.event.target;
-  }
-
-  return handlerData.event;
-}
-
-function isEventWithTarget(event) {
-  return !!(event ).target;
-}
-
 /**
  * Returns true if we think the given event is an error originating inside of rrweb.
  */
@@ -12497,6 +12814,30 @@ function isRrwebError(event, hint) {
   });
 }
 
+/**
+ * Determine if event should be sampled (only applies in buffer mode).
+ * When an event is captured by `hanldleGlobalEvent`, when in buffer mode
+ * we determine if we want to sample the error or not.
+ */
+function shouldSampleForBufferEvent(replay, event) {
+  if (replay.recordingMode !== 'buffer') {
+    return false;
+  }
+
+  // ignore this error because otherwise we could loop indefinitely with
+  // trying to capture replay and failing
+  if (event.message === UNABLE_TO_SEND_REPLAY) {
+    return false;
+  }
+
+  // Require the event to be an error event & to have an exception
+  if (!event.exception || event.type) {
+    return false;
+  }
+
+  return isSampled(replay.getOptions().errorSampleRate);
+}
+
 /**
  * Returns a listener to be added to `addGlobalEventProcessor(listener)`.
  */
@@ -12526,8 +12867,16 @@ function handleGlobalEventListener(
       return null;
     }
 
-    // Only tag transactions with replayId if not waiting for an error
-    if (isErrorEvent(event) || (isTransactionEvent(event) && replay.recordingMode === 'session')) {
+    // When in buffer mode, we decide to sample here.
+    // Later, in `handleAfterSendEvent`, if the replayId is set, we know that we sampled
+    // And convert the buffer session to a full session
+    const isErrorEventSampled = shouldSampleForBufferEvent(replay, event);
+
+    // Tag errors if it has been sampled in buffer mode, or if it is session mode
+    // Only tag transactions if in session mode
+    const shouldTagReplayId = isErrorEventSampled || replay.recordingMode === 'session';
+
+    if (shouldTagReplayId) {
       event.tags = { ...event.tags, replayId: replay.getSessionId() };
     }
 
@@ -12577,7 +12926,7 @@ function createPerformanceSpans(
 ) {
   return entries.map(({ type, start, end, name, data }) =>
     addEvent(replay, {
-      type: EventType.Custom,
+      type: EventType$1.Custom,
       timestamp: start,
       data: {
         tag: 'performanceSpan',
@@ -13359,7 +13708,32 @@ function _strIsProbablyJson(str) {
 
 /** Match an URL against a list of strings/Regex. */
 function urlMatches(url, urls) {
-  return stringMatchesSomePattern(url, urls);
+  const fullUrl = getFullUrl(url);
+
+  return stringMatchesSomePattern(fullUrl, urls);
+}
+
+/** exported for tests */
+function getFullUrl(url, baseURI = WINDOW.document.baseURI) {
+  // Short circuit for common cases:
+  if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith(WINDOW.location.origin)) {
+    return url;
+  }
+  const fixedUrl = new URL(url, baseURI);
+
+  // If these do not match, we are not dealing with a relative URL, so just return it
+  if (fixedUrl.origin !== new URL(baseURI).origin) {
+    return url;
+  }
+
+  const fullUrl = fixedUrl.href;
+
+  // Remove trailing slashes, if they don't match the original URL
+  if (!url.endsWith('/') && fullUrl.endsWith('/')) {
+    return fullUrl.slice(0, -1);
+  }
+
+  return fullUrl;
 }
 
 /**
@@ -13909,7 +14283,8 @@ function addGlobalListeners(replay) {
     client.on('afterSendEvent', handleAfterSendEvent(replay));
     client.on('createDsc', (dsc) => {
       const replayId = replay.getSessionId();
-      if (replayId && replay.isEnabled()) {
+      // We do not want to set the DSC when in buffer mode, as that means the replay has not been sent (yet)
+      if (replayId && replay.isEnabled() && replay.recordingMode === 'session') {
         dsc.replay_id = replayId;
       }
     });
@@ -14189,6 +14564,23 @@ function debounce(func, wait, options) {
   return debounced;
 }
 
+/* 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.
+ */
+
 /**
  * Handler for recording events.
  *
@@ -14231,6 +14623,14 @@ function getHandleRecordingEmit(replay) {
         return false;
       }
 
+      // Additionally, create a meta event that will capture certain SDK settings.
+      // In order to handle buffer mode, this needs to either be done when we
+      // receive checkout events or at flush time.
+      //
+      // `isCheckout` is always true, but want to be explicit that it should
+      // only be added for checkouts
+      void addSettingsEvent(replay, isCheckout);
+
       // If there is a previousSessionId after a full snapshot occurs, then
       // the replay session was started due to session expiration. The new session
       // is started before triggering a new checkout and contains the id
@@ -14241,10 +14641,10 @@ function getHandleRecordingEmit(replay) {
         return true;
       }
 
-      // See note above re: session start needs to reflect the most recent
-      // checkout.
-      if (replay.recordingMode === 'buffer' && replay.session) {
-        const { earliestEvent } = replay.getContext();
+      // When in buffer mode, make sure we adjust the session started date to the current earliest event of the buffer
+      // this should usually be the timestamp of the checkout event, but to be safe...
+      if (replay.recordingMode === 'buffer' && replay.session && replay.eventBuffer) {
+        const earliestEvent = replay.eventBuffer.getEarliestTimestamp();
         if (earliestEvent) {
           replay.session.started = earliestEvent;
 
@@ -14268,6 +14668,46 @@ function getHandleRecordingEmit(replay) {
   };
 }
 
+/**
+ * Exported for tests
+ */
+function createOptionsEvent(replay) {
+  const options = replay.getOptions();
+  return {
+    type: EventType.Custom,
+    timestamp: Date.now(),
+    data: {
+      tag: 'options',
+      payload: {
+        sessionSampleRate: options.sessionSampleRate,
+        errorSampleRate: options.errorSampleRate,
+        useCompressionOption: options.useCompression,
+        blockAllMedia: options.blockAllMedia,
+        maskAllText: options.maskAllText,
+        maskAllInputs: options.maskAllInputs,
+        useCompression: replay.eventBuffer ? replay.eventBuffer.type === 'worker' : false,
+        networkDetailHasUrls: options.networkDetailAllowUrls.length > 0,
+        networkCaptureBodies: options.networkCaptureBodies,
+        networkRequestHasHeaders: options.networkRequestHeaders.length > 0,
+        networkResponseHasHeaders: options.networkResponseHeaders.length > 0,
+      },
+    },
+  };
+}
+
+/**
+ * Add a "meta" event that contains a simplified view on current configuration
+ * options. This should only be included on the first segment of a recording.
+ */
+function addSettingsEvent(replay, isCheckout) {
+  // Only need to add this event when sending the first segment
+  if (!isCheckout || !replay.session || replay.session.segmentId !== 0) {
+    return Promise.resolve(null);
+  }
+
+  return addEvent(replay, createOptionsEvent(replay), false);
+}
+
 /**
  * Create a replay envelope ready to be sent.
  * This includes both the replay event, as well as the recording data.
@@ -14382,7 +14822,6 @@ async function sendReplayRequest({
   eventContext,
   timestamp,
   session,
-  options,
 }) {
   const preparedRecordingData = prepareRecordingData({
     recordingData,
@@ -14424,15 +14863,6 @@ async function sendReplayRequest({
     return;
   }
 
-  replayEvent.contexts = {
-    ...replayEvent.contexts,
-    replay: {
-      ...(replayEvent.contexts && replayEvent.contexts.replay),
-      session_sample_rate: options.sessionSampleRate,
-      error_sample_rate: options.errorSampleRate,
-    },
-  };
-
   /*
   For reference, the fully built event looks something like this:
   {
@@ -14463,10 +14893,6 @@ async function sendReplayRequest({
       },
       "sdkProcessingMetadata": {},
       "contexts": {
-        "replay": {
-          "session_sample_rate": 1,
-          "error_sample_rate": 0,
-        },
       },
   }
   */
@@ -14650,7 +15076,6 @@ class ReplayContainer  {
     errorIds: new Set(),
     traceIds: new Set(),
     urls: [],
-    earliestEvent: null,
     initialTimestamp: Date.now(),
     initialUrl: '',
   };}
@@ -14660,7 +15085,7 @@ class ReplayContainer  {
     recordingOptions,
   }
 
-) {ReplayContainer.prototype.__init.call(this);ReplayContainer.prototype.__init2.call(this);ReplayContainer.prototype.__init3.call(this);ReplayContainer.prototype.__init4.call(this);ReplayContainer.prototype.__init5.call(this);ReplayContainer.prototype.__init6.call(this);ReplayContainer.prototype.__init7.call(this);ReplayContainer.prototype.__init8.call(this);ReplayContainer.prototype.__init9.call(this);ReplayContainer.prototype.__init10.call(this);ReplayContainer.prototype.__init11.call(this);ReplayContainer.prototype.__init12.call(this);ReplayContainer.prototype.__init13.call(this);ReplayContainer.prototype.__init14.call(this);ReplayContainer.prototype.__init15.call(this);ReplayContainer.prototype.__init16.call(this);ReplayContainer.prototype.__init17.call(this);
+) {ReplayContainer.prototype.__init.call(this);ReplayContainer.prototype.__init2.call(this);ReplayContainer.prototype.__init3.call(this);ReplayContainer.prototype.__init4.call(this);ReplayContainer.prototype.__init5.call(this);ReplayContainer.prototype.__init6.call(this);ReplayContainer.prototype.__init7.call(this);ReplayContainer.prototype.__init8.call(this);ReplayContainer.prototype.__init9.call(this);ReplayContainer.prototype.__init10.call(this);ReplayContainer.prototype.__init11.call(this);ReplayContainer.prototype.__init12.call(this);ReplayContainer.prototype.__init13.call(this);ReplayContainer.prototype.__init14.call(this);ReplayContainer.prototype.__init15.call(this);ReplayContainer.prototype.__init16.call(this);ReplayContainer.prototype.__init17.call(this);ReplayContainer.prototype.__init18.call(this);
     this._recordingOptions = recordingOptions;
     this._options = options;
 
@@ -15152,6 +15577,7 @@ class ReplayContainer  {
       WINDOW.document.addEventListener('visibilitychange', this._handleVisibilityChange);
       WINDOW.addEventListener('blur', this._handleWindowBlur);
       WINDOW.addEventListener('focus', this._handleWindowFocus);
+      WINDOW.addEventListener('keydown', this._handleKeyboardEvent);
 
       // There is no way to remove these listeners, so ensure they are only added once
       if (!this._hasInitializedCoreListeners) {
@@ -15180,6 +15606,7 @@ class ReplayContainer  {
 
       WINDOW.removeEventListener('blur', this._handleWindowBlur);
       WINDOW.removeEventListener('focus', this._handleWindowFocus);
+      WINDOW.removeEventListener('keydown', this._handleKeyboardEvent);
 
       if (this._performanceObserver) {
         this._performanceObserver.disconnect();
@@ -15230,6 +15657,11 @@ class ReplayContainer  {
     this._doChangeToForegroundTasks(breadcrumb);
   };}
 
+  /** Ensure page remains active when a key is pressed. */
+   __init16() {this._handleKeyboardEvent = (event) => {
+    handleKeyboardEvent(this, event);
+  };}
+
   /**
    * Tasks to run when we consider a page to be hidden (via blurring and/or visibility)
    */
@@ -15309,7 +15741,7 @@ class ReplayContainer  {
    _createCustomBreadcrumb(breadcrumb) {
     this.addUpdate(() => {
       void addEvent(this, {
-        type: EventType.Custom,
+        type: EventType$1.Custom,
         timestamp: breadcrumb.timestamp || 0,
         data: {
           tag: 'breadcrumb',
@@ -15350,22 +15782,35 @@ class ReplayContainer  {
     this._context.errorIds.clear();
     this._context.traceIds.clear();
     this._context.urls = [];
-    this._context.earliestEvent = null;
+  }
+
+  /** Update the initial timestamp based on the buffer content. */
+   _updateInitialTimestampFromEventBuffer() {
+    const { session, eventBuffer } = this;
+    if (!session || !eventBuffer) {
+      return;
+    }
+
+    // we only ever update this on the initial segment
+    if (session.segmentId) {
+      return;
+    }
+
+    const earliestEvent = eventBuffer.getEarliestTimestamp();
+    if (earliestEvent && earliestEvent < this._context.initialTimestamp) {
+      this._context.initialTimestamp = earliestEvent;
+    }
   }
 
   /**
    * Return and clear _context
    */
    _popEventContext() {
-    if (this._context.earliestEvent && this._context.earliestEvent < this._context.initialTimestamp) {
-      this._context.initialTimestamp = this._context.earliestEvent;
-    }
-
     const _context = {
       initialTimestamp: this._context.initialTimestamp,
       initialUrl: this._context.initialUrl,
-      errorIds: Array.from(this._context.errorIds).filter(Boolean),
-      traceIds: Array.from(this._context.traceIds).filter(Boolean),
+      errorIds: Array.from(this._context.errorIds),
+      traceIds: Array.from(this._context.traceIds),
       urls: this._context.urls,
     };
 
@@ -15404,6 +15849,9 @@ class ReplayContainer  {
     }
 
     try {
+      // This uses the data from the eventBuffer, so we need to call this before `finish()
+      this._updateInitialTimestampFromEventBuffer();
+
       // Note this empties the event buffer regardless of outcome of sending replay
       const recordingData = await this.eventBuffer.finish();
 
@@ -15444,7 +15892,7 @@ class ReplayContainer  {
    * Flush recording data to Sentry. Creates a lock so that only a single flush
    * can be active at a time. Do not call this directly.
    */
-   __init16() {this._flush = async ({
+   __init17() {this._flush = async ({
     force = false,
   }
 
@@ -15499,7 +15947,7 @@ class ReplayContainer  {
   }
 
   /** Handler for rrweb.record.onMutation */
-   __init17() {this._onMutationHandler = (mutations) => {
+   __init18() {this._onMutationHandler = (mutations) => {
     const count = mutations.length;
 
     const mutationLimit = this._options._experiments.mutationLimit || 0;
@@ -15738,6 +16186,8 @@ class Replay  {
       errorSampleRate,
       useCompression,
       blockAllMedia,
+      maskAllInputs,
+      maskAllText,
       networkDetailAllowUrls,
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),
@@ -24965,6 +25415,7 @@ var ACTIONS$7;
     ACTIONS["SET_MEDIA_RECORDER"] = "SET_MEDIA_RECORDER";
     ACTIONS["SET_MIC_ERROR"] = "SET_MIC_ERROR";
     ACTIONS["SET_PERMISSION_LISTENER"] = "SET_PERMISSION_LISTENER";
+    ACTIONS["SET_ACTIVELY_STOPPED"] = "SET_ACTIVELY_STOPPED";
 })(ACTIONS$7 || (ACTIONS$7 = {}));
 var EVENTS$6;
 (function (EVENTS) {
@@ -43515,6 +43966,7 @@ const initialState = {
     isSafeMode: false,
     isAutoStart: false,
     isMicError: false,
+    isActivelyStopped: false,
 };
 const recorderMachineV2 = createMachine({
     predictableActionArguments: true,
@@ -43733,6 +44185,7 @@ const recorderMachineV2 = createMachine({
                             on: {
                                 [EVENTS$6.STOP_RECORDING]: {
                                     actions: [
+                                        ACTIONS$7.SET_ACTIVELY_STOPPED,
                                         ACTIONS$7.STOP_COUNT_DOWN_ACTOR,
                                         ACTIONS$7.STOP_MEDIA_RECORDER,
                                         ACTIONS$7.STOP_MICROPHONE_MACHINE,
@@ -43945,7 +44398,7 @@ const recorderMachineV2 = createMachine({
                         webm = new File([blob], Date.now().toString(), {
                             type: mimeType,
                         });
-                        callback({ type: 'SEND_CURRENT_TAKE', data: { webm, videoLength } });
+                        callback({ type: EVENTS$6.SEND_CURRENT_TAKE, data: { webm, videoLength } });
                     })
                         .catch((error) => {
                         console.error('fixVideoMetadata', error);
@@ -43994,6 +44447,7 @@ const recorderMachineV2 = createMachine({
         [ACTIONS$7.INIT_COUNT_DOWN_ACTOR]: assign$2({
             countDownRef: (context, event, meta) => spawn(counterMachine.withContext(Object.assign(Object.assign({}, counterMachine.context), { callback: meta.action.data.callback })), { name: 'countDownRef' }),
         }),
+        [ACTIONS$7.SET_ACTIVELY_STOPPED]: assign$2((context) => ({ isActivelyStopped: true })),
         [ACTIONS$7.STOP_COUNT_DOWN_ACTOR]: assign$2((context) => {
             context.countDownRef.stop();
             return {
@@ -44064,7 +44518,7 @@ const recorderMachineV2 = createMachine({
         // send success event to the parent, to be able to proceed to the next step
         [ACTIONS$7.SEND_SUCCESS_TO_PARENT]: sendParent$1((context, event) => (Object.assign(Object.assign({}, event), { type: EVENTS$5.READY_TO_START_RECORDING }))),
         // on stop recording send webm file to storage machine
-        [ACTIONS$7.SEND_CURRENT_TAKE]: sendParent$1((context, event) => (Object.assign(Object.assign({}, event), { type: EVENTS$5.STOP_RECORDING }))),
+        [ACTIONS$7.SEND_CURRENT_TAKE]: sendParent$1(({ isActivelyStopped }, event) => (Object.assign(Object.assign({}, event), { type: EVENTS$5.STOP_RECORDING, data: Object.assign(Object.assign({}, event.data), { isActivelyStopped }) }))),
         // send null param to mic machine to be able to stop sound detecting
         [ACTIONS$7.STOP_MICROPHONE_MACHINE]: send$2((_, _event) => ({ type: EVENTS$3.ON_SET_MEDIA_STREAM, data: null }), { to: (context) => context.microphoneRef }),
         // clean mic error, this is really sensitive, !! a lot of user can't start recording coz of it
@@ -44593,7 +45047,7 @@ const MAPPED_EVENT_TYPES = {
         PRACTICE: EVENT_TYPES.TIMES_UP,
     },
 };
-const questionEventFormatter = (questionActionType) => pure_1(({ recordingType, questions, currentQuestion, widgetConfig, currentTake }) => {
+const questionEventFormatter = (questionActionType) => pure_1(({ recordingType, questions, currentQuestion, widgetConfig, currentTake }, event) => {
     var _a, _b;
     const isQuestionMode = recordingType === TAKE_TYPES.QUESTION;
     const currentQuestionFile = isQuestionMode ? (_b = (_a = widgetConfig === null || widgetConfig === void 0 ? void 0 : widgetConfig.video) === null || _a === void 0 ? void 0 : _a.videos) === null || _b === void 0 ? void 0 : _b[currentQuestion - 1] : null;
@@ -44601,10 +45055,11 @@ const questionEventFormatter = (questionActionType) => pure_1(({ recordingType,
     const isAssessment = currentQuestionObj.answerType && currentQuestionObj.answerType !== ANSWER_TYPES.VIDEO;
     return {
         type: ACTIONS$6.EMIT_TRACKING_EVENT,
-        data: Object.assign({ eventType: isQuestionMode ? MAPPED_EVENT_TYPES[questionActionType].QUESTION : MAPPED_EVENT_TYPES[questionActionType].PRACTICE }, (currentQuestionFile && { extraData: Object.assign(Object.assign(Object.assign({ questionFilename: currentQuestionFile.filename, questionNumber: currentQuestion }, (!isAssessment && {
+        data: Object.assign({ eventType: isQuestionMode ? MAPPED_EVENT_TYPES[questionActionType].QUESTION : MAPPED_EVENT_TYPES[questionActionType].PRACTICE }, (currentQuestionFile && { extraData: Object.assign(Object.assign({ questionFilename: currentQuestionFile.filename, questionNumber: currentQuestion }, (!isAssessment && {
                 currentTake,
                 numberOfTakes: currentQuestionObj.numOfRetakes,
-            })), (isAssessment && {})), { questionType: currentQuestionObj.videoQuestion ? 'video' : 'text', answerType: currentQuestionObj.answerType || ANSWER_TYPES.VIDEO }) })),
+                isActivelyStopped: (event.data || {}).isActivelyStopped,
+            })), { questionType: currentQuestionObj.videoQuestion ? 'video' : 'text', answerType: currentQuestionObj.answerType || ANSWER_TYPES.VIDEO }) })),
     };
 });
 const accWidgetMachine = createMachine({