React Native Session Recordings

[joethreepwood]

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]

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]

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]

Would be awesome :)

[lezgin-bakircioglu-qred]

This feature would be really helpful for us

[Arkan4ik]

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

[jamesefhawkins]

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]

Throwing my vote in here for session recordings for RN

[octalpixel]

Throwing my vote in here for session recordings for RN

Joining you here! Upvoting for this feature!

[marandaneto]

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]

Joining you here! Upvoting for this feature!

[chen-rn]

@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]

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]

Any update on this?

[marandaneto]

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]

Is there movement on React Native?

[abdirahmn1]

a definite +1 for this!!!

[marandaneto]

@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]

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

[umtiagopereira]

Please add this!

[renatomserra]

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

[JamesBursey]

please we need it

[devnm21]

I agree wtih @JamesBursey

[erenkulaksiz]

+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]

following +1

[Anandesh-Sharma]

+1 we need this.

[robinsadeghpour]

+1 looking forward to this for my boilerplate

React Native + Expo support would be awesome!

[Borahm]

+1

[marandaneto]

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]

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

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

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

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:

1. Write some code and submit a pull request! Code wins arguments
2. Have a sync meeting to reach a conclusion
3. 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]

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

@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]

@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]

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

PostHog/posthog-js-lite#276 done!

[BuffMcBigHuge]

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]

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]

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]

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]

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]

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.