React Native Session Recordings

joethreepwood commented 1 year ago

The Session Recording team is currently considering improving PostHog by adding the ability to capture session recordings from mobile devices. This is part of work documented on https://github.com/PostHog/product-internal/issues/354.

There are many recording tools out there for web, and different tools for mobile -- but few for both. If we could unlock mobile session recordings, even with reduced functionality, it could be huge - especially for self-hosted customers who have few options in this space. Additionally, this would make PostHog more competitive with other session recording tools, such as HotJar.

🗂 Considered Goals

[ ] Run a PoC implementation using React Native

Please note we are considering iOS mobile recordings and Android recordings as separate issues.

These goals are being considered by the Session Recording Team and we'd love to hear user feedback, as well as ideas for stretch goals or implementation. Please add to this issue!

If you like this idea, please leave a 👍 or ❤️ reaction on this post to vote for it -- your votes and feedback help us prioritize what to work on next!

kovilsingh commented 1 year ago

This will be a really helpful feature as this could be a blue ocean move for posthog! I haven’t come across a platform which offers what posthog does (if you include mobile session recording).

chen-rn commented 1 year ago

This would be really great!

I'm curious how you guys are thinking about the high level architecture of implementing session recording for react native.

Is it gonna come down to capturing the virtual DOM deltas? Or an actual recording of sorts?

Hoss3770 commented 1 year ago

Would be awesome :)

lezgin-bakircioglu-qred commented 1 year ago

This feature would be really helpful for us

Arkan4ik commented 1 year ago

@joethreepwood will you have session recording like fullstory service has?any estimates? thank you

jamesefhawkins commented 1 year ago

mini update: we've hired a full time mobile engineer who will focus on some of these sdks (rn/ios/android). he starts in september. watch this space. thanks for giving signal over what you want!

Is it gonna come down to capturing the virtual DOM deltas? Or an actual recording of sorts?

we think something that captures the events then reconstructs the page instead of an actual recording is more likely in line with ie app store requirements, but we're not set yet.

wowitsjerome commented 1 year ago

Throwing my vote in here for session recordings for RN

octalpixel commented 1 year ago

Throwing my vote in here for session recordings for RN

Joining you here! Upvoting for this feature!

marandaneto commented 1 year ago

We're working on Session Replay for Mobile, the goal is to playback sessions to diagnose UI issues, improve support, and get context for nuanced user behavior.

We're interested in understanding how useful it is, the expectations you may have, etc, for example:

Is high fidelity important? would be okay if it was a representation of the UI instead of screenshots?
Is masking text (due to PII) a must-have feature?
How would you define a session (the start and end of the recording)? would you expect that to be done automatically or manually via an API eg PostHog.startRecording and stopRecording?
Would you like to sample recordings or do you prefer to have it all? (think about data usage, storage, slow internet)
What's an acceptable performance impact while the recording is running?
Is network inspection useful? (HTTP status code, request, and response payload).
And much more...

We'd like to understand a little bit better so we are sure that we are building a feature that people would love to use.

Any feedback is appreciated, let me know if you'd be willing to trade a bit of your time for being a preview user as soon as it's out.

Thanks.

shubhamsingh37 commented 1 year ago

Joining you here! Upvoting for this feature!

chen-rn commented 1 year ago

@marandaneto Great to hear that this is being worked on!

For us, the main incentive for session recording is ensure there's nothing wrong with our core flow. Generally, with any new product we launch, we'd like to watch a decent amount of user onboardings to ensure there are no major issues with the core flow. For example, in the past, using UXCam, we were able to identify a broken phone number area code selector that effected about 50% of international users. Something that would've been difficult to know with events alone, even if we were to filter by country.

Beyond that, we'll frequently occasionally check to see if we can find any interesting user behavior as an inspiration for product ideas. We see the debugging usecase and understand why Highlight has been quite popular for the web, but it's very much a secondary offering for us compared to what's mentioned above!

To answer your questions:

