Page is crashing during recording due to processing elements that are missed in current document

[dkozlovskyi]

Steps to reproduce:

1. Start the rrweb recording process
2. In your main tab navigate to https://edition.cnn.com/travel/article/qantas-project-sunrise-worlds-longest-flights-intl-hnk/index.html
3. Open the page in the new tab by clicking on the link was still a priority for Qantas. Do not switch to newly opened tab.
4. Open the page in the new tab by clicking on the link connecting Melbourne and Dallas. Do not switch to the newly opened tab.
5. In your main tab observe development console errors and page performance.

Actual result: The page hangs, and within a few navigations, it crashes. rrweb exceptions are an observer in dev. console. Error happening due to processing element that doesn't exist in the document.
Expected result: The performance should not be impacted. Logic should better detect cases where an element doesn't exist in the document.

[dkozlovskyi]

The issue can be fixed by changing validation of rootShadowHost in mutation.ts file.

Chaging it from (rootShadowHost === null || ...); to (!rootShadowHost || ...); solves the issue.

Please add your comments to this case. Happy to provide more details or make a PR.
Thanks.

[YunFeng0817]

Thank you very much for the report. Your solution is correct. I didn't expect rootShadowHost to be undefined, because of the TS‘s type inference. Would you like to make a PR with a comment referenced to this Issue?

[dkozlovskyi]

Thanks for the quick reply.
Sure, here you go

[pavlogavryliuk]

@Mark-Fenng is it expected that rootShadowHost to be a string?

[YunFeng0817]

@pavlogavryliuk No, it should be an element or null.

[pavlogavryliuk]

@Mark-Fenng hmm, i caught an issue, when rootShadowHost is string

[YunFeng0817]

That's ok, would you like to open a new issue and describe how to reproduce the bug?

[pavlogavryliuk]

@Mark-Fenng new issue about this was created.