import { GLOBAL_OBJ, normalize, fill, htmlTreeAsString, browserPerformanceTimeOrigin, debug as debug$1, severityLevelFromString, captureException, addBreadcrumb, uuid4, getClient, getLocationHref, getCurrentScope, getActiveSpan, getDynamicSamplingContextFromSpan, isSentryRequestUrl, stringMatchesSomePattern, addEventProcessor, debounce as debounce$1, createEnvelope, createEventEnvelopeHeaders, getSdkMetadataForEnvelopeHeader, prepareEvent, getIsolationScope, updateRateLimits, isRateLimited, setContext, getRootSpan, spanToJSON, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE, isBrowser, parseSampleRate, consoleSandbox } from '@sentry/core'; import { setTimeout as setTimeout$3, addPerformanceInstrumentationHandler, addLcpInstrumentationHandler, addClsInstrumentationHandler, addInpInstrumentationHandler, serializeFormData, getFetchRequestArgBody, getBodyString, SENTRY_XHR_DATA_KEY, parseXhrResponseHeaders, addClickKeypressInstrumentationHandler, addHistoryInstrumentationHandler } from '@sentry-internal/browser-utils'; // exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser` // prevents the browser package from being bundled in the CDN bundle, and avoids a // circular dependency between the browser and replay packages should `@sentry/browser` import // from `@sentry/replay` in the future const WINDOW = GLOBAL_OBJ ; 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 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 /** Default flush delays */ const DEFAULT_FLUSH_MIN_DELAY = 5000; // XXX: Temp fix for our debounce logic where `maxWait` would never occur if it // was the same as `wait` const DEFAULT_FLUSH_MAX_DELAY = 5500; /* How long to wait for error checkouts */ 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 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; /* Min. time to wait before we consider something a slow click. */ const SLOW_CLICK_THRESHOLD = 3000; /* For scroll actions after a click, we only look for a very short time period to detect programmatic scrolling. */ const SLOW_CLICK_SCROLL_TIMEOUT = 300; /** When encountering a total segment size exceeding this size, stop the replay (as we cannot properly ingest it). */ const REPLAY_MAX_EVENT_BUFFER_SIZE = 20000000; // ~20MB /** Replays must be min. 5s long before we send them. */ const MIN_REPLAY_DURATION = 4999; /* The max. allowed value that the minReplayDuration can be set to. This needs to be below 60s, so we don't unintentionally drop buffered replays that are longer than 60s. */ const MIN_REPLAY_DURATION_LIMIT = 50000; /** The max. length of a replay. */ const MAX_REPLAY_DURATION = 3600000; // 60 minutes in ms; var __defProp$1 = Object.defineProperty; var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value); var NodeType$2 = /* @__PURE__ */ ((NodeType2) => { NodeType2[NodeType2["Document"] = 0] = "Document"; NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType"; NodeType2[NodeType2["Element"] = 2] = "Element"; NodeType2[NodeType2["Text"] = 3] = "Text"; NodeType2[NodeType2["CDATA"] = 4] = "CDATA"; NodeType2[NodeType2["Comment"] = 5] = "Comment"; return NodeType2; })(NodeType$2 || {}); function isElement$1(n2) { return n2.nodeType === n2.ELEMENT_NODE; } function isShadowRoot(n2) { const host = n2?.host; return Boolean(host?.shadowRoot === n2); } function isNativeShadowDom(shadowRoot) { return Object.prototype.toString.call(shadowRoot) === "[object ShadowRoot]"; } function fixBrowserCompatibilityIssuesInCSS(cssText) { if (cssText.includes(" background-clip: text;") && !cssText.includes(" -webkit-background-clip: text;")) { cssText = cssText.replace( /\sbackground-clip:\s*text;/g, " -webkit-background-clip: text; background-clip: text;" ); } return cssText; } function escapeImportStatement(rule) { const { cssText } = rule; if (cssText.split('"').length < 3) return cssText; const statement = ["@import", `url(${JSON.stringify(rule.href)})`]; if (rule.layerName === "") { statement.push(`layer`); } else if (rule.layerName) { statement.push(`layer(${rule.layerName})`); } if (rule.supportsText) { statement.push(`supports(${rule.supportsText})`); } if (rule.media.length) { statement.push(rule.media.mediaText); } return statement.join(" ") + ";"; } function stringifyStylesheet(s2) { try { const rules2 = s2.rules || s2.cssRules; return rules2 ? fixBrowserCompatibilityIssuesInCSS( Array.from(rules2, stringifyRule).join("") ) : null; } catch (error) { return null; } } function fixAllCssProperty(rule) { let styles = ""; for (let i2 = 0; i2 < rule.style.length; i2++) { const styleDeclaration = rule.style; const attribute = styleDeclaration[i2]; const isImportant = styleDeclaration.getPropertyPriority(attribute); styles += `${attribute}:${styleDeclaration.getPropertyValue(attribute)}${isImportant ? ` !important` : ""};`; } return `${rule.selectorText} { ${styles} }`; } function stringifyRule(rule) { let importStringified; if (isCSSImportRule(rule)) { try { importStringified = // for same-origin stylesheets, // we can access the imported stylesheet rules directly stringifyStylesheet(rule.styleSheet) || // work around browser issues with the raw string `@import url(...)` statement escapeImportStatement(rule); } catch (error) { } } else if (isCSSStyleRule(rule)) { let cssText = rule.cssText; const needsSafariColonFix = rule.selectorText.includes(":"); const needsAllFix = typeof rule.style["all"] === "string" && rule.style["all"]; if (needsAllFix) { cssText = fixAllCssProperty(rule); } if (needsSafariColonFix) { cssText = fixSafariColons(cssText); } if (needsSafariColonFix || needsAllFix) { return cssText; } } return importStringified || rule.cssText; } function fixSafariColons(cssStringified) { const regex = /(\[(?:[\w-]+)[^\\])(:(?:[\w-]+)\])/gm; return cssStringified.replace(regex, "$1\\$2"); } function isCSSImportRule(rule) { return "styleSheet" in rule; } function isCSSStyleRule(rule) { return "selectorText" in rule; } class Mirror { constructor() { __publicField$1(this, "idNodeMap", /* @__PURE__ */ new Map()); __publicField$1(this, "nodeMetaMap", /* @__PURE__ */ new WeakMap()); } getId(n2) { if (!n2) return -1; const id = this.getMeta(n2)?.id; return id ?? -1; } getNode(id) { return this.idNodeMap.get(id) || null; } getIds() { return Array.from(this.idNodeMap.keys()); } getMeta(n2) { return this.nodeMetaMap.get(n2) || null; } // removes the node from idNodeMap // doesn't remove the node from nodeMetaMap removeNodeFromMap(n2) { const id = this.getId(n2); this.idNodeMap.delete(id); if (n2.childNodes) { n2.childNodes.forEach( (childNode) => this.removeNodeFromMap(childNode) ); } } has(id) { return this.idNodeMap.has(id); } hasNode(node) { return this.nodeMetaMap.has(node); } add(n2, meta) { const id = meta.id; this.idNodeMap.set(id, n2); this.nodeMetaMap.set(n2, meta); } replace(id, n2) { const oldNode = this.getNode(id); if (oldNode) { const meta = this.nodeMetaMap.get(oldNode); if (meta) this.nodeMetaMap.set(n2, meta); } this.idNodeMap.set(id, n2); } reset() { this.idNodeMap = /* @__PURE__ */ new Map(); this.nodeMetaMap = /* @__PURE__ */ new WeakMap(); } } function createMirror$2() { return new Mirror(); } function shouldMaskInput({ maskInputOptions, tagName, type }) { if (tagName === "OPTION") { tagName = "SELECT"; } return Boolean( maskInputOptions[tagName.toLowerCase()] || type && maskInputOptions[type] || type === "password" || // Default to "text" option for inputs without a "type" attribute defined tagName === "INPUT" && !type && maskInputOptions["text"] ); } function maskInputValue({ isMasked, element, value, maskInputFn }) { let text = value || ""; if (!isMasked) { return text; } if (maskInputFn) { text = maskInputFn(text, element); } return "*".repeat(text.length); } function toLowerCase(str) { return str.toLowerCase(); } function toUpperCase(str) { return str.toUpperCase(); } const ORIGINAL_ATTRIBUTE_NAME = "__rrweb_original__"; function is2DCanvasBlank(canvas) { const ctx = canvas.getContext("2d"); if (!ctx) return true; const chunkSize = 50; for (let x = 0; x < canvas.width; x += chunkSize) { for (let y = 0; y < canvas.height; y += chunkSize) { const getImageData = ctx.getImageData; const originalGetImageData = ORIGINAL_ATTRIBUTE_NAME in getImageData ? getImageData[ORIGINAL_ATTRIBUTE_NAME] : getImageData; const pixelBuffer = new Uint32Array( // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access originalGetImageData.call( ctx, x, y, Math.min(chunkSize, canvas.width - x), Math.min(chunkSize, canvas.height - y) ).data.buffer ); if (pixelBuffer.some((pixel) => pixel !== 0)) return false; } } return true; } function getInputType(element) { const type = element.type; return element.hasAttribute("data-rr-is-password") ? "password" : type ? ( // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion toLowerCase(type) ) : null; } function getInputValue(el, tagName, type) { if (tagName === "INPUT" && (type === "radio" || type === "checkbox")) { return el.getAttribute("value") || ""; } return el.value; } function extractFileExtension(path, baseURL) { let url; try { url = new URL(path, baseURL ?? window.location.href); } catch (err) { return null; } const regex = /\.([0-9a-z]+)(?:$)/i; const match = url.pathname.match(regex); return match?.[1] ?? null; } const cachedImplementations$1 = {}; function getImplementation$1(name) { const cached = cachedImplementations$1[name]; if (cached) { return cached; } const document2 = window.document; let impl = window[name]; if (document2 && typeof document2.createElement === "function") { try { const sandbox = document2.createElement("iframe"); sandbox.hidden = true; document2.head.appendChild(sandbox); const contentWindow = sandbox.contentWindow; if (contentWindow && contentWindow[name]) { impl = // eslint-disable-next-line @typescript-eslint/unbound-method contentWindow[name]; } document2.head.removeChild(sandbox); } catch (e2) { } } return cachedImplementations$1[name] = impl.bind( window ); } function setTimeout$2(...rest) { return getImplementation$1("setTimeout")(...rest); } function clearTimeout$1(...rest) { return getImplementation$1("clearTimeout")(...rest); } function getIframeContentDocument(iframe) { try { return iframe.contentDocument; } catch (e2) { } } let _id = 1; const tagNameRegex = new RegExp("[^a-z0-9-_:]"); const IGNORED_NODE = -2; function genId() { return _id++; } function getValidTagName$1(element) { if (element instanceof HTMLFormElement) { return "form"; } const processedTagName = toLowerCase(element.tagName); if (tagNameRegex.test(processedTagName)) { return "div"; } return processedTagName; } function extractOrigin(url) { let origin = ""; if (url.indexOf("//") > -1) { origin = url.split("/").slice(0, 3).join("/"); } else { origin = url.split("/")[0]; } origin = origin.split("?")[0]; return origin; } let canvasService; let canvasCtx; const URL_IN_CSS_REF = /url\((?:(')([^']*)'|(")(.*?)"|([^)]*))\)/gm; const URL_PROTOCOL_MATCH = /^(?:[a-z+]+:)?\/\//i; const URL_WWW_MATCH = /^www\..*/i; const DATA_URI = /^(data:)([^,]*),(.*)/i; function filterCSSPropertiesFromInlineStyle(cssText, ignoredProperties) { if (!cssText || ignoredProperties.size === 0) { return cssText; } try { const properties = cssText.split(";"); const filteredProperties = []; for (let property of properties) { property = property.trim(); if (!property) continue; const colonIndex = property.indexOf(":"); if (colonIndex === -1) { filteredProperties.push(property); continue; } const propertyName = property.slice(0, colonIndex).trim(); if (!ignoredProperties.has(propertyName)) { filteredProperties.push(property); } } return filteredProperties.join("; ") + (filteredProperties.length > 0 && cssText.endsWith(";") ? ";" : ""); } catch (error) { console.warn("Error filtering CSS properties:", error); return cssText; } } function absoluteToStylesheet(cssText, href) { return (cssText || "").replace( URL_IN_CSS_REF, (origin, quote1, path1, quote2, path2, path3) => { const filePath = path1 || path2 || path3; const maybeQuote = quote1 || quote2 || ""; if (!filePath) { return origin; } if (URL_PROTOCOL_MATCH.test(filePath) || URL_WWW_MATCH.test(filePath)) { return `url(${maybeQuote}${filePath}${maybeQuote})`; } if (DATA_URI.test(filePath)) { return `url(${maybeQuote}${filePath}${maybeQuote})`; } if (filePath[0] === "/") { return `url(${maybeQuote}${extractOrigin(href) + filePath}${maybeQuote})`; } const stack = href.split("/"); const parts = filePath.split("/"); stack.pop(); for (const part of parts) { if (part === ".") { continue; } else if (part === "..") { stack.pop(); } else { stack.push(part); } } return `url(${maybeQuote}${stack.join("/")}${maybeQuote})`; } ); } const SRCSET_NOT_SPACES = /^[^ \t\n\r\u000c]+/; const SRCSET_COMMAS_OR_SPACES = /^[, \t\n\r\u000c]+/; function getAbsoluteSrcsetString(doc, attributeValue) { if (attributeValue.trim() === "") { return attributeValue; } let pos = 0; function collectCharacters(regEx) { let chars2; const match = regEx.exec(attributeValue.substring(pos)); if (match) { chars2 = match[0]; pos += chars2.length; return chars2; } return ""; } const output = []; while (true) { collectCharacters(SRCSET_COMMAS_OR_SPACES); if (pos >= attributeValue.length) { break; } let url = collectCharacters(SRCSET_NOT_SPACES); if (url.slice(-1) === ",") { url = absoluteToDoc(doc, url.substring(0, url.length - 1)); output.push(url); } else { let descriptorsStr = ""; url = absoluteToDoc(doc, url); let inParens = false; while (true) { const c2 = attributeValue.charAt(pos); if (c2 === "") { output.push((url + descriptorsStr).trim()); break; } else if (!inParens) { if (c2 === ",") { pos += 1; output.push((url + descriptorsStr).trim()); break; } else if (c2 === "(") { inParens = true; } } else { if (c2 === ")") { inParens = false; } } descriptorsStr += c2; pos += 1; } } } return output.join(", "); } const cachedDocument = /* @__PURE__ */ new WeakMap(); function absoluteToDoc(doc, attributeValue) { if (!attributeValue || attributeValue.trim() === "") { return attributeValue; } return getHref(doc, attributeValue); } function isSVGElement(el) { return Boolean(el.tagName === "svg" || el.ownerSVGElement); } function getHref(doc, customHref) { let a2 = cachedDocument.get(doc); if (!a2) { a2 = doc.createElement("a"); cachedDocument.set(doc, a2); } if (!customHref) { customHref = ""; } else if (customHref.startsWith("blob:") || customHref.startsWith("data:")) { return customHref; } a2.setAttribute("href", customHref); return a2.href; } function transformAttribute(doc, tagName, name, value, element, maskAttributeFn, ignoreCSSAttributes) { if (!value) { return value; } if (name === "src" || name === "href" && !(tagName === "use" && value[0] === "#")) { return absoluteToDoc(doc, value); } else if (name === "xlink:href" && value[0] !== "#") { return absoluteToDoc(doc, value); } else if (name === "background" && (tagName === "table" || tagName === "td" || tagName === "th")) { return absoluteToDoc(doc, value); } else if (name === "srcset") { return getAbsoluteSrcsetString(doc, value); } else if (name === "style") { let processedStyle = absoluteToStylesheet(value, getHref(doc)); if (ignoreCSSAttributes && ignoreCSSAttributes.size > 0) { processedStyle = filterCSSPropertiesFromInlineStyle( processedStyle, ignoreCSSAttributes ); } return processedStyle; } else if (tagName === "object" && name === "data") { return absoluteToDoc(doc, value); } if (typeof maskAttributeFn === "function") { return maskAttributeFn(name, value, element); } return value; } function ignoreAttribute(tagName, name, _value) { return (tagName === "video" || tagName === "audio") && name === "autoplay"; } function _isBlockedElement(element, blockClass, blockSelector, unblockSelector) { try { if (unblockSelector && element.matches(unblockSelector)) { return false; } if (typeof blockClass === "string") { if (element.classList.contains(blockClass)) { return true; } } else { for (let eIndex = element.classList.length; eIndex--; ) { const className = element.classList[eIndex]; if (blockClass.test(className)) { return true; } } } if (blockSelector) { return element.matches(blockSelector); } } catch (e2) { } return false; } function elementClassMatchesRegex(el, regex) { for (let eIndex = el.classList.length; eIndex--; ) { const className = el.classList[eIndex]; if (regex.test(className)) { return true; } } return false; } function distanceToMatch(node, matchPredicate, limit = Infinity, distance = 0) { if (!node) return -1; if (node.nodeType !== node.ELEMENT_NODE) return -1; if (distance > limit) return -1; if (matchPredicate(node)) return distance; return distanceToMatch(node.parentNode, matchPredicate, limit, distance + 1); } function createMatchPredicate(className, selector) { return (node) => { const el = node; if (el === null) return false; try { if (className) { if (typeof className === "string") { if (el.matches(`.${className}`)) return true; } else if (elementClassMatchesRegex(el, className)) { return true; } } if (selector && el.matches(selector)) return true; return false; } catch { return false; } }; } function needMaskingText(node, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, maskAllText) { try { const el = node.nodeType === node.ELEMENT_NODE ? node : node.parentElement; if (el === null) return false; if (el.tagName === "INPUT") { const autocomplete = el.getAttribute("autocomplete"); const disallowedAutocompleteValues = [ "current-password", "new-password", "cc-number", "cc-exp", "cc-exp-month", "cc-exp-year", "cc-csc" ]; if (disallowedAutocompleteValues.includes(autocomplete)) { return true; } } let maskDistance = -1; let unmaskDistance = -1; if (maskAllText) { unmaskDistance = distanceToMatch( el, createMatchPredicate(unmaskTextClass, unmaskTextSelector) ); if (unmaskDistance < 0) { return true; } maskDistance = distanceToMatch( el, createMatchPredicate(maskTextClass, maskTextSelector), unmaskDistance >= 0 ? unmaskDistance : Infinity ); } else { maskDistance = distanceToMatch( el, createMatchPredicate(maskTextClass, maskTextSelector) ); if (maskDistance < 0) { return false; } unmaskDistance = distanceToMatch( el, createMatchPredicate(unmaskTextClass, unmaskTextSelector), maskDistance >= 0 ? maskDistance : Infinity ); } return maskDistance >= 0 ? unmaskDistance >= 0 ? maskDistance <= unmaskDistance : true : unmaskDistance >= 0 ? false : !!maskAllText; } catch (e2) { } return !!maskAllText; } function onceIframeLoaded(iframeEl, listener, iframeLoadTimeout) { const win = iframeEl.contentWindow; if (!win) { return; } let fired = false; let readyState; try { readyState = win.document.readyState; } catch (error) { return; } if (readyState !== "complete") { const timer = setTimeout$2(() => { if (!fired) { listener(); fired = true; } }, iframeLoadTimeout); iframeEl.addEventListener("load", () => { clearTimeout$1(timer); fired = true; listener(); }); return; } const blankUrl = "about:blank"; if (win.location.href !== blankUrl || iframeEl.src === blankUrl || iframeEl.src === "") { setTimeout$2(listener, 0); return iframeEl.addEventListener("load", listener); } iframeEl.addEventListener("load", listener); } function onceStylesheetLoaded(link, listener, styleSheetLoadTimeout) { let fired = false; let styleSheetLoaded; try { styleSheetLoaded = link.sheet; } catch (error) { return; } if (styleSheetLoaded) return; const timer = setTimeout$2(() => { if (!fired) { listener(); fired = true; } }, styleSheetLoadTimeout); link.addEventListener("load", () => { clearTimeout$1(timer); fired = true; listener(); }); } function serializeNode(n2, options) { const { doc, mirror: mirror2, blockClass, blockSelector, unblockSelector, maskAllText, maskAttributeFn, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, inlineStylesheet, maskInputOptions = {}, maskTextFn, maskInputFn, dataURLOptions = {}, inlineImages, recordCanvas, keepIframeSrcFn, newlyAddedElement = false, ignoreCSSAttributes } = options; const rootId = getRootId(doc, mirror2); switch (n2.nodeType) { case n2.DOCUMENT_NODE: if (n2.compatMode !== "CSS1Compat") { return { type: NodeType$2.Document, childNodes: [], compatMode: n2.compatMode // probably "BackCompat" }; } else { return { type: NodeType$2.Document, childNodes: [] }; } case n2.DOCUMENT_TYPE_NODE: return { type: NodeType$2.DocumentType, name: n2.name, publicId: n2.publicId, systemId: n2.systemId, rootId }; case n2.ELEMENT_NODE: return serializeElementNode(n2, { doc, blockClass, blockSelector, unblockSelector, inlineStylesheet, maskAttributeFn, maskInputOptions, maskInputFn, dataURLOptions, inlineImages, recordCanvas, keepIframeSrcFn, newlyAddedElement, rootId, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, ignoreCSSAttributes }); case n2.TEXT_NODE: return serializeTextNode(n2, { doc, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, maskTextFn, maskInputOptions, maskInputFn, rootId }); case n2.CDATA_SECTION_NODE: return { type: NodeType$2.CDATA, textContent: "", rootId }; case n2.COMMENT_NODE: return { type: NodeType$2.Comment, textContent: n2.textContent || "", rootId }; default: return false; } } function getRootId(doc, mirror2) { if (!mirror2.hasNode(doc)) return void 0; const docId = mirror2.getId(doc); return docId === 1 ? void 0 : docId; } function serializeTextNode(n2, options) { const { maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, maskTextFn, maskInputOptions, maskInputFn, rootId } = options; const parentTagName = n2.parentNode && n2.parentNode.tagName; let textContent = n2.textContent; const isStyle = parentTagName === "STYLE" ? true : void 0; const isScript = parentTagName === "SCRIPT" ? true : void 0; const isTextarea = parentTagName === "TEXTAREA" ? true : void 0; if (isStyle && textContent) { try { if (n2.nextSibling || n2.previousSibling) { } else if (n2.parentNode.sheet?.cssRules) { textContent = stringifyStylesheet( n2.parentNode.sheet ); } } catch (err) { console.warn( `Cannot get CSS styles from text's parentNode. Error: ${err}`, n2 ); } textContent = absoluteToStylesheet(textContent, getHref(options.doc)); } if (isScript) { textContent = "SCRIPT_PLACEHOLDER"; } const forceMask = needMaskingText( n2, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, maskAllText ); if (!isStyle && !isScript && !isTextarea && textContent && forceMask) { textContent = maskTextFn ? maskTextFn(textContent, n2.parentElement) : textContent.replace(/[\S]/g, "*"); } if (isTextarea && textContent && (maskInputOptions.textarea || forceMask)) { textContent = maskInputFn ? maskInputFn(textContent, n2.parentNode) : textContent.replace(/[\S]/g, "*"); } if (parentTagName === "OPTION" && textContent) { const isInputMasked = shouldMaskInput({ type: null, tagName: parentTagName, maskInputOptions }); textContent = maskInputValue({ isMasked: needMaskingText( n2, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, isInputMasked ), element: n2, value: textContent, maskInputFn }); } return { type: NodeType$2.Text, textContent: textContent || "", isStyle, rootId }; } function serializeElementNode(n2, options) { const { doc, blockClass, blockSelector, unblockSelector, inlineStylesheet, maskInputOptions = {}, maskAttributeFn, maskInputFn, dataURLOptions = {}, inlineImages, recordCanvas, keepIframeSrcFn, newlyAddedElement = false, rootId, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, ignoreCSSAttributes } = options; const needBlock = _isBlockedElement( n2, blockClass, blockSelector, unblockSelector ); const tagName = getValidTagName$1(n2); let attributes2 = {}; const len = n2.attributes.length; for (let i2 = 0; i2 < len; i2++) { const attr = n2.attributes[i2]; if (attr.name && !ignoreAttribute(tagName, attr.name, attr.value)) { attributes2[attr.name] = transformAttribute( doc, tagName, toLowerCase(attr.name), attr.value, n2, maskAttributeFn, ignoreCSSAttributes ); } } if (tagName === "link" && inlineStylesheet) { const stylesheet = Array.from(doc.styleSheets).find((s2) => { return s2.href === n2.href; }); let cssText = null; if (stylesheet) { cssText = stringifyStylesheet(stylesheet); } if (cssText) { attributes2.rel = null; attributes2.href = null; attributes2.crossorigin = null; attributes2._cssText = absoluteToStylesheet(cssText, stylesheet.href); } } if (tagName === "style" && n2.sheet && // TODO: Currently we only try to get dynamic stylesheet when it is an empty style element !(n2.innerText || n2.textContent || "").trim().length) { const cssText = stringifyStylesheet( n2.sheet ); if (cssText) { attributes2._cssText = absoluteToStylesheet(cssText, getHref(doc)); } } if (tagName === "input" || tagName === "textarea" || tagName === "select" || tagName === "option") { const el = n2; const type = getInputType(el); const value = getInputValue(el, toUpperCase(tagName), type); const checked = el.checked; if (type !== "submit" && type !== "button" && value) { const forceMask = needMaskingText( el, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, shouldMaskInput({ type, tagName: toUpperCase(tagName), maskInputOptions }) ); attributes2.value = maskInputValue({ isMasked: forceMask, element: el, value, maskInputFn }); } if (checked) { attributes2.checked = checked; } } if (tagName === "option") { if (n2.selected && !maskInputOptions["select"]) { attributes2.selected = true; } else { delete attributes2.selected; } } if (tagName === "canvas" && recordCanvas) { if (n2.__context === "2d") { if (!is2DCanvasBlank(n2)) { attributes2.rr_dataURL = n2.toDataURL( dataURLOptions.type, dataURLOptions.quality ); } } else if (!("__context" in n2)) { const canvasDataURL = n2.toDataURL( dataURLOptions.type, dataURLOptions.quality ); const blankCanvas = doc.createElement("canvas"); blankCanvas.width = n2.width; blankCanvas.height = n2.height; const blankCanvasDataURL = blankCanvas.toDataURL( dataURLOptions.type, dataURLOptions.quality ); if (canvasDataURL !== blankCanvasDataURL) { attributes2.rr_dataURL = canvasDataURL; } } } if (tagName === "img" && inlineImages) { if (!canvasService) { canvasService = doc.createElement("canvas"); canvasCtx = canvasService.getContext("2d"); } const image = n2; const imageSrc = image.currentSrc || image.getAttribute("src") || ""; const priorCrossOrigin = image.crossOrigin; const recordInlineImage = () => { image.removeEventListener("load", recordInlineImage); try { canvasService.width = image.naturalWidth; canvasService.height = image.naturalHeight; canvasCtx.drawImage(image, 0, 0); attributes2.rr_dataURL = canvasService.toDataURL( dataURLOptions.type, dataURLOptions.quality ); } catch (err) { if (image.crossOrigin !== "anonymous") { image.crossOrigin = "anonymous"; if (image.complete && image.naturalWidth !== 0) recordInlineImage(); else image.addEventListener("load", recordInlineImage); return; } else { console.warn( `Cannot inline img src=${imageSrc}! Error: ${err}` ); } } if (image.crossOrigin === "anonymous") { priorCrossOrigin ? attributes2.crossOrigin = priorCrossOrigin : image.removeAttribute("crossorigin"); } }; if (image.complete && image.naturalWidth !== 0) recordInlineImage(); else image.addEventListener("load", recordInlineImage); } if (tagName === "audio" || tagName === "video") { attributes2.rr_mediaState = n2.paused ? "paused" : "played"; attributes2.rr_mediaCurrentTime = n2.currentTime; } if (!newlyAddedElement) { if (n2.scrollLeft) { attributes2.rr_scrollLeft = n2.scrollLeft; } if (n2.scrollTop) { attributes2.rr_scrollTop = n2.scrollTop; } } if (needBlock) { const { width, height } = n2.getBoundingClientRect(); attributes2 = { class: attributes2.class, rr_width: `${width}px`, rr_height: `${height}px` }; } if (tagName === "iframe" && !keepIframeSrcFn(attributes2.src)) { if (!needBlock && !getIframeContentDocument(n2)) { attributes2.rr_src = attributes2.src; } delete attributes2.src; } let isCustomElement; try { if (customElements.get(tagName)) isCustomElement = true; } catch (e2) { } return { type: NodeType$2.Element, tagName, attributes: attributes2, childNodes: [], isSVG: isSVGElement(n2) || void 0, needBlock, rootId, isCustom: isCustomElement }; } function lowerIfExists(maybeAttr) { if (maybeAttr === void 0 || maybeAttr === null) { return ""; } else { return maybeAttr.toLowerCase(); } } function slimDOMExcluded(sn, slimDOMOptions) { if (slimDOMOptions.comment && sn.type === NodeType$2.Comment) { return true; } else if (sn.type === NodeType$2.Element) { if (slimDOMOptions.script && // script tag (sn.tagName === "script" || // (module)preload link sn.tagName === "link" && (sn.attributes.rel === "preload" || sn.attributes.rel === "modulepreload") || // prefetch link sn.tagName === "link" && sn.attributes.rel === "prefetch" && typeof sn.attributes.href === "string" && extractFileExtension(sn.attributes.href) === "js")) { return true; } else if (slimDOMOptions.headFavicon && (sn.tagName === "link" && sn.attributes.rel === "shortcut icon" || sn.tagName === "meta" && (lowerIfExists(sn.attributes.name).match( /^msapplication-tile(image|color)$/ ) || lowerIfExists(sn.attributes.name) === "application-name" || lowerIfExists(sn.attributes.rel) === "icon" || lowerIfExists(sn.attributes.rel) === "apple-touch-icon" || lowerIfExists(sn.attributes.rel) === "shortcut icon"))) { return true; } else if (sn.tagName === "meta") { if (slimDOMOptions.headMetaDescKeywords && lowerIfExists(sn.attributes.name).match(/^description|keywords$/)) { return true; } else if (slimDOMOptions.headMetaSocial && (lowerIfExists(sn.attributes.property).match(/^(og|twitter|fb):/) || // og = opengraph (facebook) lowerIfExists(sn.attributes.name).match(/^(og|twitter):/) || lowerIfExists(sn.attributes.name) === "pinterest")) { return true; } else if (slimDOMOptions.headMetaRobots && (lowerIfExists(sn.attributes.name) === "robots" || lowerIfExists(sn.attributes.name) === "googlebot" || lowerIfExists(sn.attributes.name) === "bingbot")) { return true; } else if (slimDOMOptions.headMetaHttpEquiv && sn.attributes["http-equiv"] !== void 0) { return true; } else if (slimDOMOptions.headMetaAuthorship && (lowerIfExists(sn.attributes.name) === "author" || lowerIfExists(sn.attributes.name) === "generator" || lowerIfExists(sn.attributes.name) === "framework" || lowerIfExists(sn.attributes.name) === "publisher" || lowerIfExists(sn.attributes.name) === "progid" || lowerIfExists(sn.attributes.property).match(/^article:/) || lowerIfExists(sn.attributes.property).match(/^product:/))) { return true; } else if (slimDOMOptions.headMetaVerification && (lowerIfExists(sn.attributes.name) === "google-site-verification" || lowerIfExists(sn.attributes.name) === "yandex-verification" || lowerIfExists(sn.attributes.name) === "csrf-token" || lowerIfExists(sn.attributes.name) === "p:domain_verify" || lowerIfExists(sn.attributes.name) === "verify-v1" || lowerIfExists(sn.attributes.name) === "verification" || lowerIfExists(sn.attributes.name) === "shopify-checkout-api-token")) { return true; } } } return false; } function serializeNodeWithId(n2, options) { const { doc, mirror: mirror2, blockClass, blockSelector, unblockSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, skipChild = false, inlineStylesheet = true, maskInputOptions = {}, maskAttributeFn, maskTextFn, maskInputFn, slimDOMOptions, dataURLOptions = {}, inlineImages = false, recordCanvas = false, onSerialize, onIframeLoad, iframeLoadTimeout = 5e3, onBlockedImageLoad, onStylesheetLoad, stylesheetLoadTimeout = 5e3, keepIframeSrcFn = () => false, newlyAddedElement = false, ignoreCSSAttributes } = options; let { preserveWhiteSpace = true } = options; const _serializedNode = serializeNode(n2, { doc, mirror: mirror2, blockClass, blockSelector, maskAllText, unblockSelector, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, inlineStylesheet, maskInputOptions, maskAttributeFn, maskTextFn, maskInputFn, dataURLOptions, inlineImages, recordCanvas, keepIframeSrcFn, newlyAddedElement, ignoreCSSAttributes }); if (!_serializedNode) { console.warn(n2, "not serialized"); return null; } let id; if (mirror2.hasNode(n2)) { id = mirror2.getId(n2); } else if (slimDOMExcluded(_serializedNode, slimDOMOptions) || !preserveWhiteSpace && _serializedNode.type === NodeType$2.Text && !_serializedNode.isStyle && !_serializedNode.textContent.replace(/^\s+|\s+$/gm, "").length) { id = IGNORED_NODE; } else { id = genId(); } const serializedNode2 = Object.assign(_serializedNode, { id }); mirror2.add(n2, serializedNode2); if (id === IGNORED_NODE) { return null; } if (onSerialize) { onSerialize(n2); } let recordChild = !skipChild; if (serializedNode2.type === NodeType$2.Element) { recordChild = recordChild && !serializedNode2.needBlock; const shadowRoot = n2.shadowRoot; if (shadowRoot && isNativeShadowDom(shadowRoot)) serializedNode2.isShadowHost = true; } if ((serializedNode2.type === NodeType$2.Document || serializedNode2.type === NodeType$2.Element) && recordChild) { if (slimDOMOptions.headWhitespace && serializedNode2.type === NodeType$2.Element && serializedNode2.tagName === "head") { preserveWhiteSpace = false; } const bypassOptions = { doc, mirror: mirror2, blockClass, blockSelector, maskAllText, unblockSelector, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, skipChild, inlineStylesheet, maskInputOptions, maskAttributeFn, maskTextFn, maskInputFn, slimDOMOptions, dataURLOptions, inlineImages, recordCanvas, preserveWhiteSpace, onSerialize, onIframeLoad, iframeLoadTimeout, onBlockedImageLoad, onStylesheetLoad, stylesheetLoadTimeout, keepIframeSrcFn, ignoreCSSAttributes }; const childNodes = n2.childNodes ? Array.from(n2.childNodes) : []; for (const childN of childNodes) { const serializedChildNode = serializeNodeWithId(childN, bypassOptions); if (serializedChildNode) { serializedNode2.childNodes.push(serializedChildNode); } } if (isElement$1(n2) && n2.shadowRoot) { for (const childN of Array.from(n2.shadowRoot.childNodes)) { const serializedChildNode = serializeNodeWithId(childN, bypassOptions); if (serializedChildNode) { isNativeShadowDom(n2.shadowRoot) && (serializedChildNode.isShadow = true); serializedNode2.childNodes.push(serializedChildNode); } } } } if (n2.parentNode && isShadowRoot(n2.parentNode) && isNativeShadowDom(n2.parentNode)) { serializedNode2.isShadow = true; } if (serializedNode2.type === NodeType$2.Element && serializedNode2.tagName === "iframe" && !serializedNode2.needBlock) { onceIframeLoaded( n2, () => { const iframeDoc = getIframeContentDocument(n2); if (iframeDoc && onIframeLoad) { const serializedIframeNode = serializeNodeWithId(iframeDoc, { doc: iframeDoc, mirror: mirror2, blockClass, blockSelector, unblockSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, skipChild: false, inlineStylesheet, maskInputOptions, maskAttributeFn, maskTextFn, maskInputFn, slimDOMOptions, dataURLOptions, inlineImages, recordCanvas, preserveWhiteSpace, onSerialize, onIframeLoad, iframeLoadTimeout, onStylesheetLoad, stylesheetLoadTimeout, keepIframeSrcFn, ignoreCSSAttributes }); if (serializedIframeNode) { onIframeLoad( n2, serializedIframeNode ); } } }, iframeLoadTimeout ); } if (serializedNode2.type === NodeType$2.Element && serializedNode2.tagName === "img" && !n2.complete && serializedNode2.needBlock) { const image = n2; const updateImageDimensions = () => { if (image.isConnected && !image.complete && onBlockedImageLoad) { try { const rect = image.getBoundingClientRect(); if (rect.width > 0 && rect.height > 0) { onBlockedImageLoad(image, serializedNode2, rect); } } catch (error) { } } image.removeEventListener("load", updateImageDimensions); }; if (image.isConnected) { image.addEventListener("load", updateImageDimensions); } } if (serializedNode2.type === NodeType$2.Element && serializedNode2.tagName === "link" && typeof serializedNode2.attributes.rel === "string" && (serializedNode2.attributes.rel === "stylesheet" || serializedNode2.attributes.rel === "preload" && typeof serializedNode2.attributes.href === "string" && extractFileExtension(serializedNode2.attributes.href) === "css")) { onceStylesheetLoaded( n2, () => { if (onStylesheetLoad) { const serializedLinkNode = serializeNodeWithId(n2, { doc, mirror: mirror2, blockClass, blockSelector, unblockSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, skipChild: false, inlineStylesheet, maskInputOptions, maskAttributeFn, maskTextFn, maskInputFn, slimDOMOptions, dataURLOptions, inlineImages, recordCanvas, preserveWhiteSpace, onSerialize, onIframeLoad, iframeLoadTimeout, onStylesheetLoad, stylesheetLoadTimeout, keepIframeSrcFn, ignoreCSSAttributes }); if (serializedLinkNode) { onStylesheetLoad( n2, serializedLinkNode ); } } }, stylesheetLoadTimeout ); } if (serializedNode2.type === NodeType$2.Element) { delete serializedNode2.needBlock; } return serializedNode2; } function snapshot(n2, options) { const { mirror: mirror2 = new Mirror(), blockClass = "rr-block", blockSelector = null, unblockSelector = null, maskAllText = false, maskTextClass = "rr-mask", unmaskTextClass = null, maskTextSelector = null, unmaskTextSelector = null, inlineStylesheet = true, inlineImages = false, recordCanvas = false, maskAllInputs = false, maskAttributeFn, maskTextFn, maskInputFn, slimDOM = false, dataURLOptions, preserveWhiteSpace, onSerialize, onIframeLoad, iframeLoadTimeout, onBlockedImageLoad, onStylesheetLoad, stylesheetLoadTimeout, keepIframeSrcFn = () => false, ignoreCSSAttributes = /* @__PURE__ */ new Set([]) } = options || {}; const maskInputOptions = maskAllInputs === true ? { color: true, date: true, "datetime-local": true, email: true, month: true, number: true, range: true, search: true, tel: true, text: true, time: true, url: true, week: true, textarea: true, select: true } : maskAllInputs === false ? {} : maskAllInputs; const slimDOMOptions = slimDOM === true || slimDOM === "all" ? ( // if true: set of sensible options that should not throw away any information { script: true, comment: true, headFavicon: true, headWhitespace: true, headMetaDescKeywords: slimDOM === "all", // destructive headMetaSocial: true, headMetaRobots: true, headMetaHttpEquiv: true, headMetaAuthorship: true, headMetaVerification: true } ) : slimDOM === false ? {} : slimDOM; return serializeNodeWithId(n2, { doc: n2, mirror: mirror2, blockClass, blockSelector, unblockSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, skipChild: false, inlineStylesheet, maskInputOptions, maskAttributeFn, maskTextFn, maskInputFn, slimDOMOptions, dataURLOptions, inlineImages, recordCanvas, preserveWhiteSpace, onSerialize, onIframeLoad, iframeLoadTimeout, onBlockedImageLoad, onStylesheetLoad, stylesheetLoadTimeout, keepIframeSrcFn, newlyAddedElement: false, ignoreCSSAttributes }); } function on(type, fn, target = document) { const options = { capture: true, passive: true }; target.addEventListener(type, fn, options); return () => target.removeEventListener(type, fn, options); } const DEPARTED_MIRROR_ACCESS_WARNING = "Please stop import mirror directly. Instead of that,\r\nnow you can use replayer.getMirror() to access the mirror instance of a replayer,\r\nor you can use record.mirror to access the mirror instance during recording."; let _mirror = { map: {}, getId() { console.error(DEPARTED_MIRROR_ACCESS_WARNING); return -1; }, getNode() { console.error(DEPARTED_MIRROR_ACCESS_WARNING); return null; }, removeNodeFromMap() { console.error(DEPARTED_MIRROR_ACCESS_WARNING); }, has() { console.error(DEPARTED_MIRROR_ACCESS_WARNING); return false; }, reset() { console.error(DEPARTED_MIRROR_ACCESS_WARNING); } }; if (typeof window !== "undefined" && window.Proxy && window.Reflect) { _mirror = new Proxy(_mirror, { get(target, prop, receiver) { if (prop === "map") { console.error(DEPARTED_MIRROR_ACCESS_WARNING); } return Reflect.get(target, prop, receiver); } }); } function throttle$1(func, wait, options = {}) { let timeout = null; let previous = 0; return function(...args) { const now = Date.now(); if (!previous && options.leading === false) { previous = now; } const remaining = wait - (now - previous); const context = this; if (remaining <= 0 || remaining > wait) { if (timeout) { clearTimeout$2(timeout); timeout = null; } previous = now; func.apply(context, args); } else if (!timeout && options.trailing !== false) { timeout = setTimeout$1(() => { previous = options.leading === false ? 0 : Date.now(); timeout = null; func.apply(context, args); }, remaining); } }; } function hookSetter(target, key, d, isRevoked, win = window) { const original = win.Object.getOwnPropertyDescriptor(target, key); win.Object.defineProperty( target, key, isRevoked ? d : { set(value) { setTimeout$1(() => { d.set.call(this, value); }, 0); if (original && original.set) { original.set.call(this, value); } } } ); return () => hookSetter(target, key, original || {}, true); } function patch(source, name, replacement) { try { if (!(name in source)) { return () => { }; } const original = source[name]; const wrapped = replacement(original); if (typeof wrapped === "function") { wrapped.prototype = wrapped.prototype || {}; Object.defineProperties(wrapped, { __rrweb_original__: { enumerable: false, value: original } }); } source[name] = wrapped; return () => { source[name] = original; }; } catch { return () => { }; } } let nowTimestamp = Date.now; if (!/* @__PURE__ */ /[1-9][0-9]{12}/.test(Date.now().toString())) { nowTimestamp = () => (/* @__PURE__ */ new Date()).getTime(); } function getWindowScroll(win) { const doc = win.document; return { left: doc.scrollingElement ? doc.scrollingElement.scrollLeft : win.pageXOffset !== void 0 ? win.pageXOffset : doc?.documentElement.scrollLeft || doc?.body?.parentElement?.scrollLeft || doc?.body?.scrollLeft || 0, top: doc.scrollingElement ? doc.scrollingElement.scrollTop : win.pageYOffset !== void 0 ? win.pageYOffset : doc?.documentElement.scrollTop || doc?.body?.parentElement?.scrollTop || doc?.body?.scrollTop || 0 }; } function getWindowHeight() { return window.innerHeight || document.documentElement && document.documentElement.clientHeight || document.body && document.body.clientHeight; } function getWindowWidth() { return window.innerWidth || document.documentElement && document.documentElement.clientWidth || document.body && document.body.clientWidth; } function closestElementOfNode$1(node) { if (!node) { return null; } try { const el = node.nodeType === node.ELEMENT_NODE ? node : node.parentElement; return el; } catch (error) { return null; } } function isBlocked(node, blockClass, blockSelector, unblockSelector, checkAncestors) { if (!node) { return false; } const el = closestElementOfNode$1(node); if (!el) { return false; } const blockedPredicate = createMatchPredicate(blockClass, blockSelector); if (!checkAncestors) { const isUnblocked = unblockSelector && el.matches(unblockSelector); return blockedPredicate(el) && !isUnblocked; } const blockDistance = distanceToMatch(el, blockedPredicate); let unblockDistance = -1; if (blockDistance < 0) { return false; } if (unblockSelector) { unblockDistance = distanceToMatch( el, createMatchPredicate(null, unblockSelector) ); } if (blockDistance > -1 && unblockDistance < 0) { return true; } return blockDistance < unblockDistance; } function isSerialized(n2, mirror2) { return mirror2.getId(n2) !== -1; } function isIgnored(n2, mirror2) { return mirror2.getId(n2) === IGNORED_NODE; } function isAncestorRemoved(target, mirror2) { if (isShadowRoot(target)) { return false; } const id = mirror2.getId(target); if (!mirror2.has(id)) { return true; } if (target.parentNode && target.parentNode.nodeType === target.DOCUMENT_NODE) { return false; } if (!target.parentNode) { return true; } return isAncestorRemoved(target.parentNode, mirror2); } function legacy_isTouchEvent(event) { return Boolean(event.changedTouches); } function polyfill$1(win = window) { if ("NodeList" in win && !win.NodeList.prototype.forEach) { win.NodeList.prototype.forEach = Array.prototype.forEach; } if ("DOMTokenList" in win && !win.DOMTokenList.prototype.forEach) { win.DOMTokenList.prototype.forEach = Array.prototype.forEach; } if (!Node.prototype.contains) { Node.prototype.contains = (...args) => { let node = args[0]; if (!(0 in args)) { throw new TypeError("1 argument is required"); } do { if (this === node) { return true; } } while (node = node && node.parentNode); return false; }; } } function isSerializedIframe(n2, mirror2) { return Boolean(n2.nodeName === "IFRAME" && mirror2.getMeta(n2)); } function isSerializedStylesheet(n2, mirror2) { return Boolean( n2.nodeName === "LINK" && n2.nodeType === n2.ELEMENT_NODE && n2.getAttribute && n2.getAttribute("rel") === "stylesheet" && mirror2.getMeta(n2) ); } function hasShadowRoot(n2) { return Boolean(n2?.shadowRoot); } class StyleSheetMirror { constructor() { this.id = 1; this.styleIDMap = /* @__PURE__ */ new WeakMap(); this.idStyleMap = /* @__PURE__ */ new Map(); } getId(stylesheet) { return this.styleIDMap.get(stylesheet) ?? -1; } has(stylesheet) { return this.styleIDMap.has(stylesheet); } /** * @returns If the stylesheet is in the mirror, returns the id of the stylesheet. If not, return the new assigned id. */ add(stylesheet, id) { if (this.has(stylesheet)) return this.getId(stylesheet); let newId; if (id === void 0) { newId = this.id++; } else newId = id; this.styleIDMap.set(stylesheet, newId); this.idStyleMap.set(newId, stylesheet); return newId; } getStyle(id) { return this.idStyleMap.get(id) || null; } reset() { this.styleIDMap = /* @__PURE__ */ new WeakMap(); this.idStyleMap = /* @__PURE__ */ new Map(); this.id = 1; } generateId() { return this.id++; } } function getShadowHost(n2) { let shadowHost = null; if (n2.getRootNode?.()?.nodeType === Node.DOCUMENT_FRAGMENT_NODE && n2.getRootNode().host) shadowHost = n2.getRootNode().host; return shadowHost; } function getRootShadowHost(n2) { let rootShadowHost = n2; let shadowHost; while (shadowHost = getShadowHost(rootShadowHost)) rootShadowHost = shadowHost; return rootShadowHost; } function shadowHostInDom(n2) { const doc = n2.ownerDocument; if (!doc) return false; const shadowHost = getRootShadowHost(n2); return doc.contains(shadowHost); } function inDom(n2) { const doc = n2.ownerDocument; if (!doc) return false; return doc.contains(n2) || shadowHostInDom(n2); } const cachedImplementations = {}; function getImplementation(name) { const cached = cachedImplementations[name]; if (cached) { return cached; } const document2 = window.document; let impl = window[name]; if (document2 && typeof document2.createElement === "function") { try { const sandbox = document2.createElement("iframe"); sandbox.hidden = true; document2.head.appendChild(sandbox); const contentWindow = sandbox.contentWindow; if (contentWindow && contentWindow[name]) { impl = // eslint-disable-next-line @typescript-eslint/unbound-method contentWindow[name]; } document2.head.removeChild(sandbox); } catch (e2) { } } return cachedImplementations[name] = impl.bind( window ); } function onRequestAnimationFrame(...rest) { return getImplementation("requestAnimationFrame")(...rest); } function setTimeout$1(...rest) { return getImplementation("setTimeout")(...rest); } function clearTimeout$2(...rest) { return getImplementation("clearTimeout")(...rest); } var EventType = /* @__PURE__ */ ((EventType2) => { EventType2[EventType2["DomContentLoaded"] = 0] = "DomContentLoaded"; EventType2[EventType2["Load"] = 1] = "Load"; EventType2[EventType2["FullSnapshot"] = 2] = "FullSnapshot"; EventType2[EventType2["IncrementalSnapshot"] = 3] = "IncrementalSnapshot"; EventType2[EventType2["Meta"] = 4] = "Meta"; EventType2[EventType2["Custom"] = 5] = "Custom"; EventType2[EventType2["Plugin"] = 6] = "Plugin"; return EventType2; })(EventType || {}); var IncrementalSource = /* @__PURE__ */ ((IncrementalSource2) => { IncrementalSource2[IncrementalSource2["Mutation"] = 0] = "Mutation"; IncrementalSource2[IncrementalSource2["MouseMove"] = 1] = "MouseMove"; IncrementalSource2[IncrementalSource2["MouseInteraction"] = 2] = "MouseInteraction"; IncrementalSource2[IncrementalSource2["Scroll"] = 3] = "Scroll"; IncrementalSource2[IncrementalSource2["ViewportResize"] = 4] = "ViewportResize"; IncrementalSource2[IncrementalSource2["Input"] = 5] = "Input"; IncrementalSource2[IncrementalSource2["TouchMove"] = 6] = "TouchMove"; IncrementalSource2[IncrementalSource2["MediaInteraction"] = 7] = "MediaInteraction"; IncrementalSource2[IncrementalSource2["StyleSheetRule"] = 8] = "StyleSheetRule"; IncrementalSource2[IncrementalSource2["CanvasMutation"] = 9] = "CanvasMutation"; IncrementalSource2[IncrementalSource2["Font"] = 10] = "Font"; IncrementalSource2[IncrementalSource2["Log"] = 11] = "Log"; IncrementalSource2[IncrementalSource2["Drag"] = 12] = "Drag"; IncrementalSource2[IncrementalSource2["StyleDeclaration"] = 13] = "StyleDeclaration"; IncrementalSource2[IncrementalSource2["Selection"] = 14] = "Selection"; IncrementalSource2[IncrementalSource2["AdoptedStyleSheet"] = 15] = "AdoptedStyleSheet"; IncrementalSource2[IncrementalSource2["CustomElement"] = 16] = "CustomElement"; return IncrementalSource2; })(IncrementalSource || {}); var MouseInteractions = /* @__PURE__ */ ((MouseInteractions2) => { MouseInteractions2[MouseInteractions2["MouseUp"] = 0] = "MouseUp"; MouseInteractions2[MouseInteractions2["MouseDown"] = 1] = "MouseDown"; MouseInteractions2[MouseInteractions2["Click"] = 2] = "Click"; MouseInteractions2[MouseInteractions2["ContextMenu"] = 3] = "ContextMenu"; MouseInteractions2[MouseInteractions2["DblClick"] = 4] = "DblClick"; MouseInteractions2[MouseInteractions2["Focus"] = 5] = "Focus"; MouseInteractions2[MouseInteractions2["Blur"] = 6] = "Blur"; MouseInteractions2[MouseInteractions2["TouchStart"] = 7] = "TouchStart"; MouseInteractions2[MouseInteractions2["TouchMove_Departed"] = 8] = "TouchMove_Departed"; MouseInteractions2[MouseInteractions2["TouchEnd"] = 9] = "TouchEnd"; MouseInteractions2[MouseInteractions2["TouchCancel"] = 10] = "TouchCancel"; return MouseInteractions2; })(MouseInteractions || {}); var PointerTypes = /* @__PURE__ */ ((PointerTypes2) => { PointerTypes2[PointerTypes2["Mouse"] = 0] = "Mouse"; PointerTypes2[PointerTypes2["Pen"] = 1] = "Pen"; PointerTypes2[PointerTypes2["Touch"] = 2] = "Touch"; return PointerTypes2; })(PointerTypes || {}); var MediaInteractions = /* @__PURE__ */ ((MediaInteractions2) => { MediaInteractions2[MediaInteractions2["Play"] = 0] = "Play"; MediaInteractions2[MediaInteractions2["Pause"] = 1] = "Pause"; MediaInteractions2[MediaInteractions2["Seeked"] = 2] = "Seeked"; MediaInteractions2[MediaInteractions2["VolumeChange"] = 3] = "VolumeChange"; MediaInteractions2[MediaInteractions2["RateChange"] = 4] = "RateChange"; return MediaInteractions2; })(MediaInteractions || {}); function getIFrameContentDocument(iframe) { try { return iframe.contentDocument; } catch (e2) { } } function getIFrameContentWindow(iframe) { try { return iframe.contentWindow; } catch (e2) { } } function isNodeInLinkedList(n2) { return "__ln" in n2; } class DoubleLinkedList { constructor() { this.length = 0; this.head = null; this.tail = null; } get(position) { if (position >= this.length) { throw new Error("Position outside of list range"); } let current = this.head; for (let index = 0; index < position; index++) { current = current?.next || null; } return current; } addNode(n2) { const node = { value: n2, previous: null, next: null }; n2.__ln = node; if (n2.previousSibling && isNodeInLinkedList(n2.previousSibling)) { const current = n2.previousSibling.__ln.next; node.next = current; node.previous = n2.previousSibling.__ln; n2.previousSibling.__ln.next = node; if (current) { current.previous = node; } } else if (n2.nextSibling && isNodeInLinkedList(n2.nextSibling) && n2.nextSibling.__ln.previous) { const current = n2.nextSibling.__ln.previous; node.previous = current; node.next = n2.nextSibling.__ln; n2.nextSibling.__ln.previous = node; if (current) { current.next = node; } } else { if (this.head) { this.head.previous = node; } node.next = this.head; this.head = node; } if (node.next === null) { this.tail = node; } this.length++; } removeNode(n2) { const current = n2.__ln; if (!this.head) { return; } if (!current.previous) { this.head = current.next; if (this.head) { this.head.previous = null; } else { this.tail = null; } } else { current.previous.next = current.next; if (current.next) { current.next.previous = current.previous; } else { this.tail = current.previous; } } if (n2.__ln) { delete n2.__ln; } this.length--; } } const moveKey = (id, parentId) => `${id}@${parentId}`; class MutationBuffer { constructor() { this.frozen = false; this.locked = false; this.texts = []; this.attributes = []; this.attributeMap = /* @__PURE__ */ new WeakMap(); this.removes = []; this.mapRemoves = []; this.movedMap = {}; this.addedSet = /* @__PURE__ */ new Set(); this.movedSet = /* @__PURE__ */ new Set(); this.droppedSet = /* @__PURE__ */ new Set(); this.processMutations = (mutations) => { mutations.forEach(this.processMutation); this.emit(); }; this.emit = () => { if (this.frozen || this.locked) { return; } const adds = []; const addedIds = /* @__PURE__ */ new Set(); const addList = new DoubleLinkedList(); const getNextId = (n2) => { let ns = n2; let nextId = IGNORED_NODE; while (nextId === IGNORED_NODE) { ns = ns && ns.nextSibling; nextId = ns && this.mirror.getId(ns); } return nextId; }; const pushAdd = (n2) => { if (!n2.parentNode || !inDom(n2)) { return; } const parentId = isShadowRoot(n2.parentNode) ? this.mirror.getId(getShadowHost(n2)) : this.mirror.getId(n2.parentNode); const nextId = getNextId(n2); if (parentId === -1 || nextId === -1) { return addList.addNode(n2); } const sn = serializeNodeWithId(n2, { doc: this.doc, mirror: this.mirror, blockClass: this.blockClass, blockSelector: this.blockSelector, maskAllText: this.maskAllText, unblockSelector: this.unblockSelector, maskTextClass: this.maskTextClass, unmaskTextClass: this.unmaskTextClass, maskTextSelector: this.maskTextSelector, unmaskTextSelector: this.unmaskTextSelector, skipChild: true, newlyAddedElement: true, inlineStylesheet: this.inlineStylesheet, maskInputOptions: this.maskInputOptions, maskAttributeFn: this.maskAttributeFn, maskTextFn: this.maskTextFn, maskInputFn: this.maskInputFn, slimDOMOptions: this.slimDOMOptions, dataURLOptions: this.dataURLOptions, recordCanvas: this.recordCanvas, inlineImages: this.inlineImages, onSerialize: (currentN) => { if (isSerializedIframe(currentN, this.mirror) && !isBlocked( currentN, this.blockClass, this.blockSelector, this.unblockSelector, false )) { this.iframeManager.addIframe(currentN); } if (isSerializedStylesheet(currentN, this.mirror)) { this.stylesheetManager.trackLinkElement( currentN ); } if (hasShadowRoot(n2)) { this.shadowDomManager.addShadowRoot(n2.shadowRoot, this.doc); } }, onIframeLoad: (iframe, childSn) => { if (isBlocked( iframe, this.blockClass, this.blockSelector, this.unblockSelector, false )) { return; } this.iframeManager.attachIframe(iframe, childSn); if (iframe.contentWindow) { this.canvasManager.addWindow(iframe.contentWindow); } this.shadowDomManager.observeAttachShadow(iframe); }, onStylesheetLoad: (link, childSn) => { this.stylesheetManager.attachLinkElement(link, childSn); }, onBlockedImageLoad: (_imageEl, serializedNode, { width, height }) => { this.mutationCb({ adds: [], removes: [], texts: [], attributes: [ { id: serializedNode.id, attributes: { style: { width: `${width}px`, height: `${height}px` } } } ] }); }, ignoreCSSAttributes: this.ignoreCSSAttributes }); if (sn) { adds.push({ parentId, nextId, node: sn }); addedIds.add(sn.id); } }; while (this.mapRemoves.length) { this.mirror.removeNodeFromMap(this.mapRemoves.shift()); } for (const n2 of this.movedSet) { if (isParentRemoved(this.removes, n2, this.mirror) && !this.movedSet.has(n2.parentNode)) { continue; } pushAdd(n2); } for (const n2 of this.addedSet) { if (!isAncestorInSet(this.droppedSet, n2) && !isParentRemoved(this.removes, n2, this.mirror)) { pushAdd(n2); } else if (isAncestorInSet(this.movedSet, n2)) { pushAdd(n2); } else { this.droppedSet.add(n2); } } let candidate = null; while (addList.length) { let node = null; if (candidate) { const parentId = this.mirror.getId(candidate.value.parentNode); const nextId = getNextId(candidate.value); if (parentId !== -1 && nextId !== -1) { node = candidate; } } if (!node) { let tailNode = addList.tail; while (tailNode) { const _node = tailNode; tailNode = tailNode.previous; if (_node) { const parentId = this.mirror.getId(_node.value.parentNode); const nextId = getNextId(_node.value); if (nextId === -1) continue; else if (parentId !== -1) { node = _node; break; } else { const unhandledNode = _node.value; if (unhandledNode.parentNode && unhandledNode.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE) { const shadowHost = unhandledNode.parentNode.host; const parentId2 = this.mirror.getId(shadowHost); if (parentId2 !== -1) { node = _node; break; } } } } } } if (!node) { while (addList.head) { addList.removeNode(addList.head.value); } break; } candidate = node.previous; addList.removeNode(node.value); pushAdd(node.value); } const payload = { texts: this.texts.map((text) => ({ id: this.mirror.getId(text.node), value: text.value })).filter((text) => !addedIds.has(text.id)).filter((text) => this.mirror.has(text.id)), attributes: this.attributes.map((attribute) => { const { attributes } = attribute; if (typeof attributes.style === "string") { const diffAsStr = JSON.stringify(attribute.styleDiff); const unchangedAsStr = JSON.stringify(attribute._unchangedStyles); if (diffAsStr.length < attributes.style.length) { if ((diffAsStr + unchangedAsStr).split("var(").length === attributes.style.split("var(").length) { attributes.style = attribute.styleDiff; } } } return { id: this.mirror.getId(attribute.node), attributes }; }).filter((attribute) => !addedIds.has(attribute.id)).filter((attribute) => this.mirror.has(attribute.id)), removes: this.removes, adds }; if (!payload.texts.length && !payload.attributes.length && !payload.removes.length && !payload.adds.length) { return; } this.texts = []; this.attributes = []; this.attributeMap = /* @__PURE__ */ new WeakMap(); this.removes = []; this.addedSet = /* @__PURE__ */ new Set(); this.movedSet = /* @__PURE__ */ new Set(); this.droppedSet = /* @__PURE__ */ new Set(); this.movedMap = {}; this.mutationCb(payload); }; this.processMutation = (m) => { if (isIgnored(m.target, this.mirror)) { return; } switch (m.type) { case "characterData": { const value = m.target.textContent; if (!isBlocked( m.target, this.blockClass, this.blockSelector, this.unblockSelector, false ) && value !== m.oldValue) { this.texts.push({ value: needMaskingText( m.target, this.maskTextClass, this.maskTextSelector, this.unmaskTextClass, this.unmaskTextSelector, this.maskAllText ) && value ? this.maskTextFn ? this.maskTextFn(value, closestElementOfNode$1(m.target)) : value.replace(/[\S]/g, "*") : value, node: m.target }); } break; } case "attributes": { const target = m.target; let attributeName = m.attributeName; let value = m.target.getAttribute(attributeName); if (attributeName === "value") { const type = getInputType(target); const tagName = target.tagName; value = getInputValue(target, tagName, type); const isInputMasked = shouldMaskInput({ maskInputOptions: this.maskInputOptions, tagName, type }); const forceMask = needMaskingText( m.target, this.maskTextClass, this.maskTextSelector, this.unmaskTextClass, this.unmaskTextSelector, isInputMasked ); value = maskInputValue({ isMasked: forceMask, element: target, value, maskInputFn: this.maskInputFn }); } if (isBlocked( m.target, this.blockClass, this.blockSelector, this.unblockSelector, false ) || value === m.oldValue) { return; } let item = this.attributeMap.get(m.target); if (target.tagName === "IFRAME" && attributeName === "src" && !this.keepIframeSrcFn(value)) { const iframeDoc = getIFrameContentDocument( target ); if (!iframeDoc) { attributeName = "rr_src"; } else { return; } } if (!item) { item = { node: m.target, attributes: {}, styleDiff: {}, _unchangedStyles: {} }; this.attributes.push(item); this.attributeMap.set(m.target, item); } if (attributeName === "type" && target.tagName === "INPUT" && (m.oldValue || "").toLowerCase() === "password") { target.setAttribute("data-rr-is-password", "true"); } if (!ignoreAttribute(target.tagName, attributeName)) { item.attributes[attributeName] = transformAttribute( this.doc, toLowerCase(target.tagName), toLowerCase(attributeName), value, target, this.maskAttributeFn ); if (attributeName === "style") { if (!this.unattachedDoc) { try { this.unattachedDoc = document.implementation.createHTMLDocument(); } catch (e2) { this.unattachedDoc = this.doc; } } const old = this.unattachedDoc.createElement("span"); if (m.oldValue) { old.setAttribute("style", m.oldValue); } for (const pname of Array.from(target.style)) { const newValue = target.style.getPropertyValue(pname); const newPriority = target.style.getPropertyPriority(pname); if (newValue !== old.style.getPropertyValue(pname) || newPriority !== old.style.getPropertyPriority(pname)) { if (newPriority === "") { item.styleDiff[pname] = newValue; } else { item.styleDiff[pname] = [newValue, newPriority]; } } else { item._unchangedStyles[pname] = [newValue, newPriority]; } } for (const pname of Array.from(old.style)) { if (target.style.getPropertyValue(pname) === "") { item.styleDiff[pname] = false; } } } } break; } case "childList": { if (isBlocked( m.target, this.blockClass, this.blockSelector, this.unblockSelector, true )) { return; } m.addedNodes.forEach((n2) => this.genAdds(n2, m.target)); m.removedNodes.forEach((n2) => { const nodeId = this.mirror.getId(n2); const parentId = isShadowRoot(m.target) ? this.mirror.getId(m.target.host) : this.mirror.getId(m.target); if (isBlocked( m.target, this.blockClass, this.blockSelector, this.unblockSelector, false ) || isIgnored(n2, this.mirror) || !isSerialized(n2, this.mirror)) { return; } if (this.addedSet.has(n2)) { deepDelete(this.addedSet, n2); this.droppedSet.add(n2); } else if (this.addedSet.has(m.target) && nodeId === -1) ; else if (isAncestorRemoved(m.target, this.mirror)) ; else if (this.movedSet.has(n2) && this.movedMap[moveKey(nodeId, parentId)]) { deepDelete(this.movedSet, n2); } else { this.removes.push({ parentId, id: nodeId, isShadow: isShadowRoot(m.target) && isNativeShadowDom(m.target) ? true : void 0 }); } this.mapRemoves.push(n2); }); break; } } }; this.genAdds = (n2, target) => { if (this.processedNodeManager.inOtherBuffer(n2, this)) return; if (this.addedSet.has(n2) || this.movedSet.has(n2)) return; if (this.mirror.hasNode(n2)) { if (isIgnored(n2, this.mirror)) { return; } this.movedSet.add(n2); let targetId = null; if (target && this.mirror.hasNode(target)) { targetId = this.mirror.getId(target); } if (targetId && targetId !== -1) { this.movedMap[moveKey(this.mirror.getId(n2), targetId)] = true; } } else { this.addedSet.add(n2); this.droppedSet.delete(n2); } if (!isBlocked( n2, this.blockClass, this.blockSelector, this.unblockSelector, false )) { if (n2.childNodes) { n2.childNodes.forEach((childN) => this.genAdds(childN)); } if (hasShadowRoot(n2)) { n2.shadowRoot.childNodes.forEach((childN) => { this.processedNodeManager.add(childN, this); this.genAdds(childN, n2); }); } } }; } init(options) { [ "mutationCb", "blockClass", "blockSelector", "unblockSelector", "maskAllText", "maskTextClass", "unmaskTextClass", "maskTextSelector", "unmaskTextSelector", "inlineStylesheet", "maskInputOptions", "maskAttributeFn", "maskTextFn", "maskInputFn", "keepIframeSrcFn", "recordCanvas", "inlineImages", "slimDOMOptions", "dataURLOptions", "doc", "mirror", "iframeManager", "stylesheetManager", "shadowDomManager", "canvasManager", "processedNodeManager", "ignoreCSSAttributes" ].forEach((key) => { this[key] = options[key]; }); } freeze() { this.frozen = true; this.canvasManager.freeze(); } unfreeze() { this.frozen = false; this.canvasManager.unfreeze(); this.emit(); } isFrozen() { return this.frozen; } lock() { this.locked = true; this.canvasManager.lock(); } unlock() { this.locked = false; this.canvasManager.unlock(); this.emit(); } reset() { this.shadowDomManager.reset(); this.canvasManager.reset(); } } function deepDelete(addsSet, n2) { addsSet.delete(n2); n2.childNodes?.forEach((childN) => deepDelete(addsSet, childN)); } function isParentRemoved(removes, n2, mirror2) { if (removes.length === 0) return false; return _isParentRemoved(removes, n2, mirror2); } function _isParentRemoved(removes, n2, mirror2) { let node = n2.parentNode; while (node) { const parentId = mirror2.getId(node); if (removes.some((r2) => r2.id === parentId)) { return true; } node = node.parentNode; } return false; } function isAncestorInSet(set, n2) { if (set.size === 0) return false; return _isAncestorInSet(set, n2); } function _isAncestorInSet(set, n2) { const { parentNode } = n2; if (!parentNode) { return false; } if (set.has(parentNode)) { return true; } return _isAncestorInSet(set, parentNode); } let errorHandler; function registerErrorHandler(handler) { errorHandler = handler; } function unregisterErrorHandler() { errorHandler = void 0; } const callbackWrapper = (cb) => { if (!errorHandler) { return cb; } const rrwebWrapped = (...rest) => { try { return cb(...rest); } catch (error) { if (errorHandler && errorHandler(error) === true) { return () => { }; } throw error; } }; return rrwebWrapped; }; const mutationBuffers = []; function getEventTarget(event) { try { if ("composedPath" in event) { const path = event.composedPath(); if (path.length) { return path[0]; } } else if ("path" in event && event.path.length) { return event.path[0]; } } catch { } return event && event.target; } function initMutationObserver(options, rootEl) { const mutationBuffer = new MutationBuffer(); mutationBuffers.push(mutationBuffer); mutationBuffer.init(options); let mutationObserverCtor = window.MutationObserver || /** * Some websites may disable MutationObserver by removing it from the window object. * If someone is using rrweb to build a browser extention or things like it, they * could not change the website's code but can have an opportunity to inject some * code before the website executing its JS logic. * Then they can do this to store the native MutationObserver: * window.__rrMutationObserver = MutationObserver */ window.__rrMutationObserver; const angularZoneSymbol = window?.Zone?.__symbol__?.("MutationObserver"); if (angularZoneSymbol && window[angularZoneSymbol]) { mutationObserverCtor = window[angularZoneSymbol]; } const observer = new mutationObserverCtor( callbackWrapper((mutations) => { if (options.onMutation && options.onMutation(mutations) === false) { return; } mutationBuffer.processMutations.bind(mutationBuffer)(mutations); }) ); observer.observe(rootEl, { attributes: true, attributeOldValue: true, characterData: true, characterDataOldValue: true, childList: true, subtree: true }); return observer; } function initMoveObserver({ mousemoveCb, sampling, doc, mirror: mirror2 }) { if (sampling.mousemove === false) { return () => { }; } const threshold = typeof sampling.mousemove === "number" ? sampling.mousemove : 50; const callbackThreshold = typeof sampling.mousemoveCallback === "number" ? sampling.mousemoveCallback : 500; let positions = []; let timeBaseline; const wrappedCb = throttle$1( callbackWrapper( (source) => { const totalOffset = Date.now() - timeBaseline; mousemoveCb( positions.map((p) => { p.timeOffset -= totalOffset; return p; }), source ); positions = []; timeBaseline = null; } ), callbackThreshold ); const updatePosition = callbackWrapper( throttle$1( callbackWrapper((evt) => { const target = getEventTarget(evt); const { clientX, clientY } = legacy_isTouchEvent(evt) ? evt.changedTouches[0] : evt; if (!timeBaseline) { timeBaseline = nowTimestamp(); } positions.push({ x: clientX, y: clientY, id: mirror2.getId(target), timeOffset: nowTimestamp() - timeBaseline }); wrappedCb( typeof DragEvent !== "undefined" && evt instanceof DragEvent ? IncrementalSource.Drag : evt instanceof MouseEvent ? IncrementalSource.MouseMove : IncrementalSource.TouchMove ); }), threshold, { trailing: false } ) ); const handlers = [ on("mousemove", updatePosition, doc), on("touchmove", updatePosition, doc), on("drag", updatePosition, doc) ]; return callbackWrapper(() => { handlers.forEach((h) => h()); }); } function initMouseInteractionObserver({ mouseInteractionCb, doc, mirror: mirror2, blockClass, blockSelector, unblockSelector, sampling }) { if (sampling.mouseInteraction === false) { return () => { }; } const disableMap = sampling.mouseInteraction === true || sampling.mouseInteraction === void 0 ? {} : sampling.mouseInteraction; const handlers = []; let currentPointerType = null; const getHandler = (eventKey) => { return (event) => { const target = getEventTarget(event); if (isBlocked(target, blockClass, blockSelector, unblockSelector, true)) { return; } let pointerType = null; let thisEventKey = eventKey; if ("pointerType" in event) { switch (event.pointerType) { case "mouse": pointerType = PointerTypes.Mouse; break; case "touch": pointerType = PointerTypes.Touch; break; case "pen": pointerType = PointerTypes.Pen; break; } if (pointerType === PointerTypes.Touch) { if (MouseInteractions[eventKey] === MouseInteractions.MouseDown) { thisEventKey = "TouchStart"; } else if (MouseInteractions[eventKey] === MouseInteractions.MouseUp) { thisEventKey = "TouchEnd"; } } else if (pointerType === PointerTypes.Pen) ; } else if (legacy_isTouchEvent(event)) { pointerType = PointerTypes.Touch; } if (pointerType !== null) { currentPointerType = pointerType; if (thisEventKey.startsWith("Touch") && pointerType === PointerTypes.Touch || thisEventKey.startsWith("Mouse") && pointerType === PointerTypes.Mouse) { pointerType = null; } } else if (MouseInteractions[eventKey] === MouseInteractions.Click) { pointerType = currentPointerType; currentPointerType = null; } const e2 = legacy_isTouchEvent(event) ? event.changedTouches[0] : event; if (!e2) { return; } const id = mirror2.getId(target); const { clientX, clientY } = e2; callbackWrapper(mouseInteractionCb)({ type: MouseInteractions[thisEventKey], id, x: clientX, y: clientY, ...pointerType !== null && { pointerType } }); }; }; Object.keys(MouseInteractions).filter( (key) => Number.isNaN(Number(key)) && !key.endsWith("_Departed") && disableMap[key] !== false ).forEach((eventKey) => { let eventName = toLowerCase(eventKey); const handler = getHandler(eventKey); if (window.PointerEvent) { switch (MouseInteractions[eventKey]) { case MouseInteractions.MouseDown: case MouseInteractions.MouseUp: eventName = eventName.replace( "mouse", "pointer" ); break; case MouseInteractions.TouchStart: case MouseInteractions.TouchEnd: return; } } handlers.push(on(eventName, handler, doc)); }); return callbackWrapper(() => { handlers.forEach((h) => h()); }); } function initScrollObserver({ scrollCb, doc, mirror: mirror2, blockClass, blockSelector, unblockSelector, sampling }) { const updatePosition = callbackWrapper( throttle$1( callbackWrapper((evt) => { const target = getEventTarget(evt); if (!target || isBlocked( target, blockClass, blockSelector, unblockSelector, true )) { return; } const id = mirror2.getId(target); if (target === doc && doc.defaultView) { const scrollLeftTop = getWindowScroll(doc.defaultView); scrollCb({ id, x: scrollLeftTop.left, y: scrollLeftTop.top }); } else { scrollCb({ id, x: target.scrollLeft, y: target.scrollTop }); } }), sampling.scroll || 100 ) ); return on("scroll", updatePosition, doc); } function initViewportResizeObserver({ viewportResizeCb }, { win }) { let lastH = -1; let lastW = -1; const updateDimension = callbackWrapper( throttle$1( callbackWrapper(() => { const height = getWindowHeight(); const width = getWindowWidth(); if (lastH !== height || lastW !== width) { viewportResizeCb({ width: Number(width), height: Number(height) }); lastH = height; lastW = width; } }), 200 ) ); return on("resize", updateDimension, win); } const INPUT_TAGS = ["INPUT", "TEXTAREA", "SELECT"]; const lastInputValueMap = /* @__PURE__ */ new WeakMap(); function initInputObserver({ inputCb, doc, mirror: mirror2, blockClass, blockSelector, unblockSelector, ignoreClass, ignoreSelector, maskInputOptions, maskInputFn, sampling, userTriggeredOnInput, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector }) { function eventHandler(event) { let target = getEventTarget(event); const userTriggered = event.isTrusted; const tagName = target && toUpperCase(target.tagName); if (tagName === "OPTION") target = target.parentElement; if (!target || !tagName || INPUT_TAGS.indexOf(tagName) < 0 || isBlocked( target, blockClass, blockSelector, unblockSelector, true )) { return; } const el = target; if (el.classList.contains(ignoreClass) || ignoreSelector && el.matches(ignoreSelector)) { return; } const type = getInputType(target); let text = getInputValue(el, tagName, type); let isChecked = false; const isInputMasked = shouldMaskInput({ maskInputOptions, tagName, type }); const forceMask = needMaskingText( target, maskTextClass, maskTextSelector, unmaskTextClass, unmaskTextSelector, isInputMasked ); if (type === "radio" || type === "checkbox") { isChecked = target.checked; } text = maskInputValue({ isMasked: forceMask, element: target, value: text, maskInputFn }); cbWithDedup( target, userTriggeredOnInput ? { text, isChecked, userTriggered } : { text, isChecked } ); const name = target.name; if (type === "radio" && name && isChecked) { doc.querySelectorAll(`input[type="radio"][name="${name}"]`).forEach((el2) => { if (el2 !== target) { const text2 = maskInputValue({ // share mask behavior of `target` isMasked: forceMask, element: el2, value: getInputValue(el2, tagName, type), maskInputFn }); cbWithDedup( el2, userTriggeredOnInput ? { text: text2, isChecked: !isChecked, userTriggered: false } : { text: text2, isChecked: !isChecked } ); } }); } } function cbWithDedup(target, v2) { const lastInputValue = lastInputValueMap.get(target); if (!lastInputValue || lastInputValue.text !== v2.text || lastInputValue.isChecked !== v2.isChecked) { lastInputValueMap.set(target, v2); const id = mirror2.getId(target); callbackWrapper(inputCb)({ ...v2, id }); } } const events = sampling.input === "last" ? ["change"] : ["input", "change"]; const handlers = events.map( (eventName) => on(eventName, callbackWrapper(eventHandler), doc) ); const currentWindow = doc.defaultView; if (!currentWindow) { return () => { handlers.forEach((h) => h()); }; } const propertyDescriptor = currentWindow.Object.getOwnPropertyDescriptor( currentWindow.HTMLInputElement.prototype, "value" ); const hookProperties = [ [currentWindow.HTMLInputElement.prototype, "value"], [currentWindow.HTMLInputElement.prototype, "checked"], [currentWindow.HTMLSelectElement.prototype, "value"], [currentWindow.HTMLTextAreaElement.prototype, "value"], // Some UI library use selectedIndex to set select value [currentWindow.HTMLSelectElement.prototype, "selectedIndex"], [currentWindow.HTMLOptionElement.prototype, "selected"] ]; if (propertyDescriptor && propertyDescriptor.set) { handlers.push( ...hookProperties.map( (p) => hookSetter( p[0], p[1], { set() { callbackWrapper(eventHandler)({ target: this, isTrusted: false // userTriggered to false as this could well be programmatic }); } }, false, currentWindow ) ) ); } return callbackWrapper(() => { handlers.forEach((h) => h()); }); } function getNestedCSSRulePositions(rule) { const positions = []; function recurse(childRule, pos) { if (hasNestedCSSRule("CSSGroupingRule") && childRule.parentRule instanceof CSSGroupingRule || hasNestedCSSRule("CSSMediaRule") && childRule.parentRule instanceof CSSMediaRule || hasNestedCSSRule("CSSSupportsRule") && childRule.parentRule instanceof CSSSupportsRule || hasNestedCSSRule("CSSConditionRule") && childRule.parentRule instanceof CSSConditionRule) { const rules2 = Array.from( childRule.parentRule.cssRules ); const index = rules2.indexOf(childRule); pos.unshift(index); } else if (childRule.parentStyleSheet) { const rules2 = Array.from(childRule.parentStyleSheet.cssRules); const index = rules2.indexOf(childRule); pos.unshift(index); } return pos; } return recurse(rule, positions); } function getIdAndStyleId(sheet, mirror2, styleMirror) { let id, styleId; if (!sheet) return {}; if (sheet.ownerNode) id = mirror2.getId(sheet.ownerNode); else styleId = styleMirror.getId(sheet); return { styleId, id }; } function initStyleSheetObserver({ styleSheetRuleCb, mirror: mirror2, stylesheetManager }, { win }) { if (!win.CSSStyleSheet || !win.CSSStyleSheet.prototype) { return () => { }; } const insertRule = win.CSSStyleSheet.prototype.insertRule; win.CSSStyleSheet.prototype.insertRule = new Proxy(insertRule, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [rule, index] = argumentsList; const { id, styleId } = getIdAndStyleId( thisArg, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleSheetRuleCb({ id, styleId, adds: [{ rule, index }] }); } return target.apply(thisArg, argumentsList); } ) }); const deleteRule = win.CSSStyleSheet.prototype.deleteRule; win.CSSStyleSheet.prototype.deleteRule = new Proxy(deleteRule, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [index] = argumentsList; const { id, styleId } = getIdAndStyleId( thisArg, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleSheetRuleCb({ id, styleId, removes: [{ index }] }); } return target.apply(thisArg, argumentsList); } ) }); let replace; if (win.CSSStyleSheet.prototype.replace) { replace = win.CSSStyleSheet.prototype.replace; win.CSSStyleSheet.prototype.replace = new Proxy(replace, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [text] = argumentsList; const { id, styleId } = getIdAndStyleId( thisArg, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleSheetRuleCb({ id, styleId, replace: text }); } return target.apply(thisArg, argumentsList); } ) }); } let replaceSync; if (win.CSSStyleSheet.prototype.replaceSync) { replaceSync = win.CSSStyleSheet.prototype.replaceSync; win.CSSStyleSheet.prototype.replaceSync = new Proxy(replaceSync, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [text] = argumentsList; const { id, styleId } = getIdAndStyleId( thisArg, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleSheetRuleCb({ id, styleId, replaceSync: text }); } return target.apply(thisArg, argumentsList); } ) }); } const supportedNestedCSSRuleTypes = {}; if (canMonkeyPatchNestedCSSRule("CSSGroupingRule")) { supportedNestedCSSRuleTypes.CSSGroupingRule = win.CSSGroupingRule; } else { if (canMonkeyPatchNestedCSSRule("CSSMediaRule")) { supportedNestedCSSRuleTypes.CSSMediaRule = win.CSSMediaRule; } if (canMonkeyPatchNestedCSSRule("CSSConditionRule")) { supportedNestedCSSRuleTypes.CSSConditionRule = win.CSSConditionRule; } if (canMonkeyPatchNestedCSSRule("CSSSupportsRule")) { supportedNestedCSSRuleTypes.CSSSupportsRule = win.CSSSupportsRule; } } const unmodifiedFunctions = {}; Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => { unmodifiedFunctions[typeKey] = { // eslint-disable-next-line @typescript-eslint/unbound-method insertRule: type.prototype.insertRule, // eslint-disable-next-line @typescript-eslint/unbound-method deleteRule: type.prototype.deleteRule }; type.prototype.insertRule = new Proxy( unmodifiedFunctions[typeKey].insertRule, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [rule, index] = argumentsList; const { id, styleId } = getIdAndStyleId( thisArg.parentStyleSheet, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleSheetRuleCb({ id, styleId, adds: [ { rule, index: [ ...getNestedCSSRulePositions(thisArg), index || 0 // defaults to 0 ] } ] }); } return target.apply(thisArg, argumentsList); } ) } ); type.prototype.deleteRule = new Proxy( unmodifiedFunctions[typeKey].deleteRule, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [index] = argumentsList; const { id, styleId } = getIdAndStyleId( thisArg.parentStyleSheet, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleSheetRuleCb({ id, styleId, removes: [ { index: [...getNestedCSSRulePositions(thisArg), index] } ] }); } return target.apply(thisArg, argumentsList); } ) } ); }); return callbackWrapper(() => { win.CSSStyleSheet.prototype.insertRule = insertRule; win.CSSStyleSheet.prototype.deleteRule = deleteRule; replace && (win.CSSStyleSheet.prototype.replace = replace); replaceSync && (win.CSSStyleSheet.prototype.replaceSync = replaceSync); Object.entries(supportedNestedCSSRuleTypes).forEach(([typeKey, type]) => { type.prototype.insertRule = unmodifiedFunctions[typeKey].insertRule; type.prototype.deleteRule = unmodifiedFunctions[typeKey].deleteRule; }); }); } function initAdoptedStyleSheetObserver({ mirror: mirror2, stylesheetManager }, host) { let hostId = null; if (host.nodeName === "#document") hostId = mirror2.getId(host); else hostId = mirror2.getId(host.host); const patchTarget = host.nodeName === "#document" ? host.defaultView?.Document : host.ownerDocument?.defaultView?.ShadowRoot; const originalPropertyDescriptor = patchTarget?.prototype ? Object.getOwnPropertyDescriptor( patchTarget?.prototype, "adoptedStyleSheets" ) : void 0; if (hostId === null || hostId === -1 || !patchTarget || !originalPropertyDescriptor) return () => { }; Object.defineProperty(host, "adoptedStyleSheets", { configurable: originalPropertyDescriptor.configurable, enumerable: originalPropertyDescriptor.enumerable, get() { return originalPropertyDescriptor.get?.call(this); }, set(sheets) { const result = originalPropertyDescriptor.set?.call(this, sheets); if (hostId !== null && hostId !== -1) { try { stylesheetManager.adoptStyleSheets(sheets, hostId); } catch (e2) { } } return result; } }); return callbackWrapper(() => { Object.defineProperty(host, "adoptedStyleSheets", { configurable: originalPropertyDescriptor.configurable, enumerable: originalPropertyDescriptor.enumerable, // eslint-disable-next-line @typescript-eslint/unbound-method get: originalPropertyDescriptor.get, // eslint-disable-next-line @typescript-eslint/unbound-method set: originalPropertyDescriptor.set }); }); } function initStyleDeclarationObserver({ styleDeclarationCb, mirror: mirror2, ignoreCSSAttributes, stylesheetManager }, { win }) { const setProperty = win.CSSStyleDeclaration.prototype.setProperty; win.CSSStyleDeclaration.prototype.setProperty = new Proxy(setProperty, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [property, value, priority] = argumentsList; if (ignoreCSSAttributes.has(property)) { return setProperty.apply(thisArg, [property, value, priority]); } const { id, styleId } = getIdAndStyleId( thisArg.parentRule?.parentStyleSheet, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleDeclarationCb({ id, styleId, set: { property, value, priority }, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion index: getNestedCSSRulePositions(thisArg.parentRule) }); } return target.apply(thisArg, argumentsList); } ) }); const removeProperty = win.CSSStyleDeclaration.prototype.removeProperty; win.CSSStyleDeclaration.prototype.removeProperty = new Proxy(removeProperty, { apply: callbackWrapper( (target, thisArg, argumentsList) => { const [property] = argumentsList; if (ignoreCSSAttributes.has(property)) { return removeProperty.apply(thisArg, [property]); } const { id, styleId } = getIdAndStyleId( thisArg.parentRule?.parentStyleSheet, mirror2, stylesheetManager.styleMirror ); if (id && id !== -1 || styleId && styleId !== -1) { styleDeclarationCb({ id, styleId, remove: { property }, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion index: getNestedCSSRulePositions(thisArg.parentRule) }); } return target.apply(thisArg, argumentsList); } ) }); return callbackWrapper(() => { win.CSSStyleDeclaration.prototype.setProperty = setProperty; win.CSSStyleDeclaration.prototype.removeProperty = removeProperty; }); } function initMediaInteractionObserver({ mediaInteractionCb, blockClass, blockSelector, unblockSelector, mirror: mirror2, sampling, doc }) { const handler = callbackWrapper( (type) => throttle$1( callbackWrapper((event) => { const target = getEventTarget(event); if (!target || isBlocked( target, blockClass, blockSelector, unblockSelector, true )) { return; } const { currentTime, volume, muted, playbackRate } = target; mediaInteractionCb({ type, id: mirror2.getId(target), currentTime, volume, muted, playbackRate }); }), sampling.media || 500 ) ); const handlers = [ on("play", handler(MediaInteractions.Play), doc), on("pause", handler(MediaInteractions.Pause), doc), on("seeked", handler(MediaInteractions.Seeked), doc), on("volumechange", handler(MediaInteractions.VolumeChange), doc), on("ratechange", handler(MediaInteractions.RateChange), doc) ]; return callbackWrapper(() => { handlers.forEach((h) => h()); }); } function initFontObserver({ fontCb, doc }) { const win = doc.defaultView; if (!win) { return () => { }; } const handlers = []; const fontMap = /* @__PURE__ */ new WeakMap(); const originalFontFace = win.FontFace; win.FontFace = function FontFace2(family, source, descriptors) { const fontFace = new originalFontFace(family, source, descriptors); fontMap.set(fontFace, { family, buffer: typeof source !== "string", descriptors, fontSource: typeof source === "string" ? source : JSON.stringify(Array.from(new Uint8Array(source))) }); return fontFace; }; const restoreHandler = patch( doc.fonts, "add", function(original) { return function(fontFace) { setTimeout$1( callbackWrapper(() => { const p = fontMap.get(fontFace); if (p) { fontCb(p); fontMap.delete(fontFace); } }), 0 ); return original.apply(this, [fontFace]); }; } ); handlers.push(() => { win.FontFace = originalFontFace; }); handlers.push(restoreHandler); return callbackWrapper(() => { handlers.forEach((h) => h()); }); } function initSelectionObserver(param) { const { doc, mirror: mirror2, blockClass, blockSelector, unblockSelector, selectionCb } = param; let collapsed = true; const updateSelection = callbackWrapper(() => { const selection = doc.getSelection(); if (!selection || collapsed && selection?.isCollapsed) return; collapsed = selection.isCollapsed || false; const ranges = []; const count = selection.rangeCount || 0; for (let i2 = 0; i2 < count; i2++) { const range = selection.getRangeAt(i2); const { startContainer, startOffset, endContainer, endOffset } = range; const blocked = isBlocked( startContainer, blockClass, blockSelector, unblockSelector, true ) || isBlocked( endContainer, blockClass, blockSelector, unblockSelector, true ); if (blocked) continue; ranges.push({ start: mirror2.getId(startContainer), startOffset, end: mirror2.getId(endContainer), endOffset }); } selectionCb({ ranges }); }); updateSelection(); return on("selectionchange", updateSelection); } function initCustomElementObserver({ doc, customElementCb }) { const win = doc.defaultView; if (!win || !win.customElements) return () => { }; const restoreHandler = patch( win.customElements, "define", function(original) { return function(name, constructor, options) { try { customElementCb({ define: { name } }); } catch (e2) { } return original.apply(this, [name, constructor, options]); }; } ); return restoreHandler; } function initObservers(o2, _hooks = {}) { const currentWindow = o2.doc.defaultView; if (!currentWindow) { return () => { }; } let mutationObserver; if (o2.recordDOM) { mutationObserver = initMutationObserver(o2, o2.doc); } const mousemoveHandler = initMoveObserver(o2); const mouseInteractionHandler = initMouseInteractionObserver(o2); const scrollHandler = initScrollObserver(o2); const viewportResizeHandler = initViewportResizeObserver(o2, { win: currentWindow }); const inputHandler = initInputObserver(o2); const mediaInteractionHandler = initMediaInteractionObserver(o2); let styleSheetObserver = () => { }; let adoptedStyleSheetObserver = () => { }; let styleDeclarationObserver = () => { }; let fontObserver = () => { }; if (o2.recordDOM) { styleSheetObserver = initStyleSheetObserver(o2, { win: currentWindow }); adoptedStyleSheetObserver = initAdoptedStyleSheetObserver(o2, o2.doc); styleDeclarationObserver = initStyleDeclarationObserver(o2, { win: currentWindow }); if (o2.collectFonts) { fontObserver = initFontObserver(o2); } } const selectionObserver = initSelectionObserver(o2); const customElementObserver = initCustomElementObserver(o2); const pluginHandlers = []; for (const plugin of o2.plugins) { pluginHandlers.push( plugin.observer(plugin.callback, currentWindow, plugin.options) ); } return callbackWrapper(() => { mutationBuffers.forEach((b) => b.reset()); mutationObserver?.disconnect(); mousemoveHandler(); mouseInteractionHandler(); scrollHandler(); viewportResizeHandler(); inputHandler(); mediaInteractionHandler(); styleSheetObserver(); adoptedStyleSheetObserver(); styleDeclarationObserver(); fontObserver(); selectionObserver(); customElementObserver(); pluginHandlers.forEach((h) => h()); }); } function hasNestedCSSRule(prop) { return typeof window[prop] !== "undefined"; } function canMonkeyPatchNestedCSSRule(prop) { return Boolean( typeof window[prop] !== "undefined" && // Note: Generally, this check _shouldn't_ be necessary // However, in some scenarios (e.g. jsdom) this can sometimes fail, so we check for it here window[prop].prototype && "insertRule" in window[prop].prototype && "deleteRule" in window[prop].prototype ); } class CrossOriginIframeMirror { constructor(generateIdFn) { this.generateIdFn = generateIdFn; this.iframeIdToRemoteIdMap = /* @__PURE__ */ new WeakMap(); this.iframeRemoteIdToIdMap = /* @__PURE__ */ new WeakMap(); } getId(iframe, remoteId, idToRemoteMap, remoteToIdMap) { const idToRemoteIdMap = idToRemoteMap || this.getIdToRemoteIdMap(iframe); const remoteIdToIdMap = remoteToIdMap || this.getRemoteIdToIdMap(iframe); let id = idToRemoteIdMap.get(remoteId); if (!id) { id = this.generateIdFn(); idToRemoteIdMap.set(remoteId, id); remoteIdToIdMap.set(id, remoteId); } return id; } getIds(iframe, remoteId) { const idToRemoteIdMap = this.getIdToRemoteIdMap(iframe); const remoteIdToIdMap = this.getRemoteIdToIdMap(iframe); return remoteId.map( (id) => this.getId(iframe, id, idToRemoteIdMap, remoteIdToIdMap) ); } getRemoteId(iframe, id, map) { const remoteIdToIdMap = map || this.getRemoteIdToIdMap(iframe); if (typeof id !== "number") return id; const remoteId = remoteIdToIdMap.get(id); if (!remoteId) return -1; return remoteId; } getRemoteIds(iframe, ids) { const remoteIdToIdMap = this.getRemoteIdToIdMap(iframe); return ids.map((id) => this.getRemoteId(iframe, id, remoteIdToIdMap)); } reset(iframe) { if (!iframe) { this.iframeIdToRemoteIdMap = /* @__PURE__ */ new WeakMap(); this.iframeRemoteIdToIdMap = /* @__PURE__ */ new WeakMap(); return; } this.iframeIdToRemoteIdMap.delete(iframe); this.iframeRemoteIdToIdMap.delete(iframe); } getIdToRemoteIdMap(iframe) { let idToRemoteIdMap = this.iframeIdToRemoteIdMap.get(iframe); if (!idToRemoteIdMap) { idToRemoteIdMap = /* @__PURE__ */ new Map(); this.iframeIdToRemoteIdMap.set(iframe, idToRemoteIdMap); } return idToRemoteIdMap; } getRemoteIdToIdMap(iframe) { let remoteIdToIdMap = this.iframeRemoteIdToIdMap.get(iframe); if (!remoteIdToIdMap) { remoteIdToIdMap = /* @__PURE__ */ new Map(); this.iframeRemoteIdToIdMap.set(iframe, remoteIdToIdMap); } return remoteIdToIdMap; } } class IframeManagerNoop { constructor() { this.crossOriginIframeMirror = new CrossOriginIframeMirror(genId); this.crossOriginIframeRootIdMap = /* @__PURE__ */ new WeakMap(); } addIframe() { } addLoadListener() { } attachIframe() { } } class IframeManager { constructor(options) { this.iframes = /* @__PURE__ */ new WeakMap(); this.crossOriginIframeMap = /* @__PURE__ */ new WeakMap(); this.crossOriginIframeMirror = new CrossOriginIframeMirror(genId); this.crossOriginIframeRootIdMap = /* @__PURE__ */ new WeakMap(); this.mutationCb = options.mutationCb; this.wrappedEmit = options.wrappedEmit; this.stylesheetManager = options.stylesheetManager; this.recordCrossOriginIframes = options.recordCrossOriginIframes; this.crossOriginIframeStyleMirror = new CrossOriginIframeMirror( this.stylesheetManager.styleMirror.generateId.bind( this.stylesheetManager.styleMirror ) ); this.mirror = options.mirror; if (this.recordCrossOriginIframes) { window.addEventListener("message", this.handleMessage.bind(this)); } } addIframe(iframeEl) { this.iframes.set(iframeEl, true); if (iframeEl.contentWindow) this.crossOriginIframeMap.set(iframeEl.contentWindow, iframeEl); } addLoadListener(cb) { this.loadListener = cb; } attachIframe(iframeEl, childSn) { this.mutationCb({ adds: [ { parentId: this.mirror.getId(iframeEl), nextId: null, node: childSn } ], removes: [], texts: [], attributes: [], isAttachIframe: true }); if (this.recordCrossOriginIframes) iframeEl.contentWindow?.addEventListener( "message", this.handleMessage.bind(this) ); this.loadListener?.(iframeEl); const iframeDoc = getIFrameContentDocument(iframeEl); if (iframeDoc && iframeDoc.adoptedStyleSheets && iframeDoc.adoptedStyleSheets.length > 0) this.stylesheetManager.adoptStyleSheets( iframeDoc.adoptedStyleSheets, this.mirror.getId(iframeDoc) ); } handleMessage(message) { const crossOriginMessageEvent = message; if (crossOriginMessageEvent.data.type !== "rrweb" || // To filter out the rrweb messages which are forwarded by some sites. crossOriginMessageEvent.origin !== crossOriginMessageEvent.data.origin) return; const iframeSourceWindow = message.source; if (!iframeSourceWindow) return; const iframeEl = this.crossOriginIframeMap.get(message.source); if (!iframeEl) return; const transformedEvent = this.transformCrossOriginEvent( iframeEl, crossOriginMessageEvent.data.event ); if (transformedEvent) this.wrappedEmit( transformedEvent, crossOriginMessageEvent.data.isCheckout ); } transformCrossOriginEvent(iframeEl, e2) { switch (e2.type) { case EventType.FullSnapshot: { this.crossOriginIframeMirror.reset(iframeEl); this.crossOriginIframeStyleMirror.reset(iframeEl); this.replaceIdOnNode(e2.data.node, iframeEl); const rootId = e2.data.node.id; this.crossOriginIframeRootIdMap.set(iframeEl, rootId); this.patchRootIdOnNode(e2.data.node, rootId); return { timestamp: e2.timestamp, type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.Mutation, adds: [ { parentId: this.mirror.getId(iframeEl), nextId: null, node: e2.data.node } ], removes: [], texts: [], attributes: [], isAttachIframe: true } }; } case EventType.Meta: case EventType.Load: case EventType.DomContentLoaded: { return false; } case EventType.Plugin: { return e2; } case EventType.Custom: { this.replaceIds( e2.data.payload, iframeEl, ["id", "parentId", "previousId", "nextId"] ); return e2; } case EventType.IncrementalSnapshot: { switch (e2.data.source) { case IncrementalSource.Mutation: { e2.data.adds.forEach((n2) => { this.replaceIds(n2, iframeEl, [ "parentId", "nextId", "previousId" ]); this.replaceIdOnNode(n2.node, iframeEl); const rootId = this.crossOriginIframeRootIdMap.get(iframeEl); rootId && this.patchRootIdOnNode(n2.node, rootId); }); e2.data.removes.forEach((n2) => { this.replaceIds(n2, iframeEl, ["parentId", "id"]); }); e2.data.attributes.forEach((n2) => { this.replaceIds(n2, iframeEl, ["id"]); }); e2.data.texts.forEach((n2) => { this.replaceIds(n2, iframeEl, ["id"]); }); return e2; } case IncrementalSource.Drag: case IncrementalSource.TouchMove: case IncrementalSource.MouseMove: { e2.data.positions.forEach((p) => { this.replaceIds(p, iframeEl, ["id"]); }); return e2; } case IncrementalSource.ViewportResize: { return false; } case IncrementalSource.MediaInteraction: case IncrementalSource.MouseInteraction: case IncrementalSource.Scroll: case IncrementalSource.CanvasMutation: case IncrementalSource.Input: { this.replaceIds(e2.data, iframeEl, ["id"]); return e2; } case IncrementalSource.StyleSheetRule: case IncrementalSource.StyleDeclaration: { this.replaceIds(e2.data, iframeEl, ["id"]); this.replaceStyleIds(e2.data, iframeEl, ["styleId"]); return e2; } case IncrementalSource.Font: { return e2; } case IncrementalSource.Selection: { e2.data.ranges.forEach((range) => { this.replaceIds(range, iframeEl, ["start", "end"]); }); return e2; } case IncrementalSource.AdoptedStyleSheet: { this.replaceIds(e2.data, iframeEl, ["id"]); this.replaceStyleIds(e2.data, iframeEl, ["styleIds"]); e2.data.styles?.forEach((style) => { this.replaceStyleIds(style, iframeEl, ["styleId"]); }); return e2; } } } } return false; } replace(iframeMirror, obj, iframeEl, keys) { for (const key of keys) { if (!Array.isArray(obj[key]) && typeof obj[key] !== "number") continue; if (Array.isArray(obj[key])) { obj[key] = iframeMirror.getIds( iframeEl, obj[key] ); } else { obj[key] = iframeMirror.getId(iframeEl, obj[key]); } } return obj; } replaceIds(obj, iframeEl, keys) { return this.replace(this.crossOriginIframeMirror, obj, iframeEl, keys); } replaceStyleIds(obj, iframeEl, keys) { return this.replace(this.crossOriginIframeStyleMirror, obj, iframeEl, keys); } replaceIdOnNode(node, iframeEl) { this.replaceIds(node, iframeEl, ["id", "rootId"]); if ("childNodes" in node) { node.childNodes.forEach((child) => { this.replaceIdOnNode(child, iframeEl); }); } } patchRootIdOnNode(node, rootId) { if (node.type !== NodeType$2.Document && !node.rootId) node.rootId = rootId; if ("childNodes" in node) { node.childNodes.forEach((child) => { this.patchRootIdOnNode(child, rootId); }); } } } class ShadowDomManagerNoop { init() { } addShadowRoot() { } observeAttachShadow() { } reset() { } } class ShadowDomManager { constructor(options) { this.shadowDoms = /* @__PURE__ */ new WeakSet(); this.restoreHandlers = []; this.mutationCb = options.mutationCb; this.scrollCb = options.scrollCb; this.bypassOptions = options.bypassOptions; this.mirror = options.mirror; this.init(); } init() { this.reset(); this.patchAttachShadow(Element, document); } addShadowRoot(shadowRoot, doc) { if (!isNativeShadowDom(shadowRoot)) return; if (this.shadowDoms.has(shadowRoot)) return; this.shadowDoms.add(shadowRoot); this.bypassOptions.canvasManager.addShadowRoot(shadowRoot); const observer = initMutationObserver( { ...this.bypassOptions, doc, mutationCb: this.mutationCb, mirror: this.mirror, shadowDomManager: this }, shadowRoot ); this.restoreHandlers.push(() => observer.disconnect()); this.restoreHandlers.push( initScrollObserver({ ...this.bypassOptions, scrollCb: this.scrollCb, // https://gist.github.com/praveenpuglia/0832da687ed5a5d7a0907046c9ef1813 // scroll is not allowed to pass the boundary, so we need to listen the shadow document doc: shadowRoot, mirror: this.mirror }) ); setTimeout$1(() => { if (shadowRoot.adoptedStyleSheets && shadowRoot.adoptedStyleSheets.length > 0) this.bypassOptions.stylesheetManager.adoptStyleSheets( shadowRoot.adoptedStyleSheets, this.mirror.getId(shadowRoot.host) ); this.restoreHandlers.push( initAdoptedStyleSheetObserver( { mirror: this.mirror, stylesheetManager: this.bypassOptions.stylesheetManager }, shadowRoot ) ); }, 0); } /** * Monkey patch 'attachShadow' of an IFrameElement to observe newly added shadow doms. */ observeAttachShadow(iframeElement) { const iframeDoc = getIFrameContentDocument(iframeElement); const iframeWindow = getIFrameContentWindow(iframeElement); if (!iframeDoc || !iframeWindow) return; this.patchAttachShadow( iframeWindow.Element, iframeDoc ); } /** * Patch 'attachShadow' to observe newly added shadow doms. */ patchAttachShadow(element, doc) { const manager = this; this.restoreHandlers.push( patch( element.prototype, "attachShadow", function(original) { return function(option) { const shadowRoot = original.call(this, option); if (this.shadowRoot && inDom(this)) manager.addShadowRoot(this.shadowRoot, doc); return shadowRoot; }; } ) ); } reset() { this.restoreHandlers.forEach((handler) => { try { handler(); } catch (e2) { } }); this.restoreHandlers = []; this.shadowDoms = /* @__PURE__ */ new WeakSet(); this.bypassOptions.canvasManager.resetShadowRoots(); } } var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; var lookup = typeof Uint8Array === "undefined" ? [] : new Uint8Array(256); for (var i$1 = 0; i$1 < chars.length; i$1++) { lookup[chars.charCodeAt(i$1)] = i$1; } class CanvasManagerNoop { reset() { } freeze() { } unfreeze() { } lock() { } unlock() { } snapshot() { } addWindow() { } addShadowRoot() { } resetShadowRoots() { } } class StylesheetManager { constructor(options) { this.trackedLinkElements = /* @__PURE__ */ new WeakSet(); this.styleMirror = new StyleSheetMirror(); this.mutationCb = options.mutationCb; this.adoptedStyleSheetCb = options.adoptedStyleSheetCb; } attachLinkElement(linkEl, childSn) { if ("_cssText" in childSn.attributes) this.mutationCb({ adds: [], removes: [], texts: [], attributes: [ { id: childSn.id, attributes: childSn.attributes } ] }); this.trackLinkElement(linkEl); } trackLinkElement(linkEl) { if (this.trackedLinkElements.has(linkEl)) return; this.trackedLinkElements.add(linkEl); this.trackStylesheetInLinkElement(linkEl); } adoptStyleSheets(sheets, hostId) { if (sheets.length === 0) return; const adoptedStyleSheetData = { id: hostId, styleIds: [] }; const styles = []; for (const sheet of sheets) { let styleId; if (!this.styleMirror.has(sheet)) { styleId = this.styleMirror.add(sheet); styles.push({ styleId, rules: Array.from(sheet.rules || CSSRule, (r2, index) => ({ rule: stringifyRule(r2), index })) }); } else styleId = this.styleMirror.getId(sheet); adoptedStyleSheetData.styleIds.push(styleId); } if (styles.length > 0) adoptedStyleSheetData.styles = styles; this.adoptedStyleSheetCb(adoptedStyleSheetData); } reset() { this.styleMirror.reset(); this.trackedLinkElements = /* @__PURE__ */ new WeakSet(); } // TODO: take snapshot on stylesheet reload by applying event listener trackStylesheetInLinkElement(_linkEl) { } } class ProcessedNodeManager { constructor() { this.nodeMap = /* @__PURE__ */ new WeakMap(); this.active = false; } inOtherBuffer(node, thisBuffer) { const buffers = this.nodeMap.get(node); return buffers && Array.from(buffers).some((buffer) => buffer !== thisBuffer); } add(node, buffer) { if (!this.active) { this.active = true; onRequestAnimationFrame(() => { this.nodeMap = /* @__PURE__ */ new WeakMap(); this.active = false; }); } this.nodeMap.set(node, (this.nodeMap.get(node) || /* @__PURE__ */ new Set()).add(buffer)); } destroy() { } } let wrappedEmit; let _takeFullSnapshot; try { if (Array.from([1], (x) => x * 2)[0] !== 2) { const cleanFrame = document.createElement("iframe"); document.body.appendChild(cleanFrame); Array.from = cleanFrame.contentWindow?.Array.from || Array.from; document.body.removeChild(cleanFrame); } } catch (err) { console.debug("Unable to override Array.from", err); } const mirror = createMirror$2(); function record(options = {}) { const { emit, checkoutEveryNms, checkoutEveryNth, blockClass = "rr-block", blockSelector = null, unblockSelector = null, ignoreClass = "rr-ignore", ignoreSelector = null, maskAllText = false, maskTextClass = "rr-mask", unmaskTextClass = null, maskTextSelector = null, unmaskTextSelector = null, inlineStylesheet = true, maskAllInputs, maskInputOptions: _maskInputOptions, slimDOMOptions: _slimDOMOptions, maskAttributeFn, maskInputFn, maskTextFn, maxCanvasSize = null, packFn, sampling = {}, dataURLOptions = {}, mousemoveWait, recordDOM = true, recordCanvas = false, recordCrossOriginIframes = false, recordAfter = options.recordAfter === "DOMContentLoaded" ? options.recordAfter : "load", userTriggeredOnInput = false, collectFonts = false, inlineImages = false, plugins, keepIframeSrcFn = () => false, ignoreCSSAttributes = /* @__PURE__ */ new Set([]), errorHandler: errorHandler2, onMutation, getCanvasManager } = options; registerErrorHandler(errorHandler2); const inEmittingFrame = recordCrossOriginIframes ? window.parent === window : true; let passEmitsToParent = false; if (!inEmittingFrame) { try { if (window.parent.document) { passEmitsToParent = false; } } catch (e2) { passEmitsToParent = true; } } if (inEmittingFrame && !emit) { throw new Error("emit function is required"); } if (!inEmittingFrame && !passEmitsToParent) { return () => { }; } if (mousemoveWait !== void 0 && sampling.mousemove === void 0) { sampling.mousemove = mousemoveWait; } mirror.reset(); const maskInputOptions = maskAllInputs === true ? { color: true, date: true, "datetime-local": true, email: true, month: true, number: true, range: true, search: true, tel: true, text: true, time: true, url: true, week: true, textarea: true, select: true, radio: true, checkbox: true } : _maskInputOptions !== void 0 ? _maskInputOptions : {}; const slimDOMOptions = _slimDOMOptions === true || _slimDOMOptions === "all" ? { script: true, comment: true, headFavicon: true, headWhitespace: true, headMetaSocial: true, headMetaRobots: true, headMetaHttpEquiv: true, headMetaVerification: true, // the following are off for slimDOMOptions === true, // as they destroy some (hidden) info: headMetaAuthorship: _slimDOMOptions === "all", headMetaDescKeywords: _slimDOMOptions === "all" } : _slimDOMOptions ? _slimDOMOptions : {}; polyfill$1(); let lastFullSnapshotEvent; let incrementalSnapshotCount = 0; const eventProcessor = (e2) => { for (const plugin of plugins || []) { if (plugin.eventProcessor) { e2 = plugin.eventProcessor(e2); } } if (packFn && // Disable packing events which will be emitted to parent frames. !passEmitsToParent) { e2 = packFn(e2); } return e2; }; wrappedEmit = (r2, isCheckout) => { const e2 = r2; e2.timestamp = nowTimestamp(); if (mutationBuffers[0]?.isFrozen() && e2.type !== EventType.FullSnapshot && !(e2.type === EventType.IncrementalSnapshot && e2.data.source === IncrementalSource.Mutation)) { mutationBuffers.forEach((buf) => buf.unfreeze()); } if (inEmittingFrame) { emit?.(eventProcessor(e2), isCheckout); } else if (passEmitsToParent) { const message = { type: "rrweb", event: eventProcessor(e2), origin: window.location.origin, isCheckout }; window.parent.postMessage(message, "*"); } if (e2.type === EventType.FullSnapshot) { lastFullSnapshotEvent = e2; incrementalSnapshotCount = 0; } else if (e2.type === EventType.IncrementalSnapshot) { if (e2.data.source === IncrementalSource.Mutation && e2.data.isAttachIframe) { return; } incrementalSnapshotCount++; const exceedCount = checkoutEveryNth && incrementalSnapshotCount >= checkoutEveryNth; const exceedTime = checkoutEveryNms && lastFullSnapshotEvent && e2.timestamp - lastFullSnapshotEvent.timestamp > checkoutEveryNms; if (exceedCount || exceedTime) { takeFullSnapshot2(true); } } }; const wrappedMutationEmit = (m) => { wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.Mutation, ...m } }); }; const wrappedScrollEmit = (p) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.Scroll, ...p } }); const wrappedCanvasMutationEmit = (p) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.CanvasMutation, ...p } }); const wrappedAdoptedStyleSheetEmit = (a2) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.AdoptedStyleSheet, ...a2 } }); const stylesheetManager = new StylesheetManager({ mutationCb: wrappedMutationEmit, adoptedStyleSheetCb: wrappedAdoptedStyleSheetEmit }); const iframeManager = typeof __RRWEB_EXCLUDE_IFRAME__ === "boolean" && __RRWEB_EXCLUDE_IFRAME__ ? new IframeManagerNoop() : new IframeManager({ mirror, mutationCb: wrappedMutationEmit, stylesheetManager, recordCrossOriginIframes, wrappedEmit }); for (const plugin of plugins || []) { if (plugin.getMirror) plugin.getMirror({ nodeMirror: mirror, crossOriginIframeMirror: iframeManager.crossOriginIframeMirror, crossOriginIframeStyleMirror: iframeManager.crossOriginIframeStyleMirror }); } const processedNodeManager = new ProcessedNodeManager(); const canvasManager = _getCanvasManager( getCanvasManager, { mirror, win: window, mutationCb: (p) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.CanvasMutation, ...p } }), recordCanvas, blockClass, blockSelector, unblockSelector, maxCanvasSize, sampling: sampling["canvas"], dataURLOptions, errorHandler: errorHandler2 } ); const shadowDomManager = typeof __RRWEB_EXCLUDE_SHADOW_DOM__ === "boolean" && __RRWEB_EXCLUDE_SHADOW_DOM__ ? new ShadowDomManagerNoop() : new ShadowDomManager({ mutationCb: wrappedMutationEmit, scrollCb: wrappedScrollEmit, bypassOptions: { onMutation, blockClass, blockSelector, unblockSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, inlineStylesheet, maskInputOptions, dataURLOptions, maskAttributeFn, maskTextFn, maskInputFn, recordCanvas, inlineImages, sampling, slimDOMOptions, iframeManager, stylesheetManager, canvasManager, keepIframeSrcFn, processedNodeManager, ignoreCSSAttributes }, mirror }); const takeFullSnapshot2 = (isCheckout = false) => { if (!recordDOM) { return; } wrappedEmit( { type: EventType.Meta, data: { href: window.location.href, width: getWindowWidth(), height: getWindowHeight() } }, isCheckout ); stylesheetManager.reset(); shadowDomManager.init(); mutationBuffers.forEach((buf) => buf.lock()); const node = snapshot(document, { mirror, blockClass, blockSelector, unblockSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, inlineStylesheet, maskAllInputs: maskInputOptions, maskAttributeFn, maskInputFn, maskTextFn, slimDOM: slimDOMOptions, dataURLOptions, recordCanvas, inlineImages, onSerialize: (n2) => { if (isSerializedIframe(n2, mirror)) { iframeManager.addIframe(n2); } if (isSerializedStylesheet(n2, mirror)) { stylesheetManager.trackLinkElement(n2); } if (hasShadowRoot(n2)) { shadowDomManager.addShadowRoot(n2.shadowRoot, document); } }, onIframeLoad: (iframe, childSn) => { iframeManager.attachIframe(iframe, childSn); if (iframe.contentWindow) { canvasManager.addWindow(iframe.contentWindow); } shadowDomManager.observeAttachShadow(iframe); }, onStylesheetLoad: (linkEl, childSn) => { stylesheetManager.attachLinkElement(linkEl, childSn); }, onBlockedImageLoad: (_imageEl, serializedNode, { width, height }) => { wrappedMutationEmit({ adds: [], removes: [], texts: [], attributes: [ { id: serializedNode.id, attributes: { style: { width: `${width}px`, height: `${height}px` } } } ] }); }, keepIframeSrcFn, ignoreCSSAttributes }); if (!node) { return console.warn("Failed to snapshot the document"); } wrappedEmit({ type: EventType.FullSnapshot, data: { node, initialOffset: getWindowScroll(window) } }); mutationBuffers.forEach((buf) => buf.unlock()); if (document.adoptedStyleSheets && document.adoptedStyleSheets.length > 0) stylesheetManager.adoptStyleSheets( document.adoptedStyleSheets, mirror.getId(document) ); }; _takeFullSnapshot = takeFullSnapshot2; try { const handlers = []; const observe = (doc) => { return callbackWrapper(initObservers)( { onMutation, mutationCb: wrappedMutationEmit, mousemoveCb: (positions, source) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source, positions } }), mouseInteractionCb: (d) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.MouseInteraction, ...d } }), scrollCb: wrappedScrollEmit, viewportResizeCb: (d) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.ViewportResize, ...d } }), inputCb: (v2) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.Input, ...v2 } }), mediaInteractionCb: (p) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.MediaInteraction, ...p } }), styleSheetRuleCb: (r2) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.StyleSheetRule, ...r2 } }), styleDeclarationCb: (r2) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.StyleDeclaration, ...r2 } }), canvasMutationCb: wrappedCanvasMutationEmit, fontCb: (p) => wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.Font, ...p } }), selectionCb: (p) => { wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.Selection, ...p } }); }, customElementCb: (c2) => { wrappedEmit({ type: EventType.IncrementalSnapshot, data: { source: IncrementalSource.CustomElement, ...c2 } }); }, blockClass, ignoreClass, ignoreSelector, maskAllText, maskTextClass, unmaskTextClass, maskTextSelector, unmaskTextSelector, maskInputOptions, inlineStylesheet, sampling, recordDOM, recordCanvas, inlineImages, userTriggeredOnInput, collectFonts, doc, maskAttributeFn, maskInputFn, maskTextFn, keepIframeSrcFn, blockSelector, unblockSelector, slimDOMOptions, dataURLOptions, mirror, iframeManager, stylesheetManager, shadowDomManager, processedNodeManager, canvasManager, ignoreCSSAttributes, plugins: plugins?.filter((p) => p.observer)?.map((p) => ({ observer: p.observer, options: p.options, callback: (payload) => wrappedEmit({ type: EventType.Plugin, data: { plugin: p.name, payload } }) })) || [] }, {} ); }; iframeManager.addLoadListener((iframeEl) => { try { handlers.push(observe(iframeEl.contentDocument)); } catch (error) { console.warn(error); } }); const init = () => { takeFullSnapshot2(); handlers.push(observe(document)); }; if (document.readyState === "interactive" || document.readyState === "complete") { init(); } else { handlers.push( on("DOMContentLoaded", () => { wrappedEmit({ type: EventType.DomContentLoaded, data: {} }); if (recordAfter === "DOMContentLoaded") init(); }) ); handlers.push( on( "load", () => { wrappedEmit({ type: EventType.Load, data: {} }); if (recordAfter === "load") init(); }, window ) ); } return () => { handlers.forEach((h) => h()); processedNodeManager.destroy(); _takeFullSnapshot = void 0; unregisterErrorHandler(); }; } catch (error) { console.warn(error); } } function takeFullSnapshot(isCheckout) { if (!_takeFullSnapshot) { throw new Error("please take full snapshot after start recording"); } _takeFullSnapshot(isCheckout); } record.mirror = mirror; record.takeFullSnapshot = takeFullSnapshot; function _getCanvasManager(getCanvasManagerFn, options) { try { return getCanvasManagerFn ? getCanvasManagerFn(options) : new CanvasManagerNoop(); } catch { console.warn("Unable to initialize CanvasManager"); return new CanvasManagerNoop(); } } var n; !function(t2) { t2[t2.NotStarted = 0] = "NotStarted", t2[t2.Running = 1] = "Running", t2[t2.Stopped = 2] = "Stopped"; }(n || (n = {})); const ReplayEventTypeIncrementalSnapshot = 3; const ReplayEventTypeCustom = 5; /** * 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; } /** * Converts a timestamp to s, if it was in ms, or keeps it as s. */ function timestampToS(timestamp) { const isMs = timestamp > 9999999999; return isMs ? timestamp / 1000 : timestamp; } /** * 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(() => { // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises replay.throttledAddEvent({ type: EventType.Custom, // TODO: We were converting from ms to seconds for breadcrumbs, spans, // but maybe we should just keep them as milliseconds timestamp: (breadcrumb.timestamp || 0) * 1000, data: { tag: 'breadcrumb', // normalize to max. 10 depth and 1_000 properties per object payload: normalize(breadcrumb, 10, 1000), }, }); // Do not flush after console log messages return breadcrumb.category === 'console'; }); } const INTERACTIVE_SELECTOR = 'button,a'; /** Get the closest interactive parent element, or else return the given element. */ function getClosestInteractive(element) { const closestInteractive = element.closest(INTERACTIVE_SELECTOR); return closestInteractive || element; } /** * 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 , * 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; } return getClosestInteractive(target); } /** Get the event target node. */ function getTargetNode(event) { if (isEventWithTarget(event)) { return event.target ; } return event; } function isEventWithTarget(event) { return typeof event === 'object' && !!event && 'target' in event; } let handlers; /** * Register a handler to be called when `window.open()` is called. * Returns a cleanup function. */ function onWindowOpen(cb) { // Ensure to only register this once if (!handlers) { handlers = []; monkeyPatchWindowOpen(); } handlers.push(cb); return () => { const pos = handlers ? handlers.indexOf(cb) : -1; if (pos > -1) { (handlers ).splice(pos, 1); } }; } function monkeyPatchWindowOpen() { fill(WINDOW, 'open', function (originalWindowOpen) { return function (...args) { if (handlers) { try { handlers.forEach(handler => handler()); } catch { // ignore errors in here } } return originalWindowOpen.apply(WINDOW, args); }; }); } /** Any IncrementalSource for rrweb that we interpret as a kind of mutation. */ const IncrementalMutationSources = new Set([ IncrementalSource.Mutation, IncrementalSource.StyleSheetRule, IncrementalSource.StyleDeclaration, IncrementalSource.AdoptedStyleSheet, IncrementalSource.CanvasMutation, IncrementalSource.Selection, IncrementalSource.MediaInteraction, ]); /** Handle a click. */ function handleClick(clickDetector, clickBreadcrumb, node) { clickDetector.handleClick(clickBreadcrumb, node); } /** A click detector class that can be used to detect slow or rage clicks on elements. */ class ClickDetector { // protected for testing constructor( replay, slowClickConfig, // Just for easier testing _addBreadcrumbEvent = addBreadcrumbEvent, ) { this._lastMutation = 0; this._lastScroll = 0; this._clicks = []; // We want everything in s, but options are in ms this._timeout = slowClickConfig.timeout / 1000; this._threshold = slowClickConfig.threshold / 1000; this._scrollTimeout = slowClickConfig.scrollTimeout / 1000; this._replay = replay; this._ignoreSelector = slowClickConfig.ignoreSelector; this._addBreadcrumbEvent = _addBreadcrumbEvent; } /** Register click detection handlers on mutation or scroll. */ addListeners() { const cleanupWindowOpen = onWindowOpen(() => { // Treat window.open as mutation this._lastMutation = nowInSeconds(); }); this._teardown = () => { cleanupWindowOpen(); this._clicks = []; this._lastMutation = 0; this._lastScroll = 0; }; } /** Clean up listeners. */ removeListeners() { if (this._teardown) { this._teardown(); } if (this._checkClickTimeout) { clearTimeout(this._checkClickTimeout); } } /** @inheritDoc */ handleClick(breadcrumb, node) { if (ignoreElement(node, this._ignoreSelector) || !isClickBreadcrumb(breadcrumb)) { return; } const newClick = { timestamp: timestampToS(breadcrumb.timestamp), clickBreadcrumb: breadcrumb, // Set this to 0 so we know it originates from the click breadcrumb clickCount: 0, node, }; // If there was a click in the last 1s on the same element, ignore it - only keep a single reference per second if ( this._clicks.some(click => click.node === newClick.node && Math.abs(click.timestamp - newClick.timestamp) < 1) ) { return; } this._clicks.push(newClick); // If this is the first new click, set a timeout to check for multi clicks if (this._clicks.length === 1) { this._scheduleCheckClicks(); } } /** @inheritDoc */ registerMutation(timestamp = Date.now()) { this._lastMutation = timestampToS(timestamp); } /** @inheritDoc */ registerScroll(timestamp = Date.now()) { this._lastScroll = timestampToS(timestamp); } /** @inheritDoc */ registerClick(element) { const node = getClosestInteractive(element); this._handleMultiClick(node ); } /** Count multiple clicks on elements. */ _handleMultiClick(node) { this._getClicks(node).forEach(click => { click.clickCount++; }); } /** Get all pending clicks for a given node. */ _getClicks(node) { return this._clicks.filter(click => click.node === node); } /** Check the clicks that happened. */ _checkClicks() { const timedOutClicks = []; const now = nowInSeconds(); this._clicks.forEach(click => { if (!click.mutationAfter && this._lastMutation) { click.mutationAfter = click.timestamp <= this._lastMutation ? this._lastMutation - click.timestamp : undefined; } if (!click.scrollAfter && this._lastScroll) { click.scrollAfter = click.timestamp <= this._lastScroll ? this._lastScroll - click.timestamp : undefined; } // All of these are in seconds! if (click.timestamp + this._timeout <= now) { timedOutClicks.push(click); } }); // Remove "old" clicks for (const click of timedOutClicks) { const pos = this._clicks.indexOf(click); if (pos > -1) { this._generateBreadcrumbs(click); this._clicks.splice(pos, 1); } } // Trigger new check, unless no clicks left if (this._clicks.length) { this._scheduleCheckClicks(); } } /** Generate matching breadcrumb(s) for the click. */ _generateBreadcrumbs(click) { const replay = this._replay; const hadScroll = click.scrollAfter && click.scrollAfter <= this._scrollTimeout; const hadMutation = click.mutationAfter && click.mutationAfter <= this._threshold; const isSlowClick = !hadScroll && !hadMutation; const { clickCount, clickBreadcrumb } = click; // Slow click if (isSlowClick) { // If `mutationAfter` is set, it means a mutation happened after the threshold, but before the timeout // If not, it means we just timed out without scroll & mutation const timeAfterClickMs = Math.min(click.mutationAfter || this._timeout, this._timeout) * 1000; const endReason = timeAfterClickMs < this._timeout * 1000 ? 'mutation' : 'timeout'; const breadcrumb = { type: 'default', message: clickBreadcrumb.message, timestamp: clickBreadcrumb.timestamp, category: 'ui.slowClickDetected', data: { ...clickBreadcrumb.data, url: WINDOW.location.href, route: replay.getCurrentRoute(), timeAfterClickMs, endReason, // If clickCount === 0, it means multiClick was not correctly captured here // - we still want to send 1 in this case clickCount: clickCount || 1, }, }; this._addBreadcrumbEvent(replay, breadcrumb); return; } // Multi click if (clickCount > 1) { const breadcrumb = { type: 'default', message: clickBreadcrumb.message, timestamp: clickBreadcrumb.timestamp, category: 'ui.multiClick', data: { ...clickBreadcrumb.data, url: WINDOW.location.href, route: replay.getCurrentRoute(), clickCount, metric: true, }, }; this._addBreadcrumbEvent(replay, breadcrumb); } } /** Schedule to check current clicks. */ _scheduleCheckClicks() { if (this._checkClickTimeout) { clearTimeout(this._checkClickTimeout); } this._checkClickTimeout = setTimeout$3(() => this._checkClicks(), 1000); } } const SLOW_CLICK_TAGS = ['A', 'BUTTON', 'INPUT']; /** exported for tests only */ function ignoreElement(node, ignoreSelector) { if (!SLOW_CLICK_TAGS.includes(node.tagName)) { return true; } // If 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 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 (ignoreSelector && node.matches(ignoreSelector)) { return true; } return false; } function isClickBreadcrumb(breadcrumb) { return !!(breadcrumb.data && typeof breadcrumb.data.nodeId === 'number' && breadcrumb.timestamp); } // This is good enough for us, and is easier to test/mock than `timestampInSeconds` function nowInSeconds() { return Date.now() / 1000; } /** Update the click detector based on a recording event of rrweb. */ function updateClickDetectorForRecordingEvent(clickDetector, event) { try { // note: We only consider incremental snapshots here // This means that any full snapshot is ignored for mutation detection - the reason is that we simply cannot know if a mutation happened here. // E.g. think that we are buffering, an error happens and we take a full snapshot because we switched to session mode - // in this scenario, we would not know if a dead click happened because of the error, which is a key dead click scenario. // Instead, by ignoring full snapshots, we have the risk that we generate a false positive // (if a mutation _did_ happen but was "swallowed" by the full snapshot) // But this should be more unlikely as we'd generally capture the incremental snapshot right away if (!isIncrementalEvent(event)) { return; } const { source } = event.data; if (IncrementalMutationSources.has(source)) { clickDetector.registerMutation(event.timestamp); } if (source === IncrementalSource.Scroll) { clickDetector.registerScroll(event.timestamp); } if (isIncrementalMouseInteraction(event)) { const { type, id } = event.data; const node = record.mirror.getNode(id); if (node instanceof HTMLElement && type === MouseInteractions.Click) { clickDetector.registerClick(node); } } } catch { // ignore errors here, e.g. if accessing something that does not exist } } function isIncrementalEvent(event) { return event.type === ReplayEventTypeIncrementalSnapshot; } function isIncrementalMouseInteraction( event, ) { return event.data.source === IncrementalSource.MouseInteraction; } /** * Create a breadcrumb for a replay. */ function createBreadcrumb( breadcrumb, ) { return { timestamp: Date.now() / 1000, type: 'default', ...breadcrumb, }; } var NodeType = /* @__PURE__ */ ((NodeType2) => { NodeType2[NodeType2["Document"] = 0] = "Document"; NodeType2[NodeType2["DocumentType"] = 1] = "DocumentType"; NodeType2[NodeType2["Element"] = 2] = "Element"; NodeType2[NodeType2["Text"] = 3] = "Text"; NodeType2[NodeType2["CDATA"] = 4] = "CDATA"; NodeType2[NodeType2["Comment"] = 5] = "Comment"; return NodeType2; })(NodeType || {}); // 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', 'disabled', 'aria-disabled', 'data-sentry-component', ]); /** * Inclusion list of attributes that we want to record from the DOM element */ function getAttributesToRecord(attributes) { const obj = {}; if (!attributes['data-sentry-component'] && attributes['data-sentry-element']) { attributes['data-sentry-component'] = attributes['data-sentry-element']; } 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, ) => { return (handlerData) => { if (!replay.isEnabled()) { return; } const result = handleDom(handlerData); if (!result) { return; } const isClick = handlerData.name === 'click'; const event = isClick ? (handlerData.event ) : undefined; // Ignore clicks if ctrl/alt/meta/shift keys are held down as they alter behavior of clicks (e.g. open in new tab) if ( isClick && replay.clickDetector && event?.target && !event.altKey && !event.metaKey && !event.ctrlKey && !event.shiftKey ) { handleClick( replay.clickDetector, result , getClickTargetNode(handlerData.event ) , ); } addBreadcrumbEvent(replay, result); }; }; /** Get the base DOM breadcrumb. */ function getBaseDomBreadcrumb(target, message) { const nodeId = record.mirror.getId(target); const node = nodeId && record.mirror.getNode(nodeId); const meta = node && record.mirror.getMeta(node); const element = meta && isElement(meta) ? meta : null; return { message, data: element ? { nodeId, node: { id: nodeId, tagName: element.tagName, textContent: Array.from(element.childNodes) .map((node) => node.type === NodeType.Text && node.textContent) .filter(Boolean) // filter out empty values .map(text => (text ).trim()) .join(''), attributes: getAttributesToRecord(element.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 }) || ''; } catch { message = ''; } return { target, message }; } function isElement(node) { return node.type === NodeType.Element; } /** Handle keyboard events & create breadcrumbs. */ function handleKeyboardEvent(replay, event) { if (!replay.isEnabled()) { return; } // Update user activity, but do not restart recording as it can create // noisy/low-value replays (e.g. user comes back from idle, hits alt-tab, new // session with a single "keydown" breadcrumb is created) replay.updateUserActivity(); const breadcrumb = getKeyboardBreadcrumb(event); 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 ) || !key) { 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 }) || ''; 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; } // Map entryType -> function to normalize data for event const ENTRY_TYPES = { // @ts-expect-error TODO: entry type does not fit the create* functions entry type resource: createResourceEntry, paint: createPaintEntry, // @ts-expect-error TODO: entry type does not fit the create* functions entry type navigation: createNavigationEntry, }; /** * Handler creater for web vitals */ function webVitalHandler( getter, replay, ) { return ({ metric }) => void replay.replayPerformanceEntries.push(getter(metric)); } /** * Create replay performance entries from the browser performance entries. */ function createPerformanceEntries( entries, ) { return entries.map(createPerformanceEntry).filter(Boolean) ; } function createPerformanceEntry(entry) { const entryType = ENTRY_TYPES[entry.entryType]; if (!entryType) { return null; } return entryType(entry); } function getAbsoluteTime(time) { // browserPerformanceTimeOrigin can be undefined if `performance` or // `performance.now` doesn't exist, but this is already checked by this integration return ((browserPerformanceTimeOrigin() || WINDOW.performance.timeOrigin) + time) / 1000; } function createPaintEntry(entry) { const { duration, entryType, name, startTime } = entry; const start = getAbsoluteTime(startTime); return { type: entryType, name, start, end: start + duration, data: undefined, }; } function createNavigationEntry(entry) { const { entryType, name, decodedBodySize, duration, domComplete, encodedBodySize, domContentLoadedEventStart, domContentLoadedEventEnd, domInteractive, loadEventStart, loadEventEnd, redirectCount, startTime, transferSize, type, } = entry; // Ignore entries with no duration, they do not seem to be useful and cause dupes if (duration === 0) { return null; } return { type: `${entryType}.${type}`, start: getAbsoluteTime(startTime), end: getAbsoluteTime(domComplete), name, data: { size: transferSize, decodedBodySize, encodedBodySize, duration, domInteractive, domContentLoadedEventStart, domContentLoadedEventEnd, loadEventStart, loadEventEnd, domComplete, redirectCount, }, }; } function createResourceEntry( entry, ) { const { entryType, initiatorType, name, responseEnd, startTime, decodedBodySize, encodedBodySize, responseStatus, transferSize, } = entry; // Core SDK handles these if (['fetch', 'xmlhttprequest'].includes(initiatorType)) { return null; } return { type: `${entryType}.${initiatorType}`, start: getAbsoluteTime(startTime), end: getAbsoluteTime(responseEnd), name, data: { size: transferSize, statusCode: responseStatus, decodedBodySize, encodedBodySize, }, }; } /** * Add a LCP event to the replay based on a LCP metric. */ function getLargestContentfulPaint(metric) { const lastEntry = metric.entries[metric.entries.length - 1] ; const node = lastEntry?.element ? [lastEntry.element] : undefined; return getWebVital(metric, 'largest-contentful-paint', node); } function isLayoutShift(entry) { return (entry ).sources !== undefined; } /** * Add a CLS event to the replay based on a CLS metric. */ function getCumulativeLayoutShift(metric) { const layoutShifts = []; const nodes = []; for (const entry of metric.entries) { if (isLayoutShift(entry)) { const nodeIds = []; for (const source of entry.sources) { if (source.node) { nodes.push(source.node); const nodeId = record.mirror.getId(source.node); if (nodeId) { nodeIds.push(nodeId); } } } layoutShifts.push({ value: entry.value, nodeIds: nodeIds.length ? nodeIds : undefined }); } } return getWebVital(metric, 'cumulative-layout-shift', nodes, layoutShifts); } /** * Add an INP event to the replay based on an INP metric. */ function getInteractionToNextPaint(metric) { const lastEntry = metric.entries[metric.entries.length - 1] ; const node = lastEntry?.target ? [lastEntry.target] : undefined; return getWebVital(metric, 'interaction-to-next-paint', node); } /** * Add an web vital event to the replay based on the web vital metric. */ function getWebVital( metric, name, nodes, attributions, ) { const value = metric.value; const rating = metric.rating; const end = getAbsoluteTime(value); return { type: 'web-vital', name, start: end, end, data: { value, size: value, rating, nodeIds: nodes ? nodes.map(node => record.mirror.getId(node)) : undefined, attributions, }, }; } /** * Sets up a PerformanceObserver to listen to all performance entry types. * Returns a callback to stop observing. */ function setupPerformanceObserver(replay) { function addPerformanceEntry(entry) { // It is possible for entries to come up multiple times if (!replay.performanceEntries.includes(entry)) { replay.performanceEntries.push(entry); } } function onEntries({ entries }) { entries.forEach(addPerformanceEntry); } const clearCallbacks = []; (['navigation', 'paint', 'resource'] ).forEach(type => { clearCallbacks.push(addPerformanceInstrumentationHandler(type, onEntries)); }); clearCallbacks.push( addLcpInstrumentationHandler(webVitalHandler(getLargestContentfulPaint, replay)), addClsInstrumentationHandler(webVitalHandler(getCumulativeLayoutShift, replay)), addInpInstrumentationHandler(webVitalHandler(getInteractionToNextPaint, replay)), ); // A callback to cleanup all handlers return () => { clearCallbacks.forEach(clearCallback => clearCallback()); }; } /** * This serves as a build time flag that will be true by default, but false in non-debug builds or if users replace `__SENTRY_DEBUG__` in their generated code. * * ATTENTION: This constant must never cross package boundaries (i.e. be exported) to guarantee that it can be used for tree shaking. */ const DEBUG_BUILD = (typeof __SENTRY_DEBUG__ === 'undefined' || __SENTRY_DEBUG__); const r = `var t=Uint8Array,n=Uint16Array,r=Int32Array,e=new t([0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,0,0,0,0]),i=new t([0,0,0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,0,0]),s=new t([16,17,18,0,8,7,9,6,10,5,11,4,12,3,13,2,14,1,15]),a=function(t,e){for(var i=new n(31),s=0;s<31;++s)i[s]=e+=1<>1|(21845&c)<<1;v=(61680&(v=(52428&v)>>2|(13107&v)<<2))>>4|(3855&v)<<4,u[c]=((65280&v)>>8|(255&v)<<8)>>1}var d=function(t,r,e){for(var i=t.length,s=0,a=new n(r);s>f]=l}else for(o=new n(i),s=0;s>15-t[s]);return o},p=new t(288);for(c=0;c<144;++c)p[c]=8;for(c=144;c<256;++c)p[c]=9;for(c=256;c<280;++c)p[c]=7;for(c=280;c<288;++c)p[c]=8;var g=new t(32);for(c=0;c<32;++c)g[c]=5;var w=d(p,9,0),y=d(g,5,0),m=function(t){return(t+7)/8|0},b=function(n,r,e){return(null==e||e>n.length)&&(e=n.length),new t(n.subarray(r,e))},M=["unexpected EOF","invalid block type","invalid length/literal","invalid distance","stream finished","no stream handler",,"no callback","invalid UTF-8 data","extra field too long","date not in range 1980-2099","filename too long","stream finishing","invalid zip data"],E=function(t,n,r){var e=new Error(n||M[t]);if(e.code=t,Error.captureStackTrace&&Error.captureStackTrace(e,E),!r)throw e;return e},z=function(t,n,r){r<<=7&n;var e=n/8|0;t[e]|=r,t[e+1]|=r>>8},_=function(t,n,r){r<<=7&n;var e=n/8|0;t[e]|=r,t[e+1]|=r>>8,t[e+2]|=r>>16},x=function(r,e){for(var i=[],s=0;sd&&(d=o[s].s);var p=new n(d+1),g=A(i[c-1],p,0);if(g>e){s=0;var w=0,y=g-e,m=1<e))break;w+=m-(1<>=y;w>0;){var M=o[s].s;p[M]=0&&w;--s){var E=o[s].s;p[E]==e&&(--p[E],++w)}g=e}return{t:new t(p),l:g}},A=function(t,n,r){return-1==t.s?Math.max(A(t.l,n,r+1),A(t.r,n,r+1)):n[t.s]=r},D=function(t){for(var r=t.length;r&&!t[--r];);for(var e=new n(++r),i=0,s=t[0],a=1,o=function(t){e[i++]=t},h=1;h<=r;++h)if(t[h]==s&&h!=r)++a;else{if(!s&&a>2){for(;a>138;a-=138)o(32754);a>2&&(o(a>10?a-11<<5|28690:a-3<<5|12305),a=0)}else if(a>3){for(o(s),--a;a>6;a-=6)o(8304);a>2&&(o(a-3<<5|8208),a=0)}for(;a--;)o(s);a=1,s=t[h]}return{c:e.subarray(0,i),n:r}},T=function(t,n){for(var r=0,e=0;e>8,t[i+2]=255^t[i],t[i+3]=255^t[i+1];for(var s=0;s4&&!H[s[K-1]];--K);var N,P,Q,R,V=v+5<<3,W=T(h,p)+T(f,g)+l,X=T(h,M)+T(f,U)+l+14+3*K+T(q,H)+2*q[16]+3*q[17]+7*q[18];if(c>=0&&V<=W&&V<=X)return k(r,m,t.subarray(c,c+v));if(z(r,m,1+(X15&&(z(r,m,tt[B]>>5&127),m+=tt[B]>>12)}}}else N=w,P=p,Q=y,R=g;for(B=0;B255){_(r,m,N[(nt=rt>>18&31)+257]),m+=P[nt+257],nt>7&&(z(r,m,rt>>23&31),m+=e[nt]);var et=31&rt;_(r,m,Q[et]),m+=R[et],et>3&&(_(r,m,rt>>5&8191),m+=i[et])}else _(r,m,N[rt]),m+=P[rt]}return _(r,m,N[256]),m+P[256]},C=new r([65540,131080,131088,131104,262176,1048704,1048832,2114560,2117632]),F=new t(0),I=function(){for(var t=new Int32Array(256),n=0;n<256;++n){for(var r=n,e=9;--e;)r=(1&r&&-306674912)^r>>>1;t[n]=r}return t}(),S=function(){var t=1,n=0;return{p:function(r){for(var e=t,i=n,s=0|r.length,a=0;a!=s;){for(var o=Math.min(a+2655,s);a>16),i=(65535&i)+15*(i>>16)}t=e,n=i},d:function(){return(255&(t%=65521))<<24|(65280&t)<<8|(255&(n%=65521))<<8|n>>8}}},L=function(s,a,o,h,u){if(!u&&(u={l:1},a.dictionary)){var c=a.dictionary.subarray(-32768),v=new t(c.length+s.length);v.set(c),v.set(s,c.length),s=v,u.w=c.length}return function(s,a,o,h,u,c){var v=c.z||s.length,d=new t(h+v+5*(1+Math.ceil(v/7e3))+u),p=d.subarray(h,d.length-u),g=c.l,w=7&(c.r||0);if(a){w&&(p[0]=c.r>>3);for(var y=C[a-1],M=y>>13,E=8191&y,z=(1<7e3||q>24576)&&(N>423||!g)){w=U(s,p,0,F,I,S,O,q,G,j-G,w),q=L=O=0,G=j;for(var P=0;P<286;++P)I[P]=0;for(P=0;P<30;++P)S[P]=0}var Q=2,R=0,V=E,W=J-K&32767;if(N>2&&H==T(j-W))for(var X=Math.min(M,N)-1,Y=Math.min(32767,j),Z=Math.min(258,N);W<=Y&&--V&&J!=K;){if(s[j+Q]==s[j+Q-W]){for(var $=0;$Q){if(Q=$,R=W,$>X)break;var tt=Math.min(W,$-2),nt=0;for(P=0;Pnt&&(nt=et,K=rt)}}}W+=(J=K)-(K=_[J])&32767}if(R){F[q++]=268435456|f[Q]<<18|l[R];var it=31&f[Q],st=31&l[R];O+=e[it]+i[st],++I[257+it],++S[st],B=j+Q,++L}else F[q++]=s[j],++I[s[j]]}}for(j=Math.max(j,B);j=v&&(p[w/8|0]=g,at=v),w=k(p,w+1,s.subarray(j,at))}c.i=v}return b(d,0,h+m(w)+u)}(s,null==a.level?6:a.level,null==a.mem?u.l?Math.ceil(1.5*Math.max(8,Math.min(13,Math.log(s.length)))):20:12+a.mem,o,h,u)},O=function(t,n,r){for(;r;++n)t[n]=r,r>>>=8},j=function(){function n(n,r){if("function"==typeof n&&(r=n,n={}),this.ondata=r,this.o=n||{},this.s={l:0,i:32768,w:32768,z:32768},this.b=new t(98304),this.o.dictionary){var e=this.o.dictionary.subarray(-32768);this.b.set(e,32768-e.length),this.s.i=32768-e.length}}return n.prototype.p=function(t,n){this.ondata(L(t,this.o,0,0,this.s),n)},n.prototype.push=function(n,r){this.ondata||E(5),this.s.l&&E(4);var e=n.length+this.s.z;if(e>this.b.length){if(e>2*this.b.length-32768){var i=new t(-32768&e);i.set(this.b.subarray(0,this.s.z)),this.b=i}var s=this.b.length-this.s.z;this.b.set(n.subarray(0,s),this.s.z),this.s.z=this.b.length,this.p(this.b,!1),this.b.set(this.b.subarray(-32768)),this.b.set(n.subarray(s),32768),this.s.z=n.length-s+32768,this.s.i=32766,this.s.w=32768}else this.b.set(n,this.s.z),this.s.z+=n.length;this.s.l=1&r,(this.s.z>this.s.w+8191||r)&&(this.p(this.b,r||!1),this.s.w=this.s.i,this.s.i-=2)},n.prototype.flush=function(){this.ondata||E(5),this.s.l&&E(4),this.p(this.b,!1),this.s.w=this.s.i,this.s.i-=2},n}();function q(t,n){n||(n={});var r=function(){var t=-1;return{p:function(n){for(var r=t,e=0;e>>8;t=r},d:function(){return~t}}}(),e=t.length;r.p(t);var i,s=L(t,n,10+((i=n).filename?i.filename.length+1:0),8),a=s.length;return function(t,n){var r=n.filename;if(t[0]=31,t[1]=139,t[2]=8,t[8]=n.level<2?4:9==n.level?2:0,t[9]=3,0!=n.mtime&&O(t,4,Math.floor(new Date(n.mtime||Date.now())/1e3)),r){t[3]=8;for(var e=0;e<=r.length;++e)t[e+10]=r.charCodeAt(e)}}(s,n),O(s,a-8,r.d()),O(s,a-4,e),s}var B=function(){function t(t,n){this.c=S(),this.v=1,j.call(this,t,n)}return t.prototype.push=function(t,n){this.c.p(t),j.prototype.push.call(this,t,n)},t.prototype.p=function(t,n){var r=L(t,this.o,this.v&&(this.o.dictionary?6:2),n&&4,this.s);this.v&&(function(t,n){var r=n.level,e=0==r?0:r<6?1:9==r?3:2;if(t[0]=120,t[1]=e<<6|(n.dictionary&&32),t[1]|=31-(t[0]<<8|t[1])%31,n.dictionary){var i=S();i.p(n.dictionary),O(t,2,i.d())}}(r,this.o),this.v=0),n&&O(r,r.length-4,this.c.d()),this.ondata(r,n)},t.prototype.flush=function(){j.prototype.flush.call(this)},t}(),G="undefined"!=typeof TextEncoder&&new TextEncoder,H="undefined"!=typeof TextDecoder&&new TextDecoder;try{H.decode(F,{stream:!0})}catch(t){}var J=function(){function t(t){this.ondata=t}return t.prototype.push=function(t,n){this.ondata||E(5),this.d&&E(4),this.ondata(K(t),this.d=n||!1)},t}();function K(n,r){if(G)return G.encode(n);for(var e=n.length,i=new t(n.length+(n.length>>1)),s=0,a=function(t){i[s++]=t},o=0;oi.length){var h=new t(s+8+(e-o<<1));h.set(i),i=h}var f=n.charCodeAt(o);f<128||r?a(f):f<2048?(a(192|f>>6),a(128|63&f)):f>55295&&f<57344?(a(240|(f=65536+(1047552&f)|1023&n.charCodeAt(++o))>>18),a(128|f>>12&63),a(128|f>>6&63),a(128|63&f)):(a(224|f>>12),a(128|f>>6&63),a(128|63&f))}return b(i,0,s)}const N=new class{constructor(){this._init()}clear(){this._init()}addEvent(t){if(!t)throw new Error("Adding invalid event");const n=this._hasEvents?",":"";this.stream.push(n+t),this._hasEvents=!0}finish(){this.stream.push("]",!0);const t=function(t){let n=0;for(const r of t)n+=r.length;const r=new Uint8Array(n);for(let n=0,e=0,i=t.length;n{this._deflatedData.push(t)},this.stream=new J((t,n)=>{this.deflate.push(t,n)}),this.stream.push("[")}},P={clear:()=>{N.clear()},addEvent:t=>N.addEvent(t),finish:()=>N.finish(),compress:t=>function(t){return q(K(t))}(t)};addEventListener("message",function(t){const n=t.data.method,r=t.data.id,e=t.data.arg;if(n in P&&"function"==typeof P[n])try{const t=P[n](e);postMessage({id:r,method:n,success:!0,response:t})}catch(t){postMessage({id:r,method:n,success:!1,response:t.message}),console.error(t)}}),postMessage({id:void 0,method:"init",success:!0,response:void 0});`; function e(){const e=new Blob([r]);return URL.createObjectURL(e)} const CONSOLE_LEVELS = ['log', 'warn', 'error'] ; const PREFIX = '[Replay] '; function _addBreadcrumb(message, level = 'info') { addBreadcrumb( { category: 'console', data: { logger: 'replay', }, level, message: `${PREFIX}${message}`, }, { level }, ); } function makeReplayDebugLogger() { let _capture = false; let _trace = false; const _debug = { exception: () => undefined, infoTick: () => undefined, setConfig: (opts) => { _capture = !!opts.captureExceptions; _trace = !!opts.traceInternals; }, }; if (DEBUG_BUILD) { CONSOLE_LEVELS.forEach(name => { _debug[name] = (...args) => { debug$1[name](PREFIX, ...args); if (_trace) { _addBreadcrumb(args.join(''), severityLevelFromString(name)); } }; }); _debug.exception = (error, ...message) => { if (message.length && _debug.error) { _debug.error(...message); } debug$1.error(PREFIX, error); if (_capture) { captureException(error, { mechanism: { handled: true, type: 'auto.function.replay.debug', }, }); } else if (_trace) { // No need for a breadcrumb if `_capture` is enabled since it should be // captured as an exception _addBreadcrumb(error, 'error'); } }; _debug.infoTick = (...args) => { debug$1.log(PREFIX, ...args); if (_trace) { // Wait a tick here to avoid race conditions for some initial logs // which may be added before replay is initialized setTimeout(() => _addBreadcrumb(args[0]), 0); } }; } else { CONSOLE_LEVELS.forEach(name => { _debug[name] = () => undefined; }); } return _debug ; } const debug = makeReplayDebugLogger(); /** This error indicates that the event buffer size exceeded the limit.. */ class EventBufferSizeExceededError extends Error { constructor() { super(`Event buffer exceeded maximum size of ${REPLAY_MAX_EVENT_BUFFER_SIZE}.`); } } /** * A basic event buffer that does not do any compression. * Used as fallback if the compression worker cannot be loaded or is disabled. */ class EventBufferArray { /** All the events that are buffered to be sent. */ /** @inheritdoc */ /** @inheritdoc */ constructor() { this.events = []; this._totalSize = 0; this.hasCheckout = false; this.waitForCheckout = false; } /** @inheritdoc */ get hasEvents() { return this.events.length > 0; } /** @inheritdoc */ get type() { return 'sync'; } /** @inheritdoc */ destroy() { this.events = []; } /** @inheritdoc */ async addEvent(event) { const eventSize = JSON.stringify(event).length; this._totalSize += eventSize; if (this._totalSize > REPLAY_MAX_EVENT_BUFFER_SIZE) { throw new EventBufferSizeExceededError(); } this.events.push(event); } /** @inheritdoc */ finish() { return new Promise(resolve => { // Make a copy of the events array reference and immediately clear the // events member so that we do not lose new events while uploading // attachment. const eventsRet = this.events; this.clear(); resolve(JSON.stringify(eventsRet)); }); } /** @inheritdoc */ clear() { this.events = []; this._totalSize = 0; this.hasCheckout = false; } /** @inheritdoc */ getEarliestTimestamp() { const timestamp = this.events.map(event => event.timestamp).sort()[0]; if (!timestamp) { return null; } return timestampToMs(timestamp); } } /** * Event buffer that uses a web worker to compress events. * Exported only for testing. */ class WorkerHandler { constructor(worker) { this._worker = worker; this._id = 0; } /** * Ensure the worker is ready (or not). * This will either resolve when the worker is ready, or reject if an error occurred. */ ensureReady() { // Ensure we only check once if (this._ensureReadyPromise) { return this._ensureReadyPromise; } this._ensureReadyPromise = new Promise((resolve, reject) => { this._worker.addEventListener( 'message', ({ data }) => { if ((data ).success) { resolve(); } else { DEBUG_BUILD && debug.warn('Received worker message with unsuccessful status', data); reject(new Error('Received worker message with unsuccessful status')); } }, { once: true }, ); this._worker.addEventListener( 'error', error => { DEBUG_BUILD && debug.warn('Failed to load Replay compression worker', error); reject( new Error( `Failed to load Replay compression worker: ${error instanceof ErrorEvent && error.message ? error.message : 'Unknown error. This can happen due to CSP policy restrictions, network issues, or the worker script failing to load.'}`, ), ); }, { once: true }, ); }); return this._ensureReadyPromise; } /** * Destroy the worker. */ destroy() { DEBUG_BUILD && debug.log('Destroying compression worker'); this._worker.terminate(); } /** * Post message to worker and wait for response before resolving promise. */ postMessage(method, arg) { const id = this._getAndIncrementId(); return new Promise((resolve, reject) => { const listener = ({ data }) => { const response = data ; if (response.method !== method) { return; } // There can be multiple listeners for a single method, the id ensures // that the response matches the caller. if (response.id !== id) { return; } // At this point, we'll always want to remove listener regardless of result status this._worker.removeEventListener('message', listener); if (!response.success) { // TODO: Do some error handling, not sure what DEBUG_BUILD && debug.error('Error in compression worker: ', response.response); reject(new Error('Error in compression worker')); return; } resolve(response.response ); }; // Note: we can't use `once` option because it's possible it needs to // listen to multiple messages this._worker.addEventListener('message', listener); this._worker.postMessage({ id, method, arg }); }); } /** Get the current ID and increment it for the next call. */ _getAndIncrementId() { return this._id++; } } /** * Event buffer that uses a web worker to compress events. * Exported only for testing. */ class EventBufferCompressionWorker { /** @inheritdoc */ /** @inheritdoc */ constructor(worker) { this._worker = new WorkerHandler(worker); this._earliestTimestamp = null; this._totalSize = 0; this.hasCheckout = false; this.waitForCheckout = false; } /** @inheritdoc */ get hasEvents() { return !!this._earliestTimestamp; } /** @inheritdoc */ get type() { return 'worker'; } /** * Ensure the worker is ready (or not). * This will either resolve when the worker is ready, or reject if an error occurred. */ ensureReady() { return this._worker.ensureReady(); } /** * Destroy the event buffer. */ destroy() { this._worker.destroy(); } /** * Add an event to the event buffer. * * Returns true if event was successfully received and processed by worker. */ addEvent(event) { const timestamp = timestampToMs(event.timestamp); if (!this._earliestTimestamp || timestamp < this._earliestTimestamp) { this._earliestTimestamp = timestamp; } const data = JSON.stringify(event); this._totalSize += data.length; if (this._totalSize > REPLAY_MAX_EVENT_BUFFER_SIZE) { return Promise.reject(new EventBufferSizeExceededError()); } return this._sendEventToWorker(data); } /** * Finish the event buffer and return the compressed data. */ finish() { return this._finishRequest(); } /** @inheritdoc */ clear() { this._earliestTimestamp = null; this._totalSize = 0; this.hasCheckout = false; // We do not wait on this, as we assume the order of messages is consistent for the worker this._worker.postMessage('clear').then(null, e => { DEBUG_BUILD && debug.exception(e, 'Sending "clear" message to worker failed', e); }); } /** @inheritdoc */ getEarliestTimestamp() { return this._earliestTimestamp; } /** * Send the event to the worker. */ _sendEventToWorker(data) { return this._worker.postMessage('addEvent', data); } /** * Finish the request and return the compressed data from the worker. */ async _finishRequest() { const response = await this._worker.postMessage('finish'); this._earliestTimestamp = null; this._totalSize = 0; return response; } } /** * This proxy will try to use the compression worker, and fall back to use the simple buffer if an error occurs there. * This can happen e.g. if the worker cannot be loaded. * Exported only for testing. */ class EventBufferProxy { constructor(worker) { this._fallback = new EventBufferArray(); this._compression = new EventBufferCompressionWorker(worker); this._used = this._fallback; this._ensureWorkerIsLoadedPromise = this._ensureWorkerIsLoaded(); } /** @inheritdoc */ get waitForCheckout() { return this._used.waitForCheckout; } /** @inheritdoc */ get type() { return this._used.type; } /** @inheritDoc */ get hasEvents() { return this._used.hasEvents; } /** @inheritdoc */ get hasCheckout() { return this._used.hasCheckout; } /** @inheritdoc */ set hasCheckout(value) { this._used.hasCheckout = value; } /** @inheritdoc */ // eslint-disable-next-line @typescript-eslint/adjacent-overload-signatures set waitForCheckout(value) { this._used.waitForCheckout = value; } /** @inheritDoc */ destroy() { this._fallback.destroy(); 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) { return this._used.addEvent(event); } /** @inheritDoc */ async finish() { // Ensure the worker is loaded, so the sent event is compressed await this.ensureWorkerIsLoaded(); return this._used.finish(); } /** Ensure the worker has loaded. */ ensureWorkerIsLoaded() { return this._ensureWorkerIsLoadedPromise; } /** Actually check if the worker has been loaded. */ async _ensureWorkerIsLoaded() { try { await this._compression.ensureReady(); } catch (error) { // If the worker fails to load, we fall back to the simple buffer. // Nothing more to do from our side here DEBUG_BUILD && debug.exception(error, 'Failed to load the compression worker, falling back to simple buffer'); return; } // Now we need to switch over the array buffer to the compression worker await this._switchToCompressionWorker(); } /** Switch the used buffer to the compression worker. */ async _switchToCompressionWorker() { const { events, hasCheckout, waitForCheckout } = this._fallback; const addEventPromises = []; for (const event of events) { addEventPromises.push(this._compression.addEvent(event)); } this._compression.hasCheckout = hasCheckout; this._compression.waitForCheckout = waitForCheckout; // We switch over to the new buffer immediately - any further events will be added // after the previously buffered ones this._used = this._compression; // Wait for original events to be re-added before resolving try { await Promise.all(addEventPromises); // Can now clear fallback buffer as it's no longer necessary this._fallback.clear(); } catch (error) { DEBUG_BUILD && debug.exception(error, 'Failed to add events when switching buffers.'); } } } /** * Create an event buffer for replays. */ function createEventBuffer({ useCompression, workerUrl: customWorkerUrl, }) { if ( useCompression && // eslint-disable-next-line no-restricted-globals window.Worker ) { const worker = _loadWorker(customWorkerUrl); if (worker) { return worker; } } DEBUG_BUILD && debug.log('Using simple buffer'); return new EventBufferArray(); } function _loadWorker(customWorkerUrl) { try { const workerUrl = customWorkerUrl || _getWorkerUrl(); if (!workerUrl) { return; } DEBUG_BUILD && debug.log(`Using compression worker${customWorkerUrl ? ` from ${customWorkerUrl}` : ''}`); const worker = new Worker(workerUrl); return new EventBufferProxy(worker); } catch (error) { DEBUG_BUILD && debug.exception(error, 'Failed to create compression worker'); // Fall back to use simple event buffer array } } function _getWorkerUrl() { if (typeof __SENTRY_EXCLUDE_REPLAY_WORKER__ === 'undefined' || !__SENTRY_EXCLUDE_REPLAY_WORKER__) { return e(); } return ''; } /** If sessionStorage is available. */ function hasSessionStorage() { try { // This can throw, e.g. when being accessed in a sandboxed iframe return 'sessionStorage' in WINDOW && !!WINDOW.sessionStorage; } catch { return false; } } /** * 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() { if (!hasSessionStorage()) { return; } try { WINDOW.sessionStorage.removeItem(REPLAY_SESSION_KEY); } catch { // Ignore potential SecurityError exceptions } } /** * 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. */ function saveSession(session) { if (!hasSessionStorage()) { return; } try { WINDOW.sessionStorage.setItem(REPLAY_SESSION_KEY, JSON.stringify(session)); } catch { // Ignore potential SecurityError exceptions } } /** * Get a session with defaults & applied sampling. */ function makeSession(session) { const now = Date.now(); const id = session.id || uuid4(); // Note that this means we cannot set a started/lastActivity of `0`, but this should not be relevant outside of tests. const started = session.started || now; const lastActivity = session.lastActivity || now; const segmentId = session.segmentId || 0; const sampled = session.sampled; const previousSessionId = session.previousSessionId; const dirty = session.dirty || false; return { id, started, lastActivity, segmentId, sampled, previousSessionId, dirty, }; } /** * Get the sampled status for a session based on sample rates & current sampled status. */ function getSessionSampleType(sessionSampleRate, allowBuffering) { return isSampled(sessionSampleRate) ? 'session' : allowBuffering ? 'buffer' : false; } /** * Create a new session, which in its current implementation is a Sentry event * that all replays will be saved to as attachments. Currently, we only expect * one of these Sentry events per "replay session". */ function createSession( { sessionSampleRate, allowBuffering, stickySession = false }, { previousSessionId } = {}, ) { const sampled = getSessionSampleType(sessionSampleRate, allowBuffering); const session = makeSession({ sampled, previousSessionId, }); if (stickySession) { saveSession(session); } return session; } /** * Fetches a session from storage */ function fetchSession() { if (!hasSessionStorage()) { return null; } try { // This can throw if cookies are disabled const sessionStringFromStorage = WINDOW.sessionStorage.getItem(REPLAY_SESSION_KEY); if (!sessionStringFromStorage) { return null; } const sessionObj = JSON.parse(sessionStringFromStorage) ; DEBUG_BUILD && debug.infoTick('Loading existing session'); return makeSession(sessionObj); } catch { return null; } } /** * Given an initial timestamp and an expiry duration, checks to see if current * time should be considered as expired. */ function isExpired( initialTime, expiry, targetTime = +new Date(), ) { // Always expired if < 0 if (initialTime === null || expiry === undefined || expiry < 0) { return true; } // Never expires if == 0 if (expiry === 0) { return false; } return initialTime + expiry <= targetTime; } /** * Checks to see if session is expired */ function isSessionExpired( session, { maxReplayDuration, sessionIdleExpire, targetTime = Date.now(), }, ) { return ( // First, check that maximum session length has not been exceeded isExpired(session.started, maxReplayDuration, targetTime) || // check that the idle timeout has not been exceeded (i.e. user has // performed an action within the last `sessionIdleExpire` ms) isExpired(session.lastActivity, sessionIdleExpire, targetTime) ); } /** If the session should be refreshed or not. */ function shouldRefreshSession( session, { sessionIdleExpire, maxReplayDuration }, ) { // If not expired, all good, just keep the session if (!isSessionExpired(session, { sessionIdleExpire, maxReplayDuration })) { return false; } // If we are buffering & haven't ever flushed yet, always continue if (session.sampled === 'buffer' && session.segmentId === 0) { return false; } return true; } /** * Get or create a session, when initializing the replay. * Returns a session that may be unsampled. */ function loadOrCreateSession( { sessionIdleExpire, maxReplayDuration, previousSessionId, } , sessionOptions, ) { const existingSession = sessionOptions.stickySession && fetchSession(); // No session exists yet, just create a new one if (!existingSession) { DEBUG_BUILD && debug.infoTick('Creating new session'); return createSession(sessionOptions, { previousSessionId }); } if (!shouldRefreshSession(existingSession, { sessionIdleExpire, maxReplayDuration })) { return existingSession; } DEBUG_BUILD && debug.infoTick('Session in sessionStorage is expired, creating new one...'); return createSession(sessionOptions, { previousSessionId: existingSession.id }); } function isCustomEvent(event) { return event.type === EventType.Custom; } /** * Add an event to the event buffer. * In contrast to `addEvent`, this does not return a promise & does not wait for the adding of the event to succeed/fail. * Instead this returns `true` if we tried to add the event, else false. * It returns `false` e.g. if we are paused, disabled, or out of the max replay duration. * * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`. */ function addEventSync(replay, event, isCheckout) { if (!shouldAddEvent(replay, event)) { return false; } // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises _addEvent(replay, event, isCheckout); return true; } /** * Add an event to the event buffer. * Resolves to `null` if no event was added, else to `void`. * * `isCheckout` is true if this is either the very first event, or an event triggered by `checkoutEveryNms`. */ function addEvent( replay, event, isCheckout, ) { if (!shouldAddEvent(replay, event)) { return Promise.resolve(null); } return _addEvent(replay, event, isCheckout); } async function _addEvent( replay, event, isCheckout, ) { const { eventBuffer } = replay; if (!eventBuffer || (eventBuffer.waitForCheckout && !isCheckout)) { return null; } const isBufferMode = replay.recordingMode === 'buffer'; try { if (isCheckout && isBufferMode) { eventBuffer.clear(); } if (isCheckout) { eventBuffer.hasCheckout = true; eventBuffer.waitForCheckout = false; } const replayOptions = replay.getOptions(); const eventAfterPossibleCallback = maybeApplyCallback(event, replayOptions.beforeAddRecordingEvent); if (!eventAfterPossibleCallback) { return; } return await eventBuffer.addEvent(eventAfterPossibleCallback); } catch (error) { const isExceeded = error && error instanceof EventBufferSizeExceededError; const reason = isExceeded ? 'addEventSizeExceeded' : 'addEvent'; const client = getClient(); if (client) { // We are limited in the drop reasons: // https://github.com/getsentry/snuba/blob/6c73be60716c2fb1c30ca627883207887c733cbd/rust_snuba/src/processors/outcomes.rs#L39 const dropReason = isExceeded ? 'buffer_overflow' : 'internal_sdk_error'; client.recordDroppedEvent(dropReason, 'replay'); } if (isExceeded && isBufferMode) { // Clear buffer and wait for next checkout eventBuffer.clear(); eventBuffer.waitForCheckout = true; return null; } replay.handleException(error); await replay.stop({ reason }); } } /** Exported only for tests. */ function shouldAddEvent(replay, event) { if (!replay.eventBuffer || replay.isPaused() || !replay.isEnabled()) { return false; } 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 false; } // Throw out events that are +60min from the initial timestamp if (timestampInMs > replay.getContext().initialTimestamp + replay.getOptions().maxReplayDuration) { DEBUG_BUILD && debug.infoTick(`Skipping event with timestamp ${timestampInMs} because it is after maxReplayDuration`); return false; } return true; } function maybeApplyCallback( event, callback, ) { try { if (typeof callback === 'function' && isCustomEvent(event)) { return callback(event); } } catch (error) { DEBUG_BUILD && debug.exception(error, 'An error occurred in the `beforeAddRecordingEvent` callback, skipping the event...'); return null; } return event; } /** If the event is an error event */ function isErrorEvent(event) { return !event.type; } /** If the event is a transaction event */ function isTransactionEvent(event) { return event.type === 'transaction'; } /** If the event is an replay event */ function isReplayEvent(event) { return event.type === 'replay_event'; } /** If the event is a feedback event */ function isFeedbackEvent(event) { return event.type === 'feedback'; } /** * Returns a listener to be added to `client.on('afterSendErrorEvent, listener)`. */ function handleAfterSendEvent(replay) { return (event, sendResponse) => { if (!replay.isEnabled() || (!isErrorEvent(event) && !isTransactionEvent(event))) { return; } const statusCode = sendResponse.statusCode; // We only want to do stuff on successful error sending, otherwise you get error replays without errors attached // We skip if we encountered an non-OK status code if (!statusCode || statusCode < 200 || statusCode >= 300) { return; } if (isTransactionEvent(event)) { handleTransactionEvent(replay, event); return; } handleErrorEvent(replay, event); }; } function handleTransactionEvent(replay, event) { const replayContext = replay.getContext(); // Collect traceIds in _context regardless of `recordingMode` // In error mode, _context gets cleared on every checkout // We limit to max. 100 transactions linked if (event.contexts?.trace?.trace_id && replayContext.traceIds.size < 100) { replayContext.traceIds.add(event.contexts.trace.trace_id); } } function handleErrorEvent(replay, event) { const replayContext = replay.getContext(); // 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. // We limit to max. 100 errors linked if (event.event_id && replayContext.errorIds.size < 100) { replayContext.errorIds.add(event.event_id); } // If error event is tagged with replay id it means it was sampled (when in buffer mode) // Need to be very careful that this does not cause an infinite loop if (replay.recordingMode !== 'buffer' || !event.tags || !event.tags.replayId) { return; } const { beforeErrorSampling } = replay.getOptions(); if (typeof beforeErrorSampling === 'function' && !beforeErrorSampling(event)) { return; } setTimeout$3(async () => { try { // Capture current event buffer as new replay await replay.sendBufferedReplayOrFlush(); } catch (err) { replay.handleException(err); } }); } /** * Returns a listener to be added to `client.on('afterSendErrorEvent, listener)`. */ function handleBeforeSendEvent(replay) { return (event) => { if (!replay.isEnabled() || !isErrorEvent(event)) { return; } handleHydrationError(replay, event); }; } function handleHydrationError(replay, event) { const exceptionValue = event.exception?.values?.[0]?.value; if (typeof exceptionValue !== 'string') { return; } if ( // Only matches errors in production builds of react-dom // Example https://reactjs.org/docs/error-decoder.html?invariant=423 // With newer React versions, the messages changed to a different website https://react.dev/errors/418 exceptionValue.match( /(reactjs\.org\/docs\/error-decoder\.html\?invariant=|react\.dev\/errors\/)(418|419|422|423|425)/, ) || // Development builds of react-dom // Error 1: Hydration failed because the initial UI does not match what was rendered on the server. // Error 2: Text content does not match server-rendered HTML. Warning: Text content did not match. exceptionValue.match(/(does not match server-rendered HTML|Hydration failed because)/i) ) { const breadcrumb = createBreadcrumb({ category: 'replay.hydrate-error', data: { url: getLocationHref(), }, }); addBreadcrumbEvent(replay, breadcrumb); } } /** * Handle breadcrumbs that Sentry captures, and make sure to capture relevant breadcrumbs to Replay as well. */ function handleBreadcrumbs(replay) { const client = getClient(); if (!client) { return; } client.on('beforeAddBreadcrumb', breadcrumb => beforeAddBreadcrumb(replay, breadcrumb)); } function beforeAddBreadcrumb(replay, breadcrumb) { if (!replay.isEnabled() || !isBreadcrumbWithCategory(breadcrumb)) { return; } const result = normalizeBreadcrumb(breadcrumb); if (result) { addBreadcrumbEvent(replay, result); } } /** Exported only for tests. */ function normalizeBreadcrumb(breadcrumb) { if ( !isBreadcrumbWithCategory(breadcrumb) || [ // fetch & xhr are handled separately,in handleNetworkBreadcrumbs 'fetch', 'xhr', // These two are breadcrumbs for emitted sentry events, we don't care about them 'sentry.event', 'sentry.transaction', ].includes(breadcrumb.category) || // We capture UI breadcrumbs separately breadcrumb.category.startsWith('ui.') ) { return null; } if (breadcrumb.category === 'console') { return normalizeConsoleBreadcrumb(breadcrumb); } return createBreadcrumb(breadcrumb); } /** exported for tests only */ function normalizeConsoleBreadcrumb( breadcrumb, ) { const args = 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) { isTruncated = true; // We use the pretty printed JSON string here as a base return `${JSON.stringify(normalizedArg, null, 2).slice(0, CONSOLE_ARG_MAX_SIZE)}…`; } return normalizedArg; } catch { // fall back to default } } return arg; }); return createBreadcrumb({ ...breadcrumb, data: { ...breadcrumb.data, arguments: normalizedArgs, ...(isTruncated ? { _meta: { warnings: ['CONSOLE_ARG_TRUNCATED'] } } : {}), }, }); } function isBreadcrumbWithCategory(breadcrumb) { return !!breadcrumb.category; } /** * Returns true if we think the given event is an error originating inside of rrweb. */ function isRrwebError(event, hint) { if (event.type || !event.exception?.values?.length) { return false; } // @ts-expect-error this may be set by rrweb when it finds errors if (hint.originalException?.__rrweb__) { return true; } return false; } /** * Reset the `replay_id` field on the DSC. */ function resetReplayIdOnDynamicSamplingContext() { // Reset DSC on the current scope, if there is one const dsc = getCurrentScope().getPropagationContext().dsc; if (dsc) { delete dsc.replay_id; } // Clear it from frozen DSC on the active span const activeSpan = getActiveSpan(); if (activeSpan) { const dsc = getDynamicSamplingContextFromSpan(activeSpan); delete (dsc ).replay_id; } } /** * Add a feedback breadcrumb event to replay. */ function addFeedbackBreadcrumb(replay, event) { replay.triggerUserActivity(); replay.addUpdate(() => { if (!event.timestamp) { // Ignore events that don't have timestamps (this shouldn't happen, more of a typing issue) // Return true here so that we don't flush return true; } // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises replay.throttledAddEvent({ type: EventType.Custom, timestamp: event.timestamp * 1000, data: { tag: 'breadcrumb', payload: { timestamp: event.timestamp, type: 'default', category: 'sentry.feedback', data: { feedbackId: event.event_id, }, }, }, } ); return false; }); } /** * Determine if event should be sampled (only applies in buffer mode). * When an event is captured by `handleGlobalEvent`, 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 `addEventProcessor(listener)`. */ function handleGlobalEventListener(replay) { return Object.assign( (event, hint) => { // Do nothing if replay has been disabled or paused if (!replay.isEnabled() || replay.isPaused()) { return event; } if (isReplayEvent(event)) { // Replays have separate set of breadcrumbs, do not include breadcrumbs // from core SDK delete event.breadcrumbs; return event; } // We only want to handle errors, transactions, and feedbacks, nothing else if (!isErrorEvent(event) && !isTransactionEvent(event) && !isFeedbackEvent(event)) { return event; } // Ensure we do not add replay_id if the session is expired const isSessionActive = replay.checkAndHandleExpiredSession(); if (!isSessionActive) { // prevent exceeding replay durations by removing the expired replayId from the DSC resetReplayIdOnDynamicSamplingContext(); return event; } if (isFeedbackEvent(event)) { // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises replay.flush(); event.contexts.feedback.replay_id = replay.getSessionId(); // Add a replay breadcrumb for this piece of feedback addFeedbackBreadcrumb(replay, event); return event; } // Unless `captureExceptions` is enabled, we want to ignore errors coming from rrweb // As there can be a bunch of stuff going wrong in internals there, that we don't want to bubble up to users if (isRrwebError(event, hint) && !replay.getOptions()._experiments.captureExceptions) { DEBUG_BUILD && debug.log('Ignoring error from rrweb internals', event); return null; } // 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() }; } // If we sampled this error in buffer mode, immediately mark the session as "sampled" // by changing the sampled state from 'buffer' to 'session'. Otherwise, if the application is interrupte // before `afterSendEvent` occurs, then the session would remain as "buffer" but we have an error event // that is tagged with a replay id. This could end up creating replays w/ excessive durations because // of the linked error. if (isErrorEventSampled && replay.recordingMode === 'buffer' && replay.session?.sampled === 'buffer') { const session = replay.session; session.dirty = true; // Save the session if sticky sessions are enabled to persist the state change if (replay.getOptions().stickySession) { saveSession(session); } } return event; }, { id: 'Replay' }, ); } /** * Create a "span" for each performance entry. */ function createPerformanceSpans( replay, entries, ) { return entries.map(({ type, start, end, name, data }) => { const response = replay.throttledAddEvent({ type: EventType.Custom, timestamp: start, data: { tag: 'performanceSpan', payload: { op: type, description: name, startTimestamp: start, endTimestamp: end, data, }, }, }); // If response is a string, it means its either THROTTLED or SKIPPED return typeof response === 'string' ? Promise.resolve(null) : response; }); } function handleHistory(handlerData) { const { from, to } = handlerData; const now = Date.now() / 1000; return { type: 'navigation.push', start: now, end: now, name: to, data: { previous: from, }, }; } /** * Returns a listener to be added to `addHistoryInstrumentationHandler(listener)`. */ function handleHistorySpanListener(replay) { return (handlerData) => { if (!replay.isEnabled()) { return; } const result = handleHistory(handlerData); if (result === null) { return; } // Need to collect visited URLs replay.getContext().urls.push(result.name); replay.triggerUserActivity(); replay.addUpdate(() => { createPerformanceSpans(replay, [result]); // Returning false to flush return false; }); }; } /** * Check whether a given request URL should be filtered out. This is so we * don't log Sentry ingest requests. */ function shouldFilterRequest(replay, url) { // If we enabled the `traceInternals` experiment, we want to trace everything if (DEBUG_BUILD && replay.getOptions()._experiments.traceInternals) { return false; } return isSentryRequestUrl(url, getClient()); } /** Add a performance entry breadcrumb */ function addNetworkBreadcrumb( replay, result, ) { if (!replay.isEnabled()) { return; } if (result === null) { return; } if (shouldFilterRequest(replay, result.name)) { return; } replay.addUpdate(() => { createPerformanceSpans(replay, [result]); // Returning true will cause `addUpdate` to not flush // We do not want network requests to cause a flush. This will prevent // recurring/polling requests from keeping the replay session alive. return true; }); } /** Get the size of a body. */ function getBodySize(body) { if (!body) { return undefined; } const textEncoder = new TextEncoder(); try { if (typeof body === 'string') { return textEncoder.encode(body).length; } if (body instanceof URLSearchParams) { return textEncoder.encode(body.toString()).length; } if (body instanceof FormData) { const formDataStr = serializeFormData(body); return textEncoder.encode(formDataStr).length; } if (body instanceof Blob) { return body.size; } if (body instanceof ArrayBuffer) { return body.byteLength; } // Currently unhandled types: ArrayBufferView, ReadableStream } catch { // just return undefined } return undefined; } /** Convert a Content-Length header to number/undefined. */ function parseContentLengthHeader(header) { if (!header) { return undefined; } const size = parseInt(header, 10); return isNaN(size) ? undefined : size; } /** Merge a warning into an existing network request/response. */ function mergeWarning( info, warning, ) { if (!info) { return { headers: {}, size: undefined, _meta: { warnings: [warning], }, }; } const newMeta = { ...info._meta }; const existingWarnings = newMeta.warnings || []; newMeta.warnings = [...existingWarnings, warning]; info._meta = newMeta; return info; } /** Convert ReplayNetworkRequestData to a PerformanceEntry. */ function makeNetworkReplayBreadcrumb( type, data, ) { if (!data) { return null; } const { startTimestamp, endTimestamp, url, method, statusCode, request, response } = data; const result = { type, start: startTimestamp / 1000, end: endTimestamp / 1000, name: url, data: { method, statusCode, request, response, }, }; return result; } /** 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 && Object.keys(headers).length === 0) { return undefined; } if (!bodySize) { return { headers, }; } if (!body) { return { headers, size: bodySize, }; } const info = { headers, size: bodySize, }; const { body: normalizedBody, warnings } = normalizeNetworkBody(body); info.body = normalizedBody; if (warnings?.length) { info._meta = { warnings, }; } return info; } /** Filter a set of headers */ function getAllowedHeaders(headers, allowedHeaders) { return Object.entries(headers).reduce((filteredHeaders, [key, value]) => { const normalizedKey = key.toLowerCase(); // Avoid putting empty strings into the headers if (allowedHeaders.includes(normalizedKey) && headers[key]) { filteredHeaders[normalizedKey] = value; } return filteredHeaders; }, {}); } function normalizeNetworkBody(body) { if (!body || typeof body !== 'string') { return { body, }; } const exceedsSizeLimit = body.length > NETWORK_BODY_MAX_SIZE; const isProbablyJson = _strIsProbablyJson(body); if (exceedsSizeLimit) { const truncatedBody = body.slice(0, NETWORK_BODY_MAX_SIZE); if (isProbablyJson) { return { body: truncatedBody, warnings: ['MAYBE_JSON_TRUNCATED'], }; } return { body: `${truncatedBody}…`, warnings: ['TEXT_TRUNCATED'], }; } if (isProbablyJson) { try { const jsonBody = JSON.parse(body); return { body: jsonBody, }; } catch { // fall back to just send the body as string } } return { body, }; } 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 appropriate). */ async function captureFetchBreadcrumbToReplay( breadcrumb, hint, options , ) { try { const data = await _prepareFetchData(breadcrumb, hint, options); // Create a replay performance entry from this breadcrumb const result = makeNetworkReplayBreadcrumb('resource.fetch', data); addNetworkBreadcrumb(options.replay, result); } catch (error) { DEBUG_BUILD && debug.exception(error, 'Failed to capture fetch breadcrumb'); } } /** * Enrich a breadcrumb with additional data. * This has to be sync & mutate the given breadcrumb, * as the breadcrumb is afterwards consumed by other handlers. */ function enrichFetchBreadcrumb( breadcrumb, hint, ) { const { input, response } = hint; const body = input ? getFetchRequestArgBody(input) : undefined; const reqSize = getBodySize(body); const resSize = response ? parseContentLengthHeader(response.headers.get('content-length')) : undefined; if (reqSize !== undefined) { breadcrumb.data.request_body_size = reqSize; } if (resSize !== undefined) { breadcrumb.data.response_body_size = resSize; } } async function _prepareFetchData( breadcrumb, hint, options, ) { const now = Date.now(); const { startTimestamp = now, endTimestamp = now } = hint; const { url, method, status_code: statusCode = 0, request_body_size: requestBodySize, response_body_size: responseBodySize, } = breadcrumb.data; const captureDetails = urlMatches(url, options.networkDetailAllowUrls) && !urlMatches(url, options.networkDetailDenyUrls); 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, request, response, }; } function _getRequestInfo( { networkCaptureBodies, networkRequestHeaders }, input, requestBodySize, ) { const headers = input ? 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 [bodyStr, warning] = getBodyString(requestBody, debug); const data = buildNetworkRequestOrResponse(headers, requestBodySize, bodyStr); if (warning) { return mergeWarning(data, warning); } return data; } /** Exported only for tests. */ async function _getResponseInfo( captureDetails, { networkCaptureBodies, networkResponseHeaders, }, response, responseBodySize, ) { if (!captureDetails && responseBodySize !== undefined) { return buildSkippedNetworkRequestOrResponse(responseBodySize); } const headers = response ? getAllHeaders(response.headers, networkResponseHeaders) : {}; if (!response || (!networkCaptureBodies && responseBodySize !== undefined)) { return buildNetworkRequestOrResponse(headers, responseBodySize, undefined); } const [bodyText, warning] = await _parseFetchResponseBody(response); const result = getResponseData(bodyText, { networkCaptureBodies, responseBodySize, captureDetails, headers, }); if (warning) { return mergeWarning(result, warning); } return result; } function getResponseData( bodyText, { networkCaptureBodies, responseBodySize, captureDetails, headers, } , ) { try { const size = bodyText?.length && responseBodySize === undefined ? getBodySize(bodyText) : responseBodySize; if (!captureDetails) { return buildSkippedNetworkRequestOrResponse(size); } if (networkCaptureBodies) { return buildNetworkRequestOrResponse(headers, size, bodyText); } return buildNetworkRequestOrResponse(headers, size, undefined); } catch (error) { DEBUG_BUILD && debug.exception(error, 'Failed to serialize response body'); // fallback return buildNetworkRequestOrResponse(headers, responseBodySize, undefined); } } async function _parseFetchResponseBody(response) { const res = _tryCloneResponse(response); if (!res) { return [undefined, 'BODY_PARSE_ERROR']; } try { const text = await _tryGetResponseText(res); return [text]; } catch (error) { if (error instanceof Error && error.message.indexOf('Timeout') > -1) { DEBUG_BUILD && debug.warn('Parsing text body from response timed out'); return [undefined, 'BODY_PARSE_TIMEOUT']; } DEBUG_BUILD && debug.exception(error, 'Failed to get text body from response'); return [undefined, 'BODY_PARSE_ERROR']; } } 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); } function _tryCloneResponse(response) { try { // We have to clone this, as the body can only be read once return response.clone(); } catch (error) { // this can throw if the response was already consumed before DEBUG_BUILD && debug.exception(error, 'Failed to clone response body'); } } /** * Get the response body of a fetch request, or timeout after 500ms. * Fetch can return a streaming body, that may not resolve (or not for a long time). * If that happens, we rather abort after a short time than keep waiting for this. */ function _tryGetResponseText(response) { return new Promise((resolve, reject) => { const timeout = setTimeout$3(() => reject(new Error('Timeout while trying to read response body')), 500); _getResponseText(response) .then( txt => resolve(txt), reason => reject(reason), ) .finally(() => clearTimeout(timeout)); }); } async function _getResponseText(response) { // Force this to be a promise, just to be safe // eslint-disable-next-line no-return-await return await response.text(); } /** * Capture an XHR breadcrumb to a replay. * This adds additional data (where appropriate). */ async function captureXhrBreadcrumbToReplay( breadcrumb, hint, options, ) { try { const data = _prepareXhrData(breadcrumb, hint, options); // Create a replay performance entry from this breadcrumb const result = makeNetworkReplayBreadcrumb('resource.xhr', data); addNetworkBreadcrumb(options.replay, result); } catch (error) { DEBUG_BUILD && debug.exception(error, 'Failed to capture xhr breadcrumb'); } } /** * Enrich a breadcrumb with additional data. * This has to be sync & mutate the given breadcrumb, * as the breadcrumb is afterwards consumed by other handlers. */ function enrichXhrBreadcrumb( breadcrumb, hint, ) { const { xhr, input } = hint; if (!xhr) { return; } const reqSize = getBodySize(input); const resSize = xhr.getResponseHeader('content-length') ? parseContentLengthHeader(xhr.getResponseHeader('content-length')) : _getBodySize(xhr.response, xhr.responseType); if (reqSize !== undefined) { breadcrumb.data.request_body_size = reqSize; } if (resSize !== undefined) { breadcrumb.data.response_body_size = resSize; } } function _prepareXhrData( breadcrumb, hint, options, ) { const now = Date.now(); const { startTimestamp = now, endTimestamp = now, input, xhr } = hint; const { url, method, status_code: statusCode = 0, request_body_size: requestBodySize, response_body_size: responseBodySize, } = breadcrumb.data; if (!url) { return null; } if (!xhr || !urlMatches(url, options.networkDetailAllowUrls) || urlMatches(url, options.networkDetailDenyUrls)) { const request = buildSkippedNetworkRequestOrResponse(requestBodySize); const response = buildSkippedNetworkRequestOrResponse(responseBodySize); return { startTimestamp, endTimestamp, url, method, statusCode, request, response, }; } // ---- This additional network data below is only captured for URLs defined in `networkDetailAllowUrls` ---- const xhrInfo = xhr[SENTRY_XHR_DATA_KEY]; const networkRequestHeaders = xhrInfo ? getAllowedHeaders(xhrInfo.request_headers, options.networkRequestHeaders) : {}; const networkResponseHeaders = getAllowedHeaders(parseXhrResponseHeaders(xhr), options.networkResponseHeaders); const [requestBody, requestWarning] = options.networkCaptureBodies ? getBodyString(input, debug) : [undefined]; const [responseBody, responseWarning] = options.networkCaptureBodies ? _getXhrResponseBody(xhr) : [undefined]; const request = buildNetworkRequestOrResponse(networkRequestHeaders, requestBodySize, requestBody); const response = buildNetworkRequestOrResponse(networkResponseHeaders, responseBodySize, responseBody); return { startTimestamp, endTimestamp, url, method, statusCode, request: requestWarning ? mergeWarning(request, requestWarning) : request, response: responseWarning ? mergeWarning(response, responseWarning) : response, }; } function _getXhrResponseBody(xhr) { // We collect errors that happen, but only log them if we can't get any response body const errors = []; try { return [xhr.responseText]; } catch (e) { errors.push(e); } // Try to manually parse the response body, if responseText fails try { return _parseXhrResponse(xhr.response, xhr.responseType); } catch (e) { errors.push(e); } DEBUG_BUILD && debug.warn('Failed to get xhr response body', ...errors); return [undefined]; } /** * Get the string representation of the XHR response. * Based on MDN, these are the possible types of the response: * string * ArrayBuffer * Blob * Document * POJO * * Exported only for tests. */ function _parseXhrResponse( body, responseType, ) { try { if (typeof body === 'string') { return [body]; } if (body instanceof Document) { return [body.body.outerHTML]; } if (responseType === 'json' && body && typeof body === 'object') { return [JSON.stringify(body)]; } if (!body) { return [undefined]; } } catch (error) { DEBUG_BUILD && debug.exception(error, 'Failed to serialize body', body); return [undefined, 'BODY_PARSE_ERROR']; } DEBUG_BUILD && debug.log('Skipping network body because of body type', body); return [undefined, 'UNPARSEABLE_BODY_TYPE']; } function _getBodySize( body, responseType, ) { try { const bodyStr = responseType === 'json' && body && typeof body === 'object' ? JSON.stringify(body) : body; return getBodySize(bodyStr); } catch { return undefined; } } /** * This method does two things: * - It enriches the regular XHR/fetch breadcrumbs with request/response size data * - It captures the XHR/fetch breadcrumbs to the replay * (enriching it with further data that is _not_ added to the regular breadcrumbs) */ function handleNetworkBreadcrumbs(replay) { const client = getClient(); try { const { networkDetailAllowUrls, networkDetailDenyUrls, networkCaptureBodies, networkRequestHeaders, networkResponseHeaders, } = replay.getOptions(); const options = { replay, networkDetailAllowUrls, networkDetailDenyUrls, networkCaptureBodies, networkRequestHeaders, networkResponseHeaders, }; if (client) { client.on('beforeAddBreadcrumb', (breadcrumb, hint) => beforeAddNetworkBreadcrumb(options, breadcrumb, hint)); } } catch { // Do nothing } } /** just exported for tests */ function beforeAddNetworkBreadcrumb( options, breadcrumb, hint, ) { if (!breadcrumb.data) { return; } try { if (_isXhrBreadcrumb(breadcrumb) && _isXhrHint(hint)) { // This has to be sync, as we need to ensure the breadcrumb is enriched in the same tick // Because the hook runs synchronously, and the breadcrumb is afterwards passed on // So any async mutations to it will not be reflected in the final breadcrumb enrichXhrBreadcrumb(breadcrumb, hint); // This call should not reject // eslint-disable-next-line @typescript-eslint/no-floating-promises captureXhrBreadcrumbToReplay(breadcrumb, hint, options); } if (_isFetchBreadcrumb(breadcrumb) && _isFetchHint(hint)) { // This has to be sync, as we need to ensure the breadcrumb is enriched in the same tick // Because the hook runs synchronously, and the breadcrumb is afterwards passed on // So any async mutations to it will not be reflected in the final breadcrumb enrichFetchBreadcrumb(breadcrumb, hint); // This call should not reject // eslint-disable-next-line @typescript-eslint/no-floating-promises captureFetchBreadcrumbToReplay(breadcrumb, hint, options); } } catch (e) { DEBUG_BUILD && debug.exception(e, 'Error when enriching network breadcrumb'); } } function _isXhrBreadcrumb(breadcrumb) { return breadcrumb.category === 'xhr'; } function _isFetchBreadcrumb(breadcrumb) { return breadcrumb.category === 'fetch'; } function _isXhrHint(hint) { return hint?.xhr; } function _isFetchHint(hint) { return hint?.response; } /** * Add global listeners that cannot be removed. */ function addGlobalListeners(replay) { // Listeners from core SDK // const client = getClient(); addClickKeypressInstrumentationHandler(handleDomListener(replay)); addHistoryInstrumentationHandler(handleHistorySpanListener(replay)); handleBreadcrumbs(replay); handleNetworkBreadcrumbs(replay); // Tag all (non replay) events that get sent to Sentry with the current // replay ID so that we can reference them later in the UI const eventProcessor = handleGlobalEventListener(replay); addEventProcessor(eventProcessor); // If a custom client has no hooks yet, we continue to use the "old" implementation if (client) { client.on('beforeSendEvent', handleBeforeSendEvent(replay)); client.on('afterSendEvent', handleAfterSendEvent(replay)); client.on('createDsc', (dsc) => { const replayId = replay.getSessionId(); // 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') { // Ensure to check that the session is still active - it could have expired in the meanwhile const isSessionActive = replay.checkAndHandleExpiredSession(); if (isSessionActive) { dsc.replay_id = replayId; } } }); client.on('spanStart', span => { replay.lastActiveSpan = span; }); // We may be missing the initial spanStart due to timing issues, // so we capture it on finish again. client.on('spanEnd', span => { replay.lastActiveSpan = span; }); // We want to attach the replay id to the feedback event client.on('beforeSendFeedback', async (feedbackEvent, options) => { const replayId = replay.getSessionId(); if (options?.includeReplay && replay.isEnabled() && replayId && feedbackEvent.contexts?.feedback) { // In case the feedback is sent via API and not through our widget, we want to flush replay if (feedbackEvent.contexts.feedback.source === 'api') { await replay.sendBufferedReplayOrFlush(); } feedbackEvent.contexts.feedback.replay_id = replayId; } }); client.on('openFeedbackWidget', async () => { await replay.sendBufferedReplayOrFlush(); }); } } /** * Create a "span" for the total amount of memory being used by JS objects * (including v8 internal objects). */ async function addMemoryEntry(replay) { // window.performance.memory is a non-standard API and doesn't work on all browsers, so we try-catch this try { return Promise.all( createPerformanceSpans(replay, [ // @ts-expect-error memory doesn't exist on type Performance as the API is non-standard (we check that it exists above) createMemoryEntry(WINDOW.performance.memory), ]), ); } catch { // Do nothing return []; } } function createMemoryEntry(memoryEntry) { const { jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize } = memoryEntry; // we don't want to use `getAbsoluteTime` because it adds the event time to the // time origin, so we get the current timestamp instead const time = Date.now() / 1000; return { type: 'memory', name: 'memory', start: time, end: time, data: { memory: { jsHeapSizeLimit, totalJSHeapSize, usedJSHeapSize, }, }, }; } /** * Heavily simplified debounce function based on lodash.debounce. * * This function takes a callback function (@param fun) and delays its invocation * by @param wait milliseconds. Optionally, a maxWait can be specified in @param options, * which ensures that the callback is invoked at least once after the specified max. wait time. * * @param func the function whose invocation is to be debounced * @param wait the minimum time until the function is invoked after it was called once * @param options the options object, which can contain the `maxWait` property * * @returns the debounced version of the function, which needs to be called at least once to start the * debouncing process. Subsequent calls will reset the debouncing timer and, in case @paramfunc * was already invoked in the meantime, return @param func's return value. * The debounced function has two additional properties: * - `flush`: Invokes the debounced function immediately and returns its return value * - `cancel`: Cancels the debouncing process and resets the debouncing timer */ function debounce(func, wait, options) { return debounce$1(func, wait, { ...options, // @ts-expect-error - Not quite sure why these types do not match, but this is fine setTimeoutImpl: setTimeout$3, }); } const NAVIGATOR = GLOBAL_OBJ.navigator; /** * Disable sampling mousemove events on iOS browsers as this can cause blocking the main thread * https://github.com/getsentry/sentry-javascript/issues/14534 */ function getRecordingSamplingOptions() { if ( /iPhone|iPad|iPod/i.test(NAVIGATOR?.userAgent ?? '') || (/Macintosh/i.test(NAVIGATOR?.userAgent ?? '') && NAVIGATOR?.maxTouchPoints && NAVIGATOR?.maxTouchPoints > 1) ) { return { sampling: { mousemove: false, }, }; } return {}; } /** * Handler for recording events. * * Adds to event buffer, and has varying flushing behaviors if the event was a checkout. */ function getHandleRecordingEmit(replay) { let hadFirstEvent = false; return (event, _isCheckout) => { // If this is false, it means session is expired, create and a new session and wait for checkout if (!replay.checkAndHandleExpiredSession()) { DEBUG_BUILD && debug.warn('Received replay event after session expired.'); return; } // `_isCheckout` is only set when the checkout is due to `checkoutEveryNms` // We also want to treat the first event as a checkout, so we handle this specifically here const isCheckout = _isCheckout || !hadFirstEvent; hadFirstEvent = true; if (replay.clickDetector) { updateClickDetectorForRecordingEvent(replay.clickDetector, event); } // The handler returns `true` if we do not want to trigger debounced flush, `false` if we want to debounce flush. replay.addUpdate(() => { // The session is always started immediately on pageload/init, but for // error-only replays, it should reflect the most recent checkout // 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 === 'buffer' && isCheckout) { replay.setInitialState(); } // If the event is not added (e.g. due to being paused, disabled, or out of the max replay duration), // Skip all further steps if (!addEventSync(replay, event, isCheckout)) { // Return true to skip scheduling a debounced flush return true; } // Different behavior for full snapshots (type=2), ignore other event types // See https://github.com/rrweb-io/rrweb/blob/d8f9290ca496712aa1e7d472549480c4e7876594/packages/rrweb/src/types.ts#L16 if (!isCheckout) { return false; } const session = replay.session; // 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. We have an experimental mode // to perform multiple checkouts a session (the idea is to improve // seeking during playback), so also only include if segmentId is 0 // (handled in `addSettingsEvent`). // // `isCheckout` is always true, but want to be explicit that it should // only be added for checkouts addSettingsEvent(replay, isCheckout); // 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' && session && replay.eventBuffer && !session.dirty) { const earliestEvent = replay.eventBuffer.getEarliestTimestamp(); if (earliestEvent) { DEBUG_BUILD && debug.log(`Updating session start time to earliest event in buffer to ${new Date(earliestEvent)}`); session.started = earliestEvent; if (replay.getOptions().stickySession) { saveSession(session); } } } // 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 // of the previous session. Do not immediately flush in this case // to avoid capturing only the checkout and instead the replay will // be captured if they perform any follow-up actions. if (session?.previousSessionId) { return true; } if (replay.recordingMode === 'session') { // If the full snapshot is due to an initial load, we will not have // a previous session ID. In this case, we want to buffer events // for a set amount of time before flushing. This can help avoid // capturing replays of users that immediately close the window. // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises void replay.flush(); } return true; }); }; } /** * Exported for tests */ function createOptionsEvent(replay) { const options = replay.getOptions(); return { type: EventType.Custom, timestamp: Date.now(), data: { tag: 'options', payload: { shouldRecordCanvas: replay.isRecordingCanvas(), 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; } addEventSync(replay, createOptionsEvent(replay), false); } /** * Vendored in from @sentry-internal/rrweb. * * This is a copy of the function from rrweb, it is not nicely exported there. */ function closestElementOfNode(node) { if (!node) { return null; } // Catch access to node properties to avoid Firefox "permission denied" errors try { const el = node.nodeType === node.ELEMENT_NODE ? (node ) : node.parentElement; return el; } catch { return null; } } /** * Create a replay envelope ready to be sent. * This includes both the replay event, as well as the recording data. */ function createReplayEnvelope( replayEvent, recordingData, dsn, tunnel, ) { return createEnvelope( createEventEnvelopeHeaders(replayEvent, getSdkMetadataForEnvelopeHeader(replayEvent), tunnel, dsn), [ [{ type: 'replay_event' }, replayEvent], [ { type: 'replay_recording', // If string then we need to encode to UTF8, otherwise will have // wrong size. TextEncoder has similar browser support to // MutationObserver, although it does not accept IE11. length: typeof recordingData === 'string' ? new TextEncoder().encode(recordingData).length : recordingData.length, }, recordingData, ], ], ); } /** * Prepare the recording data ready to be sent. */ function prepareRecordingData({ recordingData, headers, } ) { let payloadWithSequence; // XXX: newline is needed to separate sequence id from events const replayHeaders = `${JSON.stringify(headers)} `; if (typeof recordingData === 'string') { payloadWithSequence = `${replayHeaders}${recordingData}`; } else { const enc = new TextEncoder(); // XXX: newline is needed to separate sequence id from events const sequence = enc.encode(replayHeaders); // Merge the two Uint8Arrays payloadWithSequence = new Uint8Array(sequence.length + recordingData.length); payloadWithSequence.set(sequence); payloadWithSequence.set(recordingData, sequence.length); } return payloadWithSequence; } /** * Prepare a replay event & enrich it with the SDK metadata. */ async function prepareReplayEvent({ client, scope, replayId: event_id, event, } ) { const integrations = typeof client['_integrations'] === 'object' && client['_integrations'] !== null && !Array.isArray(client['_integrations']) ? Object.keys(client['_integrations']) : undefined; const eventHint = { event_id, integrations }; client.emit('preprocessEvent', event, eventHint); const preparedEvent = (await prepareEvent( client.getOptions(), event, eventHint, scope, client, getIsolationScope(), )) ; // If e.g. a global event processor returned null if (!preparedEvent) { return null; } client.emit('postprocessEvent', preparedEvent, eventHint); // This normally happens in browser client "_prepareEvent" // but since we do not use this private method from the client, but rather the plain import // we need to do this manually. preparedEvent.platform = preparedEvent.platform || 'javascript'; // extract the SDK name because `client._prepareEvent` doesn't add it to the event const metadata = client.getSdkMetadata(); const { name, version, settings } = metadata?.sdk || {}; preparedEvent.sdk = { ...preparedEvent.sdk, name: name || 'sentry.javascript.unknown', version: version || '0.0.0', settings, }; return preparedEvent; } /** * Send replay attachment using `fetch()` */ async function sendReplayRequest({ recordingData, replayId, segmentId: segment_id, eventContext, timestamp, session, }) { const preparedRecordingData = prepareRecordingData({ recordingData, headers: { segment_id, }, }); const { urls, errorIds, traceIds, initialTimestamp } = eventContext; const client = getClient(); const scope = getCurrentScope(); const transport = client?.getTransport(); const dsn = client?.getDsn(); if (!client || !transport || !dsn || !session.sampled) { return Promise.resolve({}); } const baseEvent = { type: REPLAY_EVENT_NAME, replay_start_timestamp: initialTimestamp / 1000, timestamp: timestamp / 1000, error_ids: errorIds, trace_ids: traceIds, urls, replay_id: replayId, segment_id, replay_type: session.sampled, }; const replayEvent = await prepareReplayEvent({ scope, client, replayId, event: baseEvent }); if (!replayEvent) { // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions client.recordDroppedEvent('event_processor', 'replay'); DEBUG_BUILD && debug.log('An event processor returned `null`, will not send event.'); return Promise.resolve({}); } /* For reference, the fully built event looks something like this: { "type": "replay_event", "timestamp": 1670837008.634, "error_ids": [ "errorId" ], "trace_ids": [ "traceId" ], "urls": [ "https://example.com" ], "replay_id": "eventId", "segment_id": 3, "replay_type": "error", "platform": "javascript", "event_id": "eventId", "environment": "production", "sdk": { "integrations": [ "BrowserTracing", "Replay" ], "name": "sentry.javascript.browser", "version": "7.25.0" }, "sdkProcessingMetadata": {}, "contexts": { }, } */ // Prevent this data (which, if it exists, was used in earlier steps in the processing pipeline) from being sent to // sentry. (Note: Our use of this property comes and goes with whatever we might be debugging, whatever hacks we may // have temporarily added, etc. Even if we don't happen to be using it at some point in the future, let's not get rid // of this `delete`, lest we miss putting it back in the next time the property is in use.) delete replayEvent.sdkProcessingMetadata; const envelope = createReplayEnvelope(replayEvent, preparedRecordingData, dsn, client.getOptions().tunnel); let response; try { response = await transport.send(envelope); } catch (err) { const error = new Error(UNABLE_TO_SEND_REPLAY); try { // In case browsers don't allow this property to be writable // @ts-expect-error This needs lib es2022 and newer error.cause = err; } catch { // nothing to do } throw error; } // Check for rate limiting first (handles 429 and rate limit headers) const rateLimits = updateRateLimits({}, response); if (isRateLimited(rateLimits, 'replay')) { throw new RateLimitError(rateLimits); } // If the status code is invalid, we want to immediately stop & not retry if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) { throw new TransportStatusCodeError(response.statusCode); } return response; } /** * This error indicates that the transport returned an invalid status code. */ class TransportStatusCodeError extends Error { constructor(statusCode) { super(`Transport returned status code ${statusCode}`); } } /** * This error indicates that we hit a rate limit API error. */ class RateLimitError extends Error { constructor(rateLimits) { super('Rate limit hit'); this.rateLimits = rateLimits; } } /** * This error indicates that the replay duration limit was exceeded and the session is too long. * */ class ReplayDurationLimitError extends Error { constructor() { super('Session is too long, not sending replay'); } } /** * Finalize and send the current replay event to Sentry */ async function sendReplay( replayData, retryConfig = { count: 0, interval: RETRY_BASE_INTERVAL, }, ) { const { recordingData, onError } = replayData; // short circuit if there's no events to upload (this shouldn't happen as _runFlush makes this check) if (!recordingData.length) { return; } try { await sendReplayRequest(replayData); return true; } catch (err) { if (err instanceof TransportStatusCodeError || err instanceof RateLimitError) { throw err; } // Capture error for every failed replay setContext('Replays', { _retryCount: retryConfig.count, }); if (onError) { onError(err); } // If an error happened here, it's likely that uploading the attachment // failed, we'll can retry with the same events payload if (retryConfig.count >= RETRY_MAX_COUNT) { const error = new Error(`${UNABLE_TO_SEND_REPLAY} - max retries exceeded`); try { // In case browsers don't allow this property to be writable // @ts-expect-error This needs lib es2022 and newer error.cause = err; } catch { // nothing to do } throw error; } // will retry in intervals of 5, 10, 30 retryConfig.interval *= ++retryConfig.count; return new Promise((resolve, reject) => { setTimeout$3(async () => { try { await sendReplay(replayData, retryConfig); resolve(true); } catch (err) { reject(err); } }, retryConfig.interval); }); } } const THROTTLED = '__THROTTLED'; const SKIPPED = '__SKIPPED'; /** * Create a throttled function off a given function. * When calling the throttled function, it will call the original function only * if it hasn't been called more than `maxCount` times in the last `durationSeconds`. * * Returns `THROTTLED` if throttled for the first time, after that `SKIPPED`, * or else the return value of the original function. */ // eslint-disable-next-line @typescript-eslint/no-explicit-any function throttle( fn, maxCount, durationSeconds, ) { const counter = new Map(); const _cleanup = (now) => { const threshold = now - durationSeconds; counter.forEach((_value, key) => { if (key < threshold) { counter.delete(key); } }); }; const _getTotalCount = () => { return [...counter.values()].reduce((a, b) => a + b, 0); }; let isThrottled = false; return (...rest) => { // Date in second-precision, which we use as basis for the throttling const now = Math.floor(Date.now() / 1000); // First, make sure to delete any old entries _cleanup(now); // If already over limit, do nothing if (_getTotalCount() >= maxCount) { const wasThrottled = isThrottled; isThrottled = true; return wasThrottled ? SKIPPED : THROTTLED; } isThrottled = false; const count = counter.get(now) || 0; counter.set(now, count + 1); return fn(...rest); }; } /** * The main replay container class, which holds all the state and methods for recording and sending replays. */ class ReplayContainer { /** * Recording can happen in one of two 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 */ /** * The current or last active span. * This is only available when performance is enabled. */ /** * These are here so we can overwrite them in tests etc. * @hidden */ /** The replay has to be manually started, because no sample rate (neither session or error) was provided. */ /** * Options to pass to `rrweb.record()` */ /** * Timestamp of the last user activity. This lives across sessions. */ /** * Is the integration currently active? */ /** * Paused is a state where: * - DOM Recording is not listening at all * - Nothing will be added to event buffer (e.g. core SDK events) */ /** * Have we attached listeners to the core SDK? * Note we have to track this as there is no way to remove instrumentation handlers. */ /** * Function to stop recording */ /** * Internal use for canvas recording options */ /** * Handle when visibility of the page content changes. Opening a new tab will * cause the state to change to hidden because of content of current page will * be hidden. Likewise, moving a different window to cover the contents of the * page will also trigger a change to a hidden state. */ /** * Handle when page is blurred */ /** * Handle when page is focused */ /** Ensure page remains active when a key is pressed. */ constructor({ options, recordingOptions, } ) { this.eventBuffer = null; this.performanceEntries = []; this.replayPerformanceEntries = []; this.recordingMode = 'session'; this.timeouts = { sessionIdlePause: SESSION_IDLE_PAUSE_DURATION, sessionIdleExpire: SESSION_IDLE_EXPIRE_DURATION, } ; this._lastActivity = Date.now(); this._isEnabled = false; this._isPaused = false; this._requiresManualStart = false; this._hasInitializedCoreListeners = false; this._context = { errorIds: new Set(), traceIds: new Set(), urls: [], initialTimestamp: Date.now(), initialUrl: '', }; this._recordingOptions = recordingOptions; this._options = options; this._debouncedFlush = debounce(() => this._flush(), this._options.flushMinDelay, { maxWait: this._options.flushMaxDelay, }); this._throttledAddEvent = throttle( (event, isCheckout) => addEvent(this, event, isCheckout), // Max 300 events... 300, // ... per 5s 5, ); const { slowClickTimeout, slowClickIgnoreSelectors } = this.getOptions(); const slowClickConfig = slowClickTimeout ? { threshold: Math.min(SLOW_CLICK_THRESHOLD, slowClickTimeout), timeout: slowClickTimeout, scrollTimeout: SLOW_CLICK_SCROLL_TIMEOUT, ignoreSelector: slowClickIgnoreSelectors ? slowClickIgnoreSelectors.join(',') : '', } : undefined; if (slowClickConfig) { this.clickDetector = new ClickDetector(this, slowClickConfig); } // Configure replay debug logger w/ experimental options if (DEBUG_BUILD) { const experiments = options._experiments; debug.setConfig({ captureExceptions: !!experiments.captureExceptions, traceInternals: !!experiments.traceInternals, }); } // We set these handler properties as class properties, to make binding/unbinding them easier this._handleVisibilityChange = () => { if (WINDOW.document.visibilityState === 'visible') { this._doChangeToForegroundTasks(); } else { this._doChangeToBackgroundTasks(); } }; /** * Handle when page is blurred */ this._handleWindowBlur = () => { const breadcrumb = createBreadcrumb({ category: 'ui.blur', }); // Do not count blur as a user action -- it's part of the process of them // leaving the page this._doChangeToBackgroundTasks(breadcrumb); }; this._handleWindowFocus = () => { const breadcrumb = createBreadcrumb({ category: 'ui.focus', }); // Do not count focus as a user action -- instead wait until they focus and // interactive with page this._doChangeToForegroundTasks(breadcrumb); }; /** Ensure page remains active when a key is pressed. */ this._handleKeyboardEvent = (event) => { handleKeyboardEvent(this, event); }; } /** Get the event context. */ getContext() { return this._context; } /** If recording is currently enabled. */ isEnabled() { return this._isEnabled; } /** If recording is currently paused. */ isPaused() { return this._isPaused; } /** * Determine if canvas recording is enabled */ isRecordingCanvas() { return Boolean(this._canvas); } /** Get the replay integration options. */ getOptions() { return this._options; } /** A wrapper to conditionally capture exceptions. */ handleException(error) { DEBUG_BUILD && debug.exception(error); if (this._options.onError) { this._options.onError(error); } } /** * Initializes the plugin based on sampling configuration. Should not be * called outside of constructor. */ initializeSampling(previousSessionId) { const { errorSampleRate, sessionSampleRate } = this._options; // If neither sample rate is > 0, then do nothing - user will need to call one of // `start()` or `startBuffering` themselves. const requiresManualStart = errorSampleRate <= 0 && sessionSampleRate <= 0; this._requiresManualStart = requiresManualStart; if (requiresManualStart) { return; } // Otherwise if there is _any_ sample rate set, try to load an existing // session, or create a new one. this._initializeSessionForSampling(previousSessionId); if (!this.session) { // This should not happen, something wrong has occurred DEBUG_BUILD && debug.exception(new Error('Unable to initialize and create session')); return; } if (this.session.sampled === false) { // 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 segmentId > 0, it means we've previously already captured this session // In this case, we still want to continue in `session` recording mode this.recordingMode = this.session.sampled === 'buffer' && this.session.segmentId === 0 ? 'buffer' : 'session'; DEBUG_BUILD && debug.infoTick(`Starting replay in ${this.recordingMode} mode`); this._initializeRecording(); } /** * Start a replay regardless of sampling rate. Calling this will always * create a new session. Will log a message 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') { DEBUG_BUILD && debug.log('Recording is already in progress'); return; } if (this._isEnabled && this.recordingMode === 'buffer') { DEBUG_BUILD && debug.log('Buffering is in progress, call `flush()` to save the replay'); return; } DEBUG_BUILD && debug.infoTick('Starting replay in session mode'); // Required as user activity is initially set in // constructor, so if `start()` is called after // session idle expiration, a replay will not be // created due to an idle timeout. this._updateUserActivity(); const session = loadOrCreateSession( { maxReplayDuration: this._options.maxReplayDuration, sessionIdleExpire: this.timeouts.sessionIdleExpire, }, { stickySession: this._options.stickySession, // This is intentional: create a new session-based replay when calling `start()` sessionSampleRate: 1, allowBuffering: false, }, ); this.session = session; this.recordingMode = 'session'; this._initializeRecording(); } /** * Start replay buffering. Buffers until `flush()` is called or, if * `replaysOnErrorSampleRate` > 0, an error occurs. */ startBuffering() { if (this._isEnabled) { DEBUG_BUILD && debug.log('Buffering is in progress, call `flush()` to save the replay'); return; } DEBUG_BUILD && debug.infoTick('Starting replay in buffer mode'); const session = loadOrCreateSession( { sessionIdleExpire: this.timeouts.sessionIdleExpire, maxReplayDuration: this._options.maxReplayDuration, }, { stickySession: this._options.stickySession, sessionSampleRate: 0, allowBuffering: true, }, ); this.session = session; this.recordingMode = 'buffer'; this._initializeRecording(); } /** * Start recording. * * Note that this will cause a new DOM checkout */ startRecording() { try { const canvasOptions = this._canvas; this._stopRecording = record({ ...this._recordingOptions, // 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 === 'buffer' ? { checkoutEveryNms: BUFFER_CHECKOUT_TIME } : // Otherwise, use experimental option w/ min checkout time of 6 minutes // This is to improve playback seeking as there could potentially be // less mutations to process in the worse cases. // // checkout by "N" events is probably ideal, but means we have less // control about the number of checkouts we make (which generally // increases replay size) this._options._experiments.continuousCheckout && { // Minimum checkout time is 6 minutes checkoutEveryNms: Math.max(360000, this._options._experiments.continuousCheckout), }), emit: getHandleRecordingEmit(this), ...getRecordingSamplingOptions(), onMutation: this._onMutationHandler.bind(this), ...(canvasOptions ? { recordCanvas: canvasOptions.recordCanvas, getCanvasManager: canvasOptions.getCanvasManager, sampling: canvasOptions.sampling, dataURLOptions: canvasOptions.dataURLOptions, } : {}), }); } catch (err) { this.handleException(err); } } /** * Stops the recording, if it was running. * * 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; } catch (err) { this.handleException(err); return false; } } /** * Currently, this needs to be manually called (e.g. for tests). Sentry SDK * does not support a teardown */ async stop({ forceFlush = false, reason } = {}) { if (!this._isEnabled) { return; } // 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; // Make sure to reset `recordingMode` to `buffer` to avoid any additional // breadcrumbs to trigger a flush (e.g. in `addUpdate()`) this.recordingMode = 'buffer'; try { DEBUG_BUILD && debug.log(`Stopping Replay${reason ? ` triggered by ${reason}` : ''}`); resetReplayIdOnDynamicSamplingContext(); 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. if (forceFlush) { await this._flush({ force: true }); } // After flush, destroy event buffer this.eventBuffer?.destroy(); this.eventBuffer = null; // 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); } } /** * Pause some replay functionality. See comments for `_isPaused`. * This differs from stop as this only stops DOM recording, it is * not as thorough of a shutdown as `stop()`. */ pause() { if (this._isPaused) { return; } this._isPaused = true; this.stopRecording(); DEBUG_BUILD && debug.log('Pausing replay'); } /** * Resumes recording, see notes for `pause(). * * Note that calling `startRecording()` here will cause a * new DOM checkout.` */ resume() { if (!this._isPaused || !this._checkSession()) { return; } this._isPaused = false; this.startRecording(); DEBUG_BUILD && debug.log('Resuming replay'); } /** * 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(); } const activityTime = Date.now(); DEBUG_BUILD && debug.log('Converting buffer to session'); // 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; } // To avoid race conditions where this is called multiple times, we check here again that we are still buffering if ((this.recordingMode ) === 'session') { return; } // Re-start recording in session-mode this.recordingMode = 'session'; // Once this session ends, we do not want to refresh it if (this.session) { this.session.dirty = false; this._updateUserActivity(activityTime); this._updateSessionActivity(activityTime); this._maybeSaveSession(); } this.startRecording(); } /** * We want to batch uploads of replay events. Save events only if * `` milliseconds have elapsed since the last event * *OR* if `` milliseconds have elapsed. * * Accepts a callback to perform side-effects and returns true to stop batch * processing and hand back control to caller. */ addUpdate(cb) { // 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 === 'buffer' || !this._isEnabled) { return; } // If callback is true, we do not want to continue with flushing -- the // caller will need to handle it. if (cbResult === true) { return; } // addUpdate is called quite frequently - use _debouncedFlush so that it // respects the flush delays and does not flush immediately this._debouncedFlush(); } /** * Updates the user activity timestamp and resumes recording. This should be * called in an event handler for a user action that we consider as the user * being "active" (e.g. a mouse click). */ triggerUserActivity() { this._updateUserActivity(); // This case means that recording was once stopped due to inactivity. // Ensure that recording is resumed. if (!this._stopRecording) { // Create a new session, otherwise when the user action is flushed, it // will get rejected due to an expired session. if (!this._checkSession()) { return; } // Note: This will cause a new DOM checkout this.resume(); return; } // Otherwise... recording was never suspended, continue as normalish this.checkAndHandleExpiredSession(); this._updateSessionActivity(); } /** * Updates the user activity timestamp *without* resuming * recording. Some user events (e.g. keydown) can be create * low-value replays that only contain the keypress as a * breadcrumb. Instead this would require other events to * create a new replay after a session has expired. */ updateUserActivity() { this._updateUserActivity(); this._updateSessionActivity(); } /** * Only flush if `this.recordingMode === 'session'` */ conditionalFlush() { if (this.recordingMode === 'buffer') { return Promise.resolve(); } return this.flushImmediate(); } /** * Flush using debounce flush */ flush() { return this._debouncedFlush() ; } /** * Always flush via `_debouncedFlush` so that we do not have flushes triggered * from calling both `flush` and `_debouncedFlush`. Otherwise, there could be * cases of multiple flushes happening closely together. */ flushImmediate() { this._debouncedFlush(); // `.flush` is provided by the debounced function, analogously to lodash.debounce return this._debouncedFlush.flush() ; } /** * Cancels queued up flushes. */ cancelFlush() { this._debouncedFlush.cancel(); } /** Get the current session (=replay) ID * * @param onlyIfSampled - If true, will only return the session ID if the session is sampled. */ getSessionId(onlyIfSampled) { if (onlyIfSampled && this.session?.sampled === false) { return undefined; } return this.session?.id; } /** * Checks if recording should be stopped due to user inactivity. Otherwise * check if session is expired and create a new session if so. Triggers a new * full snapshot on new session. * * Returns true if session is not expired, false otherwise. * @hidden */ checkAndHandleExpiredSession() { // Prevent starting a new session if the last user activity is older than // 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.sessionIdlePause) && this.session && this.session.sampled === 'session' ) { // Pause recording only for session-based replays. Otherwise, resuming // will create a new replay and will conflict with users who only choose // to record error-based replays only. (e.g. the resumed replay will not // contain a reference to an error) this.pause(); return; } // --- There is recent user activity --- // // This will create a new session if expired, based on expiry length if (!this._checkSession()) { // Check session handles the refreshing itself return false; } return true; } /** * Capture some initial state that can change throughout the lifespan of the * replay. This is required because otherwise they would be captured at the * first flush. */ setInitialState() { const urlPath = `${WINDOW.location.pathname}${WINDOW.location.hash}${WINDOW.location.search}`; const url = `${WINDOW.location.origin}${urlPath}`; this.performanceEntries = []; this.replayPerformanceEntries = []; // Reset _context as well this._clearContext(); this._context.initialUrl = url; this._context.initialTimestamp = Date.now(); this._context.urls.push(url); } /** * Add a breadcrumb event, that may be throttled. * If it was throttled, we add a custom breadcrumb to indicate that. */ throttledAddEvent( event, isCheckout, ) { const res = this._throttledAddEvent(event, isCheckout); // If this is THROTTLED, it means we have throttled the event for the first time // In this case, we want to add a breadcrumb indicating that something was skipped if (res === THROTTLED) { const breadcrumb = createBreadcrumb({ category: 'replay.throttled', }); this.addUpdate(() => { // Return `false` if the event _was_ added, as that means we schedule a flush return !addEventSync(this, { type: ReplayEventTypeCustom, timestamp: breadcrumb.timestamp || 0, data: { tag: 'breadcrumb', payload: breadcrumb, metric: true, }, }); }); } return res; } /** * This will get the parametrized route name of the current page. * This is only available if performance is enabled, and if an instrumented router is used. */ getCurrentRoute() { const lastActiveSpan = this.lastActiveSpan || getActiveSpan(); const lastRootSpan = lastActiveSpan && getRootSpan(lastActiveSpan); const attributes = (lastRootSpan && spanToJSON(lastRootSpan).data) || {}; const source = attributes[SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]; if (!lastRootSpan || !source || !['route', 'custom'].includes(source)) { return undefined; } return spanToJSON(lastRootSpan).description; } /** * 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, workerUrl: this._options.workerUrl, }); 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._isPaused = false; this.startRecording(); } /** * Loads (or refreshes) the current session. */ _initializeSessionForSampling(previousSessionId) { // Whenever there is _any_ error sample rate, we always allow buffering // Because we decide on sampling when an error occurs, we need to buffer at all times if sampling for errors const allowBuffering = this._options.errorSampleRate > 0; const session = loadOrCreateSession( { sessionIdleExpire: this.timeouts.sessionIdleExpire, maxReplayDuration: this._options.maxReplayDuration, previousSessionId, }, { stickySession: this._options.stickySession, sessionSampleRate: this._options.sessionSampleRate, allowBuffering, }, ); this.session = session; } /** * Checks and potentially refreshes the current session. * Returns false if session is not recorded. */ _checkSession() { // If there is no session yet, we do not want to refresh anything // This should generally not happen, but to be safe.... if (!this.session) { return false; } const currentSession = this.session; if ( shouldRefreshSession(currentSession, { sessionIdleExpire: this.timeouts.sessionIdleExpire, maxReplayDuration: this._options.maxReplayDuration, }) ) { // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises this._refreshSession(currentSession); return false; } return true; } /** * Refresh a session with a new one. * This stops the current session (without forcing a flush, as that would never work since we are expired), * and then does a new sampling based on the refreshed session. */ async _refreshSession(session) { if (!this._isEnabled) { return; } await this.stop({ reason: 'refresh session' }); this.initializeSampling(session.id); } /** * Adds listeners to record events for the replay */ _addListeners() { try { WINDOW.document.addEventListener('visibilitychange', this._handleVisibilityChange); WINDOW.addEventListener('blur', this._handleWindowBlur); WINDOW.addEventListener('focus', this._handleWindowFocus); WINDOW.addEventListener('keydown', this._handleKeyboardEvent); if (this.clickDetector) { this.clickDetector.addListeners(); } // There is no way to remove these listeners, so ensure they are only added once if (!this._hasInitializedCoreListeners) { addGlobalListeners(this); this._hasInitializedCoreListeners = true; } } catch (err) { this.handleException(err); } this._performanceCleanupCallback = setupPerformanceObserver(this); } /** * Cleans up listeners that were created in `_addListeners` */ _removeListeners() { try { WINDOW.document.removeEventListener('visibilitychange', this._handleVisibilityChange); WINDOW.removeEventListener('blur', this._handleWindowBlur); WINDOW.removeEventListener('focus', this._handleWindowFocus); WINDOW.removeEventListener('keydown', this._handleKeyboardEvent); if (this.clickDetector) { this.clickDetector.removeListeners(); } if (this._performanceCleanupCallback) { this._performanceCleanupCallback(); } } catch (err) { this.handleException(err); } } /** * Tasks to run when we consider a page to be hidden (via blurring and/or visibility) */ _doChangeToBackgroundTasks(breadcrumb) { if (!this.session) { return; } const expired = isSessionExpired(this.session, { maxReplayDuration: this._options.maxReplayDuration, sessionIdleExpire: this.timeouts.sessionIdleExpire, }); if (expired) { return; } if (breadcrumb) { this._createCustomBreadcrumb(breadcrumb); } // Send replay when the page/tab becomes hidden. There is no reason to send // replay if it becomes visible, since no actions we care about were done // while it was hidden // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises void this.conditionalFlush(); } /** * Tasks to run when we consider a page to be visible (via focus and/or visibility) */ _doChangeToForegroundTasks(breadcrumb) { if (!this.session) { return; } const isSessionActive = this.checkAndHandleExpiredSession(); if (!isSessionActive) { // 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 DEBUG_BUILD && debug.log('Document has become active, but session has expired'); return; } if (breadcrumb) { this._createCustomBreadcrumb(breadcrumb); } } /** * Update user activity (across session lifespans) */ _updateUserActivity(_lastActivity = Date.now()) { this._lastActivity = _lastActivity; } /** * Updates the session's last activity timestamp */ _updateSessionActivity(_lastActivity = Date.now()) { if (this.session) { this.session.lastActivity = _lastActivity; this._maybeSaveSession(); } } /** * Helper to create (and buffer) a replay breadcrumb from a core SDK breadcrumb */ _createCustomBreadcrumb(breadcrumb) { this.addUpdate(() => { // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises this.throttledAddEvent({ type: EventType.Custom, timestamp: breadcrumb.timestamp || 0, data: { tag: 'breadcrumb', payload: breadcrumb, }, }); }); } /** * Observed performance events are added to `this.performanceEntries`. These * are included in the replay event before it is finished and sent to Sentry. */ _addPerformanceEntries() { let performanceEntries = createPerformanceEntries(this.performanceEntries).concat(this.replayPerformanceEntries); this.performanceEntries = []; this.replayPerformanceEntries = []; // If we are manually starting, we want to ensure we only include performance entries // that are after the initial timestamp // The reason for this is that we may have performance entries from the page load, but may decide to start // the replay later on, in which case we do not want to include these entries. // without this, manually started replays can have events long before the actual replay recording starts, // which messes with the timeline etc. if (this._requiresManualStart) { const initialTimestampInSeconds = this._context.initialTimestamp / 1000; performanceEntries = performanceEntries.filter(entry => entry.start >= initialTimestampInSeconds); } return Promise.all(createPerformanceSpans(this, performanceEntries)); } /** * Clear _context */ _clearContext() { // XXX: `initialTimestamp` and `initialUrl` do not get cleared this._context.errorIds.clear(); this._context.traceIds.clear(); this._context.urls = []; } /** Update the initial timestamp based on the buffer content. */ _updateInitialTimestampFromEventBuffer() { const { session, eventBuffer } = this; // If replay was started manually (=no sample rate was given), // We do not want to back-port the initial timestamp if (!session || !eventBuffer || this._requiresManualStart) { 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() { const _context = { initialTimestamp: this._context.initialTimestamp, initialUrl: this._context.initialUrl, errorIds: Array.from(this._context.errorIds), traceIds: Array.from(this._context.traceIds), urls: this._context.urls, }; this._clearContext(); return _context; } /** * Flushes replay event buffer to Sentry. * * Performance events are only added right before flushing - this is * due to the buffered performance observer events. * * Should never be called directly, only by `flush` */ async _runFlush() { const replayId = this.getSessionId(); if (!this.session || !this.eventBuffer || !replayId) { DEBUG_BUILD && debug.error('No session or eventBuffer found to flush.'); return; } await this._addPerformanceEntries(); // Check eventBuffer again, as it could have been stopped in the meanwhile if (!this.eventBuffer?.hasEvents) { return; } // Only attach memory event if eventBuffer is not empty await addMemoryEntry(this); // Check eventBuffer again, as it could have been stopped in the meanwhile if (!this.eventBuffer) { return; } // if this changed in the meanwhile, e.g. because the session was refreshed or similar, we abort here if (replayId !== this.getSessionId()) { return; } try { // This uses the data from the eventBuffer, so we need to call this before `finish() this._updateInitialTimestampFromEventBuffer(); const timestamp = Date.now(); // Check total duration again, to avoid sending outdated stuff // We leave 30s wiggle room to accommodate late flushing etc. // This _could_ happen when the browser is suspended during flushing, in which case we just want to stop if (timestamp - this._context.initialTimestamp > this._options.maxReplayDuration + 30000) { throw new ReplayDurationLimitError(); } const eventContext = this._popEventContext(); // Always increment segmentId regardless of outcome of sending replay const segmentId = this.session.segmentId++; this._maybeSaveSession(); // Note this empties the event buffer regardless of outcome of sending replay const recordingData = await this.eventBuffer.finish(); await sendReplay({ replayId, recordingData, segmentId, eventContext, session: this.session, timestamp, onError: err => this.handleException(err), }); } catch (err) { this.handleException(err); // 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 should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises this.stop({ reason: 'sendReplay' }); const client = getClient(); if (client) { let dropReason; if (err instanceof RateLimitError) { dropReason = 'ratelimit_backoff'; } else if (err instanceof ReplayDurationLimitError) { dropReason = 'invalid'; } else { dropReason = 'send_error'; } client.recordDroppedEvent(dropReason, 'replay'); } } } /** * 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. */ async _flush({ force = false, } = {}) { if (!this._isEnabled && !force) { // This can happen if e.g. the replay was stopped because of exceeding the retry limit return; } if (!this.checkAndHandleExpiredSession()) { DEBUG_BUILD && debug.error('Attempting to finish replay event after session expired.'); return; } if (!this.session) { // should never happen, as we would have bailed out before return; } const start = this.session.started; const now = Date.now(); const duration = now - start; // A flush is about to happen, cancel any queued flushes this._debouncedFlush.cancel(); // If session is too short, or too long (allow some wiggle room over maxReplayDuration), do not send it // This _should_ not happen, but it may happen if flush is triggered due to a page activity change or similar const tooShort = duration < this._options.minReplayDuration; const tooLong = duration > this._options.maxReplayDuration + 5000; if (tooShort || tooLong) { DEBUG_BUILD && debug.log( `Session duration (${Math.floor(duration / 1000)}s) is too ${ tooShort ? 'short' : 'long' }, not sending replay.`, ); if (tooShort) { this._debouncedFlush(); } return; } const eventBuffer = this.eventBuffer; if (eventBuffer && this.session.segmentId === 0 && !eventBuffer.hasCheckout) { DEBUG_BUILD && debug.log('Flushing initial segment without checkout.'); // TODO FN: Evaluate if we want to stop here, or remove this again? } const _flushInProgress = !!this._flushLock; // this._flushLock acts as a lock so that future calls to `_flush()` will // be blocked until current flush is finished (i.e. this promise resolves) if (!this._flushLock) { this._flushLock = this._runFlush(); } try { await this._flushLock; } catch (err) { this.handleException(err); } finally { this._flushLock = undefined; if (_flushInProgress) { // Wait for previous flush to finish, then call the debounced // `_flush()`. It's possible there are other flush requests queued and // waiting for it to resolve. We want to reduce all outstanding // requests (as well as any new flush requests that occur within a // second of the locked flush completing) into a single flush. this._debouncedFlush(); } } } /** Save the session, if it is sticky */ _maybeSaveSession() { if (this.session && this._options.stickySession) { saveSession(this.session); } } /** Handler for rrweb.record.onMutation */ _onMutationHandler(mutations) { const { ignoreMutations } = this._options._experiments; if (ignoreMutations?.length) { if ( mutations.some(mutation => { const el = closestElementOfNode(mutation.target); const selector = ignoreMutations.join(','); return el?.matches(selector); }) ) { return false; } } const count = mutations.length; const mutationLimit = this._options.mutationLimit; const mutationBreadcrumbLimit = this._options.mutationBreadcrumbLimit; const overMutationLimit = mutationLimit && count > mutationLimit; // Create a breadcrumb if a lot of mutations happen at the same time // We can show this in the UI as an information with potential performance improvements if (count > mutationBreadcrumbLimit || overMutationLimit) { const breadcrumb = createBreadcrumb({ category: 'replay.mutations', data: { count, limit: overMutationLimit, }, }); this._createCustomBreadcrumb(breadcrumb); } // Stop replay if over the mutation limit if (overMutationLimit) { // This should never reject // eslint-disable-next-line @typescript-eslint/no-floating-promises this.stop({ reason: 'mutationLimit', forceFlush: this.recordingMode === 'session' }); return false; } // `true` means we use the regular mutation handling by rrweb return true; } } function getOption(selectors, defaultSelectors) { return [ ...selectors, // sentry defaults ...defaultSelectors, ].join(','); } /** * Returns privacy related configuration for use in rrweb */ function getPrivacyOptions({ mask, unmask, block, unblock, ignore }) { const defaultBlockedElements = ['base', 'iframe[srcdoc]:not([src])']; const maskSelector = getOption(mask, ['.sentry-mask', '[data-sentry-mask]']); const unmaskSelector = getOption(unmask, []); const options = { // We are making the decision to make text and input selectors the same maskTextSelector: maskSelector, unmaskTextSelector: unmaskSelector, blockSelector: getOption(block, ['.sentry-block', '[data-sentry-block]', ...defaultBlockedElements]), unblockSelector: getOption(unblock, []), ignoreSelector: getOption(ignore, ['.sentry-ignore', '[data-sentry-ignore]', 'input[type="file"]']), }; return options; } /** * Masks an attribute if necessary, otherwise return attribute value as-is. */ function maskAttribute({ el, key, maskAttributes, maskAllText, privacyOptions, value, }) { // We only mask attributes if `maskAllText` is true if (!maskAllText) { return value; } // unmaskTextSelector takes precedence if (privacyOptions.unmaskTextSelector && el.matches(privacyOptions.unmaskTextSelector)) { return value; } if ( maskAttributes.includes(key) || // Need to mask `value` attribute for `` if it's a button-like // type (key === 'value' && el.tagName === 'INPUT' && ['submit', 'button'].includes(el.getAttribute('type') || '')) ) { return value.replace(/[\S]/g, '*'); } return value; } 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']; // Symbol to store the original body on Request objects const ORIGINAL_BODY = Symbol.for('sentry__originalRequestBody'); let _initialized = false; let _isRequestInstrumented = false; /** * Instruments the global Request constructor to store the original body. * This allows us to retrieve the original body value later, since Request * converts string bodies to ReadableStreams. */ function _INTERNAL_instrumentRequestInterface() { if (typeof Request === 'undefined' || _isRequestInstrumented) { return; } const OriginalRequest = Request; try { const SentryRequest = function (input, init) { const request = new OriginalRequest(input, init); if (init?.body != null) { // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access (request )[ORIGINAL_BODY] = init.body; } return request; }; SentryRequest.prototype = OriginalRequest.prototype; // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access (GLOBAL_OBJ ).Request = SentryRequest; _isRequestInstrumented = true; } catch { // Fail silently if Request is frozen } } /** * Sentry integration for [Session Replay](https://sentry.io/for/session-replay/). * * See the [Replay documentation](https://docs.sentry.io/platforms/javascript/guides/session-replay/) for more information. * * @example * * ``` * Sentry.init({ * dsn: '__DSN__', * integrations: [Sentry.replayIntegration()], * }); * ``` */ const replayIntegration = ((options) => { return new Replay(options); }) ; /** * Replay integration */ class Replay { /** * @inheritDoc */ /** * Options to pass to `rrweb.record()` */ /** * Initial options passed to the replay integration, merged with default values. * Note: `sessionSampleRate` and `errorSampleRate` are not required here, as they * can only be finally set when setupOnce() is called. * * @private */ constructor({ flushMinDelay = DEFAULT_FLUSH_MIN_DELAY, flushMaxDelay = DEFAULT_FLUSH_MAX_DELAY, minReplayDuration = MIN_REPLAY_DURATION, maxReplayDuration = MAX_REPLAY_DURATION, stickySession = true, useCompression = true, workerUrl, _experiments = {}, maskAllText = true, maskAllInputs = true, blockAllMedia = true, mutationBreadcrumbLimit = 750, mutationLimit = 10000, slowClickTimeout = 7000, slowClickIgnoreSelectors = [], networkDetailAllowUrls = [], networkDetailDenyUrls = [], networkCaptureBodies = true, networkRequestHeaders = [], networkResponseHeaders = [], mask = [], maskAttributes = ['title', 'placeholder', 'aria-label'], unmask = [], block = [], unblock = [], ignore = [], maskFn, beforeAddRecordingEvent, beforeErrorSampling, onError, attachRawBodyFromRequest = false, } = {}) { this.name = 'Replay'; const privacyOptions = getPrivacyOptions({ mask, unmask, block, unblock, ignore, }); this._recordingOptions = { maskAllInputs, maskAllText, maskInputOptions: { password: true }, maskTextFn: maskFn, maskInputFn: maskFn, maskAttributeFn: (key, value, el) => maskAttribute({ maskAttributes, maskAllText, privacyOptions, key, value, el, }), ...privacyOptions, // Our defaults slimDOMOptions: 'all', inlineStylesheet: true, // Disable inline images as it will increase segment/replay size inlineImages: false, // collect fonts, but be aware that `sentry.io` needs to be an allowed // origin for playback collectFonts: true, errorHandler: (err) => { try { err.__rrweb__ = true; } catch { // ignore errors here // this can happen if the error is frozen or does not allow mutation for other reasons } }, // experimental support for recording iframes from different origins recordCrossOriginIframes: Boolean(_experiments.recordCrossOriginIframes), }; this._initialOptions = { flushMinDelay, flushMaxDelay, minReplayDuration: Math.min(minReplayDuration, MIN_REPLAY_DURATION_LIMIT), maxReplayDuration: Math.min(maxReplayDuration, MAX_REPLAY_DURATION), stickySession, useCompression, workerUrl, blockAllMedia, maskAllInputs, maskAllText, mutationBreadcrumbLimit, mutationLimit, slowClickTimeout, slowClickIgnoreSelectors, networkDetailAllowUrls, networkDetailDenyUrls, networkCaptureBodies, networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders), networkResponseHeaders: _getMergedNetworkHeaders(networkResponseHeaders), beforeAddRecordingEvent, beforeErrorSampling, onError, attachRawBodyFromRequest, _experiments, }; if (this._initialOptions.blockAllMedia) { // `blockAllMedia` is a more user friendly option to configure blocking // embedded media elements this._recordingOptions.blockSelector = !this._recordingOptions.blockSelector ? MEDIA_SELECTORS : `${this._recordingOptions.blockSelector},${MEDIA_SELECTORS}`; this._recordingOptions.ignoreCSSAttributes = new Set(['background-image']); } if (this._isInitialized && isBrowser()) { throw new Error('Multiple Sentry Session Replay instances are not supported'); } this._isInitialized = true; } /** If replay has already been initialized */ get _isInitialized() { return _initialized; } /** Update _isInitialized */ set _isInitialized(value) { _initialized = value; } /** * Setup and initialize replay container */ afterAllSetup(client) { if (!isBrowser() || this._replay) { return; } if (this._initialOptions.attachRawBodyFromRequest) { _INTERNAL_instrumentRequestInterface(); } this._setup(client); this._initialize(client); } /** * Start a replay regardless of sampling rate. Calling this will always * create a new session. Will log a message 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._replay) { return; } 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 Promise.resolve(); } return this._replay.stop({ forceFlush: this._replay.recordingMode === 'session' }); } /** * If not in "session" recording mode, flush event buffer which will create a new replay. * If replay is not enabled, a new session replay is started. * 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) { return Promise.resolve(); } // assuming a session should be recorded in this case if (!this._replay.isEnabled()) { this._replay.start(); return Promise.resolve(); } return this._replay.sendBufferedReplayOrFlush(options); } /** * Get the current session ID. * * @param onlyIfSampled - If true, will only return the session ID if the session is sampled. * */ getReplayId(onlyIfSampled) { if (!this._replay?.isEnabled()) { return; } return this._replay.getSessionId(onlyIfSampled); } /** * Get the current recording mode. This can be either `session` or `buffer`. * * `session`: Recording the whole session, sending it continuously * `buffer`: Always keeping the last 60s of recording, requires: * - having replaysOnErrorSampleRate > 0 to capture replay when an error occurs * - or calling `flush()` to send the replay */ getRecordingMode() { if (!this._replay?.isEnabled()) { return; } return this._replay.recordingMode; } /** * Initializes replay. */ _initialize(client) { if (!this._replay) { return; } this._maybeLoadFromReplayCanvasIntegration(client); this._replay.initializeSampling(); } /** Setup the integration. */ _setup(client) { // Client is not available in constructor, so we need to wait until setupOnce const finalOptions = loadReplayOptionsFromClient(this._initialOptions, client); this._replay = new ReplayContainer({ options: finalOptions, recordingOptions: this._recordingOptions, }); } /** Get canvas options from ReplayCanvas integration, if it is also added. */ _maybeLoadFromReplayCanvasIntegration(client) { // To save bundle size, we skip checking for stuff here // and instead just try-catch everything - as generally this should all be defined /* eslint-disable @typescript-eslint/no-non-null-assertion */ try { const canvasIntegration = client.getIntegrationByName('ReplayCanvas') ; if (!canvasIntegration) { return; } this._replay['_canvas'] = canvasIntegration.getOptions(); } catch { // ignore errors here } /* eslint-enable @typescript-eslint/no-non-null-assertion */ } } /** Parse Replay-related options from SDK options */ function loadReplayOptionsFromClient(initialOptions, client) { const opt = client.getOptions() ; const finalOptions = { sessionSampleRate: 0, errorSampleRate: 0, ...initialOptions, }; const replaysSessionSampleRate = parseSampleRate(opt.replaysSessionSampleRate); const replaysOnErrorSampleRate = parseSampleRate(opt.replaysOnErrorSampleRate); if (replaysSessionSampleRate == null && replaysOnErrorSampleRate == null) { consoleSandbox(() => { // eslint-disable-next-line no-console console.warn( 'Replay is disabled because neither `replaysSessionSampleRate` nor `replaysOnErrorSampleRate` are set.', ); }); } if (replaysSessionSampleRate != null) { finalOptions.sessionSampleRate = replaysSessionSampleRate; } if (replaysOnErrorSampleRate != null) { finalOptions.errorSampleRate = replaysOnErrorSampleRate; } return finalOptions; } function _getMergedNetworkHeaders(headers) { return [...DEFAULT_NETWORK_HEADERS, ...headers.map(header => header.toLowerCase())]; } /** * This is a small utility to get a type-safe instance of the Replay integration. */ function getReplay() { const client = getClient(); return client?.getIntegrationByName('Replay'); } export { getReplay, replayIntegration }; //# sourceMappingURL=index.js.map