Fidelity: Using a representation of UI is okay. It's not too hard to figure out which page the user is on. As long as we know waht the user is trying to do(ie. their taps/swipes), then it's okay. I believe UXCam uses a representation of UI, however, they don't seem to draw everything perfectly like most web based session recording tools.
Text Masking: For us, it's not a must have feature.
Session Definition: I expect this to be done mostly automatically. I'm imaging some that I can use to wrap my root, and magically✨ things will be recorded. With the ability for us to adjust if we'd like.
Sample recording/prefer to have it all: If we are capturing the react virtual DOM changes, it's unclear to me that there will be a large performance/data impact. In that case I'd rather have it all!
Performance: ^ Very very low performance impact. 99% of users should not be able to feel it.
Networking? I can see some situations in which it can be useful, but I don't think we would use it much.

One thing to note is that part of the difference between mobile and web is that mobile users are constantly swiping in and out throughout the entire day. As a result, a user may have something like 50 sessions in one day depending on the session window. And maybe 20-30% of these sessions are be only 2-10 seconds long. With UXCam, that was one of the issues we experienced as it made it very cumbersome to follow through a user's journey.

Context: We mostly build consumer products often times social. We have used UXCam quite a bit for our previous project and have used products like Fullstory/Highlight for web session recording!

Anyhow, excited to see where this heads! Happy to be a preview user :)

lezgin-bakircioglu-qred commented 1 year ago

We're working on Session Replay for Mobile, the goal is to playback sessions to diagnose UI issues, improve support, and get context for nuanced user behavior.

We're interested in understanding how useful it is, the expectations you may have, etc, for example:

Is high fidelity important? would be okay if it was a representation of the UI instead of screenshots?

Is masking text (due to PII) a must-have feature?

How would you define a session (the start and end of the recording)? would you expect that to be done automatically or manually via an API eg PostHog.startRecording and stopRecording?

Would you like to sample recordings or do you prefer to have it all? (think about data usage, storage, slow internet)

What's an acceptable performance impact while the recording is running?

Is network inspection useful? (HTTP status code, request, and response payload).

And much more...

We'd like to understand a little bit better so we are sure that we are building a feature that people would love to use.

Any feedback is appreciated, let me know if you'd be willing to trade a bit of your time for being a preview user as soon as it's out.

Thanks.

Regarding your questions

Fidelity: To start with no but it would be expected to get proper view of the user to try to understand the details as a next version of the feature.
Masking text: Yes
Session definition: Automatically
Sample recording: Configurable, in my case I would like to have all of them
Performance: Low performance impact
Networking: This would be key for me, we use the web recordings and filter out on errors to try to identify sessions with issues and then we watch the recordings, at least an filtering on != http 200 would be a great start, with this feature both UX and devs would use the functionality as in the web recordings.

mikeabellroo commented 7 months ago

Any update on this?

marandaneto commented 7 months ago

Hi, yes we're currently working on the iOS version which the React native implementation will depend on. After making Session replay for Android and iOS stable, React Native should be next.

NickPuljic commented 7 months ago

Is there movement on React Native?

abdirahmn1 commented 6 months ago

a definite +1 for this!!!

isaac-fluid commented 5 months ago

Let's hear it from the React Native (Expo) crowd 🗣️ 🙌

AdamElitzur commented 5 months ago

Would absolutely love this feature to be added! Any timeline or potential launch date? Thanks so much!

zachkamran commented 5 months ago

Would love this feature!

marandaneto commented 4 months ago

We added support for Android and iOS, RN is the next starting next week, and we'll likely have alpha testing within a couple of weeks. We just added it as part of our Q3 objectives.

filipef101 commented 4 months ago

If we added ios/android sdks manually, the recordings would work with react native right?
Is the react native recording be leveraging the ios/android implementations?
Regarding Android would be interested in performance impact metrics/benchmarks, 5-6 years ago I used some recording sdk and it affected performance on some android devices
Could also be nice to easily control the device level it is enabled for (ie only enable for high end devices)
Is the direction of react native posthog changing to an integration/dependency with the native sdks? 5.1 . And/or could it be optional, ie if I don't use session recordings I don't need to include ios/android code. Couple options here, for example making it a plugin/package that you install and pass to the posthog init separately

