From 4d8f98ad4c8a6921c0667f96509fab76fd383994 Mon Sep 17 00:00:00 2001 From: Jordan Porter Date: Thu, 29 Feb 2024 10:44:08 -0700 Subject: [PATCH] chore: Make both stylesheet SMs always increment together (#892) Co-authored-by: Patrick Housley --- src/features/session_replay/shared/recorder.js | 9 +++++---- .../session_replay/shared/stylesheet-evaluator.js | 15 ++++++++------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/features/session_replay/shared/recorder.js b/src/features/session_replay/shared/recorder.js index a2b319e4c..17b567500 100644 --- a/src/features/session_replay/shared/recorder.js +++ b/src/features/session_replay/shared/recorder.js @@ -101,14 +101,15 @@ export class Recorder { const incompletes = stylesheetEvaluator.evaluate() /** Only stop ignoring data if already ignoring and a new valid snapshap is taking place (0 incompletes and we get a meta node for the snap) */ if (!incompletes && this.#fixing && event.type === RRWEB_EVENT_TYPES.Meta) this.#fixing = false - if (incompletes) { + if (incompletes > 0) { /** wait for the evaluator to download/replace the incompletes' src code and then take a new snap */ stylesheetEvaluator.fix().then((failedToFix) => { - if (failedToFix) { + if (failedToFix > 0) { this.currentBufferTarget.inlinedAllStylesheets = false this.shouldFix = false - handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee) - } else handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee) + } + handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Failed', failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee) + handle(SUPPORTABILITY_METRIC_CHANNEL, ['SessionReplay/Payload/Missing-Inline-Css/Fixed', incompletes - failedToFix], undefined, FEATURE_NAMES.metrics, this.parent.ee) this.takeFullSnapshot() }) /** Only start ignoring data if got a faulty snapshot */ diff --git a/src/features/session_replay/shared/stylesheet-evaluator.js b/src/features/session_replay/shared/stylesheet-evaluator.js index 27a79dff8..2ea70c688 100644 --- a/src/features/session_replay/shared/stylesheet-evaluator.js +++ b/src/features/session_replay/shared/stylesheet-evaluator.js @@ -19,15 +19,15 @@ class StylesheetEvaluator { let incompletes = 0 if (isBrowserScope) { for (let i = 0; i < Object.keys(document.styleSheets).length; i++) { - const ss = document.styleSheets[i] - if (!this.#evaluated.has(ss)) { - this.#evaluated.add(ss) + if (!this.#evaluated.has(document.styleSheets[i])) { + this.#evaluated.add(document.styleSheets[i]) try { // eslint-disable-next-line - const temp = ss.cssRules + const temp = document.styleSheets[i].cssRules } catch (err) { + if (!document.styleSheets[i].href) return incompletes++ - this.#fetchProms.push(this.#fetchAndOverride(document.styleSheets[i], ss.href)) + this.#fetchProms.push(this.#fetchAndOverride(document.styleSheets[i])) } } } @@ -54,9 +54,10 @@ class StylesheetEvaluator { * @param {*} href - The asset href to fetch * @returns {Promise} */ - async #fetchAndOverride (target, href) { + async #fetchAndOverride (target) { + if (!target?.href) return try { - const stylesheetContents = await originals.FETCH.bind(window)(href) + const stylesheetContents = await originals.FETCH.bind(window)(target.href) if (!stylesheetContents.ok) { this.failedToFix++ return