chore: Add warning if fix_stylesheet is off (#1421)

Co-authored-by: Jordan Porter <insomniacrampage@hotmail.com>

Author: cwli24

docs/warning-codes.md

@@ -92,4 +92,6 @@
 ### 45
 `An internal agent process failed to execute.`
 ### 46
-`A reserved eventType was provided to recordCustomEvent(...) -- The event was not recorded.`
+`A reserved eventType was provided to recordCustomEvent(...) -- The event was not recorded.`
+### 47
+`We tried to access a stylesheet's contents but failed due to browser security. For best results, ensure that cross-domain CSS assets are decorated with "crossorigin='anonymous'" attribution or are otherwise publicly accessible.`

src/features/session_replay/shared/recorder.js

@@ -14,6 +14,8 @@ import { FEATURE_NAMES } from '../../../loaders/features/features'
 import { buildNRMetaNode, customMasker } from './utils'
 import { IDEAL_PAYLOAD_SIZE } from '../../../common/constants/agent-constants'
 import { AggregateBase } from '../../utils/aggregate-base'
+import { warn } from '../../../common/util/console'
+import { single } from '../../../common/util/invoke'
 
 export class Recorder {
   /** Each page mutation or event will be stored (raw) in this array. This array will be cleared on each harvest */
@@ -25,6 +27,8 @@ export class Recorder {
   /** flag that if true, blocks events from being "stored".  Only set to true when a full snapshot has incomplete nodes (only stylesheets ATM) */
   #fixing = false
 
+  #warnCSSOnce = single(() => warn(47)) // notifies user of potential replayer issue if fix_stylesheets is off
+
   constructor (parent) {
     this.#events = new RecorderEvents()
     this.#backloggedEvents = new RecorderEvents()
@@ -120,6 +124,7 @@ export class Recorder {
     if (!this.shouldFix) {
       if (incompletes > 0) {
         this.currentBufferTarget.inlinedAllStylesheets = false
+        this.#warnCSSOnce()
         handle(SUPPORTABILITY_METRIC_CHANNEL, [missingInlineSMTag + 'Skipped', incompletes], undefined, FEATURE_NAMES.metrics, this.parent.ee)
       }
       return this.store(event, isCheckout)