Flutter Session Recordings (Android/iOS)

[marandaneto]

Description

PostHog/posthog#12344 (comment)
People also asked on the slack community channel.

Related issue PostHog/posthog#13267 and PostHog/posthog#12344

Related Flutter issues
flutter/flutter#129098
flutter/flutter#66863
flutter/flutter#117382

[Kiruel]

Do you think we can already use it in a Web environment via:
https://posthog.com/docs/session-replay/installation#add-to-your-website-and-product

If we add this script can we already got session record in Web ?
Thanks,

[marandaneto]

Do you think we can already use it in a Web environment via: posthog.com/docs/session-replay/installation#add-to-your-website-and-product

If we add this script can we already got session record in Web ? Thanks,

That has to be tested, I am unsure, it might work for the html renderer but not for canvaskit I guess.
Maybe the canvaskit renderer requires canvas support which is in BETA yet.

Would you like to give it a try?

[Kiruel]

I'm using rudderstack to handle posthog, see rudderlabs/rudder-sdk-flutter#151 for more info.

[Kiruel]

I was able to use session recording, with the JS configuration. But I got some white background on the session record event with the Capture canvas elements enabled.

Using flutter build web --web-renderer canvaskit or flutter build web --web-renderer html change nothing. So I see some click/textinput but with with background. (so can't see the text white etc...).

[marandaneto]

@Kiruel can you share your JS configuration?
@daibhin would be interested in checking this out.

[marandaneto]

@Kiruel which version of the JS SDK have you tried? there was a bug fixed in this version, not sure if related though.

[daibhin]

@Kiruel I would certainly like to look into this more for you. Could you send a report using the in-app support form with a link to the problematic recording and I can take a closer look.

[Kiruel]

I'm using the SDK rudderstack, to send session recording. With the JS config for web env. I can send you all information in DM (slack?) or in the in-app form you send me.

[Kiruel]

I just send you the Ticket 10418. Thanks.

[marandaneto]

@daibhin I can also reproduce this locally.
https://us.posthog.com/project/41706/replay/018dd001-6a18-7c6b-9b1b-e6f2559e32be
Just run flutter run -d chrome --web-renderer canvaskit on this folder https://github.com/PostHog/posthog-flutter/tree/main/example

[daibhin]

It's taken me a while to investigate this properly. It looks like Flutter wraps the canvas in a custom HTML element. I believe we are not correctly capturing the children of that element and hence ignoring the canvas. Seeing if there is a way around that, two ideas I'm exploring:

• Allowing a different root to be set so we can skip the custom elements in the tree (feat: allow custom replay root posthog-js#1061). Not my favourite solution to expose that because we haven't needed it before now
• Seeing if there is a way for rrweb to capture custom elements. Will dig on that a little further...