search

PostHog / posthog-flutter

PostHog Flutter SDK
https://posthog.com/docs/libraries/flutter
MIT License
55 stars 37 forks source link

Flutter Session Recordings (Android/iOS) #69

Open marandaneto opened 10 months ago

marandaneto commented 10 months ago

Description

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

Related issue https://github.com/PostHog/posthog/issues/13267 and https://github.com/PostHog/posthog/issues/12344

Related Flutter issues https://github.com/flutter/flutter/issues/129098 https://github.com/flutter/flutter/issues/66863 https://github.com/flutter/flutter/issues/117382

Kiruel commented 9 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 9 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 9 months ago

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

Kiruel commented 9 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 9 months ago

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

marandaneto commented 9 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 9 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 9 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 9 months ago

I just send you the Ticket 10418. Thanks.

marandaneto commented 9 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 8 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:

marandaneto commented 8 months ago

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

thisames commented 3 months ago

I believe that implementing a screen recording feature is not that complicated. The problem is doing this based on the listeners of the user's actions in the Flutter element tree. You would have to implement a track on the widget clicks and base the recording life cycle on that.

What is your idea? @marandaneto

marandaneto commented 3 months ago

I believe that implementing a screen recording feature is not that complicated. The problem is doing this based on the listeners of the user's actions in the Flutter element tree. You would have to implement a track on the widget clicks and base the recording life cycle on that.

What is your idea? @marandaneto

Yes, but I wonder if we can leverage the Android and iOS SDK first (via native), using screenshot mode, so all happens in native, if possible. The screen clicks, network, console logs, etc we can do through the Flutter bits on Dart.

thisames commented 2 months ago

I believe that implementing a screen recording feature is not that complicated. The problem is doing this based on the listeners of the user's actions in the Flutter element tree. You would have to implement a track on the widget clicks and base the recording life cycle on that. What is your idea? @marandaneto

Yes, but I wonder if we can leverage the Android and iOS SDK first (via native), using screenshot mode, so all happens in native, if possible. The screen clicks, network, console logs, etc we can do through the Flutter bits on Dart.

Yes, it is possible to take advantage of native screen captures. We would just have to have a channel that communicates with Flutter's clicks to the native listeners. I'll try to make a demo to see if this really works.

RCVZ commented 2 months ago

Over at Sentry, they are using toImage on a renderobject to get a screenshot.

https://github.com/getsentry/sentry-dart/pull/2209

Bruno-Meowtel commented 2 months ago

Hi there! We're using the PostHog Flutter SDK in our Mobile app and were wondering if there's an estimated timeline for when Session Recordings might be available? Any insights would be greatly appreciated. Thanks!

jonastg commented 2 months ago

I am in the same situation as @Bruno-Meowtel. We are using PostHog in web and mobile app and we are very interested in to have this feature for mobile apps.

swxdigital commented 2 months ago

We are also looking for session replays for Flutter! Currently, when enabled we see a white screen for web recordings, with the cursor moving around and clicking. @Bruno-Meowtel @jonastg

marandaneto commented 2 months ago

We are also looking for session replays for Flutter! Currently, when enabled we see a white screen for web recordings, with the cursor moving around and clicking. @Bruno-Meowtel @jonastg

@swxdigital please raise a new issue instead since this is about Android and iOS, and please share more context such as a recording link, browser, if you have canvas enabled in the project settings, etc. cc @daibhin

ndrslmpk commented 3 weeks ago

Are there any updates on session replays for flutter mobile? I would suggest to give this feature a higher priority, since this looks to be in progress since a year now.

marandaneto commented 3 weeks ago

Are there any updates on session replays for flutter mobile? I would suggest to give this feature a higher priority, since this looks to be in progress since a year now.

@ndrslmpk The work started at the beginning of this quarter and it should have an alpha version within the next 2-3 weeks. I don't think we have announced this as a working in progress before, just that it was planned, unless you have seen this somewhere? Happy to fix any misinformed deadlines.

jacobthecoder commented 1 day ago

Did the alpha launch? It's there a timeline for the beta?