Styles are messed up

We have deployed OpenReplay on our ec2 instance. Our application is using Angular.
When we do session recordings we see some styles are missing in the session recording. Most of these styles are in JS files after angular build and not exactly in CSS files (CSS files are loaded and general styles in the app is working but some specific parts are not rendered). I also noted that some JS files show 4xx-5xx in the session recording. I have tried to access the same URLs to verify they are working and I made sure these JS files are actually accessible.

Openreplay version: v1.19.0
Angular version: v14

Resource timings is an unreliable API that doesn’t provide any failure data or flags so we consider something with HTTP code >=400 when duration of the connection is (in current/prev versions) + transferred data is also 0 (in new versions, which means that request had 0ms connection and transmitted 0 bytes of data).

As for styles, open browser inspector -> network then check if session attempts to load styles (check inside iframe collection inside the list as well, since replay is played in artificial iframe). If something is missing here, then check console for errors (you can paste __OPENREPLAY_DEV_TOOLS__.logStuff() then reload the page to enable debug info), if everything is there but failing then its caching issue on backend services.

Hello,

I’m encountering a similar issue after deploying OpenReplay. Many sessions have their styles “messed up” during replay.

Since users are able to use the service without issues, I assume the styles are loading correctly in real time. However, when I check the Network console during replay, I notice HTTP errors with codes >= 400.

Interestingly, the Network console also indicates that some resources are “Served from cache”:

Could it be that OpenReplay is mistakenly interpreting cached content as an error? Any insights or guidance on how to resolve this would be greatly appreciated!

Openreplay version : v1.21.0

It could be yes. What version of tracker are you using?
Also, are you stylesheets behind a proxy or a CDN? Your OpenReplay instances will basically try to cache those stylesheets, which may be restricted by your CDN.
I’d look into the assets service logs by running openreplay -l assets. You should see the errors there.

I’m using Cloudflare as a CDN, so maybe it is blocking OpenReplay instances.

I’m trying to bypass it by using resourceBaseHref option. How can I check that this option is working ? it there a way to see all logs from assets service ?

Can you try running openreplay -l "assets --no-follow"?
The best way to check if the option is working is stylesheets you see in the replay.