Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React Native Session Recordings #13269

Open
1 task
joethreepwood opened this issue Dec 12, 2022 · 33 comments
Open
1 task

React Native Session Recordings #13269

joethreepwood opened this issue Dec 12, 2022 · 33 comments
Assignees
Labels
enhancement New feature or request feature/replay Features for Team Replay mobile

Comments

@joethreepwood
Copy link
Contributor

joethreepwood commented Dec 12, 2022

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!

@joethreepwood joethreepwood added the enhancement New feature or request label Dec 12, 2022
This was referenced Dec 12, 2022
@kovilsingh
Copy link

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
Copy link

chen-rn commented Feb 28, 2023

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
Copy link

Hoss3770 commented May 1, 2023

Would be awesome :)

@lezgin-bakircioglu-qred
Copy link

This feature would be really helpful for us

@Arkan4ik
Copy link

Arkan4ik commented May 6, 2023

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

@jamesefhawkins
Copy link
Collaborator

jamesefhawkins commented Aug 23, 2023

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
Copy link

Throwing my vote in here for session recordings for RN

@octalpixel
Copy link

Throwing my vote in here for session recordings for RN

Joining you here! Upvoting for this feature!

@marandaneto
Copy link
Member

marandaneto commented Oct 23, 2023

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
Copy link

Joining you here! Upvoting for this feature!

@chen-rn
Copy link

chen-rn commented Oct 23, 2023

@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
Copy link

Any update on this?

@marandaneto
Copy link
Member

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
Copy link

Is there movement on React Native?

@abdirahmn1
Copy link

a definite +1 for this!!!

@isaac-fluid
Copy link

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

@AdamElitzur
Copy link

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

@zachkamran
Copy link

Would love this feature!

@marandaneto
Copy link
Member

marandaneto commented Jun 24, 2024

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
Copy link

  1. If we added ios/android sdks manually, the recordings would work with react native right?
  2. Is the react native recording be leveraging the ios/android implementations?
  3. 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
  4. Could also be nice to easily control the device level it is enabled for (ie only enable for high end devices)
  5. 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
Copy link

SamYu commented Jul 20, 2024

Definitely would love this feature for expo!

@chasem-dev
Copy link

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
Copy link
Contributor

@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
Copy link
Member

@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
Copy link

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

@umtiagopereira
Copy link

Please add this!

@renatomserra
Copy link

renatomserra commented Aug 20, 2024

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

@JamesBursey
Copy link

please we need it

@devnm21
Copy link

devnm21 commented Aug 23, 2024

I agree wtih @JamesBursey

@erenkulaksiz
Copy link

+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
Copy link

following +1

@Anandesh-Sharma
Copy link

+1 we need this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request feature/replay Features for Team Replay mobile
Development

No branches or pull requests