fix: dropped styles on route transition

[daibhin]

Problem

Relates to https://posthoghelp.zendesk.com/agent/tickets/14512 (and probably a bunch more support tickets)

This could also be related to rrweb-io/rrweb#1230

Addresses an issue in recordings where styles were being dropped during some route changes in SPAs

Reproduction

It's not fully clear to me how this happens or what the correct behaviour is but the problem exists when:

1. You have a relative link element on the page:

<link href="./_app/immutable/assets/filename.css" rel="stylesheet">

2. This gets loaded into the documents styleSheets array with the href set as https://domainname.com/_app/immutable/assets/filename.css

3. Sometime later the domain changes away from the index page to another root e.g. https://domainname.com/home

4. When taking the next full snapshot rrweb tries to fetch the stylesheet associated with the href:

const stylesheet = Array.from(doc.styleSheets).find((s) => {
  return s.href === (n as HTMLLinkElement).href;
});

5. n.href now evaluates to https://domainname.com/home/_app/immutable/assets/filename.css which no longer matches the href of the stylesheet on the document and hence cannot be "found". Presumably the href on the document stylesheet does not change because the SPA is not doing a full page transition

Changes

This PR adds a backup check to look for the CSS on the root of the domain

• It only does this for CSS files
• It only does the lookup if a stylesheet cannot initially be found

This feels like the safest change for now but will get the opinion of others in the rrweb community too

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
posthog-js	✅ Ready (Inspect)	Visit Preview	Jun 25, 2024 2:51pm

[github-actions]

Size Change: +528 B (+0.05%)

Total Size: 1.04 MB

Filename	Size	Change
dist/array.full.js	246 kB	+176 B (+0.07%)
dist/recorder-v2.js	109 kB	+176 B (+0.16%)
dist/recorder.js	109 kB	+176 B (+0.16%)

ℹ️ View Unchanged

Filename	Size
dist/array.js	143 kB
dist/es.js	143 kB
dist/exception-autocapture.js	10.4 kB
dist/module.js	144 kB
dist/surveys-module-previews.js	60.3 kB
dist/surveys.js	65 kB
dist/tracing-headers.js	8.26 kB
dist/web-vitals.js	5.79 kB

_{compressed-size-action}

[pauldambra]

i'd love to have an error handler we could pass in to rrweb so we could log errors like this - they're so difficult to find!

[daibhin]

@pauldambra totally agree, that would be great to have. This technically isn't an error. It is expected that a stylesheet shouldn't be found for links to JS files. I'm somewhat special casing things here in cases when there is a .css suffix on the file

[MathiasWP]

After updating to v1.141.3 we get the following warning in our console:

[daibhin]

@MathiasWP that's super weird, I don't see a reference to e.href anywhere in the code I added. Will look into this straight away

[daibhin]

A fix has just been merged in #1275. Thanks for reporting this @MathiasWP