Session Replay for React Native

[bruno-garcia]

Support for Session Replay for React Native apps.

Please feel free to 👍 to help us understand the level of demand.

We're working on it! Wanna join the early adopter release? Join the waitlist and discussion about the feature:

• Session Replay for Mobile - Waitlist sentry#63138

If you'd like to subscribe for updates, there's no need to write +1, you can click on All notifications on the right nav bar:

[millro04]

Are there any plans for this to be implemented soon, or is it just a wish for now?

[krystofwoldrich]

At the moment we are collecting information and we don't have a specific timeline.

[marandaneto]

@bruno-garcia was that supposed to be closed?

[bruno-garcia]

It was closed accidentally due to a Jira integration. We're still tracking demand here and considering this but no plans or commitment yet. For context; We just launched the Web support a few weeks ago. Hope y'all with a website are using it and let us know how it's going.

[thomsocialbrothers]

We really need this! In React Native, debugging is so much harder and error messages are a lot more vague than than in regular web development. This would really be a gem for the teams maintaining React Native projects.

[rpinna]

+1, love the web replay, it's sad when we get an RN error

[mxkh]

+1, web replays are fantastic. We're waiting for the session replays for RN!

[simnon]

This would be great to get for RN, such a powerful feature

[ryan-k-swyftx]

Would love to see this for RN, it's something we'd be looking at replacing fullstory with but until it's a replacement for web and mobile it's likely not on the cards.

[alfonsosn]

+1 on this thread. Even if to begin with, we were just able to track javascript elements.

[joelbarnard]

+1 our organization needs this feature

[GBR-422777]

any idea when this could happen?

[krystofwoldrich]

@GBR-422777 We do not have a timeline at the moment.

[tuanngocptn]

+1 for this function.

[mefallit]

+1 session replay for RN might help us a lot!

[pbocian-switch503]

please add to react native

[evelant]

As of @sentry/react-native 5.22.3 it appears something related to session replay is crashing the ios simulator every time a reload is triggered. This is with enabled: false in sentry init and no configuration related to session replay.

Exception Type:  EXC_BAD_ACCESS (SIGSEGV)
Exception Subtype: KERN_INVALID_ADDRESS at 0x6d6f724674636172 -> 0x0000724674636172 (possible pointer authentication failure)
Exception Codes: 0x0000000000000001, 0x6d6f724674636172
VM Region Info: 0x724674636172 is not in any region.  Bytes after previous region: 20093272809843  
      REGION TYPE                    START - END         [ VSIZE] PRT/MAX SHRMOD  REGION DETAIL
      MALLOC_NANO              600000000000-600020000000 [512.0M] rw-/rwx SM=PRV  
--->  
      UNUSED SPACE AT END
Termination Reason: SIGNAL 11 Segmentation fault: 11
Terminating Process: exc handler [96284]

Triggered by Thread:  0

Thread 0 Crashed::  Dispatch queue: com.apple.main-thread
0   libswiftCore.dylib            	       0x19326e488 swift::runtime::AccessSet::insert(swift::runtime::Access*, void*, void*, swift::ExclusivityFlags) + 56
1   libswiftCore.dylib            	       0x19326e6ac swift_beginAccess + 72
2   TaskHero                      	       0x103ecb8fc SentryExperimentalOptions.sessionReplay.getter + 60
3   TaskHero                      	       0x103ecb89c @objc SentryExperimentalOptions.sessionReplay.getter + 36
4   TaskHero                      	       0x103dd2794 -[SentryBaseIntegration shouldBeEnabledWithOptions:] + 1880
5   TaskHero                      	       0x103dd1df0 -[SentryBaseIntegration installWithOptions:] + 68
6   TaskHero                      	       0x103e8c5b0 -[SentrySessionReplayIntegration installWithOptions:] + 80
7   TaskHero                      	       0x103e84078 +[SentrySDK installIntegrations] + 1192
8   TaskHero                      	       0x103e8260c __30+[SentrySDK startWithOptions:]_block_invoke + 416
9   TaskHero                      	       0x103e9e788 +[SentryThreadWrapper onMainThread:] + 332
10  TaskHero                      	       0x103e82414 +[SentrySDK startWithOptions:] + 1800
11  TaskHero                      	       0x103574d08 -[RNSentry initNativeSdk:resolve:rejecter:] + 428
12  CoreFoundation                	       0x1804b4760 __invoking___ + 144
13  CoreFoundation                	       0x1804b1ac4 -[NSInvocation invoke] + 276
14  CoreFoundation                	       0x1804b1d5c -[NSInvocation invokeWithTarget:] + 60
15  TaskHero                      	       0x1036211f4 -[RCTModuleMethod invokeWithBridge:module:arguments:] + 1796
16  TaskHero                      	       0x103625280 facebook::react::invokeInner(RCTBridge*, RCTModuleData*, unsigned int, folly::dynamic const&, int, (anonymous namespace)::SchedulingContext) + 1688
17  TaskHero                      	       0x103624a1c facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int)::$_0::operator()() const + 128
18  TaskHero                      	       0x103624990 invocation function for block in facebook::react::RCTNativeModule::invoke(unsigned int, folly::dynamic&&, int) + 28
19  libdispatch.dylib             	       0x180170104 _dispatch_call_block_and_release + 24
20  libdispatch.dylib             	       0x180171978 _dispatch_client_callout + 16
21  libdispatch.dylib             	       0x1801807c8 _dispatch_main_queue_drain + 1276
22  libdispatch.dylib             	       0x1801802bc _dispatch_main_queue_callback_4CF + 40
23  CoreFoundation                	       0x18040e9a0 __CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__ + 12
24  CoreFoundation                	       0x1804090b8 __CFRunLoopRun + 1936
25  CoreFoundation                	       0x180408514 CFRunLoopRunSpecific + 572
26  GraphicsServices              	       0x18ef06ae4 GSEventRunModal + 160
27  UIKitCore                     	       0x1853e8040 -[UIApplication _run] + 868
28  UIKitCore                     	       0x1853ebcc8 UIApplicationMain + 124
29  TaskHero                      	       0x1021f19d8 main + 96
30  dyld_sim                      	       0x108b81544 start_sim + 20
31  dyld                          	       0x1086960e0 start + 2360

