feat(replay): Add Mask and Unmask Android implementation

CHANGELOG.md

@@ -8,6 +8,27 @@
 
 ## Unreleased
 
+### Features
+
+- Add Replay Custom Masking for iOS and Android ([#4224](https://github.com/getsentry/sentry-react-native/pull/4224), [#4265](https://github.com/getsentry/sentry-react-native/pull/4265))
+
+  ```jsx
+  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>
+    );
+  };
+  ```
+
 ### Fixes
 
 - Remove `.sentry` tmp directory and use environmental variables instead to save default Babel transformer path ([#4298](https://github.com/getsentry/sentry-react-native/pull/4298))

packages/core/.npmignore

@@ -11,7 +11,13 @@
 !react-native.config.js
 !/ios/**/*
 !/android/**/*
+
+# New Architecture Codegen
 !src/js/NativeRNSentry.ts
+!src/js/RNSentryReplayMaskNativeComponent.ts
+!src/js/RNSentryReplayUnmaskNativeComponent.ts
+
+# Scripts
 !scripts/collect-modules.sh
 !scripts/copy-debugid.js
 !scripts/has-sourcemap-debugid.js

packages/core/RNSentryCocoaTester/RNSentryCocoaTester.xcodeproj/project.pbxproj

@@ -9,6 +9,7 @@
 /* Begin PBXBuildFile section */
 		332D33472CDBDBB600547D76 /* RNSentryReplayOptionsTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 332D33462CDBDBB600547D76 /* RNSentryReplayOptionsTests.swift */; };
 		336084392C32E382008CC412 /* RNSentryReplayBreadcrumbConverterTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 336084382C32E382008CC412 /* RNSentryReplayBreadcrumbConverterTests.swift */; };
+		3380C6C42CE25ECA0018B9B6 /* RNSentryReplayPostInitTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 3380C6C32CE25ECA0018B9B6 /* RNSentryReplayPostInitTests.swift */; };
 		33958C692BFCF12600AD1FB6 /* RNSentryOnDrawReporterTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 33958C682BFCF12600AD1FB6 /* RNSentryOnDrawReporterTests.m */; };
 		33AFDFED2B8D14B300AAB120 /* RNSentryFramesTrackerListenerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 33AFDFEC2B8D14B300AAB120 /* RNSentryFramesTrackerListenerTests.m */; };
 		33AFDFF12B8D15E500AAB120 /* RNSentryDependencyContainerTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 33AFDFF02B8D15E500AAB120 /* RNSentryDependencyContainerTests.m */; };
@@ -28,6 +29,9 @@
 		3360843A2C32E3A8008CC412 /* RNSentryReplayBreadcrumbConverter.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = RNSentryReplayBreadcrumbConverter.h; path = ../ios/RNSentryReplayBreadcrumbConverter.h; sourceTree = "<group>"; };
 		3360843C2C340C76008CC412 /* RNSentryBreadcrumbTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RNSentryBreadcrumbTests.swift; sourceTree = "<group>"; };
 		3360898D29524164007C7730 /* RNSentryCocoaTesterTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = RNSentryCocoaTesterTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
+		3380C6C12CDEC5850018B9B6 /* RNSentryReplayUnmask.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = RNSentryReplayUnmask.h; path = ../ios/Replay/RNSentryReplayUnmask.h; sourceTree = SOURCE_ROOT; };
+		3380C6C22CDEC6630018B9B6 /* RNSentryReplayMask.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = RNSentryReplayMask.h; path = ../ios/Replay/RNSentryReplayMask.h; sourceTree = SOURCE_ROOT; };
+		3380C6C32CE25ECA0018B9B6 /* RNSentryReplayPostInitTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = RNSentryReplayPostInitTests.swift; sourceTree = "<group>"; };
 		338739072A7D7D2800950DDD /* RNSentryReplay.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; name = RNSentryReplay.h; path = ../ios/RNSentryReplay.h; sourceTree = "<group>"; };
 		33958C672BFCEF5A00AD1FB6 /* RNSentryOnDrawReporter.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = RNSentryOnDrawReporter.h; path = ../ios/RNSentryOnDrawReporter.h; sourceTree = "<group>"; };
 		33958C682BFCF12600AD1FB6 /* RNSentryOnDrawReporterTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = RNSentryOnDrawReporterTests.m; sourceTree = "<group>"; };
@@ -95,13 +99,24 @@
 				33958C682BFCF12600AD1FB6 /* RNSentryOnDrawReporterTests.m */,
 				3360843C2C340C76008CC412 /* RNSentryBreadcrumbTests.swift */,
 				332D33462CDBDBB600547D76 /* RNSentryReplayOptionsTests.swift */,
