Polaris React styles not applied in Microsoft Clarity session recordings (Remix embedded app)

Polaris
1

I have created a Shopify embedded app using the Remix template.
In this app, I am using a combination of Polaris React and Polaris Web Components.

I have also integrated Microsoft Clarity for session recording and analytics.

Issue:
In Microsoft Clarity session recordings, the Polaris React component styles are not applied. The UI appears broken or unstyled in the recordings.
However, when using the app normally inside the Shopify Admin, everything works and styles are applied correctly.

This issue seems to occur only in Clarity session recordings, not in the actual app behavior.

Polaris styles import:

import polarisStyles from “
/polaris/build/esm/styles.css?url”;

export const links = () => [{ rel: “stylesheet”, href: polarisStyles }];

Additional notes:

  • App is embedded inside Shopify Admin (iframe)

  • Using Remix + Polaris React + Polaris Web Components

  • No styling issues outside of session recordings

For reference, please review the attached screenshot showing how the UI appears in the Clarity recording.

Has anyone faced a similar issue with Microsoft Clarity or other session recording tools when using Polaris React in a Remix embedded app? Any guidance or workaround would be appreciated.

2

Hey @jaymit_b - thanks for flagging this, hope all’s well :slight_smile:

I think this might be a limitation with how Microsoft Clarity captures and replays session recordings rather than an issue with Polaris or your app implementation. Microsoft’s Clarity FAQ mentions that CSS needs to be externally accessible for recordings to render correctly, so I think this could potentially be what’s happening here. More details in their FAQ here as well: https://learn.microsoft.com/en-us/clarity/faq

That said, could you let me know whether the unstyled components are specifically the Polaris Web Components, the Polaris React components, or both? I can’t guarantee a solution on our end but I can absolutely pass along your feedback to the team. Hope to hear from you soon!

3

Hi @Alan_G ,

Issue with the Polaris React component only, for web components it’s working fine. As I’m using the remix template and loading Polaris React styling dynamically which is occur styling issue in session recording.