chore: Make both stylesheet SMs always increment together (#892)

Co-authored-by: Patrick Housley <[email protected]>
newrelic · Feb 29, 2024 · 4d8f98a · 4d8f98a
1 parent 35810a8
commit 4d8f98a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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