Clarity 0.7.43 breaks partytown integration

[lampask]

Describe the bug New mediaInsertRule (and mediaDeleteRule) breaks clarity deployment inside webworker. We are running clarity through partytown and CSSMediaRule is undefined there, accessing it results in error printed to console.

This is only present in version 0.7.43, where the rules first appear. Previously version 0.7.41 ran without any issues.

TypeError: CSSMediaRule is undefined
    _a https://www.clarity.ms/s/0.7.43/clarity.js:4
    start https://www.clarity.ms/s/0.7.43/clarity.js:4
    pi https://www.clarity.ms/s/0.7.43/clarity.js:4
    Ui https://www.clarity.ms/s/0.7.43/clarity.js:4
    Ui https://www.clarity.ms/s/0.7.43/clarity.js:4
    Ji https://www.clarity.ms/s/0.7.43/clarity.js:4
    Gi https://www.clarity.ms/s/0.7.43/clarity.js:4
    anonymous https://www.clarity.ms/s/0.7.43/clarity.js:4
    anonymous https://www.clarity.ms/s/0.7.43/clarity.js:4
    run http://localhost:5173/~partytown/debug/partytown-ww-sw.js?v=0.10.2:713
    receiveMessageFromSandboxToWorker http://localhost:5173/~partytown/debug/partytown-ww-sw.js?v=0.10.2:1811
    receiveMessageFromSandboxToWorker http://localhost:5173/~partytown/debug/partytown-ww-sw.js?v=0.10.2:1819

Repro Steps

1. Setup project with partytown
2. Add clarity snippet in script tag with type="text/partytown"

[ender336]

thanks, have a PR coming out to fix this shortly

[nicksrandall]

@ender336 I see your PR was merged, any idea when this will go out?

[lampask]

The CDN now serves the version 0.7.45 and the issue still persists, I have tried to look into it, but I am not sure why it is not working.

When I console.log from within the worker:

<script type="text/partytown">
   console.log(window.CSSMediaRule);
   console.log('CSSMediaRule' in window);
   console.log(window.hasOwnProperty(CSSMediaRule));
   console.log(window.CSSMediaRule !== undefined);
</script>

I get these results:

undefined
true
true
false

It looks like the property is there but it is also set as undefined for some reason.

[ender336]

hmmm I'll take a look thanks for the report

[ender336]

@lampask are you still seeing this issue? I got the partytown repo running and things seemed to work - there's a test in there specifically for Clarity.

https://partytown.builder.io/tests/integrations/clarity/standard.html

I think they were going to start to polyfill CSSMediaRule: https://github.com/BuilderIO/partytown/pull/614 but it looks like that didn't go in.

If you're still seeing the issue can you email the site that you're having an issue with to clarityms@microsoft.com

[lampask]

@ender336 The link you provided is a test page for standard clarity without including it in the worker. It is a bit of a confusing naming - in the standard version they just use type text/javascript to run the default clarity snippet that downloads clarity and runs it in the main thread.

The right test is here: https://partytown.builder.io/tests/integrations/clarity/

This one (just named Partytown Clarity), uses the snippet inside type text/pariytown but also has a script that intercepts the script tag injection and replaces the source with a self-hosted bundle that has an older version of clarity. Hosted here: https://partytown.builder.io/tests/integrations/clarity/clarity.bundle.js

This is the script that intercepts default behaviour:

    const observer = new MutationObserver(mutations => {
      mutations.forEach(({ addedNodes }) => {
        addedNodes.forEach(node => {
          // For each added script tag
          if (node.nodeType === 1 && node.tagName === 'SCRIPT') {
            const src = node.src || '';
            if (node.src.includes('clarity.js')) {
              node.type = 'text/partytown';
              node.src = './clarity.bundle.js';
            }
          }
        });
      });
    });
    // Starts the monitoring
    observer.observe(document.documentElement, {
      childList: true,
      subtree: true,
    });

When deploying app I could probably do the same "hack", but I wanted to avoid that in favor of serving clarity from GTM.

[anicolaides]

Hey everyone,

Is this still an issue?