Lack of requestIdleCallback on iOS was causing unexpected event emission ordering due to synchronous emission of an asset during a full snapshot before the FullSnapshot event could be emitted. At least if they explicitly set processStylesheetsWithin=0 then there is a cause relating to this outcome. A further update might ensure that all Assets emitted during a FullSnapshot take on the timestamp of the FullSnapshot

Author: eoghanmurray

docs/assets.md

@@ -32,7 +32,7 @@ The `captureAssets` configuration option allows you to customize the asset captu
 
 - `stylesheetsRuleThreshold` (default: `0`): only invoke the asset system for stylesheets with more than this number of rules. Defaults to zero (rather than say 100) as it only looks at the 'outer' rules (e.g. could have a single media rule which nests 1000s of sub rules). This default may be increased based on feedback.
 
-- `processStylesheetsWithin` (default: `2000`): This property defines the maximum time in milliseconds that the browser should delay before processing stylesheets. Inline `<style>` elements will be processed within half this value. Lower this value if you wish to improve the odds that short 'bounce' visits will emit the asset before visitor unloads page. Set to zero or a negative number to process stylesheets synchronously, which can cause poor scores on e.g. https://pagespeed.web.dev/ ("Third-party code blocked the main thread").
+- `processStylesheetsWithin` (default: `2000`): This property defines the maximum time in milliseconds that the browser should delay before processing stylesheets. Inline `<style>` elements will be processed within half this value. Lower this value if you wish to improve the odds that short 'bounce' visits will emit the asset before visitor unloads page. Set to zero or a negative number to process stylesheets synchronously, which can cause poor scores on e.g. https://pagespeed.web.dev/ ("Third-party code blocked the main thread"), and also cause assets to be emitted with an earlier timestamp than the snapshot they are associated with.
 
 ## TypeScript Type Definition
 

packages/rrweb/src/record/observers/asset-manager.ts

@@ -244,7 +244,16 @@ export default class AssetManager {
     if (!timeout && timeout !== 0) {
       timeout = 2000;
     }
-    if (window.requestIdleCallback !== undefined && timeout > 0) {
+    if (timeout <= 0) {
+      // warning: stylesheet will be emitted with an earlier timestamp than snapshot it is associated with
+      processStylesheet();
+      return {
+        url,
+        status: 'captured',
+        info: 'just processed',
+        timeout,
+      };
+    } else if (window.requestIdleCallback !== undefined) {
       if (el.tagName === 'STYLE') {
         // mark it so mutations on it can be ignored until processed
         (el as ProcessingStyleElement).__rrProcessingStylesheet = true;
@@ -263,11 +272,16 @@ export default class AssetManager {
         timeout,
       };
     } else {
-      processStylesheet();
+      // fallback for e.g. iOS which doesn't have requestIdleCallback
+      // we still defer so that it isn't emitted before FullSnapshot
+      // and also so that we don't block the main thread.
+      // don't use the `timeout` variable as that should be seen
+      // as a maximum delay and not a minimum
+      setTimeout(processStylesheet, 0);
       return {
         url,
-        status: 'captured',
-        info: 'just processed',
+        status: 'capturing', // 'processing' ?
+        timeout: 1, // not sure how to make this figure meaningful in the context of setTimeout
       };
     }
   }