[krystofwoldrich]

Thank you @evelant for the message.

RN 5.22.3 includes sentry-cocoa which includes the native Replay, but the code should not be active, there is also no RN implementation. We will investigate it.

What version of React Native are you using? Could you share your Sentry.init options? What version of the Sentry RN SDK were you using before?

Note for other readers, to test the Replay the https://github.com/getsentry/sentry-react-native/releases/tag/5.23.0-alpha.1 is needed.

[bruno-garcia]

HYPE! https://www.youtube.com/watch?v=HWYtOHom0wY

[bruno-garcia]

@krystofwoldrich @evelant I created a ticket to discuss this iOS issue: #3845

Please lets move debugging of this particular error there. And thanks again for trying it out and reporting the issue!!!

[bruno-garcia]

Another update: Beta is now available to everyone (That is Self-Serve folks. Including Free, Team and Business plans. Not yet Enterprise orgs. Talk to your sales representative)

A new GH discussion for the Open Beta was created:

• Session Replay for Mobile is Now in Open Beta sentry#74322

Docs:

• React Native specific
• General product docs and FAQ

Hope you can give it a try and is willing to give us feedback!!
A wider communication via blog will go out soon. And we plan to reach out via email to folks on the waitlist too!

[jas-kas]

Hey folks 👋 We're hosting a workshop next week Wednesday on how to solve mobile bugs with Session Replay. This is your chance to ask your questions on Mobile Replay directly to our eng team and see a demo of Mobile Replay live. 🎉 You can sign up here: https://sentry.io/resources/solve-mobile-bugs-with-session-replay/

[bruno-garcia]

Thank you all for trying this out. There's way, way more apps sending data than 👍 on this ticket which is by itself a lot.

An update: We plan on GA'ing this early January the latest.
But feature wise it's almost complete (other than some additional masking APIs for React Native).

Anyone has had any challenges with it so far? Any feedback? Feel free to write it to my-first-name at sentry dot io

[liamjones]

@bruno-garcia re, "But feature wise it's almost complete (other than some additional masking APIs for React Native).", is auto redaction expected to work in RN apps currently or does it need those extra APIs?

I ask because I've just updated our SDK to 5.35.0 and tried out replay with our RN app and while the Android one seems to redact text the iOS doesn't seem to for any non-native components.

[bruno-garcia]

is auto redaction expected to work in RN apps currently or does it need those extra APIs?

Auto redaction, or as we call it: default masking, is available since the first release. So by default, all text and images should be masked.
Did you see any potentially sensitive data come though?

the iOS doesn't seem to for any non-native components.

Could you share some details so we can understand. Is this related to animation or scroll? What type of data came through?
We fixed a bug in the iOS SDK's redaction logic last week which didn't make it into the latest React Native SDK yet. Could it be related?

[liamjones]

We fixed a bug in the iOS SDK's redaction logic last week which didn't make it into the latest React Native SDK yet. Could it be related?

Ah, it's almost certainly that. 99% of our app is inside scroll views in one way or another. I can try the new version out when the RN v5 SDK is updated to target it (we haven't moved to v6 yet).

Could you share some details so we can understand. Is this related to animation or scroll? What type of data came through?

Sure, it's almost certainly related to scroll views. For example, on our app home screen, almost everything came through on iOS:

Android (https://living-with.sentry.io/replays/53089194355f497a8549890e796edd82/?project=5536147&query=&referrer=%2Freplays%2F&statsPeriod=90d&yAxis=count%28%29):

iOS (https://living-with.sentry.io/replays/482450c1e7064321a807745c137c379b/?project=5536147&query=&referrer=%2Freplays%2F&statsPeriod=90d&yAxis=count%28%29):

On iOS everything bar an Image in the header and an SVG element at the bottom were visible (indicated with the red arrows). I'm not sure why those two specifically were masked but not others. For example, the other icons next to the masked one at the bottom are also SVGs.

As for this screen's construction; underneath the header and above the tab bar is a vertical scroll view. The purple card is in a horizontal scroll view inside that vertical scroll view. The 'Injection', etc buttons are in a separate horizontal scroll view.

[krystofwoldrich]

Hello everyone, we have just released a new beta of @sentry/react-native version 6.4.0-beta.1 which includes masking improvements from the native SDKs and our brand new Custom Masking APIs!

Try the new APIs and share your experience with us here in the Github issue.

How to use the new APIs?

import * as Sentry from '@sentry/react-native';

const Example = () => {
  return (
    <View>
      <Sentry.Mask>
        <Text>${"All children of Sentry.Mask will be masked."}</Text>
      </Sentry.Mask>
      <Sentry.Unmask>
        <Text>${"Only direct children of Sentry.Unmask will be unmasked."}</Text>
      </Sentry.Unmask>
    </View>
  );
};