@myinterview/widget-react 1.1.23-binary-002 → 1.1.23-binary-004

package/dist/esm/index.js

@@ -947,6 +947,12 @@ function createStackParser(...parsers) {
       // Remove webpack (error: *) wrappers
       const cleanedLine = WEBPACK_ERROR_REGEXP.test(line) ? line.replace(WEBPACK_ERROR_REGEXP, '$1') : line;
 
+      // https://github.com/getsentry/sentry-javascript/issues/7813
+      // Skip Error: lines
+      if (cleanedLine.match(/\S*Error: /)) {
+        continue;
+      }
+
       for (const parser of sortedParsers) {
         const frame = parser(cleanedLine);
 
@@ -1131,6 +1137,8 @@ function supportsHistory() {
 // eslint-disable-next-line deprecation/deprecation
 const WINDOW$3 = getGlobalObject();
 
+const SENTRY_XHR_DATA_KEY = '__sentry_xhr_v2__';
+
 /**
  * Instrument native APIs to call handlers that can be used to create breadcrumbs, APM spans etc.
  *  - Console API
@@ -1243,11 +1251,13 @@ function instrumentFetch() {
 
   fill(WINDOW$3, 'fetch', function (originalFetch) {
     return function (...args) {
+      const { method, url } = parseFetchArgs(args);
+
       const handlerData = {
         args,
         fetchData: {
-          method: getFetchMethod(args),
-          url: getFetchUrl(args),
+          method,
+          url,
         },
         startTimestamp: Date.now(),
       };
@@ -1282,29 +1292,53 @@ function instrumentFetch() {
   });
 }
 
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/** Extract `method` from fetch call arguments */
-function getFetchMethod(fetchArgs = []) {
-  if ('Request' in WINDOW$3 && isInstanceOf(fetchArgs[0], Request) && fetchArgs[0].method) {
-    return String(fetchArgs[0].method).toUpperCase();
+function hasProp(obj, prop) {
+  return !!obj && typeof obj === 'object' && !!(obj )[prop];
+}
+
+function getUrlFromResource(resource) {
+  if (typeof resource === 'string') {
+    return resource;
   }
-  if (fetchArgs[1] && fetchArgs[1].method) {
-    return String(fetchArgs[1].method).toUpperCase();
+
+  if (!resource) {
+    return '';
+  }
+
+  if (hasProp(resource, 'url')) {
+    return resource.url;
   }
-  return 'GET';
+
+  if (resource.toString) {
+    return resource.toString();
+  }
+
+  return '';
 }
 
-/** Extract `url` from fetch call arguments */
-function getFetchUrl(fetchArgs = []) {
-  if (typeof fetchArgs[0] === 'string') {
-    return fetchArgs[0];
+/**
+ * Parses the fetch arguments to find the used Http method and the url of the request
+ */
+function parseFetchArgs(fetchArgs) {
+  if (fetchArgs.length === 0) {
+    return { method: 'GET', url: '' };
   }
-  if ('Request' in WINDOW$3 && isInstanceOf(fetchArgs[0], Request)) {
-    return fetchArgs[0].url;
+
+  if (fetchArgs.length === 2) {
+    const [url, options] = fetchArgs ;
+
+    return {
+      url: getUrlFromResource(url),
+      method: hasProp(options, 'method') ? String(options.method).toUpperCase() : 'GET',
+    };
   }
-  return String(fetchArgs[0]);
+
+  const arg = fetchArgs[0];
+  return {
+    url: getUrlFromResource(arg ),
+    method: hasProp(arg, 'method') ? String(arg.method).toUpperCase() : 'GET',
+  };
 }
-/* eslint-enable @typescript-eslint/no-unsafe-member-access */
 
 /** JSDoc */
 function instrumentXHR() {
@@ -1317,10 +1351,11 @@ function instrumentXHR() {
   fill(xhrproto, 'open', function (originalOpen) {
     return function ( ...args) {
       const url = args[1];
-      const xhrInfo = (this.__sentry_xhr__ = {
+      const xhrInfo = (this[SENTRY_XHR_DATA_KEY] = {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         method: isString$2(args[0]) ? args[0].toUpperCase() : args[0],
         url: args[1],
+        request_headers: {},
       });
 
       // if Sentry key appears in URL, don't capture it as a request
@@ -1331,7 +1366,7 @@ function instrumentXHR() {
 
       const onreadystatechangeHandler = () => {
         // For whatever reason, this is not the same instance here as from the outer method
-        const xhrInfo = this.__sentry_xhr__;
+        const xhrInfo = this[SENTRY_XHR_DATA_KEY];
 
         if (!xhrInfo) {
           return;
@@ -1366,14 +1401,32 @@ function instrumentXHR() {
         this.addEventListener('readystatechange', onreadystatechangeHandler);
       }
 
+      // Intercepting `setRequestHeader` to access the request headers of XHR instance.
+      // This will only work for user/library defined headers, not for the default/browser-assigned headers.
+      // Request cookies are also unavailable for XHR, as `Cookie` header can't be defined by `setRequestHeader`.
+      fill(this, 'setRequestHeader', function (original) {
+        return function ( ...setRequestHeaderArgs) {
+          const [header, value] = setRequestHeaderArgs ;
+
+          const xhrInfo = this[SENTRY_XHR_DATA_KEY];
+
+          if (xhrInfo) {
+            xhrInfo.request_headers[header.toLowerCase()] = value;
+          }
+
+          return original.apply(this, setRequestHeaderArgs);
+        };
+      });
+
       return originalOpen.apply(this, args);
     };
   });
 
   fill(xhrproto, 'send', function (originalSend) {
     return function ( ...args) {
-      if (this.__sentry_xhr__ && args[0] !== undefined) {
-        this.__sentry_xhr__.body = args[0];
+      const sentryXhrData = this[SENTRY_XHR_DATA_KEY];
+      if (sentryXhrData && args[0] !== undefined) {
+        sentryXhrData.body = args[0];
       }
 
       triggerHandlers('xhr', {
@@ -1672,13 +1725,15 @@ function instrumentError() {
       url,
     });
 
-    if (_oldOnErrorHandler) {
+    if (_oldOnErrorHandler && !_oldOnErrorHandler.__SENTRY_LOADER__) {
       // eslint-disable-next-line prefer-rest-params
       return _oldOnErrorHandler.apply(this, arguments);
     }
 
     return false;
   };
+
+  WINDOW$3.onerror.__SENTRY_INSTRUMENTED__ = true;
 }
 
 let _oldOnUnhandledRejectionHandler = null;
@@ -1689,13 +1744,15 @@ function instrumentUnhandledRejection() {
   WINDOW$3.onunhandledrejection = function (e) {
     triggerHandlers('unhandledrejection', e);
 
-    if (_oldOnUnhandledRejectionHandler) {
+    if (_oldOnUnhandledRejectionHandler && !_oldOnUnhandledRejectionHandler.__SENTRY_LOADER__) {
       // eslint-disable-next-line prefer-rest-params
       return _oldOnUnhandledRejectionHandler.apply(this, arguments);
     }
 
     return true;
   };
+
+  WINDOW$3.onunhandledrejection.__SENTRY_INSTRUMENTED__ = true;
 }
 
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
@@ -1993,7 +2050,7 @@ function loadModule(moduleName) {
  * @returns A normalized version of the object, or `"**non-serializable**"` if any errors are thrown during normalization.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function normalize(input, depth = +Infinity, maxProperties = +Infinity) {
+function normalize(input, depth = 100, maxProperties = +Infinity) {
   try {
     // since we're at the outermost level, we don't provide a key
     return visit('', input, depth, maxProperties);
@@ -2039,7 +2096,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 ;
   }
 
@@ -2060,17 +2120,16 @@ function visit(
     return value ;
   }
 
-  // Do not normalize objects that we know have already been normalized. As a general rule, the
-  // "__sentry_skip_normalization__" property should only be used sparingly and only should only be set on objects that
-  // have already been normalized.
-  let overriddenDepth = depth;
-
-  if (typeof (value )['__sentry_override_normalization_depth__'] === 'number') {
-    overriddenDepth = (value )['__sentry_override_normalization_depth__'] ;
-  }
+  // We can set `__sentry_override_normalization_depth__` on an object to ensure that from there
+  // We keep a certain amount of depth.
+  // This should be used sparingly, e.g. we use it for the redux integration to ensure we get a certain amount of state.
+  const remainingDepth =
+    typeof (value )['__sentry_override_normalization_depth__'] === 'number'
+      ? ((value )['__sentry_override_normalization_depth__'] )
+      : depth;
 
   // We're also done if we've reached the max depth
-  if (overriddenDepth === 0) {
+  if (remainingDepth === 0) {
     // At this point we know `serialized` is a string of the form `"[object XXXX]"`. Clean it up so it's just `"[XXXX]"`.
     return stringified.replace('object ', '');
   }
@@ -2086,7 +2145,7 @@ function visit(
     try {
       const jsonValue = valueWithToJSON.toJSON();
       // We need to normalize the return value of `.toJSON()` in case it has circular references
-      return visit('', jsonValue, overriddenDepth - 1, maxProperties, memo);
+      return visit('', jsonValue, remainingDepth - 1, maxProperties, memo);
     } catch (err) {
       // pass (The built-in `toJSON` failed, but we can still try to do it ourselves)
     }
@@ -2115,7 +2174,7 @@ function visit(
 
     // Recursively visit all the child nodes
     const visitValue = visitable[visitKey];
-    normalized[visitKey] = visit(visitKey, visitValue, overriddenDepth - 1, maxProperties, memo);
+    normalized[visitKey] = visit(visitKey, visitValue, remainingDepth - 1, maxProperties, memo);
 
     numAdded++;
   }
@@ -2127,6 +2186,7 @@ function visit(
   return normalized;
 }
 
+/* eslint-disable complexity */
 /**
  * Stringify the given value. Handles various known special values and types.
  *
@@ -2177,11 +2237,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)}]`;
     }
@@ -2199,11 +2254,19 @@ function stringifyValue(
     // them to strings means that instances of classes which haven't defined their `toStringTag` will just come out as
     // `"[object Object]"`. If we instead look at the constructor's name (which is the same as the name of the class),
     // we can make sure that only plain objects come out that way.
-    return `[object ${getConstructorName(value)}]`;
+    const objName = getConstructorName(value);
+
+    // Handle HTML Elements
+    if (/^HTML(\w*)Element$/.test(objName)) {
+      return `[HTMLElement: ${objName}]`;
+    }
+
+    return `[object ${objName}]`;
   } catch (err) {
     return `**non-serializable** (${err})`;
   }
 }
+/* eslint-enable complexity */
 
 function getConstructorName(value) {
   const prototype = Object.getPrototypeOf(value);
@@ -2514,9 +2577,7 @@ function makePromiseBuffer(limit) {
  * // environments where DOM might not be available
  * @returns parsed URL object
  */
-function parseUrl(url)
-
- {
+function parseUrl(url) {
   if (!url) {
     return {};
   }
@@ -2534,6 +2595,8 @@ function parseUrl(url)
     host: match[4],
     path: match[5],
     protocol: match[2],
+    search: query,
+    hash: fragment,
     relative: match[5] + query + fragment, // everything minus origin
   };
 }
@@ -2918,6 +2981,7 @@ const ITEM_TYPE_TO_DATA_CATEGORY_MAP = {
   profile: 'profile',
   replay_event: 'replay',
   replay_recording: 'replay',
+  check_in: 'monitor',
 };
 
 /**
@@ -2947,16 +3011,14 @@ function createEventEnvelopeHeaders(
   dsn,
 ) {
   const dynamicSamplingContext = event.sdkProcessingMetadata && event.sdkProcessingMetadata.dynamicSamplingContext;
-
   return {
     event_id: event.event_id ,
     sent_at: new Date().toISOString(),
     ...(sdkInfo && { sdk: sdkInfo }),
     ...(!!tunnel && { dsn: dsnToString(dsn) }),
-    ...(event.type === 'transaction' &&
-      dynamicSamplingContext && {
-        trace: dropUndefinedKeys({ ...dynamicSamplingContext }),
-      }),
+    ...(dynamicSamplingContext && {
+      trace: dropUndefinedKeys({ ...dynamicSamplingContext }),
+    }),
   };
 }
 
@@ -3661,9 +3723,16 @@ class Scope  {
     // errors with transaction and it relies on that.
     if (this._span) {
       event.contexts = { trace: this._span.getTraceContext(), ...event.contexts };
-      const transactionName = this._span.transaction && this._span.transaction.name;
-      if (transactionName) {
-        event.tags = { transaction: transactionName, ...event.tags };
+      const transaction = this._span.transaction;
+      if (transaction) {
+        event.sdkProcessingMetadata = {
+          dynamicSamplingContext: transaction.getDynamicSamplingContext(),
+          ...event.sdkProcessingMetadata,
+        };
+        const transactionName = transaction.name;
+        if (transactionName) {
+          event.tags = { transaction: transactionName, ...event.tags };
+        }
       }
     }
 
@@ -3787,11 +3856,6 @@ const API_VERSION = 4;
  */
 const DEFAULT_BREADCRUMBS = 100;
 
-/**
- * A layer in the process stack.
- * @hidden
- */
-
 /**
  * @inheritDoc
  */
@@ -4069,7 +4133,17 @@ class Hub  {
    * @inheritDoc
    */
    startTransaction(context, customSamplingContext) {
-    return this._callExtensionMethod('startTransaction', context, customSamplingContext);
+    const result = this._callExtensionMethod('startTransaction', context, customSamplingContext);
+
+    if ((typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && !result) {
+      // eslint-disable-next-line no-console
+      console.warn(`Tracing extension 'startTransaction' has not been added. Call 'addTracingExtensions' before calling 'init':
+Sentry.addTracingExtensions();
+Sentry.init({...});
+`);
+    }
+
+    return result;
   }
 
   /**
@@ -4154,13 +4228,10 @@ class Hub  {
    */
    _sendSessionUpdate() {
     const { scope, client } = this.getStackTop();
-    if (!scope) return;
 
     const session = scope.getSession();
-    if (session) {
-      if (client && client.captureSession) {
-        client.captureSession(session);
-      }
+    if (session && client && client.captureSession) {
+      client.captureSession(session);
     }
   }
 
@@ -4230,47 +4301,28 @@ function getCurrentHub() {
   // Get main carrier (global for every environment)
   const registry = getMainCarrier();
 
+  if (registry.__SENTRY__ && registry.__SENTRY__.acs) {
+    const hub = registry.__SENTRY__.acs.getCurrentHub();
+
+    if (hub) {
+      return hub;
+    }
+  }
+
+  // Return hub that lives on a global object
+  return getGlobalHub(registry);
+}
+
+function getGlobalHub(registry = getMainCarrier()) {
   // If there's no hub, or its an old API, assign a new one
   if (!hasHubOnCarrier(registry) || getHubFromCarrier(registry).isOlderThan(API_VERSION)) {
     setHubOnCarrier(registry, new Hub());
   }
 
-  // Prefer domains over global if they are there (applicable only to Node environment)
-  if (isNodeEnv()) {
-    return getHubFromActiveDomain(registry);
-  }
   // Return hub that lives on a global object
   return getHubFromCarrier(registry);
 }
 
-/**
- * Try to read the hub from an active domain, and fallback to the registry if one doesn't exist
- * @returns discovered hub
- */
-function getHubFromActiveDomain(registry) {
-  try {
-    const sentry = getMainCarrier().__SENTRY__;
-    const activeDomain = sentry && sentry.extensions && sentry.extensions.domain && sentry.extensions.domain.active;
-
-    // If there's no active domain, just return global hub
-    if (!activeDomain) {
-      return getHubFromCarrier(registry);
-    }
-
-    // If there's no hub on current domain, or it's an old API, assign a new one
-    if (!hasHubOnCarrier(activeDomain) || getHubFromCarrier(activeDomain).isOlderThan(API_VERSION)) {
-      const registryHubTopStack = getHubFromCarrier(registry).getStackTop();
-      setHubOnCarrier(activeDomain, new Hub(registryHubTopStack.client, Scope.clone(registryHubTopStack.scope)));
-    }
-
-    // Return hub that lives on a domain
-    return getHubFromCarrier(activeDomain);
-  } catch (_Oo) {
-    // Return hub that lives on a global object
-    return getHubFromCarrier(registry);
-  }
-}
-
 /**
  * This will tell whether a carrier has a hub on it or not
  * @param carrier object
@@ -4344,6 +4396,69 @@ var SpanStatus; (function (SpanStatus) {
   const DataLoss = 'data_loss'; SpanStatus["DataLoss"] = DataLoss;
 })(SpanStatus || (SpanStatus = {}));
 
+/**
+ * Wraps a function with a transaction/span and finishes the span after the function is done.
+ *
+ * Note that if you have not enabled tracing extensions via `addTracingExtensions`, this function
+ * will not generate spans, and the `span` returned from the callback may be undefined.
+ *
+ * This function is meant to be used internally and may break at any time. Use at your own risk.
+ *
+ * @internal
+ * @private
+ */
+function trace(
+  context,
+  callback,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  onError = () => {},
+) {
+  const ctx = { ...context };
+  // If a name is set and a description is not, set the description to the name.
+  if (ctx.name !== undefined && ctx.description === undefined) {
+    ctx.description = ctx.name;
+  }
+
+  const hub = getCurrentHub();
+  const scope = hub.getScope();
+
+  const parentSpan = scope.getSpan();
+  const activeSpan = parentSpan ? parentSpan.startChild(ctx) : hub.startTransaction(ctx);
+  scope.setSpan(activeSpan);
+
+  function finishAndSetSpan() {
+    activeSpan && activeSpan.finish();
+    hub.getScope().setSpan(parentSpan);
+  }
+
+  let maybePromiseResult;
+  try {
+    maybePromiseResult = callback(activeSpan);
+  } catch (e) {
+    activeSpan && activeSpan.setStatus('internal_error');
+    onError(e);
+    finishAndSetSpan();
+    throw e;
+  }
+
+  if (isThenable(maybePromiseResult)) {
+    Promise.resolve(maybePromiseResult).then(
+      () => {
+        finishAndSetSpan();
+      },
+      e => {
+        activeSpan && activeSpan.setStatus('internal_error');
+        onError(e);
+        finishAndSetSpan();
+      },
+    );
+  } else {
+    finishAndSetSpan();
+  }
+
+  return maybePromiseResult;
+}
+
 // Note: All functions in this file are typed with a return value of `ReturnType<Hub[HUB_FUNCTION]>`,
 // where HUB_FUNCTION is some method on the Hub class.
 //
@@ -4685,7 +4800,11 @@ function prepareEvent(
 
   applyClientOptions(prepared, options);
   applyIntegrationsMetadata(prepared, integrations);
-  applyDebugMetadata(prepared, options.stackParser);
+
+  // Only apply debug metadata to error events.
+  if (event.type === undefined) {
+    applyDebugMetadata(prepared, options.stackParser);
+  }
 
   // If we have scope given to us, use it as the base for further modifications.
   // This allows us to prevent unnecessary copying of data if `captureContext` is not provided.
@@ -4762,6 +4881,8 @@ function applyClientOptions(event, options) {
   }
 }
 
+const debugIdStackParserCache = new WeakMap();
+
 /**
  * Applies debug metadata images to the event in order to apply source maps by looking up their debug ID.
  */
@@ -4772,10 +4893,28 @@ function applyDebugMetadata(event, stackParser) {
     return;
   }
 
+  let debugIdStackFramesCache;
+  const cachedDebugIdStackFrameCache = debugIdStackParserCache.get(stackParser);
+  if (cachedDebugIdStackFrameCache) {
+    debugIdStackFramesCache = cachedDebugIdStackFrameCache;
+  } else {
+    debugIdStackFramesCache = new Map();
+    debugIdStackParserCache.set(stackParser, debugIdStackFramesCache);
+  }
+
   // Build a map of filename -> debug_id
   const filenameDebugIdMap = Object.keys(debugIdMap).reduce((acc, debugIdStackTrace) => {
-    const parsedStack = stackParser(debugIdStackTrace);
-    for (const stackFrame of parsedStack) {
+    let parsedStack;
+    const cachedParsedStack = debugIdStackFramesCache.get(debugIdStackTrace);
+    if (cachedParsedStack) {
+      parsedStack = cachedParsedStack;
+    } else {
+      parsedStack = stackParser(debugIdStackTrace);
+      debugIdStackFramesCache.set(debugIdStackTrace, parsedStack);
+    }
+
+    for (let i = parsedStack.length - 1; i >= 0; i--) {
+      const stackFrame = parsedStack[i];
       if (stackFrame.filename) {
         acc[stackFrame.filename] = debugIdMap[debugIdStackTrace];
         break;
@@ -5680,7 +5819,7 @@ function getEventForEnvelopeItem(item, type) {
   return Array.isArray(item) ? (item )[1] : undefined;
 }
 
-const SDK_VERSION = '7.46.0';
+const SDK_VERSION = '7.52.1';
 
 let originalFunctionToString;
 
@@ -5703,11 +5842,17 @@ class FunctionToString  {constructor() { FunctionToString.prototype.__init.call(
     // eslint-disable-next-line @typescript-eslint/unbound-method
     originalFunctionToString = Function.prototype.toString;
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    Function.prototype.toString = function ( ...args) {
-      const context = getOriginalFunction(this) || this;
-      return originalFunctionToString.apply(context, args);
-    };
+    // intrinsics (like Function.prototype) might be immutable in some environments
+    // e.g. Node with --frozen-intrinsics, XS (an embedded JavaScript engine) or SES (a JavaScript proposal)
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Function.prototype.toString = function ( ...args) {
+        const context = getOriginalFunction(this) || this;
+        return originalFunctionToString.apply(context, args);
+      };
+    } catch (e) {
+      // ignore errors here, just don't patch this
+    }
   }
 } FunctionToString.__initStatic();
 
@@ -5855,8 +6000,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)}`);
@@ -6515,12 +6661,14 @@ function _consoleBreadcrumb(handlerData) {
 function _xhrBreadcrumb(handlerData) {
   const { startTimestamp, endTimestamp } = handlerData;
 
+  const sentryXhrData = handlerData.xhr[SENTRY_XHR_DATA_KEY];
+
   // We only capture complete, non-sentry requests
-  if (!startTimestamp || !endTimestamp || !handlerData.xhr.__sentry_xhr__) {
+  if (!startTimestamp || !endTimestamp || !sentryXhrData) {
     return;
   }
 
-  const { method, url, status_code, body } = handlerData.xhr.__sentry_xhr__;
+  const { method, url, status_code, body } = sentryXhrData;
 
   const data = {
     method,
@@ -6638,6 +6786,43 @@ function _isEvent(event) {
   return event && !!(event ).target;
 }
 
+/**
+ * Creates an envelope from a user feedback.
+ */
+function createUserFeedbackEnvelope(
+  feedback,
+  {
+    metadata,
+    tunnel,
+    dsn,
+  }
+
+,
+) {
+  const headers = {
+    event_id: feedback.event_id,
+    sent_at: new Date().toISOString(),
+    ...(metadata &&
+      metadata.sdk && {
+        sdk: {
+          name: metadata.sdk.name,
+          version: metadata.sdk.version,
+        },
+      }),
+    ...(!!tunnel && !!dsn && { dsn: dsnToString(dsn) }),
+  };
+  const item = createUserFeedbackEnvelopeItem(feedback);
+
+  return createEnvelope(headers, [item]);
+}
+
+function createUserFeedbackEnvelopeItem(feedback) {
+  const feedbackHeaders = {
+    type: 'user_report',
+  };
+  return [feedbackHeaders, feedback];
+}
+
 /**
  * Configuration options for the Sentry Browser SDK.
  * @see @sentry/types Options for more information.
@@ -6720,6 +6905,23 @@ class BrowserClient extends BaseClient {
     super.sendEvent(event, hint);
   }
 
+  /**
+   * Sends user feedback to Sentry.
+   */
+   captureUserFeedback(feedback) {
+    if (!this._isEnabled()) {
+      (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.warn('SDK not enabled, will not capture user feedback.');
+      return;
+    }
+
+    const envelope = createUserFeedbackEnvelope(feedback, {
+      metadata: this.getSdkMetadata(),
+      dsn: this.getDsn(),
+      tunnel: this.getOptions().tunnel,
+    });
+    void this._sendEnvelope(envelope);
+  }
+
   /**
    * @inheritDoc
    */
@@ -6962,7 +7164,7 @@ function createFrame(filename, func, lineno, colno) {
 
 // Chromium based browsers: Chrome, Brave, new Opera, new Edge
 const chromeRegex =
-  /^\s*at (?:(.*\).*?|.*?) ?\((?:address at )?)?(?:async )?((?:file|https?|blob|chrome-extension|address|native|eval|webpack|<anonymous>|[-a-z]+:|.*bundle|\/)?.*?)(?::(\d+))?(?::(\d+))?\)?\s*$/i;
+  /^\s*at (?:(.+?\)(?: \[.+\])?|.*?) ?\((?:address at )?)?(?:async )?((?:<anonymous>|[-a-z]+:|.*bundle|\/)?.*?)(?::(\d+))?(?::(\d+))?\)?\s*$/i;
 const chromeEvalRegex = /\((\S*)(?::(\d+))(?::(\d+))\)/;
 
 const chrome = line => {
@@ -6998,7 +7200,7 @@ const chromeStackLineParser = [CHROME_PRIORITY, chrome];
 // generates filenames without a prefix like `file://` the filenames in the stacktrace are just 42.js
 // We need this specific case for now because we want no other regex to match.
 const geckoREgex =
-  /^\s*(.*?)(?:\((.*?)\))?(?:^|@)?((?:file|https?|blob|chrome|webpack|resource|moz-extension|safari-extension|safari-web-extension|capacitor)?:\/.*?|\[native code\]|[^@]*(?:bundle|\d+\.js)|\/[\w\-. /=]+)(?::(\d+))?(?::(\d+))?\s*$/i;
+  /^\s*(.*?)(?:\((.*?)\))?(?:^|@)?((?:[-a-z]+)?:\/.*?|\[native code\]|[^@]*(?:bundle|\d+\.js)|\/[\w\-. /=]+)(?::(\d+))?(?::(\d+))?\s*$/i;
 const geckoEvalRegex = /(\S+) line (\d+)(?: > eval line \d+)* > eval/i;
 
 const gecko = line => {
@@ -7030,8 +7232,7 @@ const gecko = line => {
 
 const geckoStackLineParser = [GECKO_PRIORITY, gecko];
 
-const winjsRegex =
-  /^\s*at (?:((?:\[object object\])?.+) )?\(?((?:file|ms-appx|https?|webpack|blob):.*?):(\d+)(?::(\d+))?\)?\s*$/i;
+const winjsRegex = /^\s*at (?:((?:\[object object\])?.+) )?\(?((?:[-a-z]+):.*?):(\d+)(?::(\d+))?\)?\s*$/i;
 
 const winjs = line => {
   const parts = winjsRegex.exec(line);
@@ -8096,11 +8297,14 @@ const REPLAY_SESSION_KEY = 'sentryReplaySession';
 const REPLAY_EVENT_NAME = 'replay_event';
 const UNABLE_TO_SEND_REPLAY = 'Unable to send Replay';
 
-// The idle limit for a session
-const SESSION_IDLE_DURATION = 300000; // 5 minutes in ms
+// The idle limit for a session after which recording is paused.
+const SESSION_IDLE_PAUSE_DURATION = 300000; // 5 minutes in ms
+
+// The idle limit for a session after which the session expires.
+const SESSION_IDLE_EXPIRE_DURATION = 900000; // 15 minutes in ms
 
 // The maximum length of a session
-const MAX_SESSION_LIFE = 3600000; // 60 minutes
+const MAX_SESSION_LIFE = 3600000; // 60 minutes in ms
 
 /** Default flush delays */
 const DEFAULT_FLUSH_MIN_DELAY = 5000;
@@ -8109,13 +8313,16 @@ const DEFAULT_FLUSH_MIN_DELAY = 5000;
 const DEFAULT_FLUSH_MAX_DELAY = 5500;
 
 /* How long to wait for error checkouts */
-const ERROR_CHECKOUT_TIME = 60000;
+const BUFFER_CHECKOUT_TIME = 60000;
 
 const RETRY_BASE_INTERVAL = 5000;
 const RETRY_MAX_COUNT = 3;
 
-/* The max (uncompressed) size in bytes of a network body. Any body larger than this will be dropped. */
-const NETWORK_BODY_MAX_SIZE = 300000;
+/* The max (uncompressed) size in bytes of a network body. Any body larger than this will be truncated. */
+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;
 (function (NodeType) {
@@ -8152,7 +8359,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 }) ||
@@ -8185,6 +8392,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-_:]');
@@ -8223,6 +8445,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) {
@@ -8231,7 +8460,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('')
         : '';
 }
@@ -8566,14 +8795,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,
@@ -9046,15 +9276,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";
@@ -9063,7 +9286,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";
@@ -9678,9 +9901,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');
@@ -10077,27 +10300,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,
@@ -10114,8 +10335,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));
@@ -11028,17 +11259,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;
@@ -11054,16 +11285,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({
@@ -11108,7 +11339,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(),
@@ -11151,7 +11382,7 @@ function record(options = {}) {
         }
         mirror.map = idNodeMap;
         wrappedEmit(wrapEvent({
-            type: EventType.FullSnapshot,
+            type: EventType$1.FullSnapshot,
             data: {
                 node,
                 initialOffset: {
@@ -11176,7 +11407,7 @@ function record(options = {}) {
         const handlers = [];
         handlers.push(on$1('DOMContentLoaded', () => {
             wrappedEmit(wrapEvent({
-                type: EventType.DomContentLoaded,
+                type: EventType$1.DomContentLoaded,
                 data: {},
             }));
         }));
@@ -11186,40 +11417,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,
@@ -11252,7 +11483,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,
@@ -11280,7 +11511,7 @@ function record(options = {}) {
         else {
             handlers.push(on$1('load', () => {
                 wrappedEmit(wrapEvent({
-                    type: EventType.Load,
+                    type: EventType$1.Load,
                     data: {},
                 }));
                 init();
@@ -11299,7 +11530,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,
@@ -11317,6 +11548,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',
@@ -11470,20 +12170,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 */
@@ -11497,6 +12196,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);
+  }
 }
 
 /**
@@ -11604,11 +12319,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';
   }
 
   /**
@@ -11631,13 +12355,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);
@@ -11650,6 +12371,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.
    */
@@ -11663,15 +12396,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');
-  }
 }
 
 /**
@@ -11689,6 +12417,11 @@ class EventBufferProxy  {
     this._ensureWorkerIsLoadedPromise = this._ensureWorkerIsLoaded();
   }
 
+  /** @inheritdoc */
+   get type() {
+    return this._used.type;
+  }
+
   /** @inheritDoc */
    get hasEvents() {
     return this._used.hasEvents;
@@ -11700,13 +12433,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 */
@@ -11781,6 +12524,31 @@ function createEventBuffer({ useCompression }) {
   return new EventBufferArray();
 }
 
+/**
+ * Removes the session from Session Storage and unsets session in replay instance
+ */
+function clearSession(replay) {
+  deleteSession();
+  replay.session = undefined;
+}
+
+/**
+ * Deletes a session from storage
+ */
+function deleteSession() {
+  const hasSessionStorage = 'sessionStorage' in WINDOW;
+
+  if (!hasSessionStorage) {
+    return;
+  }
+
+  try {
+    WINDOW.sessionStorage.removeItem(REPLAY_SESSION_KEY);
+  } catch (e) {
+    // Ignore potential SecurityError exceptions
+  }
+}
+
 /**
  * Given an initial timestamp and an expiry duration, checks to see if current
  * time should be considered as expired.
@@ -11811,11 +12579,26 @@ function isSessionExpired(session, timeouts, targetTime = +new Date()) {
     // First, check that maximum session length has not been exceeded
     isExpired(session.started, timeouts.maxSessionLife, targetTime) ||
     // check that the idle timeout has not been exceeded (i.e. user has
-    // performed an action within the last `idleTimeout` ms)
-    isExpired(session.lastActivity, timeouts.sessionIdle, targetTime)
+    // performed an action within the last `sessionIdleExpire` ms)
+    isExpired(session.lastActivity, timeouts.sessionIdleExpire, targetTime)
   );
 }
 
+/**
+ * Given a sample rate, returns true if replay should be sampled.
+ *
+ * 1.0 = 100% sampling
+ * 0.0 = 0% sampling
+ */
+function isSampled(sampleRate) {
+  if (sampleRate === undefined) {
+    return false;
+  }
+
+  // Math.random() returns a number in range of 0 to 1 (inclusive of 0, but not 1)
+  return Math.random() < sampleRate;
+}
+
 /**
  * Save a session to session storage.
  */
@@ -11832,21 +12615,6 @@ function saveSession(session) {
   }
 }
 
-/**
- * Given a sample rate, returns true if replay should be sampled.
- *
- * 1.0 = 100% sampling
- * 0.0 = 0% sampling
- */
-function isSampled(sampleRate) {
-  if (sampleRate === undefined) {
-    return false;
-  }
-
-  // Math.random() returns a number in range of 0 to 1 (inclusive of 0, but not 1)
-  return Math.random() < sampleRate;
-}
-
 /**
  * Get a session with defaults & applied sampling.
  */
@@ -11865,14 +12633,15 @@ function makeSession(session) {
     lastActivity,
     segmentId,
     sampled,
+    shouldRefresh: true,
   };
 }
 
 /**
  * Get the sampled status for a session based on sample rates & current sampled status.
  */
-function getSessionSampleType(sessionSampleRate, errorSampleRate) {
-  return isSampled(sessionSampleRate) ? 'session' : isSampled(errorSampleRate) ? 'error' : false;
+function getSessionSampleType(sessionSampleRate, allowBuffering) {
+  return isSampled(sessionSampleRate) ? 'session' : allowBuffering ? 'buffer' : false;
 }
 
 /**
@@ -11880,8 +12649,8 @@ function getSessionSampleType(sessionSampleRate, errorSampleRate) {
  * that all replays will be saved to as attachments. Currently, we only expect
  * one of these Sentry events per "replay session".
  */
-function createSession({ sessionSampleRate, errorSampleRate, stickySession = false }) {
-  const sampled = getSessionSampleType(sessionSampleRate, errorSampleRate);
+function createSession({ sessionSampleRate, allowBuffering, stickySession = false }) {
+  const sampled = getSessionSampleType(sessionSampleRate, allowBuffering);
   const session = makeSession({
     sampled,
   });
@@ -11929,7 +12698,7 @@ function getSession({
   currentSession,
   stickySession,
   sessionSampleRate,
-  errorSampleRate,
+  allowBuffering,
 }) {
   // If session exists and is passed, use it instead of always hitting session storage
   const session = currentSession || (stickySession && fetchSession());
@@ -11942,8 +12711,9 @@ function getSession({
 
     if (!isExpired) {
       return { type: 'saved', session };
-    } else if (session.sampled === 'error') {
-      // Error samples should not be re-created when expired, but instead we stop when the replay is done
+    } else if (!session.shouldRefresh) {
+      // In this case, stop
+      // This is the case if we have an error session that is completed (=triggered an error)
       const discardedSession = makeSession({ sampled: false });
       return { type: 'new', session: discardedSession };
     } else {
@@ -11955,65 +12725,12 @@ function getSession({
   const newSession = createSession({
     stickySession,
     sessionSampleRate,
-    errorSampleRate,
+    allowBuffering,
   });
 
   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.sessionIdle < 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);
-    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;
@@ -12063,31 +12780,21 @@ 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 === 'error' &&
-      event.exception &&
-      event.message !== UNABLE_TO_SEND_REPLAY // ignore this error because otherwise we could loop indefinitely with trying to capture replay and failing
-    ) {
-      setTimeout(async () => {
-        // 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
-        // than the session replay.
-        await replay.flushImmediate();
-
-        if (replay.stopRecording()) {
-          // Reset all "capture on error" configuration before
-          // starting a new recording
-          replay.recordingMode = 'session';
-          replay.startRecording();
-        }
+    if (replay.recordingMode === 'buffer' && event.tags && event.tags.replayId) {
+      setTimeout(() => {
+        // Capture current event buffer as new replay
+        void replay.sendBufferedReplayOrFlush();
       });
     }
   };
@@ -12109,166 +12816,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',
-        payload: breadcrumb,
-      },
-    });
-
-    // 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.
  */
@@ -12292,6 +12839,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)`.
  */
@@ -12321,8 +12892,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() };
     }
 
@@ -12372,7 +12951,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',
@@ -12521,12 +13100,14 @@ function handleFetchSpanListener(replay) {
 function handleXhr(handlerData) {
   const { startTimestamp, endTimestamp, xhr } = handlerData;
 
-  if (!startTimestamp || !endTimestamp || !xhr.__sentry_xhr__) {
+  const sentryXhrData = xhr[SENTRY_XHR_DATA_KEY];
+
+  if (!startTimestamp || !endTimestamp || !sentryXhrData) {
     return null;
   }
 
   // This is only used as a fallback, so we know the body sizes are never set here
-  const { method, url, status_code: statusCode } = xhr.__sentry_xhr__;
+  const { method, url, status_code: statusCode } = sentryXhrData;
 
   if (url === undefined) {
     return null;
@@ -12559,6 +13140,393 @@ function handleXhrSpanListener(replay) {
   };
 }
 
+const OBJ = 10;
+const OBJ_KEY = 11;
+const OBJ_KEY_STR = 12;
+const OBJ_VAL = 13;
+const OBJ_VAL_STR = 14;
+const OBJ_VAL_COMPLETED = 15;
+
+const ARR = 20;
+const ARR_VAL = 21;
+const ARR_VAL_STR = 22;
+const ARR_VAL_COMPLETED = 23;
+
+const ALLOWED_PRIMITIVES = ['true', 'false', 'null'];
+
+/**
+ * Complete an incomplete JSON string.
+ * This will ensure that the last element always has a `"~~"` to indicate it was truncated.
+ * For example, `[1,2,` will be completed to `[1,2,"~~"]`
+ * and `{"aa":"b` will be completed to `{"aa":"b~~"}`
+ */
+function completeJson(incompleteJson, stack) {
+  if (!stack.length) {
+    return incompleteJson;
+  }
+
+  let json = incompleteJson;
+
+  // Most checks are only needed for the last step in the stack
+  const lastPos = stack.length - 1;
+  const lastStep = stack[lastPos];
+
+  json = _fixLastStep(json, lastStep);
+
+  // Complete remaining steps - just add closing brackets
+  for (let i = lastPos; i >= 0; i--) {
+    const step = stack[i];
+
+    switch (step) {
+      case OBJ:
+        json = `${json}}`;
+        break;
+      case ARR:
+        json = `${json}]`;
+        break;
+    }
+  }
+
+  return json;
+}
+
+function _fixLastStep(json, lastStep) {
+  switch (lastStep) {
+    // Object cases
+    case OBJ:
+      return `${json}"~~":"~~"`;
+    case OBJ_KEY:
+      return `${json}:"~~"`;
+    case OBJ_KEY_STR:
+      return `${json}~~":"~~"`;
+    case OBJ_VAL:
+      return _maybeFixIncompleteObjValue(json);
+    case OBJ_VAL_STR:
+      return `${json}~~"`;
+    case OBJ_VAL_COMPLETED:
+      return `${json},"~~":"~~"`;
+
+    // Array cases
+    case ARR:
+      return `${json}"~~"`;
+    case ARR_VAL:
+      return _maybeFixIncompleteArrValue(json);
+    case ARR_VAL_STR:
+      return `${json}~~"`;
+    case ARR_VAL_COMPLETED:
+      return `${json},"~~"`;
+  }
+
+  return json;
+}
+
+function _maybeFixIncompleteArrValue(json) {
+  const pos = _findLastArrayDelimiter(json);
+
+  if (pos > -1) {
+    const part = json.slice(pos + 1);
+
+    if (ALLOWED_PRIMITIVES.includes(part.trim())) {
+      return `${json},"~~"`;
+    }
+
+    // Everything else is replaced with `"~~"`
+    return `${json.slice(0, pos + 1)}"~~"`;
+  }
+
+  // fallback, this shouldn't happen, to be save
+  return json;
+}
+
+function _findLastArrayDelimiter(json) {
+  for (let i = json.length - 1; i >= 0; i--) {
+    const char = json[i];
+
+    if (char === ',' || char === '[') {
+      return i;
+    }
+  }
+
+  return -1;
+}
+
+function _maybeFixIncompleteObjValue(json) {
+  const startPos = json.lastIndexOf(':');
+
+  const part = json.slice(startPos + 1);
+
+  if (ALLOWED_PRIMITIVES.includes(part.trim())) {
+    return `${json},"~~":"~~"`;
+  }
+
+  // Everything else is replaced with `"~~"`
+  // This also means we do not have incomplete numbers, e.g `[1` is replaced with `["~~"]`
+  return `${json.slice(0, startPos + 1)}"~~"`;
+}
+
+/**
+ * Evaluate an (incomplete) JSON string.
+ */
+function evaluateJson(json) {
+  const stack = [];
+
+  for (let pos = 0; pos < json.length; pos++) {
+    _evaluateJsonPos(stack, json, pos);
+  }
+
+  return stack;
+}
+
+function _evaluateJsonPos(stack, json, pos) {
+  const curStep = stack[stack.length - 1];
+
+  const char = json[pos];
+
+  const whitespaceRegex = /\s/;
+
+  if (whitespaceRegex.test(char)) {
+    return;
+  }
+
+  if (char === '"' && !_isEscaped(json, pos)) {
+    _handleQuote(stack, curStep);
+    return;
+  }
+
+  switch (char) {
+    case '{':
+      _handleObj(stack, curStep);
+      break;
+    case '[':
+      _handleArr(stack, curStep);
+      break;
+    case ':':
+      _handleColon(stack, curStep);
+      break;
+    case ',':
+      _handleComma(stack, curStep);
+      break;
+    case '}':
+      _handleObjClose(stack, curStep);
+      break;
+    case ']':
+      _handleArrClose(stack, curStep);
+      break;
+  }
+}
+
+function _handleQuote(stack, curStep) {
+  // End of obj value
+  if (curStep === OBJ_VAL_STR) {
+    stack.pop();
+    stack.push(OBJ_VAL_COMPLETED);
+    return;
+  }
+
+  // End of arr value
+  if (curStep === ARR_VAL_STR) {
+    stack.pop();
+    stack.push(ARR_VAL_COMPLETED);
+    return;
+  }
+
+  // Start of obj value
+  if (curStep === OBJ_VAL) {
+    stack.push(OBJ_VAL_STR);
+    return;
+  }
+
+  // Start of arr value
+  if (curStep === ARR_VAL) {
+    stack.push(ARR_VAL_STR);
+    return;
+  }
+
+  // Start of obj key
+  if (curStep === OBJ) {
+    stack.push(OBJ_KEY_STR);
+    return;
+  }
+
+  // End of obj key
+  if (curStep === OBJ_KEY_STR) {
+    stack.pop();
+    stack.push(OBJ_KEY);
+    return;
+  }
+}
+
+function _handleObj(stack, curStep) {
+  // Initial object
+  if (!curStep) {
+    stack.push(OBJ);
+    return;
+  }
+
+  // New object as obj value
+  if (curStep === OBJ_VAL) {
+    stack.push(OBJ);
+    return;
+  }
+
+  // New object as array element
+  if (curStep === ARR_VAL) {
+    stack.push(OBJ);
+  }
+
+  // New object as first array element
+  if (curStep === ARR) {
+    stack.push(OBJ);
+    return;
+  }
+}
+
+function _handleArr(stack, curStep) {
+  // Initial array
+  if (!curStep) {
+    stack.push(ARR);
+    stack.push(ARR_VAL);
+    return;
+  }
+
+  // New array as obj value
+  if (curStep === OBJ_VAL) {
+    stack.push(ARR);
+    stack.push(ARR_VAL);
+    return;
+  }
+
+  // New array as array element
+  if (curStep === ARR_VAL) {
+    stack.push(ARR);
+    stack.push(ARR_VAL);
+  }
+
+  // New array as first array element
+  if (curStep === ARR) {
+    stack.push(ARR);
+    stack.push(ARR_VAL);
+    return;
+  }
+}
+
+function _handleColon(stack, curStep) {
+  if (curStep === OBJ_KEY) {
+    stack.pop();
+    stack.push(OBJ_VAL);
+  }
+}
+
+function _handleComma(stack, curStep) {
+  // Comma after obj value
+  if (curStep === OBJ_VAL) {
+    stack.pop();
+    return;
+  }
+  if (curStep === OBJ_VAL_COMPLETED) {
+    // Pop OBJ_VAL_COMPLETED & OBJ_VAL
+    stack.pop();
+    stack.pop();
+    return;
+  }
+
+  // Comma after arr value
+  if (curStep === ARR_VAL) {
+    // do nothing - basically we'd pop ARR_VAL but add it right back
+    return;
+  }
+
+  if (curStep === ARR_VAL_COMPLETED) {
+    // Pop ARR_VAL_COMPLETED
+    stack.pop();
+
+    // basically we'd pop ARR_VAL but add it right back
+    return;
+  }
+}
+
+function _handleObjClose(stack, curStep) {
+  // Empty object {}
+  if (curStep === OBJ) {
+    stack.pop();
+  }
+
+  // Object with element
+  if (curStep === OBJ_VAL) {
+    // Pop OBJ_VAL, OBJ
+    stack.pop();
+    stack.pop();
+  }
+
+  // Obj with element
+  if (curStep === OBJ_VAL_COMPLETED) {
+    // Pop OBJ_VAL_COMPLETED, OBJ_VAL, OBJ
+    stack.pop();
+    stack.pop();
+    stack.pop();
+  }
+
+  // if was obj value, complete it
+  if (stack[stack.length - 1] === OBJ_VAL) {
+    stack.push(OBJ_VAL_COMPLETED);
+  }
+
+  // if was arr value, complete it
+  if (stack[stack.length - 1] === ARR_VAL) {
+    stack.push(ARR_VAL_COMPLETED);
+  }
+}
+
+function _handleArrClose(stack, curStep) {
+  // Empty array []
+  if (curStep === ARR) {
+    stack.pop();
+  }
+
+  // Array with element
+  if (curStep === ARR_VAL) {
+    // Pop ARR_VAL, ARR
+    stack.pop();
+    stack.pop();
+  }
+
+  // Array with element
+  if (curStep === ARR_VAL_COMPLETED) {
+    // Pop ARR_VAL_COMPLETED, ARR_VAL, ARR
+    stack.pop();
+    stack.pop();
+    stack.pop();
+  }
+
+  // if was obj value, complete it
+  if (stack[stack.length - 1] === OBJ_VAL) {
+    stack.push(OBJ_VAL_COMPLETED);
+  }
+
+  // if was arr value, complete it
+  if (stack[stack.length - 1] === ARR_VAL) {
+    stack.push(ARR_VAL_COMPLETED);
+  }
+}
+
+function _isEscaped(str, pos) {
+  const previousChar = str[pos - 1];
+
+  return previousChar === '\\' && !_isEscaped(str, pos - 1);
+}
+
+/* eslint-disable max-lines */
+
+/**
+ * Takes an incomplete JSON string, and returns a hopefully valid JSON string.
+ * Note that this _can_ fail, so you should check the return value is valid JSON.
+ */
+function fixJson(incompleteJson) {
+  const stack = evaluateJson(incompleteJson);
+
+  return completeJson(incompleteJson, stack);
+}
+
 /** Get the size of a body. */
 function getBodySize(
   body,
@@ -12652,51 +13620,68 @@ function makeNetworkReplayBreadcrumb(
   return result;
 }
 
-/** Get either a JSON network body, or a text representation. */
-function getNetworkBody(bodyText) {
-  if (!bodyText) {
-    return;
-  }
-
-  try {
-    return JSON.parse(bodyText);
-  } catch (e2) {
-    // return text
-  }
-
-  return bodyText;
+/** Build the request or response part of a replay network breadcrumb that was skipped. */
+function buildSkippedNetworkRequestOrResponse(bodySize) {
+  return {
+    headers: {},
+    size: bodySize,
+    _meta: {
+      warnings: ['URL_SKIPPED'],
+    },
+  };
 }
 
 /** Build the request or response part of a replay network breadcrumb. */
 function buildNetworkRequestOrResponse(
+  headers,
   bodySize,
   body,
 ) {
-  if (!bodySize) {
+  if (!bodySize && Object.keys(headers).length === 0) {
     return undefined;
   }
 
+  if (!bodySize) {
+    return {
+      headers,
+    };
+  }
+
   if (!body) {
     return {
+      headers,
       size: bodySize,
     };
   }
 
   const info = {
+    headers,
     size: bodySize,
   };
 
-  if (bodySize < NETWORK_BODY_MAX_SIZE) {
-    info.body = body;
-  } else {
+  const { body: normalizedBody, warnings } = normalizeNetworkBody(body);
+  info.body = normalizedBody;
+  if (warnings.length > 0) {
     info._meta = {
-      errors: ['MAX_BODY_SIZE_EXCEEDED'],
+      warnings,
     };
   }
 
   return info;
 }
 
+/** Filter a set of headers */
+function getAllowedHeaders(headers, allowedHeaders) {
+  return Object.keys(headers).reduce((filteredHeaders, key) => {
+    const normalizedKey = key.toLowerCase();
+    // Avoid putting empty strings into the headers
+    if (allowedHeaders.includes(normalizedKey) && headers[key]) {
+      filteredHeaders[normalizedKey] = headers[key];
+    }
+    return filteredHeaders;
+  }, {});
+}
+
 function _serializeFormData(formData) {
   // This is a bit simplified, but gives us a decent estimate
   // This converts e.g. { name: 'Anne Smith', age: 13 } to 'name=Anne+Smith&age=13'
@@ -12704,6 +13689,78 @@ function _serializeFormData(formData) {
   return new URLSearchParams(formData).toString();
 }
 
+function normalizeNetworkBody(body)
+
+ {
+  if (!body || typeof body !== 'string') {
+    return {
+      body,
+      warnings: [],
+    };
+  }
+
+  const exceedsSizeLimit = body.length > NETWORK_BODY_MAX_SIZE;
+
+  if (_strIsProbablyJson(body)) {
+    try {
+      const json = exceedsSizeLimit ? fixJson(body.slice(0, NETWORK_BODY_MAX_SIZE)) : body;
+      const normalizedBody = JSON.parse(json);
+      return {
+        body: normalizedBody,
+        warnings: exceedsSizeLimit ? ['JSON_TRUNCATED'] : [],
+      };
+    } catch (e3) {
+      return {
+        body: exceedsSizeLimit ? `${body.slice(0, NETWORK_BODY_MAX_SIZE)}…` : body,
+        warnings: exceedsSizeLimit ? ['INVALID_JSON', 'TEXT_TRUNCATED'] : ['INVALID_JSON'],
+      };
+    }
+  }
+
+  return {
+    body: exceedsSizeLimit ? `${body.slice(0, NETWORK_BODY_MAX_SIZE)}…` : body,
+    warnings: exceedsSizeLimit ? ['TEXT_TRUNCATED'] : [],
+  };
+}
+
+function _strIsProbablyJson(str) {
+  const first = str[0];
+  const last = str[str.length - 1];
+
+  // Simple check: If this does not start & end with {} or [], it's not JSON
+  return (first === '[' && last === ']') || (first === '{' && last === '}');
+}
+
+/** Match an URL against a list of strings/Regex. */
+function urlMatches(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;
+}
+
 /**
  * Capture a fetch breadcrumb to a replay.
  * This adds additional data (where approriate).
@@ -12711,7 +13768,9 @@ function _serializeFormData(formData) {
 async function captureFetchBreadcrumbToReplay(
   breadcrumb,
   hint,
-  options,
+  options
+
+,
 ) {
   try {
     const data = await _prepareFetchData(breadcrumb, hint, options);
@@ -12738,6 +13797,7 @@ function enrichFetchBreadcrumb(
 
   const body = _getFetchRequestArgBody(input);
   const reqSize = getBodySize(body, options.textEncoder);
+
   const resSize = response ? parseContentLengthHeader(response.headers.get('content-length')) : undefined;
 
   if (reqSize !== undefined) {
@@ -12751,97 +13811,109 @@ function enrichFetchBreadcrumb(
 async function _prepareFetchData(
   breadcrumb,
   hint,
-  options,
+  options
+
+,
 ) {
   const { startTimestamp, endTimestamp } = hint;
 
   const {
     url,
     method,
-    status_code: statusCode,
+    status_code: statusCode = 0,
     request_body_size: requestBodySize,
     response_body_size: responseBodySize,
   } = breadcrumb.data;
 
-  const request = _getRequestInfo(options, hint.input, requestBodySize);
-  const response = await _getResponseInfo(options, hint.response, responseBodySize);
+  const captureDetails = urlMatches(url, options.networkDetailAllowUrls);
+
+  const request = captureDetails
+    ? _getRequestInfo(options, hint.input, requestBodySize)
+    : buildSkippedNetworkRequestOrResponse(requestBodySize);
+  const response = await _getResponseInfo(captureDetails, options, hint.response, responseBodySize);
 
   return {
     startTimestamp,
     endTimestamp,
     url,
     method,
-    statusCode: statusCode || 0,
+    statusCode,
     request,
     response,
   };
 }
 
 function _getRequestInfo(
-  { captureBodies },
+  { networkCaptureBodies, networkRequestHeaders },
   input,
   requestBodySize,
 ) {
-  if (!captureBodies) {
-    return buildNetworkRequestOrResponse(requestBodySize, undefined);
+  const headers = getRequestHeaders(input, networkRequestHeaders);
+
+  if (!networkCaptureBodies) {
+    return buildNetworkRequestOrResponse(headers, requestBodySize, undefined);
   }
 
   // We only want to transmit string or string-like bodies
   const requestBody = _getFetchRequestArgBody(input);
-  const body = getNetworkBody(getBodyString(requestBody));
-  return buildNetworkRequestOrResponse(requestBodySize, body);
+  const bodyStr = getBodyString(requestBody);
+  return buildNetworkRequestOrResponse(headers, requestBodySize, bodyStr);
 }
 
 async function _getResponseInfo(
-  { captureBodies, textEncoder },
+  captureDetails,
+  {
+    networkCaptureBodies,
+    textEncoder,
+    networkResponseHeaders,
+  }
+
+,
   response,
   responseBodySize,
 ) {
-  if (!captureBodies && responseBodySize !== undefined) {
-    return buildNetworkRequestOrResponse(responseBodySize, undefined);
+  if (!captureDetails && responseBodySize !== undefined) {
+    return buildSkippedNetworkRequestOrResponse(responseBodySize);
+  }
+
+  const headers = getAllHeaders(response.headers, networkResponseHeaders);
+
+  if (!networkCaptureBodies && responseBodySize !== undefined) {
+    return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
   }
 
   // Only clone the response if we need to
   try {
     // We have to clone this, as the body can only be read once
     const res = response.clone();
-    const { body, bodyText } = await _parseFetchBody(res);
+    const bodyText = await _parseFetchBody(res);
 
     const size =
       bodyText && bodyText.length && responseBodySize === undefined
         ? getBodySize(bodyText, textEncoder)
         : responseBodySize;
 
-    if (captureBodies) {
-      return buildNetworkRequestOrResponse(size, body);
+    if (!captureDetails) {
+      return buildSkippedNetworkRequestOrResponse(size);
     }
 
-    return buildNetworkRequestOrResponse(size, undefined);
+    if (networkCaptureBodies) {
+      return buildNetworkRequestOrResponse(headers, size, bodyText);
+    }
+
+    return buildNetworkRequestOrResponse(headers, size, undefined);
   } catch (e) {
     // fallback
-    return buildNetworkRequestOrResponse(responseBodySize, undefined);
+    return buildNetworkRequestOrResponse(headers, responseBodySize, undefined);
   }
 }
 
-async function _parseFetchBody(
-  response,
-) {
-  let bodyText;
-
+async function _parseFetchBody(response) {
   try {
-    bodyText = await response.text();
+    return await response.text();
   } catch (e2) {
-    return {};
-  }
-
-  try {
-    const body = JSON.parse(bodyText);
-    return { body, bodyText };
-  } catch (e3) {
-    // just send bodyText
+    return undefined;
   }
-
-  return { bodyText, body: bodyText };
 }
 
 function _getFetchRequestArgBody(fetchArgs = []) {
@@ -12853,6 +13925,56 @@ function _getFetchRequestArgBody(fetchArgs = []) {
   return (fetchArgs[1] ).body;
 }
 
+function getAllHeaders(headers, allowedHeaders) {
+  const allHeaders = {};
+
+  allowedHeaders.forEach(header => {
+    if (headers.get(header)) {
+      allHeaders[header] = headers.get(header) ;
+    }
+  });
+
+  return allHeaders;
+}
+
+function getRequestHeaders(fetchArgs, allowedHeaders) {
+  if (fetchArgs.length === 1 && typeof fetchArgs[0] !== 'string') {
+    return getHeadersFromOptions(fetchArgs[0] , allowedHeaders);
+  }
+
+  if (fetchArgs.length === 2) {
+    return getHeadersFromOptions(fetchArgs[1] , allowedHeaders);
+  }
+
+  return {};
+}
+
+function getHeadersFromOptions(
+  input,
+  allowedHeaders,
+) {
+  if (!input) {
+    return {};
+  }
+
+  const headers = input.headers;
+
+  if (!headers) {
+    return {};
+  }
+
+  if (headers instanceof Headers) {
+    return getAllHeaders(headers, allowedHeaders);
+  }
+
+  // We do not support this, as it is not really documented (anymore?)
+  if (Array.isArray(headers)) {
+    return {};
+  }
+
+  return getAllowedHeaders(headers, allowedHeaders);
+}
+
 /**
  * Capture an XHR breadcrumb to a replay.
  * This adds additional data (where approriate).
@@ -12903,12 +14025,12 @@ function _prepareXhrData(
   hint,
   options,
 ) {
-  const { startTimestamp, endTimestamp, input } = hint;
+  const { startTimestamp, endTimestamp, input, xhr } = hint;
 
   const {
     url,
     method,
-    status_code: statusCode,
+    status_code: statusCode = 0,
     request_body_size: requestBodySize,
     response_body_size: responseBodySize,
   } = breadcrumb.data;
@@ -12917,13 +14039,35 @@ function _prepareXhrData(
     return null;
   }
 
+  if (!urlMatches(url, options.networkDetailAllowUrls)) {
+    const request = buildSkippedNetworkRequestOrResponse(requestBodySize);
+    const response = buildSkippedNetworkRequestOrResponse(responseBodySize);
+    return {
+      startTimestamp,
+      endTimestamp,
+      url,
+      method,
+      statusCode,
+      request,
+      response,
+    };
+  }
+
+  const xhrInfo = xhr[SENTRY_XHR_DATA_KEY];
+  const networkRequestHeaders = xhrInfo
+    ? getAllowedHeaders(xhrInfo.request_headers, options.networkRequestHeaders)
+    : {};
+  const networkResponseHeaders = getAllowedHeaders(getResponseHeaders(xhr), options.networkResponseHeaders);
+
   const request = buildNetworkRequestOrResponse(
+    networkRequestHeaders,
     requestBodySize,
-    options.captureBodies ? getNetworkBody(getBodyString(input)) : undefined,
+    options.networkCaptureBodies ? getBodyString(input) : undefined,
   );
   const response = buildNetworkRequestOrResponse(
+    networkResponseHeaders,
     responseBodySize,
-    options.captureBodies ? getNetworkBody(hint.xhr.responseText) : undefined,
+    options.networkCaptureBodies ? hint.xhr.responseText : undefined,
   );
 
   return {
@@ -12931,12 +14075,26 @@ function _prepareXhrData(
     endTimestamp,
     url,
     method,
-    statusCode: statusCode || 0,
+    statusCode,
     request,
     response,
   };
 }
 
+function getResponseHeaders(xhr) {
+  const headers = xhr.getAllResponseHeaders();
+
+  if (!headers) {
+    return {};
+  }
+
+  return headers.split('\r\n').reduce((acc, line) => {
+    const [key, value] = line.split(': ');
+    acc[key.toLowerCase()] = value;
+    return acc;
+  }, {});
+}
+
 /**
  * This method does two things:
  * - It enriches the regular XHR/fetch breadcrumbs with request/response size data
@@ -12949,10 +14107,16 @@ function handleNetworkBreadcrumbs(replay) {
   try {
     const textEncoder = new TextEncoder();
 
+    const { networkDetailAllowUrls, networkCaptureBodies, networkRequestHeaders, networkResponseHeaders } =
+      replay.getOptions();
+
     const options = {
       replay,
       textEncoder,
-      captureBodies: replay.getOptions()._experiments.captureNetworkBodies || false,
+      networkDetailAllowUrls,
+      networkCaptureBodies,
+      networkRequestHeaders,
+      networkResponseHeaders,
     };
 
     if (client && client.on) {
@@ -13060,9 +14224,66 @@ function handleScope(scope) {
     return null;
   }
 
+  if (newBreadcrumb.category === 'console') {
+    return normalizeConsoleBreadcrumb(newBreadcrumb);
+  }
+
   return createBreadcrumb(newBreadcrumb);
 }
 
+/** exported for tests only */
+function normalizeConsoleBreadcrumb(breadcrumb) {
+  const args = breadcrumb.data && breadcrumb.data.arguments;
+
+  if (!Array.isArray(args) || args.length === 0) {
+    return createBreadcrumb(breadcrumb);
+  }
+
+  let isTruncated = false;
+
+  // Avoid giant args captures
+  const normalizedArgs = args.map(arg => {
+    if (!arg) {
+      return arg;
+    }
+    if (typeof arg === 'string') {
+      if (arg.length > CONSOLE_ARG_MAX_SIZE) {
+        isTruncated = true;
+        return `${arg.slice(0, CONSOLE_ARG_MAX_SIZE)}…`;
+      }
+
+      return arg;
+    }
+    if (typeof arg === 'object') {
+      try {
+        const normalizedArg = normalize(arg, 7);
+        const stringified = JSON.stringify(normalizedArg);
+        if (stringified.length > CONSOLE_ARG_MAX_SIZE) {
+          const fixedJson = fixJson(stringified.slice(0, CONSOLE_ARG_MAX_SIZE));
+          const json = JSON.parse(fixedJson);
+          // We only set this after JSON.parse() was successfull, so we know we didn't run into `catch`
+          isTruncated = true;
+          return json;
+        }
+        return normalizedArg;
+      } catch (e) {
+        // fall back to default
+      }
+    }
+
+    return arg;
+  });
+
+  return createBreadcrumb({
+    ...breadcrumb,
+    data: {
+      ...breadcrumb.data,
+      arguments: normalizedArgs,
+      ...(isTruncated ? { _meta: { warnings: ['CONSOLE_ARG_TRUNCATED'] } } : {}),
+    },
+  });
+}
+
 /**
  * Add global listeners that cannot be removed.
  */
@@ -13087,7 +14308,8 @@ function addGlobalListeners(replay) {
     client.on('afterSendEvent', handleAfterSendEvent(replay));
     client.on('createDsc', (dsc) => {
       const replayId = replay.getSessionId();
-      if (replayId) {
+      // 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;
       }
     });
@@ -13367,6 +14589,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.
  *
@@ -13395,7 +14634,7 @@ function getHandleRecordingEmit(replay) {
       // when an error occurs. Clear any state that happens before this current
       // checkout. This needs to happen before `addEvent()` which updates state
       // dependent on this reset.
-      if (replay.recordingMode === 'error' && isCheckout) {
+      if (replay.recordingMode === 'buffer' && isCheckout) {
         replay.setInitialState();
       }
 
@@ -13409,6 +14648,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
@@ -13419,10 +14666,10 @@ function getHandleRecordingEmit(replay) {
         return true;
       }
 
-      // See note above re: session start needs to reflect the most recent
-      // checkout.
-      if (replay.recordingMode === 'error' && 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;
 
@@ -13446,6 +14693,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.
@@ -13557,11 +14844,9 @@ async function sendReplayRequest({
   recordingData,
   replayId,
   segmentId: segment_id,
-  includeReplayStartTimestamp,
   eventContext,
   timestamp,
   session,
-  options,
 }) {
   const preparedRecordingData = prepareRecordingData({
     recordingData,
@@ -13583,9 +14868,8 @@ async function sendReplayRequest({
   }
 
   const baseEvent = {
-    // @ts-ignore private api
     type: REPLAY_EVENT_NAME,
-    ...(includeReplayStartTimestamp ? { replay_start_timestamp: initialTimestamp / 1000 } : {}),
+    replay_start_timestamp: initialTimestamp / 1000,
     timestamp: timestamp / 1000,
     error_ids: errorIds,
     trace_ids: traceIds,
@@ -13604,15 +14888,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:
   {
@@ -13643,10 +14918,6 @@ async function sendReplayRequest({
       },
       "sdkProcessingMetadata": {},
       "contexts": {
-        "replay": {
-          "session_sample_rate": 1,
-          "error_sample_rate": 0,
-        },
       },
   }
   */
@@ -13772,9 +15043,11 @@ class ReplayContainer  {
    __init2() {this.performanceEvents = [];}
 
   /**
-   * Recording can happen in one of two modes:
-   * * session: Record the whole session, sending it continuously
-   * * error: Always keep the last 60s of recording, and when an error occurs, send it immediately
+   * Recording can happen in one of three modes:
+   *   - session: Record the whole session, sending it continuously
+   *   - buffer: Always keep the last 60s of recording, requires:
+   *     - having replaysOnErrorSampleRate > 0 to capture replay when an error occurs
+   *     - or calling `flush()` to send the replay
    */
    __init3() {this.recordingMode = 'session';}
 
@@ -13783,7 +15056,8 @@ class ReplayContainer  {
    * @hidden
    */
     __init4() {this.timeouts = {
-    sessionIdle: SESSION_IDLE_DURATION,
+    sessionIdlePause: SESSION_IDLE_PAUSE_DURATION,
+    sessionIdleExpire: SESSION_IDLE_EXPIRE_DURATION,
     maxSessionLife: MAX_SESSION_LIFE,
   }; }
 
@@ -13827,7 +15101,6 @@ class ReplayContainer  {
     errorIds: new Set(),
     traceIds: new Set(),
     urls: [],
-    earliestEvent: null,
     initialTimestamp: Date.now(),
     initialUrl: '',
   };}
@@ -13837,7 +15110,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;
 
@@ -13867,49 +15140,102 @@ class ReplayContainer  {
   }
 
   /**
-   * Initializes the plugin.
-   *
-   * Creates or loads a session, attaches listeners to varying events (DOM,
-   * _performanceObserver, Recording, Sentry SDK, etc)
+   * Initializes the plugin based on sampling configuration. Should not be
+   * called outside of constructor.
    */
-   start() {
-    this.setInitialState();
+   initializeSampling() {
+    const { errorSampleRate, sessionSampleRate } = this._options;
 
-    if (!this._loadAndCheckSession()) {
+    // If neither sample rate is > 0, then do nothing - user will need to call one of
+    // `start()` or `startBuffering` themselves.
+    if (errorSampleRate <= 0 && sessionSampleRate <= 0) {
       return;
     }
 
-    // If there is no session, then something bad has happened - can't continue
-    if (!this.session) {
-      this._handleException(new Error('No session found'));
+    // Otherwise if there is _any_ sample rate set, try to load an existing
+    // session, or create a new one.
+    const isSessionSampled = this._loadAndCheckSession();
+
+    if (!isSessionSampled) {
+      // This should only occur if `errorSampleRate` is 0 and was unsampled for
+      // session-based replay. In this case there is nothing to do.
       return;
     }
 
-    if (!this.session.sampled) {
-      // If session was not sampled, then we do not initialize the integration at all.
+    if (!this.session) {
+      // This should not happen, something wrong has occurred
+      this._handleException(new Error('Unable to initialize and create session'));
       return;
     }
 
-    // If session is sampled for errors, then we need to set the recordingMode
-    // to 'error', which will configure recording with different options.
-    if (this.session.sampled === 'error') {
-      this.recordingMode = 'error';
+    if (this.session.sampled && this.session.sampled !== 'session') {
+      // If not sampled as session-based, then recording mode will be `buffer`
+      // Note that we don't explicitly check if `sampled === 'buffer'` because we
+      // could have sessions from Session storage that are still `error` from
+      // prior SDK version.
+      this.recordingMode = 'buffer';
     }
 
-    // setup() is generally called on page load or manually - in both cases we
-    // should treat it as an activity
-    this._updateSessionActivity();
+    this._initializeRecording();
+  }
 
-    this.eventBuffer = createEventBuffer({
-      useCompression: this._options.useCompression,
+  /**
+   * Start a replay regardless of sampling rate. Calling this will always
+   * create a new session. Will throw an error if replay is already in progress.
+   *
+   * Creates or loads a session, attaches listeners to varying events (DOM,
+   * _performanceObserver, Recording, Sentry SDK, etc)
+   */
+   start() {
+    if (this._isEnabled && this.recordingMode === 'session') {
+      throw new Error('Replay recording is already in progress');
+    }
+
+    if (this._isEnabled && this.recordingMode === 'buffer') {
+      throw new Error('Replay buffering is in progress, call `flush()` to save the replay');
+    }
+
+    const previousSessionId = this.session && this.session.id;
+
+    const { session } = getSession({
+      timeouts: this.timeouts,
+      stickySession: Boolean(this._options.stickySession),
+      currentSession: this.session,
+      // This is intentional: create a new session-based replay when calling `start()`
+      sessionSampleRate: 1,
+      allowBuffering: false,
     });
 
-    this._addListeners();
+    session.previousSessionId = previousSessionId;
+    this.session = session;
 
-    // Need to set as enabled before we start recording, as `record()` can trigger a flush with a new checkout
-    this._isEnabled = true;
+    this._initializeRecording();
+  }
 
-    this.startRecording();
+  /**
+   * Start replay buffering. Buffers until `flush()` is called or, if
+   * `replaysOnErrorSampleRate` > 0, an error occurs.
+   */
+   startBuffering() {
+    if (this._isEnabled) {
+      throw new Error('Replay recording is already in progress');
+    }
+
+    const previousSessionId = this.session && this.session.id;
+
+    const { session } = getSession({
+      timeouts: this.timeouts,
+      stickySession: Boolean(this._options.stickySession),
+      currentSession: this.session,
+      sessionSampleRate: 0,
+      allowBuffering: true,
+    });
+
+    session.previousSessionId = previousSessionId;
+    this.session = session;
+
+    this.recordingMode = 'buffer';
+    this._initializeRecording();
   }
 
   /**
@@ -13924,7 +15250,7 @@ class ReplayContainer  {
         // When running in error sampling mode, we need to overwrite `checkoutEveryNms`
         // Without this, it would record forever, until an error happens, which we don't want
         // instead, we'll always keep the last 60 seconds of replay before an error happened
-        ...(this.recordingMode === 'error' && { checkoutEveryNms: ERROR_CHECKOUT_TIME }),
+        ...(this.recordingMode === 'buffer' && { checkoutEveryNms: BUFFER_CHECKOUT_TIME }),
         emit: getHandleRecordingEmit(this),
         onMutation: this._onMutationHandler,
       });
@@ -13935,17 +15261,18 @@ class ReplayContainer  {
 
   /**
    * Stops the recording, if it was running.
-   * Returns true if it was stopped, else false.
+   *
+   * Returns true if it was previously stopped, or is now stopped,
+   * otherwise false.
    */
    stopRecording() {
     try {
       if (this._stopRecording) {
         this._stopRecording();
         this._stopRecording = undefined;
-        return true;
       }
 
-      return false;
+      return true;
     } catch (err) {
       this._handleException(err);
       return false;
@@ -13956,7 +15283,7 @@ class ReplayContainer  {
    * Currently, this needs to be manually called (e.g. for tests). Sentry SDK
    * does not support a teardown
    */
-   stop(reason) {
+   async stop(reason) {
     if (!this._isEnabled) {
       return;
     }
@@ -13972,12 +15299,24 @@ class ReplayContainer  {
         log(msg);
       }
 
+      // We can't move `_isEnabled` after awaiting a flush, otherwise we can
+      // enter into an infinite loop when `stop()` is called while flushing.
       this._isEnabled = false;
       this._removeListeners();
       this.stopRecording();
+
+      this._debouncedFlush.cancel();
+      // See comment above re: `_isEnabled`, we "force" a flush, ignoring the
+      // `_isEnabled` state of the plugin since it was disabled above.
+      await this._flush({ force: true });
+
+      // After flush, destroy event buffer
       this.eventBuffer && this.eventBuffer.destroy();
       this.eventBuffer = null;
-      this._debouncedFlush.cancel();
+
+      // Clear session from session storage, note this means if a new session
+      // is started after, it will not have `previousSessionId`
+      clearSession(this);
     } catch (err) {
       this._handleException(err);
     }
@@ -14008,6 +15347,45 @@ class ReplayContainer  {
     this.startRecording();
   }
 
+  /**
+   * If not in "session" recording mode, flush event buffer which will create a new replay.
+   * Unless `continueRecording` is false, the replay will continue to record and
+   * behave as a "session"-based replay.
+   *
+   * Otherwise, queue up a flush.
+   */
+   async sendBufferedReplayOrFlush({ continueRecording = true } = {}) {
+    if (this.recordingMode === 'session') {
+      return this.flushImmediate();
+    }
+
+    // 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
+    // than the session replay.
+    await this.flushImmediate();
+
+    const hasStoppedRecording = this.stopRecording();
+
+    if (!continueRecording || !hasStoppedRecording) {
+      return;
+    }
+
+    // Re-start recording, but in "session" recording mode
+
+    // Reset all "capture on error" configuration before
+    // starting a new recording
+    this.recordingMode = 'session';
+
+    // Once this session ends, we do not want to refresh it
+    if (this.session) {
+      this.session.shouldRefresh = false;
+      this._maybeSaveSession();
+    }
+
+    this.startRecording();
+  }
+
   /**
    * We want to batch uploads of replay events. Save events only if
    * `<flushMinDelay>` milliseconds have elapsed since the last event
@@ -14017,12 +15395,12 @@ class ReplayContainer  {
    * processing and hand back control to caller.
    */
    addUpdate(cb) {
-    // We need to always run `cb` (e.g. in the case of `this.recordingMode == 'error'`)
+    // We need to always run `cb` (e.g. in the case of `this.recordingMode == 'buffer'`)
     const cbResult = cb();
 
     // If this option is turned on then we will only want to call `flush`
     // explicitly
-    if (this.recordingMode === 'error') {
+    if (this.recordingMode === 'buffer') {
       return;
     }
 
@@ -14094,12 +15472,12 @@ class ReplayContainer  {
     const oldSessionId = this.getSessionId();
 
     // Prevent starting a new session if the last user activity is older than
-    // SESSION_IDLE_DURATION. Otherwise non-user activity can trigger a new
+    // SESSION_IDLE_PAUSE_DURATION. Otherwise non-user activity can trigger a new
     // session+recording. This creates noisy replays that do not have much
     // content in them.
     if (
       this._lastActivity &&
-      isExpired(this._lastActivity, this.timeouts.sessionIdle) &&
+      isExpired(this._lastActivity, this.timeouts.sessionIdlePause) &&
       this.session &&
       this.session.sampled === 'session'
     ) {
@@ -14149,6 +15527,30 @@ class ReplayContainer  {
     this._context.urls.push(url);
   }
 
+  /**
+   * Initialize and start all listeners to varying events (DOM,
+   * Performance Observer, Recording, Sentry SDK, etc)
+   */
+   _initializeRecording() {
+    this.setInitialState();
+
+    // this method is generally called on page load or manually - in both cases
+    // we should treat it as an activity
+    this._updateSessionActivity();
+
+    this.eventBuffer = createEventBuffer({
+      useCompression: this._options.useCompression,
+    });
+
+    this._removeListeners();
+    this._addListeners();
+
+    // Need to set as enabled before we start recording, as `record()` can trigger a flush with a new checkout
+    this._isEnabled = true;
+
+    this.startRecording();
+  }
+
   /** A wrapper to conditionally capture exceptions. */
    _handleException(error) {
     (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.error('[Replay]', error);
@@ -14168,7 +15570,7 @@ class ReplayContainer  {
       stickySession: Boolean(this._options.stickySession),
       currentSession: this.session,
       sessionSampleRate: this._options.sessionSampleRate,
-      errorSampleRate: this._options.errorSampleRate,
+      allowBuffering: this._options.errorSampleRate > 0,
     });
 
     // If session was newly created (i.e. was not loaded from storage), then
@@ -14185,7 +15587,7 @@ class ReplayContainer  {
     this.session = session;
 
     if (!this.session.sampled) {
-      this.stop('session unsampled');
+      void this.stop('session unsampled');
       return false;
     }
 
@@ -14200,6 +15602,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) {
@@ -14228,6 +15631,7 @@ class ReplayContainer  {
 
       WINDOW.removeEventListener('blur', this._handleWindowBlur);
       WINDOW.removeEventListener('focus', this._handleWindowFocus);
+      WINDOW.removeEventListener('keydown', this._handleKeyboardEvent);
 
       if (this._performanceObserver) {
         this._performanceObserver.disconnect();
@@ -14278,6 +15682,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)
    */
@@ -14309,7 +15718,7 @@ class ReplayContainer  {
     const isSessionActive = this.checkAndHandleExpiredSession();
 
     if (!isSessionActive) {
-      // If the user has come back to the page within SESSION_IDLE_DURATION
+      // If the user has come back to the page within SESSION_IDLE_PAUSE_DURATION
       // ms, we will re-use the existing session, otherwise create a new
       // session
       (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__) && logger.log('[Replay] Document has become active, but session has expired');
@@ -14357,7 +15766,7 @@ class ReplayContainer  {
    _createCustomBreadcrumb(breadcrumb) {
     this.addUpdate(() => {
       void addEvent(this, {
-        type: EventType.Custom,
+        type: EventType$1.Custom,
         timestamp: breadcrumb.timestamp || 0,
         data: {
           tag: 'breadcrumb',
@@ -14383,7 +15792,7 @@ class ReplayContainer  {
    * Only flush if `this.recordingMode === 'session'`
    */
    _conditionalFlush() {
-    if (this.recordingMode === 'error') {
+    if (this.recordingMode === 'buffer') {
       return;
     }
 
@@ -14398,22 +15807,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,
     };
 
@@ -14452,6 +15874,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();
 
@@ -14467,7 +15892,6 @@ class ReplayContainer  {
         replayId,
         recordingData,
         segmentId,
-        includeReplayStartTimestamp: segmentId === 0,
         eventContext,
         session: this.session,
         options: this.getOptions(),
@@ -14479,7 +15903,7 @@ class ReplayContainer  {
       // This means we retried 3 times and all of them failed,
       // or we ran into a problem we don't want to retry, like rate limiting.
       // In this case, we want to completely stop the replay - otherwise, we may get inconsistent segments
-      this.stop('sendReplay');
+      void this.stop('sendReplay');
 
       const client = getCurrentHub().getClient();
 
@@ -14493,8 +15917,12 @@ 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 () => {
-    if (!this._isEnabled) {
+   __init17() {this._flush = async ({
+    force = false,
+  }
+
+ = {}) => {
+    if (!this._isEnabled && !force) {
       // This can happen if e.g. the replay was stopped because of exceeding the retry limit
       return;
     }
@@ -14544,7 +15972,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;
@@ -14678,6 +16106,8 @@ function isElectronNodeRenderer() {
 const MEDIA_SELECTORS =
   'img,image,svg,video,object,picture,embed,map,audio,link[rel="icon"],link[rel="apple-touch-icon"]';
 
+const DEFAULT_NETWORK_HEADERS = ['content-length', 'content-type', 'accept'];
+
 let _initialized = false;
 
 /**
@@ -14718,6 +16148,11 @@ class Replay  {
     maskAllInputs = true,
     blockAllMedia = true,
 
+    networkDetailAllowUrls = [],
+    networkCaptureBodies = true,
+    networkRequestHeaders = [],
+    networkResponseHeaders = [],
+
     mask = [],
     unmask = [],
     block = [],
@@ -14776,6 +16211,13 @@ class Replay  {
       errorSampleRate,
       useCompression,
       blockAllMedia,
+      maskAllInputs,
+      maskAllText,
+      networkDetailAllowUrls,
+      networkCaptureBodies,
+      networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),
+      networkResponseHeaders: _getMergedNetworkHeaders(networkResponseHeaders),
+
       _experiments,
     };
 
@@ -14829,14 +16271,7 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
   }
 
   /**
-   * We previously used to create a transaction in `setupOnce` and it would
-   * potentially create a transaction before some native SDK integrations have run
-   * and applied their own global event processor. An example is:
-   * https://github.com/getsentry/sentry-javascript/blob/b47ceafbdac7f8b99093ce6023726ad4687edc48/packages/browser/src/integrations/useragent.ts
-   *
-   * So we call `replay.setup` in next event loop as a workaround to wait for other
-   * global event processors to finish. This is no longer needed, but keeping it
-   * here to avoid any future issues.
+   * Setup and initialize replay container
    */
    setupOnce() {
     if (!isBrowser()) {
@@ -14845,12 +16280,20 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
 
     this._setup();
 
-    // XXX: See method comments above
-    setTimeout(() => this.start());
+    // Once upon a time, we tried to create a transaction in `setupOnce` and it would
+    // potentially create a transaction before some native SDK integrations have run
+    // and applied their own global event processor. An example is:
+    // https://github.com/getsentry/sentry-javascript/blob/b47ceafbdac7f8b99093ce6023726ad4687edc48/packages/browser/src/integrations/useragent.ts
+    //
+    // So we call `this._initialize()` in next event loop as a workaround to wait for other
+    // global event processors to finish. This is no longer needed, but keeping it
+    // here to avoid any future issues.
+    setTimeout(() => this._initialize());
   }
 
   /**
-   * Initializes the plugin.
+   * Start a replay regardless of sampling rate. Calling this will always
+   * create a new session. Will throw an error if replay is already in progress.
    *
    * Creates or loads a session, attaches listeners to varying events (DOM,
    * PerformanceObserver, Recording, Sentry SDK, etc)
@@ -14863,27 +16306,64 @@ Sentry.init({ replaysOnErrorSampleRate: ${errorSampleRate} })`,
     this._replay.start();
   }
 
+  /**
+   * Start replay buffering. Buffers until `flush()` is called or, if
+   * `replaysOnErrorSampleRate` > 0, until an error occurs.
+   */
+   startBuffering() {
+    if (!this._replay) {
+      return;
+    }
+
+    this._replay.startBuffering();
+  }
+
   /**
    * Currently, this needs to be manually called (e.g. for tests). Sentry SDK
    * does not support a teardown
    */
    stop() {
     if (!this._replay) {
-      return;
+      return Promise.resolve();
+    }
+
+    return this._replay.stop();
+  }
+
+  /**
+   * If not in "session" recording mode, flush event buffer which will create a new replay.
+   * Unless `continueRecording` is false, the replay will continue to record and
+   * behave as a "session"-based replay.
+   *
+   * Otherwise, queue up a flush.
+   */
+   flush(options) {
+    if (!this._replay || !this._replay.isEnabled()) {
+      return Promise.resolve();
     }
 
-    this._replay.stop();
+    return this._replay.sendBufferedReplayOrFlush(options);
   }
 
   /**
-   * Immediately send all pending events.
+   * Get the current session ID.
    */
-   flush() {
+   getReplayId() {
     if (!this._replay || !this._replay.isEnabled()) {
       return;
     }
 
-    return this._replay.flushImmediate();
+    return this._replay.getSessionId();
+  }
+  /**
+   * Initializes replay.
+   */
+   _initialize() {
+    if (!this._replay) {
+      return;
+    }
+
+    this._replay.initializeSampling();
   }
 
   /** Setup the integration. */
@@ -14934,6 +16414,10 @@ function loadReplayOptionsFromClient(initialOptions) {
   return finalOptions;
 }
 
+function _getMergedNetworkHeaders(headers) {
+  return [...DEFAULT_NETWORK_HEADERS, ...headers.map(header => header.toLowerCase())];
+}
+
 /**
  * Polyfill for the optional chain operator, `?.`, given previous conversion of the expression into an array of values,
  * descriptors, and functions.
@@ -15371,6 +16855,9 @@ class Postgres  {
         const span = _optionalChain([parentSpan, 'optionalAccess', _6 => _6.startChild, 'call', _7 => _7({
           description: typeof config === 'string' ? config : (config ).text,
           op: 'db',
+          data: {
+            'db.system': 'postgresql',
+          },
         })]);
 
         if (typeof callback === 'function') {
@@ -15447,6 +16934,9 @@ class Mysql  {constructor() { Mysql.prototype.__init.call(this); }
         const span = _optionalChain([parentSpan, 'optionalAccess', _4 => _4.startChild, 'call', _5 => _5({
           description: typeof options === 'string' ? options : (options ).sql,
           op: 'db',
+          data: {
+            'db.system': 'mysql',
+          },
         })]);
 
         if (typeof callback === 'function') {
@@ -15668,6 +17158,7 @@ class Mongo  {
       collectionName: collection.collectionName,
       dbName: collection.dbName,
       namespace: collection.namespace,
+      'db.system': 'mongodb',
     };
     const spanContext = {
       op: 'db',
@@ -15754,31 +17245,15 @@ class Prisma  {
     }
 
     this._client.$use((params, next) => {
-      const scope = getCurrentHub().getScope();
-      const parentSpan = _optionalChain([scope, 'optionalAccess', _2 => _2.getSpan, 'call', _3 => _3()]);
-
       const action = params.action;
       const model = params.model;
-
-      const span = _optionalChain([parentSpan, 'optionalAccess', _4 => _4.startChild, 'call', _5 => _5({
-        description: model ? `${model} ${action}` : action,
-        op: 'db.sql.prisma',
-      })]);
-
-      const rv = next(params);
-
-      if (isThenable(rv)) {
-        return rv.then((res) => {
-          _optionalChain([span, 'optionalAccess', _6 => _6.finish, 'call', _7 => _7()]);
-          return res;
-        });
-      }
-
-      _optionalChain([span, 'optionalAccess', _8 => _8.finish, 'call', _9 => _9()]);
-      return rv;
+      return trace(
+        { name: model ? `${model} ${action}` : action, op: 'db.sql.prisma', data: { 'db.system': 'prisma' } },
+        () => next(params),
+      );
     });
   }
-}Prisma.__initStatic();
+} Prisma.__initStatic();
 
 /** Tracing integration for graphql package */
 class GraphQL  {constructor() { GraphQL.prototype.__init.call(this); }
@@ -28952,7 +30427,7 @@ const configGenerator = () => {
     let release;
     try {
         environment !== null && environment !== void 0 ? environment : (environment = "staging");
-        release !== null && release !== void 0 ? release : (release = "1.1.23-binary-002");
+        release !== null && release !== void 0 ? release : (release = "1.1.23-binary-004");
     }
     catch (_a) {
         console.error('sentry configGenerator error');
@@ -42019,7 +43494,9 @@ var AsapAction = (function (_super) {
         var actions = scheduler.actions;
         if (id != null && ((_a = actions[actions.length - 1]) === null || _a === void 0 ? void 0 : _a.id) !== id) {
             immediateProvider.clearImmediate(id);
-            scheduler._scheduled = undefined;
+            if (scheduler._scheduled === id) {
+                scheduler._scheduled = undefined;
+            }
         }
         return undefined;
     };