feat(replay): Add SentryMask and SentryUnmask iOS components

CHANGELOG.md

@@ -8,6 +8,27 @@
 
 ## Unreleased
 
+### Features
+
+- Add Replay Custom Masking for iOS ([#4238](https://github.com/getsentry/sentry-react-native/pull/4224))
+
+  ```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))
@@ -19,6 +40,14 @@
   - [changelog](https://github.com/getsentry/sentry-javascript/blob/develop/CHANGELOG.md#8390)
   - [diff](https://github.com/getsentry/sentry-javascript/compare/8.38.0...8.39.0)
 
+## 6.3.0-beta.2
+
+### Dependencies
+
+- Bump Cocoa SDK from v8.40.1 to v8.41.0-beta.1 ([#4295](https://github.com/getsentry/sentry-react-native/pull/4295))
+  - [changelog](https://github.com/getsentry/sentry-cocoa/blob/main/CHANGELOG.md#8410-beta1)
+  - [diff](https://github.com/getsentry/sentry-cocoa/compare/8.40.1...8.41.0-beta.1)
+
 ## 6.3.0-beta.1
 
 ### Features

dev-packages/e2e-tests/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sentry-react-native-e2e-tests",
-  "version": "6.3.0-beta.1",
+  "version": "6.3.0-beta.2",
   "private": true,
   "description": "Sentry React Native End to End Tests Library",
   "main": "dist/index.js",
@@ -13,7 +13,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-typescript": "^7.18.6",
-    "@sentry/react-native": "6.3.0-beta.1",
+    "@sentry/react-native": "6.3.0-beta.2",
     "@sentry/utils": "8.39.0",
     "@types/node": "^20.9.3",
     "@types/react": "^18.2.64",

dev-packages/type-check/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sentry-react-native-type-check",
   "private": true,
-  "version": "6.3.0-beta.1",
+  "version": "6.3.0-beta.2",
   "scripts": {
     "type-check": "./run-type-check.sh"
   }

lerna.json

@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "6.3.0-beta.1",
+  "version": "6.3.0-beta.2",
   "packages": [
     "packages/*",
     "dev-packages/*",

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/RNSentry.podspec

@@ -37,7 +37,7 @@ Pod::Spec.new do |s|
 
   s.compiler_flags = other_cflags
 
-  s.dependency 'Sentry/HybridSDK', '8.40.1'
+  s.dependency 'Sentry/HybridSDK', '8.41.0-beta.1'
 
   if defined? install_modules_dependencies
     # Default React Native dependencies for 0.71 and above (new and legacy architecture)

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/ios/RNSentryReplay.h

@@ -5,4 +5,8 @@
 
 + (void)postInit;
 
++ (Class)getMaskClass;
+
++ (Class)getUnmaskClass;
+
 @end

packages/core/ios/RNSentryReplay.m → packages/core/ios/RNSentryReplay.mm

@@ -1,5 +1,9 @@
 #import "RNSentryReplay.h"
-#import "RNSentryReplayBreadcrumbConverter.h"
+#import "RNSentryReplayBreadcrumbConverterHelper.h"
+#import "React/RCTTextView.h"
+#import "Replay/RNSentryReplayMask.h"
+#import "Replay/RNSentryReplayUnmask.h"
+#import <Sentry/PrivateSentrySDKOnly.h>
 
 #if SENTRY_TARGET_REPLAY_SUPPORTED
 
@@ -56,9 +60,21 @@ + (NSArray *_Nonnull)getReplayRNRedactClasses:(NSDictionary *_Nullable)replayOpt
 
 + (void)postInit
 {
-    RNSentryReplayBreadcrumbConverter *breadcrumbConverter =
-        [[RNSentryReplayBreadcrumbConverter alloc] init];
-    [PrivateSentrySDKOnly configureSessionReplayWith:breadcrumbConverter screenshotProvider:nil];
+    // We can't import RNSentryReplayMask.h here because it's Objective-C++
+    // To avoid typos, we test the class existence in the tests
+    [PrivateSentrySDKOnly setRedactContainerClass:[RNSentryReplay getMaskClass]];
+    [PrivateSentrySDKOnly setIgnoreContainerClass:[RNSentryReplay getUnmaskClass]];
+    [RNSentryReplayBreadcrumbConverterHelper configureSessionReplayWithConverter];
+}
+
++ (Class)getMaskClass
+{
+    return RNSentryReplayMask.class;
+}
+
++ (Class)getUnmaskClass
+{
+    return RNSentryReplayUnmask.class;
 }
 
 @end

packages/core/ios/RNSentryReplayBreadcrumbConverterHelper.h

@@ -0,0 +1,7 @@
+#import <Sentry/SentryDefines.h>
+
+@interface RNSentryReplayBreadcrumbConverterHelper : NSObject
+
++ (void)configureSessionReplayWithConverter;
+
+@end

packages/core/ios/RNSentryReplayBreadcrumbConverterHelper.m

@@ -0,0 +1,16 @@
+#import "RNSentryReplayBreadcrumbConverterHelper.h"
+
+#if SENTRY_TARGET_REPLAY_SUPPORTED
+#    import "RNSentryReplayBreadcrumbConverter.h"
+
+@implementation RNSentryReplayBreadcrumbConverterHelper
+
++ (void)configureSessionReplayWithConverter
+{
+    RNSentryReplayBreadcrumbConverter *breadcrumbConverter =
+        [[RNSentryReplayBreadcrumbConverter alloc] init];
+    [PrivateSentrySDKOnly configureSessionReplayWith:breadcrumbConverter screenshotProvider:nil];
+}
+
+@end
+#endif

packages/core/ios/Replay/RNSentryReplayMask.h

@@ -0,0 +1,24 @@
+#import <Sentry/SentryDefines.h>
+
+#if SENTRY_HAS_UIKIT
+
+#    import <React/RCTViewManager.h>
+
+#    ifdef RCT_NEW_ARCH_ENABLED
+#        import <React/RCTViewComponentView.h>
+#    else
+#        import <React/RCTView.h>
+#    endif
+
+@interface RNSentryReplayMaskManager : RCTViewManager
+@end
+
+@interface RNSentryReplayMask :
+#    ifdef RCT_NEW_ARCH_ENABLED
+    RCTViewComponentView
+#    else
+    RCTView
+#    endif
+@end
+
+#endif

packages/core/ios/Replay/RNSentryReplayMask.mm

@@ -0,0 +1,51 @@
+#import <Sentry/SentryDefines.h>
+
+#if SENTRY_HAS_UIKIT
+
+#    import "RNSentryReplayMask.h"
+
+#    ifdef RCT_NEW_ARCH_ENABLED
+#        import <react/renderer/components/RNSentrySpec/ComponentDescriptors.h>
+#        import <react/renderer/components/RNSentrySpec/RCTComponentViewHelpers.h>
+// RCTFabricComponentsPlugins needed for RNSentryReplayMaskCls
+#        import <React/RCTFabricComponentsPlugins.h>
+#    endif
+
+@implementation RNSentryReplayMaskManager
+
+RCT_EXPORT_MODULE(RNSentryReplayMask)
+
+- (UIView *)view
+{
+    return [RNSentryReplayMask new];
+}
+
+@end
+
+#    ifdef RCT_NEW_ARCH_ENABLED
+@interface
+RNSentryReplayMask () <RCTRNSentryReplayMaskViewProtocol>
+@end
+#    endif
+
+@implementation RNSentryReplayMask
+
+#    ifdef RCT_NEW_ARCH_ENABLED
++ (facebook::react::ComponentDescriptorProvider)componentDescriptorProvider
+{
+    return facebook::react::concreteComponentDescriptorProvider<
+        facebook::react::RNSentryReplayMaskComponentDescriptor>();
+}
+#    endif
+
+@end
+
+#    ifdef RCT_NEW_ARCH_ENABLED
+Class<RCTComponentViewProtocol>
+RNSentryReplayMaskCls(void)
+{
+    return RNSentryReplayMask.class;
+}
+#    endif
+
+#endif

packages/core/ios/Replay/RNSentryReplayUnmask.h

@@ -0,0 +1,24 @@
+#import <Sentry/SentryDefines.h>
+
+#if SENTRY_HAS_UIKIT
+
+#    import <React/RCTViewManager.h>
+
+#    ifdef RCT_NEW_ARCH_ENABLED
+#        import <React/RCTViewComponentView.h>
+#    else
+#        import <React/RCTView.h>
+#    endif
+
+@interface RNSentryReplayUnmaskManager : RCTViewManager
+@end
+
+@interface RNSentryReplayUnmask :
+#    ifdef RCT_NEW_ARCH_ENABLED
+    RCTViewComponentView
+#    else
+    RCTView
+#    endif
+@end
+
+#endif