Flutter Session Recordings (Android/iOS)

PostHog / posthog-flutter

PostHog Flutter SDK

https://posthog.com/docs/libraries/flutter

MIT License

48 stars 34 forks source link

Flutter Session Recordings (Android/iOS) #69

Open marandaneto opened 6 months ago

marandaneto commented 6 months ago

Description

https://github.com/PostHog/posthog/issues/12344#issuecomment-1421007621 People also asked on the slack community channel.

Kiruel commented 5 months ago

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 commented 5 months ago

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 commented 5 months ago

I'm using rudderstack to handle posthog, see https://github.com/rudderlabs/rudder-sdk-flutter/issues/151 for more info.

Kiruel commented 5 months ago

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 commented 5 months ago

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

marandaneto commented 5 months ago

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

daibhin commented 5 months ago

@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 commented 5 months ago

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 commented 5 months ago

I just send you the Ticket 10418. Thanks.

marandaneto commented 4 months ago

@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 commented 4 months ago

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 (https://github.com/PostHog/posthog-js/pull/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...

marandaneto commented 4 months ago

Reopened because only the Flutter web session recording is supported right now. This issue also tracks Android and iOS session recording support.