search

microsoft / clarity

A behavioral analytics library that uses dom mutations and user interactions to generate aggregated insights.
https://clarity.microsoft.com
MIT License
2.16k stars 216 forks source link

react css-in-js solutions are not being recorded #399

Open giladv opened 1 year ago

giladv commented 1 year ago

It seems pages using css-in-js libraries like stitches.js/styled-components are not being recorded properly. the css is completely absent.

is this a known issue?

jakubzet commented 1 year ago

@giladv - were you somehow able to overcome this issue?

MathiasPawshake commented 7 months ago

I'm facing the same issue. Any update on this?

mathmorais commented 3 months ago

I've noticed that this issue still hasn't received any answers for some time...

The problem is that the clarity preview needs all its static information to be publicly available. In our case, the CSS is still embedded in JavaScript files. docs

The complexity also increases because the clarity 'previewer' could be disabling JavaScript execution from the page, creating an additional problem in generating all the styles.

My suggestion, which I'll be trying, is to generate a bundle for it and try linking it on the page. However, this isn't ideal since the CSS-in-JS library loses its purpose.

If anyone has any other suggestions or ideas, I'd be eager to hear them