This is at-least useful for beta testers and sampling users, ie if beta/qa tester reports an issue, just see what they did.

Is high fidelity important? Representation would be enough, like Sentry's wireframe/view hirearchy Is masking text must-have? Yes How would you define a session? Automatically but option to control manually would be useful (control start stop, and whether the automatic recording is enabled for this device)

Would you like to sample recordings or do you prefer to have it all? Be able to specify the sample percentage would be useful, especially on PH side not client side.

What's an acceptable performance impact while the recording is running? Low impact on high end devices.

Is network inspection useful? Maybe, not yes because it raises some PII concerns. Sentry already does this for us thought

Logging console.log output would be useful

Personally curious to somehow link this to sentry transactions since Sentry is already capturing a lot of metrics for us. ( I guess really what I wanted is Sentry replay on mobile 😅)

SamYu commented 3 months ago

Definitely would love this feature for expo!

chasem-dev commented 3 months ago

Here to show support for Expo + React Native 💖 Launching a new social media app around late August, this would really save me some time from having to develop logic to fire events for my users interaction to better understand our users. I'd really prefer to see a visual interaction.

thisames commented 3 months ago

@marandaneto hey men, I currently have development of session replay recording SDKs for react-native, flutter, android etc. I already have a large project that is functional. I intended to make a large open source project involving all the SDKs. I believe I can help you with this part of the project.

marandaneto commented 3 months ago

@marandaneto hey men, I currently have development of session replay recording SDKs for react-native, flutter, android etc. I already have a large project that is functional. I intended to make a large open source project involving all the SDKs. I believe I can help you with this part of the project.

Very interesting and curious about it, please reach out to manoel at posthog.com

jonathan-mothership commented 3 months ago

Support for React Native might be the last thing we need to kill our Fullstory contract!

umtiagopereira commented 3 months ago

Please add this!

renatomserra commented 2 months ago

having mobile session recording is the last thing i need to finally use posthog as ill have everything under one product :) cant wait!

JamesBursey commented 2 months ago

please we need it

devnm21 commented 2 months ago

I agree wtih @JamesBursey

erenkulaksiz commented 2 months ago

+1 for here! I'd like to see what users behaving under different conditions and view analytics data with replays in my react native apps.

samih-sghier commented 2 months ago

following +1

Anandesh-Sharma commented 2 months ago

+1 we need this.

robinsadeghpour commented 2 months ago

+1 looking forward to this for my boilerplate

React Native + Expo support would be awesome!

Borahm commented 2 months ago

+1

marandaneto commented 1 month ago

Hello,

The first alpha version of Session Replay for React Native has been published.

Min. required version and setup steps are here. Don't forget that you also have to enable Session replay in the project settings.

This is experimental support, so please bear with us; any feedback is welcome.

Any issues or feedback you may have, raise an issue here.

chasem-dev commented 1 month ago

@marandaneto Working pretty great! This is really great to have even for experimental. I'm still playing around with it but I believe I'm noticing two things.

The Person isn't properly being identified with the Session replay? I can see my Person events in the Activity but the recording seems to be a unique id, and "No person found"

The session replays seem to be continuing where previous ones left off. I'm sort of expecting that if I open the app, and then close the app, that's going to start a new replay recording, instead if I open and reclose it will append the new replay information onto the previous session replay.

Let me know if there's a configuration I'm possibly missing.

Great work!

posthog-contributions-bot[bot] commented 1 month ago

This issue has 2113 words at 37 comments. Issues this long are hard to read or contribute to, and tend to take very long to reach a conclusion. Instead, why not:

Write some code and submit a pull request! Code wins arguments
Have a sync meeting to reach a conclusion
Create a Request for Comments and submit a PR with it to the meta repo or product internal repo

Is this issue intended to be sprawling? Consider adding label epic or sprint to indicate this.

