feat(replay): Add Mobile Replay Alpha (#3714)

Author: krystofwoldrich

CHANGELOG.md

@@ -1,6 +1,12 @@
 # Changelog
 
-## Unreleased
+## 5.23.0-alpha.1
+
+### Fixes
+
+- Pass `replaysSessionSampleRate` option to Android ([#3714](https://github.com/getsentry/sentry-react-native/pull/3714))
+
+Access to Mobile Replay is limited to early access orgs on Sentry. If you're interested, [sign up for the waitlist](https://sentry.io/lp/mobile-replay-beta/)
 
 ### Features
 
@@ -69,6 +75,47 @@
   - [changelog](https://github.com/getsentry/sentry-cocoa/blob/main/CHANGELOG.md#8250)
   - [diff](https://github.com/getsentry/sentry-cocoa/compare/8.24.0...8.25.0)
 
+## 5.23.0-alpha.0
+
+### Features
+
+- Mobile Session Replay Alpha ([#3714](https://github.com/getsentry/sentry-react-native/pull/3714))
+
+  To enable Replay for React Native on mobile and web add the following options.
+
+  ```js
+  Sentry.init({
+    _experiments: {
+      replaysSessionSampleRate: 1.0,
+      replaysOnErrorSampleRate: 1.0,
+    },
+  });
+  ```
+
+  To change the default Mobile Replay options add the `mobileReplayIntegration`.
+
+  ```js
+  Sentry.init({
+    _experiments: {
+      replaysSessionSampleRate: 1.0,
+      replaysOnErrorSampleRate: 1.0,
+    },
+    integration: [
+      Sentry.mobileReplayIntegration({
+        maskAllText: true,
+        maskAllImages: true,
+      }),
+    ],
+  });
+  ```
+
+  Access is limited to early access orgs on Sentry. If you're interested, [sign up for the waitlist](https://sentry.io/lp/mobile-replay-beta/)
+
+### Dependencies
+
+- Bump Cocoa SDK to [8.25.0-alpha.0](https://github.com/getsentry/sentry-cocoa/releases/tag/8.25.0-alpha.0)
+- Bump Android SDK to [7.9.0-alpha.1](https://github.com/getsentry/sentry-java/releases/tag/7.9.0-alpha.1)
+
 ## 5.22.0
 
 ### Features

RNSentry.podspec

@@ -33,7 +33,7 @@ Pod::Spec.new do |s|
   s.preserve_paths = '*.js'
 
   s.dependency 'React-Core'
-  s.dependency 'Sentry/HybridSDK', '8.25.2'
+  s.dependency 'Sentry/HybridSDK', '8.25.0-alpha.0'
 
   s.source_files = 'ios/**/*.{h,m,mm}'
   s.public_header_files = 'ios/RNSentry.h'

android/build.gradle

@@ -54,5 +54,5 @@ android {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+'
-    api 'io.sentry:sentry-android:7.8.0'
+    api 'io.sentry:sentry-android:7.9.0-alpha.1'
 }

android/src/main/java/io/sentry/react/RNSentryModuleImpl.java

@@ -61,6 +61,7 @@
 import io.sentry.SentryExecutorService;
 import io.sentry.SentryLevel;
 import io.sentry.SentryOptions;
+import io.sentry.SentryReplayOptions;
 import io.sentry.UncaughtExceptionHandlerIntegration;
 import io.sentry.android.core.AndroidLogger;
 import io.sentry.android.core.AndroidProfiler;
@@ -79,6 +80,7 @@
 import io.sentry.android.core.performance.AppStartMetrics;
 import io.sentry.protocol.SdkVersion;
 import io.sentry.protocol.SentryException;
+import io.sentry.protocol.SentryId;
 import io.sentry.protocol.SentryPackage;
 import io.sentry.protocol.User;
 import io.sentry.protocol.ViewHierarchy;
@@ -252,7 +254,9 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {
             if (rnOptions.hasKey("enableNdk")) {
                 options.setEnableNdk(rnOptions.getBoolean("enableNdk"));
             }
-
+            if (rnOptions.hasKey("_experiments")) {
+                options.getExperimental().setSessionReplay(getReplayOptions(rnOptions));
+            }
             options.setBeforeSend((event, hint) -> {
                 // React native internally throws a JavascriptException
                 // Since we catch it before that, we don't want to send this one
@@ -293,6 +297,37 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {
         promise.resolve(true);
     }
 
+    private SentryReplayOptions getReplayOptions(@NotNull ReadableMap rnOptions) {
+        @NotNull final SentryReplayOptions androidReplayOptions = new SentryReplayOptions();
+
+        @Nullable final ReadableMap rnExperimentsOptions = rnOptions.getMap("_experiments");
+        if (rnExperimentsOptions == null) {
+            return androidReplayOptions;
+        }
+
+        if (!(rnExperimentsOptions.hasKey("replaysSessionSampleRate") || rnExperimentsOptions.hasKey("replaysOnErrorSampleRate"))) {
+            return androidReplayOptions;
+        }
+
+        androidReplayOptions.setSessionSampleRate(rnExperimentsOptions.hasKey("replaysSessionSampleRate")
+                ? rnExperimentsOptions.getDouble("replaysSessionSampleRate") : null);
+        androidReplayOptions.setErrorSampleRate(rnExperimentsOptions.hasKey("replaysOnErrorSampleRate")
+                ? rnExperimentsOptions.getDouble("replaysOnErrorSampleRate") : null);
+
+        if (!rnOptions.hasKey("mobileReplayOptions")) {
+            return androidReplayOptions;
+        }
+        @Nullable final ReadableMap rnMobileReplayOptions = rnOptions.getMap("mobileReplayOptions");
+        if (rnMobileReplayOptions == null) {
+            return androidReplayOptions;
+        }
+
+        androidReplayOptions.setRedactAllText(!rnMobileReplayOptions.hasKey("maskAllText") || rnMobileReplayOptions.getBoolean("maskAllText"));
+        androidReplayOptions.setRedactAllImages(!rnMobileReplayOptions.hasKey("maskAllImages") || rnMobileReplayOptions.getBoolean("maskAllImages"));
+
+        return androidReplayOptions;
+    }
+
     public void crash() {
         throw new RuntimeException("TEST - Sentry Client Crash (only works in release mode)");
     }
@@ -410,6 +445,24 @@ public void fetchNativeFrames(Promise promise) {
         }
     }
 
+    public void captureReplay(boolean isHardCrash, Promise promise) {
+        Sentry.getCurrentHub().getOptions().getReplayController().sendReplay(isHardCrash, null, null);
+        promise.resolve(getCurrentReplayId());
+    }
+
+    public @Nullable String getCurrentReplayId() {
+        final @Nullable IScope scope = InternalSentrySdk.getCurrentScope();
+        if (scope == null) {
+            return null;
+        }
+
+        final @NotNull SentryId id = scope.getReplayId();
+        if (id == SentryId.EMPTY_ID) {
+            return null;
+        }
+        return id.toString();
+    }
+
     public void captureEnvelope(String rawBytes, ReadableMap options, Promise promise) {
         byte[] bytes = Base64.decode(rawBytes, Base64.DEFAULT);
 

android/src/newarch/java/io/sentry/react/RNSentryModule.java

@@ -158,4 +158,14 @@ public WritableMap fetchNativeStackFramesBy(ReadableArray instructionsAddr) {
         // Not used on Android
         return null;
     }
+
+    @Override
+    public void captureReplay(boolean isHardCrash, Promise promise) {
+        this.impl.captureReplay(isHardCrash, promise);
+    }
+
+    @Override
+    public String getCurrentReplayId() {
+        return this.impl.getCurrentReplayId();
+    }
 }

android/src/oldarch/java/io/sentry/react/RNSentryModule.java

@@ -158,4 +158,14 @@ public WritableMap fetchNativeStackFramesBy(ReadableArray instructionsAddr) {
         // Not used on Android
         return null;
     }
+
+    @ReactMethod
+    public void captureReplay(boolean isHardCrash, Promise promise) {
+        this.impl.captureReplay(isHardCrash, promise);
+    }
+
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    public String getCurrentReplayId() {
+        return this.impl.getCurrentReplayId();
+    }
 }

ios/RNSentry.mm

@@ -116,7 +116,6 @@ - (SentryOptions *_Nullable)createOptionsWithDictionary:(NSDictionary *_Nonnull)
         // Because we sent it already before the app crashed.
         if (nil != event.exceptions.firstObject.type &&
             [event.exceptions.firstObject.type rangeOfString:@"Unhandled JS Exception"].location != NSNotFound) {
-            NSLog(@"Unhandled JS Exception");
             return nil;
         }
 
@@ -135,6 +134,28 @@ - (SentryOptions *_Nullable)createOptionsWithDictionary:(NSDictionary *_Nonnull)
     [mutableOptions removeObjectForKey:@"tracesSampler"];
     [mutableOptions removeObjectForKey:@"enableTracing"];
 
+    if ([mutableOptions valueForKey:@"_experiments"] != nil) {
+      NSDictionary *experiments = mutableOptions[@"_experiments"];
+      if (experiments[@"replaysSessionSampleRate"] != nil || experiments[@"replaysOnErrorSampleRate"] != nil) {
+        [mutableOptions setValue:@{
+          @"sessionReplay": @{
+            @"sessionSampleRate": experiments[@"replaysSessionSampleRate"] ?: [NSNull null],
+            @"errorSampleRate": experiments[@"replaysOnErrorSampleRate"] ?: [NSNull null],
+            @"redactAllImages": mutableOptions[@"mobileReplayOptions"] != nil &&
+              mutableOptions[@"mobileReplayOptions"][@"maskAllImages"] != nil
+                ? mutableOptions[@"mobileReplayOptions"][@"maskAllImages"]
+                : [NSNull null],
+            @"redactAllText": mutableOptions[@"mobileReplayOptions"] != nil &&
+              mutableOptions[@"mobileReplayOptions"][@"maskAllText"] != nil
+                ? mutableOptions[@"mobileReplayOptions"][@"maskAllText"]
+                : [NSNull null],
+          }
+        } forKey:@"experimental"];
+        [self addReplayRNRedactClasses: mutableOptions[@"mobileReplayOptions"]];
+      }
+      [mutableOptions removeObjectForKey:@"_experiments"];
+    }
+
     SentryOptions *sentryOptions = [[SentryOptions alloc] initWithDict:mutableOptions didFailWithError:errorPointer];
     if (*errorPointer != nil) {
         return nil;
@@ -644,6 +665,31 @@ - (NSDictionary*) fetchNativeStackFramesBy: (NSArray<NSNumber*>*)instructionsAdd
     // the 'tracesSampleRate' or 'tracesSampler' option.
 }
 
+RCT_EXPORT_METHOD(captureReplay: (BOOL)isHardCrash
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+  [PrivateSentrySDKOnly captureReplay];
+  resolve([PrivateSentrySDKOnly getReplayId]);
+}
+
+RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(NSString *, getCurrentReplayId)
+{
+  return [PrivateSentrySDKOnly getReplayId];
+}
+
+- (void) addReplayRNRedactClasses: (NSDictionary *_Nullable)replayOptions
+{
+  NSMutableArray *_Nonnull classesToRedact = [[NSMutableArray alloc] init];
+  if ([replayOptions[@"maskAllImages"] boolValue] == YES) {
+    [classesToRedact addObject: NSClassFromString(@"RCTImageView")];
+  }
+  if ([replayOptions[@"maskAllText"] boolValue] == YES) {
+    [classesToRedact addObject: NSClassFromString(@"RCTTextView")];
+  }
+  [PrivateSentrySDKOnly addReplayRedactClasses: classesToRedact];
+}
+
 static NSString* const enabledProfilingMessage = @"Enable Hermes to use Sentry Profiling.";
 static SentryId* nativeProfileTraceId = nil;
 static uint64_t nativeProfileStartTime = 0;

package.json

@@ -2,7 +2,7 @@
   "name": "@sentry/react-native",
   "homepage": "https://github.com/getsentry/sentry-react-native",
   "repository": "https://github.com/getsentry/sentry-react-native",
-  "version": "5.22.2",
+  "version": "5.23.0-alpha.1",
   "description": "Official Sentry SDK for react-native",
   "typings": "dist/js/index.d.ts",
   "types": "dist/js/index.d.ts",

samples/expo/app.json

@@ -4,7 +4,7 @@
     "slug": "sentry-react-native-expo-sample",
     "jsEngine": "hermes",
     "scheme": "sentry-expo-sample",
-    "version": "5.22.2",
+    "version": "5.23.0-alpha.1",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
@@ -19,15 +19,15 @@
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "io.sentry.expo.sample",
-      "buildNumber": "6"
+      "buildNumber": "7"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
       "package": "io.sentry.expo.sample",
-      "versionCode": 6
+      "versionCode": 7
     },
     "web": {
       "bundler": "metro",

samples/expo/app/_layout.tsx

@@ -78,6 +78,8 @@ process.env.EXPO_SKIP_DURING_EXPORT !== 'true' && Sentry.init({
   // dist: `1`,
   _experiments: {
     profilesSampleRate: 0,
+    // replaysOnErrorSampleRate: 1.0,
+    replaysSessionSampleRate: 1.0,
   },
   enableSpotlight: true,
 });