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

[ndrslmpk]

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]

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]

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

[marandaneto]

PR is here and ready for review.
I'll get it merged/released early next week.
Let me know if you're willing to be a beta tester, thanks.

[swxdigital]

Yes, we would be delighted to beta test!! Colin Miller

…

On Nov 28, 2024, at 6:21 AM, Manoel Aranda Neto ***@***.***> wrote: PR is here <#123> and ready for review. I'll get it merged/released early next week. Let me know if you're willing to be a beta tester, thanks. — Reply to this email directly, view it on GitHub <#69 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWP2NMRXNDRLXW4AHG3TJD32C3VBDAVCNFSM6AAAAABBJZXLG2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKMBVG43DAMRYGY>. You are receiving this because you were mentioned.

[jacobthecoder]

Yes please! Would love to be a beta tester. Thank you!

[MappyLiam]

Love to be a beta tester.

[marandaneto]

Docs PR
The link will be this one as soon as it's merged.

For the beta tester, please just follow the instructions, install, run it, and let us know if you face any issues.
Please create new issues for that with detailed info such as the OS, the version, the Flutter version, the SDK version, the link of a bad recording, etc.

Thanks a bunch.