feat(replay): Add breadcrumbs mapping from RN to RRWeb format

RNSentry.podspec

@@ -14,7 +14,7 @@ is_new_arch_enabled = ENV["RCT_NEW_ARCH_ENABLED"] == "1"
 is_using_hermes = (ENV['USE_HERMES'] == nil && is_hermes_default) || ENV['USE_HERMES'] == '1'
 new_arch_enabled_flag = (is_new_arch_enabled ? folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED" : "")
 sentry_profiling_supported_flag = (is_profiling_supported ? " -DSENTRY_PROFILING_SUPPORTED=1" : "")
-other_cflags = "$(inherited)" + new_arch_enabled_flag + sentry_profiling_supported_flag
+other_cflags = "$(inherited) -fcxx-modules -fmodules" + new_arch_enabled_flag + sentry_profiling_supported_flag
 
 Pod::Spec.new do |s|
   s.name           = 'RNSentry'

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

@@ -294,6 +294,9 @@ public void initNativeSdk(final ReadableMap rnOptions, Promise promise) {
             }
         });
 
+        Sentry.getCurrentHub().getOptions().getReplayController()
+                .setBreadcrumbConverter(new RNSentryReplayBreadcrumbConverter());
+
         promise.resolve(true);
     }
 

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);
+  }
+}

ios/RNSentry.mm

@@ -36,6 +36,7 @@
 
 #import "RNSentryEvents.h"
 #import "RNSentryDependencyContainer.h"
+#import "RNSentryBreadcrumbConverter.h"
 
 #if SENTRY_HAS_UIKIT
 #import "RNSentryRNSScreen.h"
@@ -90,6 +91,9 @@ + (BOOL)requiresMainQueueSetup {
 
     [SentrySDK startWithOptions:sentryOptions];
 
+    RNSentryBreadcrumbConverter* breadcrumbConverter = [[RNSentryBreadcrumbConverter alloc] init];
+    [PrivateSentrySDKOnly configureSessionReplayWith: breadcrumbConverter screenshotProvider: nil];
+
 #if TARGET_OS_IPHONE || TARGET_OS_MACCATALYST
     BOOL appIsActive = [[UIApplication sharedApplication] applicationState] == UIApplicationStateActive;
 #else

ios/RNSentryBreadcrumbConverter.h

@@ -0,0 +1,13 @@
+@import Sentry;
+
+@class SentryRRWebEvent;
+
+@interface RNSentryBreadcrumbConverter
+    : NSObject <SentryReplayBreadcrumbConverter>
+
+- (NSArray<SentryRRWebEvent *> *_Nonnull)
+    convertWithBreadcrumbs:(NSArray<SentryBreadcrumb *> *_Nonnull)breadcrumbs
+                      from:(NSDate *_Nonnull)from
+                     until:(NSDate *_Nonnull)until;
+
+@end

ios/RNSentryBreadcrumbConverter.m

@@ -0,0 +1,32 @@
+#import "RNSentryBreadcrumbConverter.h"
+
+@implementation RNSentryBreadcrumbConverter {
+}
+
+- (NSArray<SentryRRWebEvent *> *_Nonnull)
+    convertWithBreadcrumbs:(NSArray<SentryBreadcrumb *> *_Nonnull)breadcrumbs
+                      from:(NSDate *_Nonnull)from
+                     until:(NSDate *_Nonnull)until {
+  NSMutableArray<SentryRRWebEvent *> *outBreadcrumbs = [NSMutableArray array];
+  for (SentryBreadcrumb *breadcrumb in breadcrumbs) {
+    if (breadcrumb.timestamp &&
+        [breadcrumb.timestamp compare:from] != NSOrderedAscending &&
+        [breadcrumb.timestamp compare:until] != NSOrderedDescending) {
+      if ([breadcrumb.category isEqualToString:@"touch"]) {
+        SentryRRWebBreadcrumbEvent *rrwebBreadcrumb =
+            [[SentryRRWebBreadcrumbEvent alloc]
+                initWithTimestamp:breadcrumb.timestamp
+                         category:@"ui.tap"
+                          message:breadcrumb.data ? [breadcrumb.data valueForKey:@"target"] : nil
+                            level:breadcrumb.level
+                             data:breadcrumb.data];
+        [outBreadcrumbs addObject:rrwebBreadcrumb];
+      } else {
+        // TODO delegate to the default breadcrumb converter
+      }
+    }
+  }
+  return outBreadcrumbs;
+}
+
+@end

src/js/touchevents.tsx

@@ -120,7 +120,10 @@ class TouchEventBoundary extends React.Component<TouchEventBoundaryProps> {
     const level = 'info' as SeverityLevel;
     const crumb = {
       category: this.props.breadcrumbCategory,
-      data: { componentTree: componentTreeNames },
+      data: {
+        componentTree: componentTreeNames,
+        ...(activeLabel && { target: activeLabel }),
+      },
       level: level,
       message: activeLabel
         ? `Touch event within element: ${activeLabel}`

test/touchevents.test.tsx

@@ -102,6 +102,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
       category: defaultProps.breadcrumbCategory,
       data: {
         componentTree: ['View', 'Connect(View)', 'LABEL!'],
+        target: "LABEL!",
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: LABEL!',
@@ -161,6 +162,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
       category: defaultProps.breadcrumbCategory,
       data: {
         componentTree: ['Styled(View2)', 'Styled(View)'],
+        target: 'Styled(View2)',
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: Styled(View2)',
@@ -211,6 +213,7 @@ describe('TouchEventBoundary._onTouchStart', () => {
       category: defaultProps.breadcrumbCategory,
       data: {
         componentTree: ['Connect(View)', 'Styled(View)'],
+        target: 'Connect(View)',
       },
       level: 'info' as SeverityLevel,
       message: 'Touch event within element: Connect(View)',