Merge 30ed290 into 1f1e41e

vaind · web-flow · commit 9afd1d10c459 · 2024-06-26T08:02:59.000Z
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Features
 
 - Improve touch event component info if annotated with [`@sentry/babel-plugin-component-annotate`](https://www.npmjs.com/package/@sentry/babel-plugin-component-annotate) ([#3899](https://github.com/getsentry/sentry-react-native/pull/3899))
+- Add replay breadcrumbs for touch & navigation events ([#3846](https://github.com/getsentry/sentry-react-native/pull/3846))
 
 ### Dependencies
 
diff --git a/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java b/android/src/main/java/io/sentry/react/RNSentryModuleImpl.java
@@ -188,7 +188,7 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {
 
             options.setSentryClientName(sdkVersion.getName() + "/" + sdkVersion.getVersion());
             options.setNativeSdkName(NATIVE_SDK_NAME);
-          options.setSdkVersion(sdkVersion);
+            options.setSdkVersion(sdkVersion);
 
             if (rnOptions.hasKey("debug") && rnOptions.getBoolean("debug")) {
                 options.setDebug(true);
@@ -256,6 +256,7 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {
             }
             if (rnOptions.hasKey("_experiments")) {
                 options.getExperimental().setSessionReplay(getReplayOptions(rnOptions));
+                options.getReplayController().setBreadcrumbConverter(new RNSentryReplayBreadcrumbConverter());
             }
             options.setBeforeSend((event, hint) -> {
                 // React native internally throws a JavascriptException
diff --git a/android/src/main/java/io/sentry/react/RNSentryReplayBreadcrumbConverter.java b/android/src/main/java/io/sentry/react/RNSentryReplayBreadcrumbConverter.java
@@ -0,0 +1,37 @@
+package io.sentry.react;
+
+import io.sentry.Breadcrumb;
+import io.sentry.android.replay.DefaultReplayBreadcrumbConverter;
+import io.sentry.rrweb.RRWebEvent;
+import io.sentry.rrweb.RRWebBreadcrumbEvent;
+import org.jetbrains.annotations.NotNull;
+import org.jetbrains.annotations.Nullable;
+
+public final class RNSentryReplayBreadcrumbConverter extends DefaultReplayBreadcrumbConverter {
+  public RNSentryReplayBreadcrumbConverter() {
+  }
+
+  @Override
+  public @Nullable RRWebEvent convert(final @NotNull Breadcrumb breadcrumb) {
+    RRWebBreadcrumbEvent rrwebBreadcrumb = new RRWebBreadcrumbEvent();
+    assert rrwebBreadcrumb.getCategory() == null;
+
+    if (breadcrumb.getCategory().equals("touch")) {
+      rrwebBreadcrumb.setCategory("ui.tap");
+      Object target = breadcrumb.getData("target");
+      if (target != null) {
+        rrwebBreadcrumb.setMessage(target.toString());
+      }
+      rrwebBreadcrumb.setData(breadcrumb.getData());
+    }
+
+    if (rrwebBreadcrumb.getCategory() != null && !rrwebBreadcrumb.getCategory().isEmpty()) {
+      rrwebBreadcrumb.setTimestamp(breadcrumb.getTimestamp().getTime());
+      rrwebBreadcrumb.setBreadcrumbTimestamp(breadcrumb.getTimestamp().getTime() / 1000.0);
+      rrwebBreadcrumb.setBreadcrumbType("default");
+      return rrwebBreadcrumb;
+    }
+
+    return super.convert(breadcrumb);
+  }
+}
diff --git a/ios/RNSentry.mm b/ios/RNSentry.mm
@@ -38,6 +38,10 @@
 #import "RNSentryEvents.h"
 #import "RNSentryDependencyContainer.h"
 
+#if SENTRY_TARGET_REPLAY_SUPPORTED
+#import "RNSentrySessionReplay.h"
+#endif
+
 #if SENTRY_HAS_UIKIT
 #import "RNSentryRNSScreen.h"
 #import "RNSentryFramesTrackerListener.h"
@@ -106,6 +110,10 @@ + (BOOL)requiresMainQueueSetup {
         sentHybridSdkDidBecomeActive = true;
     }
 
+#if SENTRY_TARGET_REPLAY_SUPPORTED
+    [RNSentrySessionReplay postInit];
+#endif
+
     resolve(@YES);
 }
 
@@ -135,27 +143,9 @@ - (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"];
-    }
+#if SENTRY_TARGET_REPLAY_SUPPORTED
+    [RNSentrySessionReplay updateOptions:mutableOptions];
+#endif
 
     SentryOptions *sentryOptions = [[SentryOptions alloc] initWithDict:mutableOptions didFailWithError:errorPointer];
     if (*errorPointer != nil) {
@@ -635,25 +625,21 @@ - (NSDictionary*) fetchNativeStackFramesBy: (NSArray<NSNumber*>*)instructionsAdd
                   resolver:(RCTPromiseResolveBlock)resolve
                   rejecter:(RCTPromiseRejectBlock)reject)
 {
+#if SENTRY_TARGET_REPLAY_SUPPORTED
   [PrivateSentrySDKOnly captureReplay];
   resolve([PrivateSentrySDKOnly getReplayId]);
+#else
+  resolve(nil);
+#endif
 }
 
 RCT_EXPORT_SYNCHRONOUS_TYPED_METHOD(NSString *, getCurrentReplayId)
 {
+#if SENTRY_TARGET_REPLAY_SUPPORTED
   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];
+#else
+  return nil;
+#endif
 }
 
 static NSString* const enabledProfilingMessage = @"Enable Hermes to use Sentry Profiling.";
diff --git a/ios/RNSentryBreadcrumbConverter.h b/ios/RNSentryBreadcrumbConverter.h
@@ -0,0 +1,12 @@
+@import Sentry;
+
+#if SENTRY_TARGET_REPLAY_SUPPORTED
+@class SentryRRWebEvent;
+
+@interface RNSentryBreadcrumbConverter
+    : NSObject <SentryReplayBreadcrumbConverter>
+
+- (instancetype _Nonnull)init;
+
+@end
+#endif
diff --git a/ios/RNSentryBreadcrumbConverter.m b/ios/RNSentryBreadcrumbConverter.m
@@ -0,0 +1,46 @@
+#import "RNSentryBreadcrumbConverter.h"
+
+@import Sentry;
+
+#if SENTRY_TARGET_REPLAY_SUPPORTED
+
+@implementation RNSentryBreadcrumbConverter {
+  SentrySRDefaultBreadcrumbConverter *defaultConverter;
+}
+
+- (instancetype _Nonnull)init {
+  if (self = [super init]) {
+    self->defaultConverter =
+        [SentrySessionReplayIntegration createDefaultBreadcrumbConverter];
+  }
+  return self;
+}
+
+- (id<SentryRRWebEvent> _Nullable)convertFrom:
+    (SentryBreadcrumb *_Nonnull)breadcrumb {
+  assert(breadcrumb.timestamp != nil);
+
+  if ([breadcrumb.category isEqualToString:@"touch"]) {
+    return [SentrySessionReplayIntegration
+        createBreadcrumbwithTimestamp:breadcrumb.timestamp
+                             category:@"ui.tap"
+                              message:breadcrumb.data
+                                          ? [breadcrumb.data
+                                                valueForKey:@"target"]
+                                          : nil
+                                level:breadcrumb.level
+                                 data:breadcrumb.data];
+  } else if ([breadcrumb.category isEqualToString:@"navigation"]) {
+    return [SentrySessionReplayIntegration
+        createBreadcrumbwithTimestamp:breadcrumb.timestamp ?: 0
+                             category:breadcrumb.category
+                              message:nil
+                                level:breadcrumb.level
+                                 data:breadcrumb.data];
+  } else {
+    return [self->defaultConverter convertFrom:breadcrumb];
+  }
+}
+
+@end
+#endif
diff --git a/ios/RNSentrySessionReplay.h b/ios/RNSentrySessionReplay.h
@@ -0,0 +1,8 @@
+
+@interface RNSentrySessionReplay : NSObject
+
++ (void)updateOptions:(NSMutableDictionary *)options;
+
++ (void)postInit;
+
+@end
diff --git a/ios/RNSentrySessionReplay.m b/ios/RNSentrySessionReplay.m
@@ -0,0 +1,60 @@
+#import "RNSentrySessionReplay.h"
+#import "RNSentryBreadcrumbConverter.h"
+
+#if SENTRY_TARGET_REPLAY_SUPPORTED
+
+@implementation RNSentrySessionReplay {
+}
+
++ (void)updateOptions:(NSMutableDictionary *)options {
+  NSDictionary *experiments = options[@"_experiments"];
+  [options removeObjectForKey:@"_experiments"];
+  if (experiments == nil) {
+    NSLog(@"Session replay disabled via configuration");
+    return;
+  }
+
+  if (experiments[@"replaysSessionSampleRate"] == nil &&
+      experiments[@"replaysOnErrorSampleRate"] == nil) {
+    NSLog(@"Session replay disabled via configuration");
+    return;
+  }
+
+  NSLog(@"Setting up session replay");
+  NSDictionary *replayOptions = options[@"mobileReplayOptions"] ?: @{};
+
+  [options setValue:@{
+    @"sessionReplay" : @{
+      @"sessionSampleRate" : experiments[@"replaysSessionSampleRate"]
+          ?: [NSNull null],
+      @"errorSampleRate" : experiments[@"replaysOnErrorSampleRate"]
+          ?: [NSNull null],
+      @"redactAllImages" : replayOptions[@"maskAllImages"] ?: [NSNull null],
+      @"redactAllText" : replayOptions[@"maskAllText"] ?: [NSNull null],
+    }
+  }
+             forKey:@"experimental"];
+
+  [RNSentrySessionReplay addReplayRNRedactClasses:replayOptions];
+}
+
++ (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];
+}
+
++ (void)postInit {
+  RNSentryBreadcrumbConverter *breadcrumbConverter =
+      [[RNSentryBreadcrumbConverter alloc] init];
+  [PrivateSentrySDKOnly configureSessionReplayWith:breadcrumbConverter
+                                screenshotProvider:nil];
+}
+
+@end
+#endif
diff --git a/src/js/touchevents.tsx b/src/js/touchevents.tsx
@@ -130,7 +130,10 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
 
     const crumb = {
       category: this.props.breadcrumbCategory,
-      data: { path: touchPath },
+      data: {
+        path: touchPath,
+        target: detail,
+      },
       level: level,
       message: `Touch event within element: ${detail}`,
       type: this.props.breadcrumbType,
diff --git a/test/touchevents.test.tsx b/test/touchevents.test.tsx
@@ -102,6 +102,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
       category: defaultProps.breadcrumbCategory,
       data: {
         path: [{ name: 'View' }, { name: 'Connect(View)' }, { label: 'LABEL!' }],
+        target: "LABEL!",
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: LABEL!',
@@ -161,6 +162,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
       category: defaultProps.breadcrumbCategory,
       data: {
         path: [{ name: 'Styled(View)' }],
+        target: "Styled(View)",
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: Styled(View)',
@@ -211,6 +213,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
       category: defaultProps.breadcrumbCategory,
       data: {
         path: [{ label: 'Connect(View)' }, { name: 'Styled(View)' }],
+        target: "Connect(View)",
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: Connect(View)',
@@ -274,6 +277,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
           { name: 'Styled(View)' },
           { element: 'View', file: 'happyview.js', name: 'Happy' },
         ],
+        target: "Screen (screen.tsx)",
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: Screen (screen.tsx)',
@@ -305,6 +309,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
       category: defaultProps.breadcrumbCategory,
       data: {
         path: [{ name: 'Text' }],
+        target: "Text",
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: Text',

Original file line number	Diff line number	Diff line change
`@@ -188,7 +188,7 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {`
`188`	`188`
`189`	`189`	`options.setSentryClientName(sdkVersion.getName() + "/" + sdkVersion.getVersion());`
`190`	`190`	`options.setNativeSdkName(NATIVE_SDK_NAME);`
`191`		`- options.setSdkVersion(sdkVersion);`
	`191`	`+ options.setSdkVersion(sdkVersion);`
`192`	`192`
`193`	`193`	`if (rnOptions.hasKey("debug") && rnOptions.getBoolean("debug")) {`
`194`	`194`	`options.setDebug(true);`
`@@ -256,6 +256,7 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {`
`256`	`256`	`}`
`257`	`257`	`if (rnOptions.hasKey("_experiments")) {`
`258`	`258`	`options.getExperimental().setSessionReplay(getReplayOptions(rnOptions));`
	`259`	`+ options.getReplayController().setBreadcrumbConverter(new RNSentryReplayBreadcrumbConverter());`
`259`	`260`	`}`
`260`	`261`	`options.setBeforeSend((event, hint) -> {`
`261`	`262`	`// React native internally throws a JavascriptException`