fix: Handle exceptions thrown from postcss when calling adaptCssForReplay #1580

guntherjh · 2024-10-08T17:43:27Z

This PR adds a try/catch around postcss().process() so that exceptions won't cause playback to crash. I was encountering issues where invalid CSS was being passed to postcss which would result in CssSyntaxError. I am still investigating why invalid CSS is passed to adaptCssForReplay in the first place, but for now this change should at least make sure any exceptions from postcss are at least handled and logged. I am currently using warn to log the exceptions but am happy to switch that to something else if need be.

Related discussion in rrweb slack: https://rrweb.slack.com/archives/C01BYDC5C93/p1727975312250899

changeset-bot · 2024-10-08T17:43:30Z

🦋 Changeset detected

Latest commit: 27f01fe

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 19 packages

Name	Type
rrweb-snapshot	Patch
rrweb	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/all	Patch
@rrweb/replay	Patch
@rrweb/record	Patch
@rrweb/types	Patch
@rrweb/packer	Patch
@rrweb/utils	Patch
@rrweb/web-extension	Patch
rrvideo	Patch
@rrweb/rrweb-plugin-console-record	Patch
@rrweb/rrweb-plugin-console-replay	Patch
@rrweb/rrweb-plugin-sequential-id-record	Patch
@rrweb/rrweb-plugin-sequential-id-replay	Patch
@rrweb/rrweb-plugin-canvas-webrtc-record	Patch
@rrweb/rrweb-plugin-canvas-webrtc-replay	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

otan · 2024-10-10T03:15:56Z

heads up, i think the root cause is #1575

guntherjh · 2024-10-10T13:14:10Z

@otan Good call out! That definitely seems like one of the ways invalid CSS can be passed to postcss. I'm also looking at another potential cause and will report back here if I find anything useful (or if it turns out to be the same problem as the one described in the issue you linked).

For this particular PR, I just wanted to simply make sure exceptions from postcss were handled so it wouldn't cause playback to crash.

- Apply formatting changes - Remove import of postcss in test file Upstream PR: rrweb-io#1580

- Apply formatting changes - Remove import of postcss in test file

eoghanmurray · 2024-11-29T20:39:09Z

#1600 should fix that those types of fragments get passed into postcss in the first place. Happy to add this try/except but hopefully it shouldn't be encountered after #1600 (assuming the underlying css is fine)

guntherjh · 2024-12-02T21:35:58Z

@eoghanmurray thanks for taking a look at my PR! I'll need to double check the original issue I was encountering to see if #1600 fixes it (I thought I checked and it didn't but I honestly can't remember 😓). In any case, I am inclined to keep the try/catch just to prevent any future exceptions from postcss from going unhandled. I'm happy to make any updates to how the exceptions are logged (or any other issue you see). Thanks again for the review!