marandaneto commented 1 month ago

properly being identified

Thanks for the feedback. The 1st one is def. a bug, issue here. The 2nd one is by design but I understand the confusion, I will check with the team since it affects the session duration insights, issue here. I will work on them next Monday, and keep the feedback coming o/

jrusso1020 commented 1 month ago

@marandaneto

Just starting to test this out with our react native apps, and really excited for it! thanks so much for working on it

One thing we are noticing is that we don't see our apps network requests to our backend. We see network requests to third party services that other SDKs make (i.e. revenue cat and sentry) but not to our own internal backend. Our internal code is using fetch to make get and post requests. We were testing with iOS builds

wondering if you have any ideas as to why these requests may not be showing up in the network tab? We can also open up a new issue if that is best

marandaneto commented 1 month ago

@marandaneto

Just starting to test this out with our react native apps, and really excited for it! thanks so much for working on it

One thing we are noticing is that we don't see our apps network requests to our backend. We see network requests to third party services that other SDKs make (i.e. revenue cat and sentry) but not to our own internal backend. Our internal code is using fetch to make get and post requests. We were testing with iOS builds

wondering if you have any ideas as to why these requests may not be showing up in the network tab? We can also open up a new issue if that is best

Hello, thanks for testing it out. Yes please raise a new issue with more context such as:

The PH SDK init code snippet. Examples of your fetch requests (feel free to mask URL, etc, I just wanna see how you call fetch and with which params). RN version and Expo if used as well. Do the requests happen before the recording starts or after? On which iOS version are you testing?

Thanks.

jrusso1020 commented 1 month ago

Examples of your fetch requests (feel free to mask URL, etc, I just wanna see how you call fetch and with which params).

https://github.com/PostHog/posthog-js-lite/issues/276 done!

BuffMcBigHuge commented 3 weeks ago

This is great, any insight into getting this functionality in Capacitor?

Doesn't look like the unofficial plugin supports it:

https://capawesome.io/plugins/posthog/

@marandaneto

MatthewFoster02 commented 2 weeks ago

Hi, I followed the setup guide to enable session replays in our expo react native app and enabled session replays in our posthog project configuration. Then we pushed to test flight and open testing for the play store to test the setup and session recording features, but sadly no session replays have been recorded. I'm wondering if you are able to help me understand why the sessions are not being recorded in the app.

If I can provide any further info let me know. Looking forward to your help!

thisames commented 2 weeks ago

Hi, I followed the setup guide to enable session replays in our expo react native app and enabled session replays in our posthog project configuration. Then we pushed to test flight and open testing for the play store to test the setup and session recording features, but sadly no session replays have been recorded. I'm wondering if you are able to help me understand why the sessions are not being recorded in the app.

If I can provide any further info let me know. Looking forward to your help!

raise a new issue with more context in https://github.com/PostHog/posthog-js-lite/issues maybe I can help you

MatthewFoster02 commented 2 weeks ago

Hi, I followed the setup guide to enable session replays in our expo react native app and enabled session replays in our posthog project configuration. Then we pushed to test flight and open testing for the play store to test the setup and session recording features, but sadly no session replays have been recorded. I'm wondering if you are able to help me understand why the sessions are not being recorded in the app. If I can provide any further info let me know. Looking forward to your help!

raise a new issue with more context in https://github.com/PostHog/posthog-js-lite/issues maybe I can help you

Okay, is this better asked in the forums? The template for raising an issue (bug issue) doesn't really fit. What extra context do you need to be able to help?

marandaneto commented 2 weeks ago

For reporting issues, just raise a new issue using the bug report template, please share all the context you have including error/stack trace, logs, your SDK config, OS, etc.

marandaneto commented 2 weeks ago

This is great, any insight into getting this functionality in Capacitor?

Doesn't look like the unofficial plugin supports it:

capawesome.io/plugins/posthog

@marandaneto

This plugin is community-maintained so nothing planned so far, I'd recommend raising an issue on their repo.

PostHog / posthog

React Native Session Recordings #13269