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...

[marandaneto]

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

[thisames]

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]

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]

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]

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

getsentry/sentry-dart#2209

[Bruno-Meowtel]

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]

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]

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]

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