* Fix up the 'should replace the existing DOM nodes on iframe navigation with `isAttachIframe`' test (rrweb-io#1636) - it was working for me when the test was run in isolation (`-t` option), but when the entire cross-origin-iframes test was run, the change of iframe contents didn't seem to happen in time * [chore]: Update actions/upload-artifact to v4 (rrweb-io#1643) * update actions/upload-artifact to v4 --------- Co-authored-by: Eoghan Murray <eoghan@getthere.ie> * Fix a code path where masking could be skipped on textareas (rrweb-io#1599) * Fixes rrweb-io#1596 * [chore] Cache yarn packages for CI (rrweb-io#1646) * [chore] Cache yarn packages for CI * Cache yarn in release.yml * [chore] Update deprecated download artifact on CI (rrweb-io#1647) * I'm merging even though ESLint is stlll failing in Github Actions as I believe it's running actions _without_ this PR applied yet * Fix env puppeteer error in cross-origin-iframes.test.ts (rrweb-io#1629) * chore(ci): track bundle size (rrweb-io#1630) * chore(ci): track bundle size --------- Co-authored-by: pauldambra <pauldambra@users.noreply.github.com> * Fix adapt css with split (rrweb-io#1600) Fix for rrweb-io#1575 where postcss was raising an exception * adapt the entire CSS as a whole in one pass with postcss, rather than adapting each split part separately * break up the postcss output again and assign to individual text nodes (kind of inverse of splitCssText at record side) * impose an upper bound of 30 iterations on the substring searches to preempt possible pathological behavior * add tests to demonstrate the scenario and prevent regression More technical details: * Fix algorithm; checks against `ix_end` within loop were incorrect when `ix_start` was bigger than zero. * Fix that length check against wrong array was causing 'should record style mutations with multiple child nodes and replay them correctly' test to fail. Note on last point: I haven't looked into things more deeply than that the test was complaining about missing .length after `replayer.pause(1000);` * Warn instead of fail on exceptions thrown from postcss (rrweb-io#1580) * postcss was introduced in rrweb-io#1458 for use within adaptCssForReplay * rrweb-io#1600 fixes the main case where invalid css could be introduced when if valid css from the output of `sheet.cssRules` was split according to how it was split across text nodes of the <style> * the guard introduced here is still useful as we likely in future will switch to capturing the raw stylesheet contents (both <style> and <link>), at which point we will be much less confident of getting valid css * Fix splitCssText again (rrweb-io#1640) Fixes a browser 'lock up' at record time due to a presence of large amounts of css in <style> elements, which are split over multiple text nodes, which triggers the new code added in rrweb-io#1437 (see that PR for full explanation of why this all exists). rrweb-io#1437 was not written with performance in mind as it was believed to be an edge case, but things like Grammarly browser extension (rrweb-io#1603) among other scenarios were triggering pathological behavior, some of which was solved in rrweb-io#1615. See also rrweb-io#1640 (comment) for further discussion. * Fix the case when there are multiple matches and we end up not finding a unique one - just go with the best guess when there are many splits by looking at the previous chunk's size * Also add '0px' -> '0' stylesheet normalization, which also fixes the sample problem in a different way * Add new test and modify it so that it can trigger a failure in the absence of the '0px' normalization; there may be other unknown ways of triggering a similar bug, so ensure that the primary 'best guess' method doesn't suffer a regression * Leverage the 'best guess' method so that we can quit after 100 iterations trying to find a unique substring; hopefully this bit along with the `iterLimit` already added will prevent any future pathological cases. Failing example extracted from large files identified by Paul D'Ambra (Posthog) ... see comment from MartinWorkfully: PostHog/posthog-js#1668 * fix: move patch function into utils to improve bundling (rrweb-io#1631) * fix: move patch function into utils to improve bundling --------- Co-authored-by: pauldambra <pauldambra@users.noreply.github.com> Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> --------- Co-authored-by: Eoghan Murray <eoghan@getthere.ie> Co-authored-by: Kevin Townsend <11738094+kevinatown@users.noreply.github.com> Co-authored-by: Justin Halsall <Juice10@users.noreply.github.com> Co-authored-by: Paul D'Ambra <paul@posthog.com> Co-authored-by: pauldambra <pauldambra@users.noreply.github.com> Co-authored-by: John Henry Gunther <jguntherenator@gmail.com>

Vadman97 mentioned this pull request Oct 9, 2024

fix session replay crash highlight/highlight#9365

Merged

guntherjh force-pushed the jg-app-handle-postcss-exceptions branch from a08c325 to ae97dac Compare October 14, 2024 14:14

daibhin approved these changes Oct 15, 2024

View reviewed changes

guntherjh added a commit to pendo-io/rrweb that referenced this pull request Oct 21, 2024

Handle exceptions thrown from postcss when calling adaptCssForReplay

c1accef

- Apply formatting changes - Remove import of postcss in test file Upstream PR: rrweb-io#1580

guntherjh force-pushed the jg-app-handle-postcss-exceptions branch from ae97dac to c1accef Compare October 21, 2024 17:53

Handle exceptions thrown from postcss when calling adaptCssForReplay

27f01fe

- Apply formatting changes - Remove import of postcss in test file

guntherjh force-pushed the jg-app-handle-postcss-exceptions branch from c1accef to 27f01fe Compare October 21, 2024 17:54

Juice10 assigned eoghanmurray Nov 8, 2024

pauldambra mentioned this pull request Feb 3, 2025

fix: Handle exceptions thrown from postcss when calling adaptCssForReplay PostHog/posthog-rrweb#49

Merged

eoghanmurray approved these changes Feb 6, 2025

View reviewed changes

eoghanmurray merged commit 47a7c3f into rrweb-io:master Feb 6, 2025
6 checks passed

github-actions bot mentioned this pull request Feb 6, 2025

Version Packages (alpha) #1605

Open

eoghanmurray mentioned this pull request Feb 6, 2025

[Bug]: /* rrweb_split */ logic causing valid sessions to crash on replayer #1575

Closed

1 task

github-actions bot mentioned this pull request Feb 6, 2025

Version Packages (alpha) kevinatown/rrweb#2

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Handle exceptions thrown from postcss when calling adaptCssForReplay #1580

fix: Handle exceptions thrown from postcss when calling adaptCssForReplay #1580

guntherjh commented Oct 8, 2024

changeset-bot bot commented Oct 8, 2024 •

edited

Loading

otan commented Oct 10, 2024

guntherjh commented Oct 10, 2024

eoghanmurray commented Nov 29, 2024

guntherjh commented Dec 2, 2024

fix: Handle exceptions thrown from postcss when calling adaptCssForReplay #1580

fix: Handle exceptions thrown from postcss when calling adaptCssForReplay #1580

Conversation

guntherjh commented Oct 8, 2024

changeset-bot bot commented Oct 8, 2024 • edited Loading

🦋 Changeset detected

otan commented Oct 10, 2024

guntherjh commented Oct 10, 2024

eoghanmurray commented Nov 29, 2024

guntherjh commented Dec 2, 2024

changeset-bot bot commented Oct 8, 2024 •

edited

Loading