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

@@ -27,6 +27,8 @@
 		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; };
 		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>"; };
@@ -98,9 +100,19 @@
 			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 */,

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

@@ -64,12 +64,13 @@ final class RNSentryReplayOptions: XCTestCase {
     }
 
     func assertAllDefaultReplayOptionsAreNotNil(replayOptions: [String: Any]) {
-        XCTAssertEqual(replayOptions.count, 5)
+        XCTAssertEqual(replayOptions.count, 6)
         XCTAssertNotNil(replayOptions["sessionSampleRate"])
         XCTAssertNotNil(replayOptions["errorSampleRate"])
         XCTAssertNotNil(replayOptions["maskAllImages"])
         XCTAssertNotNil(replayOptions["maskAllText"])
         XCTAssertNotNil(replayOptions["maskedViewClasses"])
+        XCTAssertNotNil(replayOptions["unmaskedViewClasses"])
     }
 
     func testSessionSampleRate() {
@@ -109,11 +110,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 +125,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 +155,34 @@ 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 testMaskRNSentryReplayCustomComponents() {
+        let optionsDict = ([
+            "dsn": "https://abc@def.ingest.sentry.io/1234567",
+            "_experiments": [ "replaysOnErrorSampleRate": 0.75 ],
+        ] as NSDictionary).mutableCopy() as! NSMutableDictionary
+
+        RNSentryReplay.updateOptions(optionsDict)
+
+        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
+
+        assertContainsClass(classArray: actualOptions.experimental.sessionReplay.maskedViewClasses, anyClass: RNSentryReplayMask.self)
+        assertContainsClass(classArray: actualOptions.experimental.sessionReplay.unmaskedViewClasses, anyClass: RNSentryReplayUnmask.self)
+    }
+
+    func assertContainsClass(classArray: [AnyClass], anyClass: AnyClass) {
+        XCTAssertTrue(mapToObjectIdentifiers(classArray: classArray).contains(ObjectIdentifier(anyClass)))
+    }
+
+    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/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,6 +64,10 @@
 
 + (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:NSClassFromString(@"RNSentryReplayMask")];
+    [PrivateSentrySDKOnly setIgnoreContainerClass:NSClassFromString(@"RNSentryReplayUnmask")];
     RNSentryReplayBreadcrumbConverter *breadcrumbConverter =
         [[RNSentryReplayBreadcrumbConverter alloc] init];
     [PrivateSentrySDKOnly configureSessionReplayWith:breadcrumbConverter screenshotProvider:nil];

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>;

packages/core/src/js/index.ts

@@ -77,3 +77,5 @@ export {
 } from './tracing';
 
 export type { TimeToDisplayProps } from './tracing';
+
+export { Mask, Unmask } from './replay/CustomMask';