fix: angular wrapped mutationobserver detection #1597

pauldambra · 2024-11-19T15:37:47Z

When Angular wraps MutationObserver and rrweb tracks mutations you get trapped in a fight with Angular's changedetection and performance suffers. We had multiple reports at posthog of performance degrading with recording active - even to the point of freezing the page entirely

We discovered that the checks for whether to load mutation observer from an iFrame were not correctly detecting the "taint" of angular wrapping the mutation observer.

It turns out detecting whether Zone is on the global object is a good enough proxy for Angular having tainted something

(there is some hand-waving here since you can configure zone.js to use a different global object name, but my guess is most people don't, and anyone with enough tech savvy to do that on purpose can also run the recorder outside of the angular zone)

This is confirmed as fixing performance issues in posthog-js v 1.187.1

You can see a wrapped MutationObserver from angular in this screenshot

a posthog customer provided this repro https://github.com/typedb/angular-posthog-freeze
with that when session recording started the page froze immediately
with this fix it does not

changeset-bot · 2024-11-19T15:37:50Z

🦋 Changeset detected

Latest commit: 7336ce9

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

This PR includes changesets to release 19 packages

Name	Type
@rrweb/record	Patch
rrweb	Patch
rrweb-snapshot	Patch
rrdom	Patch
rrdom-nodejs	Patch
rrweb-player	Patch
@rrweb/all	Patch
@rrweb/replay	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

packages/utils/src/index.ts

pauldambra · 2024-11-29T11:21:57Z

packages/utils/src/index.ts

+  if (!isFunction(x)) {
+    return false;
+  }
+  const prototypeKeys = Object.getOwnPropertyNames(x.prototype || {});
+  return prototypeKeys.some((key) => key.indexOf('__zone'));
+};


ah, no, i've just had to change this in prod at posthog

will wait for a few more customers to report it works now

turns out I'm still an idiot, -1 is truthy, and this always returns true

interestingly, that meant that all browsers and sessions were treating all things as tainted and loading them from an iframe

in safari and mobile safari particularly this meant often there was no mutation observer

which suggests that the iframe loading code is bugged in some way (or just not guaranteed maybe)

yep, lots of reports that this change has fixed things for folk who aren't using Angular
And for folk using Angular there's no more reports of perfomance issues

But I still see folk where they are using Angular and they can't get untainted things from an iframe when using Safari

.changeset/moody-experts-build.md

Co-authored-by: Justin Halsall <[email protected]>

* fix: angular wrapped mutationobserver detection * add change set * fix * prettier * following posthog prod * manually prettier * Update .changeset/moody-experts-build.md Co-authored-by: Justin Halsall <[email protected]> --------- Co-authored-by: Justin Halsall <[email protected]>