+				3380C6C32CE25ECA0018B9B6 /* RNSentryReplayPostInitTests.swift */,
 			);
 			path = RNSentryCocoaTesterTests;
 			sourceTree = "<group>";
 		};
+		3380C6C02CDEC56B0018B9B6 /* Replay */ = {
+			isa = PBXGroup;
+			children = (
+				3380C6C22CDEC6630018B9B6 /* RNSentryReplayMask.h */,
+				3380C6C12CDEC5850018B9B6 /* RNSentryReplayUnmask.h */,
+			);
+			path = Replay;
+			sourceTree = "<group>";
+		};
 		33AFE0122B8F319000AAB120 /* RNSentry */ = {
 			isa = PBXGroup;
 			children = (
+				3380C6C02CDEC56B0018B9B6 /* Replay */,
 				332D33482CDBDC7300547D76 /* RNSentry.h */,
 				3360843A2C32E3A8008CC412 /* RNSentryReplayBreadcrumbConverter.h */,
 				330F308D2C0F385A002A0D4E /* RNSentryBreadcrumb.h */,
@@ -228,6 +243,7 @@
 				336084392C32E382008CC412 /* RNSentryReplayBreadcrumbConverterTests.swift in Sources */,
 				33F58AD02977037D008F60EA /* RNSentryTests.mm in Sources */,
 				33958C692BFCF12600AD1FB6 /* RNSentryOnDrawReporterTests.m in Sources */,
+				3380C6C42CE25ECA0018B9B6 /* RNSentryReplayPostInitTests.swift in Sources */,
 				33AFDFED2B8D14B300AAB120 /* RNSentryFramesTrackerListenerTests.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;

packages/core/RNSentryCocoaTester/RNSentryCocoaTesterTests/RNSentryCocoaTesterTests-Bridging-Header.h

@@ -5,3 +5,5 @@
 #import "RNSentryBreadcrumb.h"
 #import "RNSentryReplay.h"
 #import "RNSentryReplayBreadcrumbConverter.h"
+#import "RNSentryReplayMask.h"
+#import "RNSentryReplayUnmask.h"

packages/core/RNSentryCocoaTester/RNSentryCocoaTesterTests/RNSentryReplayOptionsTests.swift

@@ -109,11 +109,7 @@ final class RNSentryReplayOptions: XCTestCase {
         let sessionReplay = experimental["sessionReplay"] as! [String: Any]
 
         let maskedViewClasses = sessionReplay["maskedViewClasses"] as! [String]
-        XCTAssertEqual(maskedViewClasses.count, 1)
-        XCTAssertEqual(maskedViewClasses[0], "RNSVGSvgView")
-
-        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
-        XCTAssertEqual(actualOptions.experimental.sessionReplay.maskedViewClasses.count, 0)
+        XCTAssertTrue(maskedViewClasses.contains("RNSVGSvgView"))
     }
 
     func testMaskAllImages() {
@@ -128,9 +124,7 @@ final class RNSentryReplayOptions: XCTestCase {
         let actualOptions = try! Options(dict: optionsDict as! [String: Any])
 
         XCTAssertEqual(actualOptions.experimental.sessionReplay.maskAllImages, true)
-        XCTAssertEqual(actualOptions.experimental.sessionReplay.maskedViewClasses.count, 1)
-        XCTAssertNotNil(actualOptions.experimental.sessionReplay.maskedViewClasses[0])
-        XCTAssertEqual(ObjectIdentifier(actualOptions.experimental.sessionReplay.maskedViewClasses[0]), ObjectIdentifier(NSClassFromString("RCTImageView")!))
+        assertContainsClass(classArray: actualOptions.experimental.sessionReplay.maskedViewClasses, stringClass: "RCTImageView")
     }
 
     func testMaskAllImagesFalse() {
@@ -160,11 +154,16 @@ final class RNSentryReplayOptions: XCTestCase {
         let actualOptions = try! Options(dict: optionsDict as! [String: Any])
 
         XCTAssertEqual(actualOptions.experimental.sessionReplay.maskAllText, true)
-        XCTAssertEqual(actualOptions.experimental.sessionReplay.maskedViewClasses.count, 2)
-        XCTAssertNotNil(actualOptions.experimental.sessionReplay.maskedViewClasses[0])
-        XCTAssertNotNil(actualOptions.experimental.sessionReplay.maskedViewClasses[1])
-        XCTAssertEqual(ObjectIdentifier(actualOptions.experimental.sessionReplay.maskedViewClasses[0]), ObjectIdentifier(NSClassFromString("RCTTextView")!))
-        XCTAssertEqual(ObjectIdentifier(actualOptions.experimental.sessionReplay.maskedViewClasses[1]), ObjectIdentifier(NSClassFromString("RCTParagraphComponentView")!))
+        assertContainsClass(classArray: actualOptions.experimental.sessionReplay.maskedViewClasses, stringClass: "RCTTextView")
+        assertContainsClass(classArray: actualOptions.experimental.sessionReplay.maskedViewClasses, stringClass: "RCTParagraphComponentView")
+    }
+
+    func assertContainsClass(classArray: [AnyClass], stringClass: String) {
+        XCTAssertTrue(mapToObjectIdentifiers(classArray: classArray).contains(ObjectIdentifier(NSClassFromString(stringClass)!)))
+    }
+
+    func mapToObjectIdentifiers(classArray: [AnyClass]) -> [ObjectIdentifier] {
+        return classArray.map { ObjectIdentifier($0) }
     }
 
     func testMaskAllTextFalse() {

packages/core/RNSentryCocoaTester/RNSentryCocoaTesterTests/RNSentryReplayPostInitTests.swift

@@ -0,0 +1,13 @@
+import Sentry
+import XCTest
+
+final class RNSentryReplayPostInitTests: XCTestCase {
+
+    func testMask() {
+        XCTAssertEqual(ObjectIdentifier(RNSentryReplay.getMaskClass()), ObjectIdentifier(RNSentryReplayMask.self))
+    }
+
+    func testUnmask() {
+        XCTAssertEqual(ObjectIdentifier(RNSentryReplay.getUnmaskClass()), ObjectIdentifier(RNSentryReplayUnmask.self))
+    }
+}

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

@@ -64,6 +64,8 @@
 import io.sentry.protocol.SentryPackage;
 import io.sentry.protocol.User;
 import io.sentry.protocol.ViewHierarchy;
+import io.sentry.react.replay.RNSentryReplayMask;
+import io.sentry.react.replay.RNSentryReplayUnmask;
 import io.sentry.util.DebugMetaPropertiesApplier;
 import io.sentry.util.FileUtils;
 import io.sentry.util.JsonSerializationUtils;
@@ -371,6 +373,9 @@ private SentryReplayOptions getReplayOptions(@NotNull ReadableMap rnOptions) {
       androidReplayOptions.addMaskViewClass("com.horcrux.svg.SvgView"); // react-native-svg
     }
 
+    androidReplayOptions.setMaskViewContainerClass(RNSentryReplayMask.class.getName());
+    androidReplayOptions.setUnmaskViewContainerClass(RNSentryReplayUnmask.class.getName());
+
     return androidReplayOptions;
   }
 

packages/core/android/src/main/java/io/sentry/react/RNSentryPackage.java

@@ -8,18 +8,35 @@
 import com.facebook.react.module.model.ReactModuleInfo;
 import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.react.uimanager.ViewManager;
-import java.util.Arrays;
+import io.sentry.react.replay.RNSentryReplayMaskManager;
+import io.sentry.react.replay.RNSentryReplayMaskManagerImpl;
+import io.sentry.react.replay.RNSentryReplayUnmaskManager;
+import io.sentry.react.replay.RNSentryReplayUnmaskManagerImpl;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
 public class RNSentryPackage extends TurboReactPackage {
 
+  private static final boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
+
   @Nullable
   @Override
   public NativeModule getModule(String name, ReactApplicationContext reactContext) {
-    if (name.equals(RNSentryModuleImpl.NAME)) {
+    if (RNSentryModuleImpl.NAME.equals(name)) {
       return new RNSentryModule(reactContext);
+    } else if (isTurboModule) {
+      return getFabricComponentNativeModule(name);
+    } else {
+      return null;
+    }
+  }
+
+  private NativeModule getFabricComponentNativeModule(String name) {
+    if (RNSentryReplayMaskManagerImpl.REACT_CLASS.equals(name)) {
+      return new RNSentryReplayMaskManager();
+    } else if (RNSentryReplayUnmaskManagerImpl.REACT_CLASS.equals(name)) {
+      return new RNSentryReplayUnmaskManager();
     } else {
       return null;
     }
@@ -29,7 +46,6 @@ public NativeModule getModule(String name, ReactApplicationContext reactContext)
   public ReactModuleInfoProvider getReactModuleInfoProvider() {
     return () -> {
       final Map<String, ReactModuleInfo> moduleInfos = new HashMap<>();
-      boolean isTurboModule = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
       moduleInfos.put(
           RNSentryModuleImpl.NAME,
           new ReactModuleInfo(
@@ -41,13 +57,40 @@ public ReactModuleInfoProvider getReactModuleInfoProvider() {
               false, // isCxxModule
               isTurboModule // isTurboModule
               ));
+      if (isTurboModule) {
+        moduleInfos.put(
+            RNSentryReplayMaskManagerImpl.REACT_CLASS,
+            new ReactModuleInfo(
+                RNSentryReplayMaskManagerImpl.REACT_CLASS, // name
+                RNSentryReplayMaskManagerImpl.REACT_CLASS, // className
+                false, // canOverrideExistingModule
+                false, // needsEagerInit
+                false, // hasConstants, required in RN 0.65
+                false, // isCxxModule
+                true // isTurboModule
+                ));
+        moduleInfos.put(
+            RNSentryReplayUnmaskManagerImpl.REACT_CLASS,
+            new ReactModuleInfo(
+                RNSentryReplayUnmaskManagerImpl.REACT_CLASS, // name
+                RNSentryReplayUnmaskManagerImpl.REACT_CLASS, // className
+                false, // canOverrideExistingModule
+                false, // needsEagerInit
+                false, // hasConstants, required in RN 0.65
+                false, // isCxxModule
+                true // isTurboModule
+                ));
+      }
       return moduleInfos;
     };
   }
 
   @NonNull
   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-    return Arrays.asList(new RNSentryOnDrawReporterManager(reactContext));
+    return List.of(
+        new RNSentryOnDrawReporterManager(reactContext),
+        new RNSentryReplayMaskManager(),
+        new RNSentryReplayUnmaskManager());
   }
 }

packages/core/android/src/main/java/io/sentry/react/replay/RNSentryReplayMask.java

@@ -0,0 +1,10 @@
+package io.sentry.react.replay;
+
+import android.content.Context;
+import com.facebook.react.views.view.ReactViewGroup;
+
+public class RNSentryReplayMask extends ReactViewGroup {
+  public RNSentryReplayMask(Context context) {
+    super(context);
+  }
+}

packages/core/android/src/main/java/io/sentry/react/replay/RNSentryReplayMaskManagerImpl.java

@@ -0,0 +1,16 @@
+package io.sentry.react.replay;
+
+import androidx.annotation.NonNull;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+public final class RNSentryReplayMaskManagerImpl {
+
+  private RNSentryReplayMaskManagerImpl() {}
+
+  public static final String REACT_CLASS = "RNSentryReplayMask";
+
+  @NonNull
+  public static RNSentryReplayMask createViewInstance(@NonNull ThemedReactContext context) {
+    return new RNSentryReplayMask(context);
+  }
+}

packages/core/android/src/main/java/io/sentry/react/replay/RNSentryReplayUnmask.java

@@ -0,0 +1,10 @@
+package io.sentry.react.replay;
+
+import android.content.Context;
+import com.facebook.react.views.view.ReactViewGroup;
+
+public class RNSentryReplayUnmask extends ReactViewGroup {
+  public RNSentryReplayUnmask(Context context) {
+    super(context);
+  }
+}

packages/core/android/src/main/java/io/sentry/react/replay/RNSentryReplayUnmaskManagerImpl.java

@@ -0,0 +1,16 @@
+package io.sentry.react.replay;
+
+import androidx.annotation.NonNull;
+import com.facebook.react.uimanager.ThemedReactContext;
+
+public final class RNSentryReplayUnmaskManagerImpl {
+
+  private RNSentryReplayUnmaskManagerImpl() {}
+
+  public static final String REACT_CLASS = "RNSentryReplayUnmask";
+
+  @NonNull
+  public RNSentryReplayUnmask createViewInstance(@NonNull ThemedReactContext context) {
+    return new RNSentryReplayUnmask(context);
+  }
+}

packages/core/android/src/newarch/java/io/sentry/react/replay/RNSentryReplayMaskManager.java

@@ -0,0 +1,33 @@
+package io.sentry.react.replay;
+
+import androidx.annotation.NonNull;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.viewmanagers.RNSentryReplayMaskManagerDelegate;
+import com.facebook.react.viewmanagers.RNSentryReplayMaskManagerInterface;
+
+@ReactModule(name = RNSentryReplayMaskManagerImpl.REACT_CLASS)
+public class RNSentryReplayMaskManager extends ViewGroupManager<RNSentryReplayMask>
+    implements RNSentryReplayMaskManagerInterface<RNSentryReplayMask> {
+  private final RNSentryReplayMaskManagerDelegate<RNSentryReplayMask, RNSentryReplayMaskManager>
+      delegate = new RNSentryReplayMaskManagerDelegate<>(this);
+
+  @Override
+  public ViewManagerDelegate<RNSentryReplayMask> getDelegate() {
+    return delegate;
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return RNSentryReplayMaskManagerImpl.REACT_CLASS;
+  }
+
+  @NonNull
+  @Override
+  public RNSentryReplayMask createViewInstance(@NonNull ThemedReactContext context) {
+    return new RNSentryReplayMask(context);
+  }
+}

packages/core/android/src/newarch/java/io/sentry/react/replay/RNSentryReplayUnmaskManager.java

@@ -0,0 +1,36 @@
+package io.sentry.react.replay;
+
+import androidx.annotation.NonNull;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.ViewManagerDelegate;
+import com.facebook.react.viewmanagers.RNSentryReplayUnmaskManagerDelegate;
+import com.facebook.react.viewmanagers.RNSentryReplayUnmaskManagerInterface;
+
+@ReactModule(name = RNSentryReplayUnmaskManager.REACT_CLASS)
+public class RNSentryReplayUnmaskManager extends ViewGroupManager<RNSentryReplayUnmask>
+    implements RNSentryReplayUnmaskManagerInterface<RNSentryReplayUnmask> {
+  private final RNSentryReplayUnmaskManagerDelegate<
+          RNSentryReplayUnmask, RNSentryReplayUnmaskManager>
+      delegate = new RNSentryReplayUnmaskManagerDelegate<>(this);
+
+  @Override
+  public ViewManagerDelegate<RNSentryReplayUnmask> getDelegate() {
+    return delegate;
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  @NonNull
+  @Override
+  public RNSentryReplayUnmask createViewInstance(@NonNull ThemedReactContext context) {
+    return new RNSentryReplayUnmask(context);
+  }
+
+  public static final String REACT_CLASS = "RNSentryReplayUnmask";
+}