Angular : Page frozen when recording and then hovering over button with tooltip

[ZakYahi]

Hello,

When I try to record a page everything seems to record normally but when I hover a button to show a tooltip, the page freezes and becomes unresponsive.
The cpu spikes to 100 and memory usage increases.

The project is based on ngx-admin which is based on angular.

To reproduce this :

• git clone https://github.com/akveo/ngx-admin
• cd ngx-admin
• git checkout c2ce881c (this is the version my project is based on, i tried the latest but does not work too)
• npm install
• npm i --save rrweb
• edit src/app/pages/modal-overlays/tooltip/tooltip.component.ts so the class contains :
  • export class TooltipComponent { constructor() { record({ emit: (event) => { console.log(event); }, }); } }
• npm run start
• open localhost:4200
• Navigate to Modal & Overlays > Tooltip
• Hover any tooltip

It seems other people had the same problem but no solution or reproduction was posted (#432, #167).

Also, when I use the repl tool and point it to my link, everything works nicely.

Thanks in advance for the help!

[ZakYahi]

Well I retried today and the repl tool is not working anymore.

[Yuyz0112]

Start to debug

Now I found it will emit this event infinitely when hovering tooltip:

{"source":0,"texts":[],"attributes":[{"id":1188,"attributes":{"style":"pointer-events: auto; bottom: 643px; left: 603.547px; transform: translateY(-8px);"}},{"id":1187,"attributes":{"style":"top: 0px; left: 0px; height: 100%; width: 100%;"}}],"removes":[],"adds":[]}

[Yuyz0112]

Okay, after some debugging, I can simplify the reproduce code to this basic mutation observer usage

export class TooltipComponent {
  constructor() {
    const observer = new MutationObserver(console.log);
    observer.observe(document, {
      attributes: true,
      attributeOldValue: true,
      characterData: true,
      characterDataOldValue: true,
      childList: true,
      subtree: true,
    });
  }
}

A native mutation observer can make the tooltip into a dead loop. So this is not rrweb's issue, but I'm going to check why this happened.

[Yuyz0112]

Finally, I find the root cause is an Angular bug: angular/angular#26948 .

Looks like using window[window.Zone.__symbol__("MutationObserver")] to get the original MutationObserver can fix the problem, going to send a PR for that.

[ZakYahi]

Thank you very much for the investigation!