CSS file not loaded due to base tag

[mariusrudolph]

Hi there, we have an issue with Clarity. At the moment the CSS file is not loaded because Clarity does not load the CSS file from the correct path. We think it is connected to the base tag in our HTML code.

Our CSS file is at www.example.com/path/style.css We have a base tag like that in the HTML code <base href="/path/">

At the moment in the network request the file is requested like that: Request URL: https://clarity.microsoft.com/external/resources?url=https://example.com/styles.css&timestamp=1664260249664 so the path is missing.

Any idea why that happens?

[SRV332003]

<base href="/path/"> just set base url for all the relative URLs in the page. In your case too the base tag sets base url for all relative. Hence the called path is invalid... If issue presists, i want to work of this Issue and I am sure i am able to solve it.

[hungphambbv]

Hi @SRV332003 ,

Currently our webapp is using <base href="/path/"> for relative resources files (including css) and it's working well. CSS file is loaded from www.example.com/path/style.css

But in Clarity, it ignore the base tag and load from https://clarity.microsoft.com/external/resources?url=https://example.com/styles.css

Do you have any solution for this?

Thanks

[vmotornyi]

But in Clarity, it ignore the base tag and load from https://clarity.microsoft.com/external/resources?url=https://example.com/styles.css

Same problem here, waiting for fix or possible workaround

[vmatheusga]

I have the same problem. Has anyone found a possible solution?

[eschulma]

We have the identical problem. Base tags are really not that unusual, I would hope Clarity could handle them.

[eschulma]

It looks like this same issue has been reported multiple times in various ways since at least January.

[Obolrus]

Faced the same issue. Fix it please 🙏

[matheus-inacio]

Just a heads-up, i've opened a PR (#296) that fixes this issue. 🙃

[sarveshnagpal]

Thanks a lot @matheus-inacio for fixing the issue.

[vmotornyi]

changes from PR(#296) overwritten by this and base tag still not working :cry:

[vmotornyi]

i debug and this line sets the right value of base href, but for getting resources from recordings in clarity project still used value setted here do we need to wait another PR for this?

[sarveshnagpal]

@vmotornyi - Could you please share a sample test URL where this is still broken? Ideally, BASE tag will come after HEAD and therefore the order should still be preserved.

[vmotornyi]

@sarveshnagpal I can`t share URL, because the app is not public. I can confirm that BASE tag come after HEAD and during debugging i saw that case HEAD executes before case BASE but during replay records in https://clarity.microsoft.com/projects/view/ i see that resources still requested from https://example.com/ui/some/path/ not from https://exmaple.com/ui/

[sarveshnagpal]

Thank you @vmotornyi. Is this explicit BASE tag within the IFRAME (and not the parent page)? Also I am sure you checked it already -- but double checking the recordings you are viewing on clarity.microsoft.com are from today? The change above was deployed recently and doesn't retroactively applies to older recordings.

[vmotornyi]

@sarveshnagpal thanks for such fast feedback. yea BASE tag on its right place and i`m doing actions and viewing them in "live".

created sample app that reproduce this behaviour, you can find it here

in clarity UI i see this:

[sarveshnagpal]

Thanks @vmotornyi, the sample app was very helpful. I validated the issue is not with clarity-js but with the visualization. If you try out your sample app with the clarity-devtools extension -- you will notice that it renders as expected.

I've created an internal bug on Clarity team to debug and fix this. Once that bug is resolved all your recordings >0.7.0 will start rendering properly. Sorry for the inconvenience and thanks for sharing sample app.

[sebastianpulak]

@sarveshnagpal Any update on this issue? It's been a while and our recordings also broke after ~12th December (older ones, from for example 5th December are working correctly).

[faraz-ahmad-uft]

@sarveshnagpal - Please update on this issue as our recordings are broken from 3 weeks.

[sarveshnagpal]

@sebastianpulak and @faraz-ahmad-uft -- Thanks for reporting. Could one of you please share a URL to a page (if possible, and publicly accessible) where recording is broken and it will help me debug the root cause.

[sebastianpulak]

@sebastianpulak and @faraz-ahmad-uft -- Thanks for reporting. Could one of you please share a URL to a page (if possible, and publicly accessible) where recording is broken and it will help me debug the root cause.

I have sent you an email with our page URL as I'd rather not share it publicly here. Hopefully it's a correct @microsoft.com email address as I haven't found a way to DM someone on GitHub

EDIT: I just had a look at our recordings and everything seems to be working, was there any fix for this matter in the meantime?

[mariusrudolph]

HI @sarveshnagpal : is there any news on that? We still don't have any CSS loaded correctly since Dec 13th.

[matheus-inacio]

Did my fix (#296) got reversed?

It was working fine for a couple of weeks, but now clarity is back to accessing the wrong relative resource base path.

[seancbarry]

Yeah, this is really bad for us, none of our recordings render anymore. Loved clarity so much but it's pretty much unusable till this is resolved.

[seancbarry]

@sarveshnagpal Don't suppose we have an ETA on this update?

[sarveshnagpal]

@sebastianpulak and @faraz-ahmad-uft -- Thanks for reporting. Could one of you please share a URL to a page (if possible, and publicly accessible) where recording is broken and it will help me debug the root cause.

I have sent you an email with our page URL as I'd rather not share it publicly here. Hopefully it's a correct @microsoft.com email address as I haven't found a way to DM someone on GitHub

EDIT: I just had a look at our recordings and everything seems to be working, was there any fix for this matter in the meantime?

Thank you @sebastianpulak for sending the link and confirming things are working again.

[sarveshnagpal]

Did my fix (#296) got reversed?

It was working fine for a couple of weeks, but now clarity is back to accessing the wrong relative resource base path.

No. Thanks @matheus-inacio for your fix -- it's an important one and is still in place. The internal bug I mentioned above should be resolved this month, the team is on it and will retroactively apply to older recordings too.

[sarveshnagpal]

@sarveshnagpal Don't suppose we have an ETA on this update?

Sorry about the delay here @seancbarry. Would it be possible to share a link to your page? If it's not a public website then may be consider sending a note to Clarity support with a mention of this github issue. I am curious because the change above shouldn't have caused regression for recordings that were already working -- so I do wish to dive in here and understand the regression. Thanks.

[sarveshnagpal]

HI @sarveshnagpal : is there any news on that? We still don't have any CSS loaded correctly since Dec 13th.

Thanks @mariusrudolph for reporting the issue. Would it be possible to share a URL where I can repro the recent regression? If you prefer, you can also reach out to Clarity support team with a mention of this Github issue and I will coordinate it with them.

[ui-jb]

Hello! Are there any updates on resolving this?

EDIT: It looks like my issue is related to my CSS not being publicly available. Once I made my CSS public, Clarity was able to access the CSS for the recording.