Investigate support for shadow dom + web components

[billyvg]

Could throw these examples in codesandbox and test if replay works https://github.com/mdn/web-components-examples

[bruno-garcia]

Please add an entry to the troubleshooting page: https://docs.sentry.io/platforms/javascript/session-replay/troubleshooting/

This will help point customers to the right info

[bruno-garcia]

A customer having issues (blank screens) mentioned their stack is:

It’s a React SPA using two different component libraries, one of them Web components. We are also using Babylon.js for the canvas.

If we have guidance here we can also add to the troubleshooting page

[billyvg]

I made this sandbox to test web components and iframe: https://codesandbox.io/s/compassionate-hugle-vxbye7

They are simple test cases, but they work. Not sure what to write in the troubleshooting, because we know there are cases where it doesn't work and there's a bug with rrweb player, but not sure the root cause.

[bruno-garcia]

Lets close this. If new reports of issues come, we'll open a new issue and get some repros to look further.
Thanks @billyvg 🙏

[vedtam]

Hi,

I'm having the same issue: blank page, actually blank components (body) hosting multiple LitElement based web components:

The recording shows this:

Instead of this (a screenshot of the page):

When inspecting the video player on Sentry, we can see that nodes are missing from the shadow root, but the style:

This is how it supposed to be:

Any help would be appreciated.

[vedtam]

@bruno-garcia, hope you have the chance to reopen this issue.

[billyvg]

@vedtam Can you please open a new issue? If you include a link to a replay that would help as well (or feel free to email me a link billy at sentry.io)

[billyvg]

@vedtam Actually, here's an existing issue: #8123

[vedtam]

@billyvg I see, thanks. However this isn't just an Angular issue. LitElement is a light wrapper around the Shadow DOM which as you know it entered the HTML spec for some time now. Angular uses that under the hood as well I guess.

Do you need a demo, minimally reproducible example?

[billyvg]

@vedtam Ah agreed, #8123 shouldn't be Angular specific, let's move the convo there -- a minimally reproducible example would be great!

[vedtam]

Ok, thanks. Will go there and share a demo.