feat(replay): add enableExperimentalViewRenderer and enableFastViewRendering for iOS (#4660)

Author: antonis

CHANGELOG.md

@@ -12,6 +12,20 @@
 
 - Add thread information to spans ([#4579](https://github.com/getsentry/sentry-react-native/pull/4579))
 - Exposed `getDataFromUri` as a public API to retrieve data from a URI ([#4638](https://github.com/getsentry/sentry-react-native/pull/4638))
+- Add experimental flags `enableExperimentalViewRenderer` and `enableFastViewRendering` to enable up to 5x times more performance in Session Replay on iOS ([#4660](https://github.com/getsentry/sentry-react-native/pull/4660))
+
+  ```js
+  import * as Sentry from '@sentry/react-native';
+
+  Sentry.init({
+    integrations: [
+      Sentry.mobileReplayIntegration({
+        enableExperimentalViewRenderer: true,
+        enableFastViewRendering: true,
+      }),
+    ],
+  });
+  ```
 
 ### Fixes
 

packages/core/RNSentryCocoaTester/RNSentryCocoaTesterTests/RNSentryReplayOptionsTests.swift

@@ -48,13 +48,15 @@ final class RNSentryReplayOptions: XCTestCase {
     }
 
     func assertAllDefaultReplayOptionsAreNotNil(replayOptions: [String: Any]) {
-        XCTAssertEqual(replayOptions.count, 6)
+        XCTAssertEqual(replayOptions.count, 8)
         XCTAssertNotNil(replayOptions["sessionSampleRate"])
         XCTAssertNotNil(replayOptions["errorSampleRate"])
         XCTAssertNotNil(replayOptions["maskAllImages"])
         XCTAssertNotNil(replayOptions["maskAllText"])
         XCTAssertNotNil(replayOptions["maskedViewClasses"])
         XCTAssertNotNil(replayOptions["sdkInfo"])
+        XCTAssertNotNil(replayOptions["enableExperimentalViewRenderer"])
+        XCTAssertNotNil(replayOptions["enableFastViewRendering"])
     }
 
     func testSessionSampleRate() {
@@ -164,5 +166,87 @@ final class RNSentryReplayOptions: XCTestCase {
         XCTAssertEqual(actualOptions.sessionReplay.maskAllText, false)
         XCTAssertEqual(actualOptions.sessionReplay.maskedViewClasses.count, 0)
     }
+    
+    func testEnableExperimentalViewRendererDefault() {
+        let optionsDict = ([
+            "dsn": "https://abc@def.ingest.sentry.io/1234567",
+            "replaysOnErrorSampleRate": 0.75
+        ] as NSDictionary).mutableCopy() as! NSMutableDictionary
+
+        RNSentryReplay.updateOptions(optionsDict)
+
+        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
+
+        XCTAssertFalse(actualOptions.sessionReplay.enableExperimentalViewRenderer)
+    }
+    
+    func testEnableExperimentalViewRendererTrue() {
+        let optionsDict = ([
+            "dsn": "https://abc@def.ingest.sentry.io/1234567",
+            "replaysOnErrorSampleRate": 0.75,
+            "mobileReplayOptions": [ "enableExperimentalViewRenderer": true ]
+        ] as NSDictionary).mutableCopy() as! NSMutableDictionary
+
+        RNSentryReplay.updateOptions(optionsDict)
+
+        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
+
+        XCTAssertTrue(actualOptions.sessionReplay.enableExperimentalViewRenderer)
+    }
+    
+    func testEnableExperimentalViewRendererFalse() {
+        let optionsDict = ([
+            "dsn": "https://abc@def.ingest.sentry.io/1234567",
+            "replaysOnErrorSampleRate": 0.75,
+            "mobileReplayOptions": [ "enableExperimentalViewRenderer": false ]
+        ] as NSDictionary).mutableCopy() as! NSMutableDictionary
+
+        RNSentryReplay.updateOptions(optionsDict)
+
+        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
+
+        XCTAssertFalse(actualOptions.sessionReplay.enableExperimentalViewRenderer)
+    }
+    
+    func testEnableFastViewRenderingDefault() {
+        let optionsDict = ([
+            "dsn": "https://abc@def.ingest.sentry.io/1234567",
+            "replaysOnErrorSampleRate": 0.75
+        ] as NSDictionary).mutableCopy() as! NSMutableDictionary
+
+        RNSentryReplay.updateOptions(optionsDict)
+
+        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
+
+        XCTAssertFalse(actualOptions.sessionReplay.enableFastViewRendering)
+    }
+    
+    func testEnableFastViewRenderingTrue() {
+        let optionsDict = ([
+            "dsn": "https://abc@def.ingest.sentry.io/1234567",
+            "replaysOnErrorSampleRate": 0.75,
+            "mobileReplayOptions": [ "enableFastViewRendering": true ]
+        ] as NSDictionary).mutableCopy() as! NSMutableDictionary
+
+        RNSentryReplay.updateOptions(optionsDict)
+
+        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
+
+        XCTAssertTrue(actualOptions.sessionReplay.enableFastViewRendering)
+    }
+    
+    func testEnableFastViewRenderingFalse() {
+        let optionsDict = ([
+            "dsn": "https://abc@def.ingest.sentry.io/1234567",
+            "replaysOnErrorSampleRate": 0.75,
+            "mobileReplayOptions": [ "enableFastViewRendering": false ]
+        ] as NSDictionary).mutableCopy() as! NSMutableDictionary
+
+        RNSentryReplay.updateOptions(optionsDict)
+
+        let actualOptions = try! Options(dict: optionsDict as! [String: Any])
+
+        XCTAssertFalse(actualOptions.sessionReplay.enableFastViewRendering)
+    }
 
 }

packages/core/ios/RNSentryReplay.mm

@@ -27,6 +27,9 @@ + (void)updateOptions:(NSMutableDictionary *)options
         @"errorSampleRate" : options[@"replaysOnErrorSampleRate"] ?: [NSNull null],
         @"maskAllImages" : replayOptions[@"maskAllImages"] ?: [NSNull null],
         @"maskAllText" : replayOptions[@"maskAllText"] ?: [NSNull null],
+        @"enableExperimentalViewRenderer" : replayOptions[@"enableExperimentalViewRenderer"]
+            ?: [NSNull null],
+        @"enableFastViewRendering" : replayOptions[@"enableFastViewRendering"] ?: [NSNull null],
         @"maskedViewClasses" : [RNSentryReplay getReplayRNRedactClasses:replayOptions],
         @"sdkInfo" :
             @ { @"name" : REACT_NATIVE_SDK_NAME, @"version" : REACT_NATIVE_SDK_PACKAGE_VERSION }

packages/core/src/js/replay/mobilereplay.ts

@@ -31,12 +31,39 @@ export interface MobileReplayOptions {
    * @default true
    */
   maskAllVectors?: boolean;
+
+  /**
+   * Enables the up to 5x faster experimental view renderer used by the Session Replay integration on iOS.
+   *
+   * Enabling this flag will reduce the amount of time it takes to render each frame of the session replay on the main thread, therefore reducing
+   * interruptions and visual lag.
+   *
+   * - Experiment: This is an experimental feature and is therefore disabled by default.
+   *
+   * @default false
+   */
+  enableExperimentalViewRenderer?: boolean;
+
+  /**
+   * Enables up to 5x faster but incomplete view rendering used by the Session Replay integration on iOS.
+   *
+   * Enabling this flag will reduce the amount of time it takes to render each frame of the session replay on the main thread, therefore reducing
+   * interruptions and visual lag.
+   *
+   * - Note: This flag can only be used together with `enableExperimentalViewRenderer` with up to 20% faster render times.
+   * - Experiment: This is an experimental feature and is therefore disabled by default.
+   *
+   * @default false
+   */
+  enableFastViewRendering?: boolean;
 }
 
 const defaultOptions: Required<MobileReplayOptions> = {
   maskAllText: true,
   maskAllImages: true,
   maskAllVectors: true,
+  enableExperimentalViewRenderer: false,
+  enableFastViewRendering: false,
 };
 
 type MobileReplayIntegration = Integration & {

samples/react-native/src/App.tsx

@@ -96,6 +96,8 @@ Sentry.init({
         maskAllImages: true,
         maskAllVectors: true,
         maskAllText: true,
+        enableExperimentalViewRenderer: true,
+        enableFastViewRendering: true,
       }),
       Sentry.appStartIntegration({
         standalone: false,