fix: angular wrapped mutationobserver detection #1597
Conversation
🦋 Changeset detectedLatest commit: 7336ce9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 19 packages
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
Outdated
| if (!isFunction(x)) { | ||
| return false; | ||
| } | ||
| const prototypeKeys = Object.getOwnPropertyNames(x.prototype || {}); | ||
| return prototypeKeys.some((key) => key.indexOf('__zone')); | ||
| }; |
There was a problem hiding this comment.
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
There was a problem hiding this comment.
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)
There was a problem hiding this comment.
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
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]>
* 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]>
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
Zoneis 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