feat(replay): Add SentryMask and SentryUnmask iOS components

CHANGELOG.md

@@ -31,6 +31,25 @@
   export SENTRY_DISABLE_NATIVE_DEBUG_UPLOAD=true
   ```
 
+- 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 will be unmasked."}</Text>
+        </Sentry.Unmask>
+      </View>
+    );
+  };
+  ```
+
 ### Fixes
 
 - Ignore JavascriptException to filter out obfuscated duplicate JS Errors on Android ([#4232](https://github.com/getsentry/sentry-react-native/pull/4232))

packages/core/.npmignore

@@ -11,7 +11,7 @@
 !react-native.config.js
 !/ios/**/*
 !/android/**/*
-!src/js/NativeRNSentry.ts
+!src/**/*
 !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 */; };
@@ -27,6 +28,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>"; };
@@ -94,13 +98,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 */,
@@ -226,6 +241,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 XCTest
+import Sentry
+
+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

@@ -1,5 +1,6 @@
 #import "RNSentryReplay.h"
 #import "RNSentryReplayBreadcrumbConverter.h"
+#import "React/RCTTextView.h"
 
 #if SENTRY_TARGET_REPLAY_SUPPORTED
 
@@ -36,6 +37,13 @@
                forKey:@"experimental"];
 }
 
++ (NSArray *_Nonnull)getReplayRNUnmaskClasses
+{
+    // We can't import RNSentryReplayUnmask.h here because it's Objective-C++
+    // To avoid typos, we test the class existens in the tests
+    return @[ @"RNSentryReplayUnmask" ];
+}
+
 + (NSArray *_Nonnull)getReplayRNRedactClasses:(NSDictionary *_Nullable)replayOptions
 {
     NSMutableArray *_Nonnull classesToRedact = [[NSMutableArray alloc] init];
@@ -56,10 +64,24 @@
 
 + (void)postInit
 {
+    // We can't import RNSentryReplayMask.h here because it's Objective-C++
+    // To avoid typos, we test the class existens in the tests
+    [PrivateSentrySDKOnly setRedactContainerClass:[self getMaskClass]];
+    [PrivateSentrySDKOnly setIgnoreContainerClass:[self getUnmaskClass]];
     RNSentryReplayBreadcrumbConverter *breadcrumbConverter =
         [[RNSentryReplayBreadcrumbConverter alloc] init];
     [PrivateSentrySDKOnly configureSessionReplayWith:breadcrumbConverter screenshotProvider:nil];
 }
 
++ (Class) getMaskClass
+{
+    return NSClassFromString(@"RNSentryReplayMask");
+}
+
++ (Class) getUnmaskClass
+{
+    return NSClassFromString(@"RNSentryReplayUnmask");
+}
+
 @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

packages/core/ios/Replay/RNSentryReplayUnmask.mm

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

packages/core/package.json

@@ -16,6 +16,7 @@
   "typescript": {
     "definition": "dist/js/index.d.ts"
   },
+  "react-native": "src/js/index.ts",
   "main": "dist/js/index.js",
   "scripts": {
     "build": "npx run-s build:sdk downlevel build:tools build:plugin",
@@ -118,7 +119,7 @@
   },
   "codegenConfig": {
     "name": "RNSentrySpec",
-    "type": "modules",
+    "type": "all",
     "jsSrcsDir": "src",
     "android": {
       "javaPackageName": "io.sentry.react"

packages/core/src/js/RNSentryReplayMaskNativeComponent.ts

@@ -0,0 +1,10 @@
+import type { HostComponent, ViewProps } from 'react-native';
+// The default export exists in the file but eslint doesn't see it
+// eslint-disable-next-line import/default
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+// If changed to type NativeProps = ViewProps, react native codegen will fail finding the NativeProps type
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNSentryReplayMask') as HostComponent<NativeProps>;

packages/core/src/js/RNSentryReplayUnmaskNativeComponent.ts

@@ -0,0 +1,10 @@
+import type { HostComponent, ViewProps } from 'react-native';
+// The default export exists in the file but eslint doesn't see it
+// eslint-disable-next-line import/default
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+// If changed to type NativeProps = ViewProps, react native codegen will fail finding the NativeProps type
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface NativeProps extends ViewProps {}
+
+export default codegenNativeComponent<NativeProps>('RNSentryReplayUnmask') as HostComponent<NativeProps>;