* Single style capture (rrweb-io#1437) Support a contrived/rare case where a <style> element has multiple text node children (this is usually only possible to recreate via javascript append) ... this PR fixes cases where there are subsequent text mutations to these nodes; previously these would have been lost * In this scenario, a new CSS comment may now be inserted into the captured `_cssText` for a <style> element to show where it should be broken up into text elements upon replay: `/* rr_split */` * The new 'can record and replay style mutations' test is the principal way to the problematic scenarios, and is a detailed 'catch-all' test with many checks to cover most of the ways things can fail * There are new tests for splitting/rebuilding the css using the rr_split marker * The prior 'dynamic stylesheet' route is now the main route for serializing a stylesheet; dynamic stylesheet were missed out in rrweb-io#1533 but that case is now covered with this PR This PR was originally extracted from rrweb-io#1475 so the initial motivation was to change the approach on stringifying <style> elements to do so in a single place. This is also the motivating factor for always serializing <style> elements via the `_cssText` attribute rather than in it's childNodes; in rrweb-io#1475 we will be delaying populating `_cssText` for performance and instead recorrding them as assets. Thanks for the detailed review to Justin Halsall <[email protected]> & Yun Feng <https://github.com/YunFeng0817> * Simplify the hover replacement function (rrweb-io#1535) Simplify the hover replacement function, which has been borrowed from postcss-pseudo-classes Note: 'parses nested commas in selectors correctly' was failing after this PR, however I don't think that the previous behaviour was desirable, so have added a new test to formalize this expectation * fix some typos in optimize-storage.md (rrweb-io#1565) * fix some typos in optimize-storage.md * Update docs/recipes/optimize-storage.md * Create metal-mugs-mate.md --------- Co-authored-by: Justin Halsall <[email protected]> * fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#1561) * fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#213) We encountered an issue where replays with invalid attributes (e.g. `@click`) would break rendering the replay after seeking. The exception bubbles up to [here](https://github.com/rrweb-io/rrweb/blob/62093d4385a09eb0980c2ac02d97eea5ce2882be/packages/rrweb/src/replay/index.ts#L270-L279), which means the replay will continue to play, but the replay mirror will be incomplete. Closes https://github.com/getsentry/team-replay/issues/458 * add changeset * fix(snapshot): dimensions for blocked element not being applied (rrweb-io#1331) fix for replay of a blocked element when using 'fast forward' (rrdom) - Dimensions were not being properly applied when you seek to a position in the replay. Need to use `setProperty` rather than trying to set the width/height directly * ref: isParentRemoved to cache subtree (rrweb-io#1543) * ref: isParentRemoved to cache subtree * ref: cache at insertion too * ref: remove wrapper function --------- Co-authored-by: Justin Halsall <[email protected]> * fix: angular wrapped mutationobserver detection (rrweb-io#1597) * fix: angular wrapped mutationobserver detection * add change set * fix * prettier * following posthog prod * manually prettier * Update .changeset/moody-experts-build.md Co-authored-by: Justin Halsall <[email protected]> --------- Co-authored-by: Justin Halsall <[email protected]> * chore: abstract types to shared package (rrweb-io#1593) * chore: update types * small typing change * fix typing issue * typed node * add extra lint skip * add changeset --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: Justin Halsall <[email protected]> * Apply formatting changes * fix: wrong imports for Amplitude * chore: fix changeset names --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: Riadh Mouamnia <[email protected]> Co-authored-by: Justin Halsall <[email protected]> Co-authored-by: Billy Vong <[email protected]> Co-authored-by: Jonas <[email protected]> Co-authored-by: Paul D'Ambra <[email protected]> Co-authored-by: David Newell <[email protected]> Co-authored-by: jxiwang <[email protected]>

fix: angular wrapped mutationobserver detection

825b0ba

pauldambra mentioned this pull request Nov 19, 2024

fix: patch angular wrap detection in rrweb PostHog/posthog-js#1543

Merged

add change set

44c84b2

pauldambra closed this Nov 19, 2024

fix

82a92fd

pauldambra reopened this Nov 19, 2024

prettier

98254bf

pauldambra commented Nov 20, 2024

View reviewed changes

packages/utils/src/index.ts Outdated Show resolved Hide resolved

Juice10 self-requested a review November 29, 2024 09:05

pauldambra commented Nov 29, 2024

View reviewed changes

pauldambra added 2 commits November 29, 2024 11:50

following posthog prod

d781a44

manually prettier

5131ca8

eoghanmurray added the waiting-for-more-info label Dec 2, 2024

Juice10 reviewed Dec 6, 2024

View reviewed changes

.changeset/moody-experts-build.md Outdated Show resolved Hide resolved

Update .changeset/moody-experts-build.md

7336ce9

Co-authored-by: Justin Halsall <[email protected]>

Juice10 approved these changes Dec 6, 2024

View reviewed changes

Juice10 merged commit bd9eb70 into rrweb-io:master Dec 6, 2024
6 checks passed

github-actions bot mentioned this pull request Oct 4, 2024

Version Packages (alpha) #1554

Merged

pauldambra mentioned this pull request Jan 23, 2025

safari intermittently not recording changes in session replay PostHog/posthog#27831

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: angular wrapped mutationobserver detection #1597

fix: angular wrapped mutationobserver detection #1597

pauldambra commented Nov 19, 2024 •

edited

Loading

changeset-bot bot commented Nov 19, 2024 •

edited

Loading

pauldambra Nov 29, 2024

pauldambra Nov 29, 2024

pauldambra Dec 5, 2024

fix: angular wrapped mutationobserver detection #1597

fix: angular wrapped mutationobserver detection #1597

Conversation

pauldambra commented Nov 19, 2024 • edited Loading

changeset-bot bot commented Nov 19, 2024 • edited Loading

🦋 Changeset detected

pauldambra Nov 29, 2024

Choose a reason for hiding this comment

pauldambra Nov 29, 2024

Choose a reason for hiding this comment

pauldambra Dec 5, 2024

Choose a reason for hiding this comment

pauldambra commented Nov 19, 2024 •

edited

Loading

changeset-bot bot commented Nov 19, 2024 •

edited

Loading