ref(session-replay): iOS: Use enableViewRendererV2 instead of the dep…

CHANGELOG.md

@@ -12,6 +12,10 @@
 
 - Expo Updates Context is passed to native after native init to be available for crashes ([#4808](https://github.com/getsentry/sentry-react-native/pull/4808))
 
+### Changes
+
+- Renames `enableExperimentalViewRenderer` to `enableViewRendererV2` which is enabled by default for up to 5x times more performance in Session Replay on iOS ([#4815](https://github.com/getsentry/sentry-react-native/pull/4815))
+
 ### Dependencies
 
 - Bump CLI from v2.43.1 to v2.44.0 ([#4804](https://github.com/getsentry/sentry-react-native/pull/4804))

packages/core/RNSentryCocoaTester/RNSentryCocoaTesterTests/RNSentryReplayOptionsTests.swift

@@ -55,7 +55,7 @@ final class RNSentryReplayOptions: XCTestCase {
         XCTAssertNotNil(replayOptions["maskAllText"])
         XCTAssertNotNil(replayOptions["maskedViewClasses"])
         XCTAssertNotNil(replayOptions["sdkInfo"])
-        XCTAssertNotNil(replayOptions["enableExperimentalViewRenderer"])
+        XCTAssertNotNil(replayOptions["enableViewRendererV2"])
         XCTAssertNotNil(replayOptions["enableFastViewRendering"])
     }
 
@@ -166,8 +166,8 @@ final class RNSentryReplayOptions: XCTestCase {
         XCTAssertEqual(actualOptions.sessionReplay.maskAllText, false)
         XCTAssertEqual(actualOptions.sessionReplay.maskedViewClasses.count, 0)
     }
-    
-    func testEnableExperimentalViewRendererDefault() {
+
+    func testEnableViewRendererV2Default() {
         let optionsDict = ([
             "dsn": "https://abc@def.ingest.sentry.io/1234567",
             "replaysOnErrorSampleRate": 0.75
@@ -177,35 +177,35 @@ final class RNSentryReplayOptions: XCTestCase {
 
         let actualOptions = try! Options(dict: optionsDict as! [String: Any])
 
-        XCTAssertFalse(actualOptions.sessionReplay.enableExperimentalViewRenderer)
+        XCTAssertTrue(actualOptions.sessionReplay.enableViewRendererV2)
     }
-    
-    func testEnableExperimentalViewRendererTrue() {
+
+    func testEnableViewRendererV2True() {
         let optionsDict = ([
             "dsn": "https://abc@def.ingest.sentry.io/1234567",
             "replaysOnErrorSampleRate": 0.75,
-            "mobileReplayOptions": [ "enableExperimentalViewRenderer": true ]
+            "mobileReplayOptions": [ "enableViewRendererV2": true ]
         ] as NSDictionary).mutableCopy() as! NSMutableDictionary
 
         RNSentryReplay.updateOptions(optionsDict)
 
         let actualOptions = try! Options(dict: optionsDict as! [String: Any])
 
-        XCTAssertTrue(actualOptions.sessionReplay.enableExperimentalViewRenderer)
+        XCTAssertTrue(actualOptions.sessionReplay.enableViewRendererV2)
     }
-    
-    func testEnableExperimentalViewRendererFalse() {
+
+    func testEnableViewRendererV2False() {
         let optionsDict = ([
             "dsn": "https://abc@def.ingest.sentry.io/1234567",
             "replaysOnErrorSampleRate": 0.75,
-            "mobileReplayOptions": [ "enableExperimentalViewRenderer": false ]
+            "mobileReplayOptions": [ "enableViewRendererV2": false ]
         ] as NSDictionary).mutableCopy() as! NSMutableDictionary
 
         RNSentryReplay.updateOptions(optionsDict)
 
         let actualOptions = try! Options(dict: optionsDict as! [String: Any])
 
-        XCTAssertFalse(actualOptions.sessionReplay.enableExperimentalViewRenderer)
+        XCTAssertFalse(actualOptions.sessionReplay.enableViewRendererV2)
     }
 
     func testEnableFastViewRenderingDefault() {

packages/core/ios/RNSentryReplay.mm

@@ -27,8 +27,7 @@ + (void)updateOptions:(NSMutableDictionary *)options
         @"errorSampleRate" : options[@"replaysOnErrorSampleRate"] ?: [NSNull null],
         @"maskAllImages" : replayOptions[@"maskAllImages"] ?: [NSNull null],
         @"maskAllText" : replayOptions[@"maskAllText"] ?: [NSNull null],
-        @"enableExperimentalViewRenderer" : replayOptions[@"enableExperimentalViewRenderer"]
-            ?: [NSNull null],
+        @"enableViewRendererV2" : replayOptions[@"enableViewRendererV2"] ?: @YES,
         @"enableFastViewRendering" : replayOptions[@"enableFastViewRendering"] ?: [NSNull null],
         @"maskedViewClasses" : [RNSentryReplay getReplayRNRedactClasses:replayOptions],
         @"sdkInfo" :

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

@@ -40,10 +40,24 @@ export interface MobileReplayOptions {
    *
    * - Experiment: This is an experimental feature and is therefore disabled by default.
    *
-   * @default false
+   * @deprecated Use `enableViewRendererV2` instead.
    */
   enableExperimentalViewRenderer?: boolean;
 
+  /**
+   * Enables up to 5x faster new 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. [Our benchmarks](https://github.com/getsentry/sentry-cocoa/pull/4940) have shown a significant improvement of
+   * **up to 4-5x faster rendering** (reducing `~160ms` to `~36ms` per frame) on older devices.
+   *
+   * - Experiment: In case you are noticing issues with the new view renderer, please report the issue on [GitHub](https://github.com/getsentry/sentry-cocoa).
+   *               Eventually, we will remove this feature flag and use the new view renderer by default.
+   *
+   * @default true
+   */
+  enableViewRendererV2?: boolean;
+
   /**
    * Enables up to 5x faster but incomplete view rendering used by the Session Replay integration on iOS.
    *
@@ -63,9 +77,23 @@ const defaultOptions: Required<MobileReplayOptions> = {
   maskAllImages: true,
   maskAllVectors: true,
   enableExperimentalViewRenderer: false,
+  enableViewRendererV2: true,
   enableFastViewRendering: false,
 };
 
+function mergeOptions(initOptions: Partial<MobileReplayOptions>): Required<MobileReplayOptions> {
+  const merged = {
+    ...defaultOptions,
+    ...initOptions,
+  };
+
+  if (initOptions.enableViewRendererV2 === undefined && initOptions.enableExperimentalViewRenderer !== undefined) {
+    merged.enableViewRendererV2 = initOptions.enableExperimentalViewRenderer;
+  }
+
+  return merged;
+}
+
 type MobileReplayIntegration = Integration & {
   options: Required<MobileReplayOptions>;
 };
@@ -100,7 +128,7 @@ export const mobileReplayIntegration = (initOptions: MobileReplayOptions = defau
     return mobileReplayIntegrationNoop();
   }
 
-  const options = { ...defaultOptions, ...initOptions };
+  const options = mergeOptions(initOptions);
 
   async function processEvent(event: Event): Promise<Event> {
     const hasException = event.exception && event.exception.values && event.exception.values.length > 0;

samples/react-native/src/App.tsx

@@ -100,7 +100,7 @@ Sentry.init({
         maskAllImages: true,
         maskAllVectors: true,
         maskAllText: true,
-        enableExperimentalViewRenderer: true,
+        enableViewRendererV2: true,
         enableFastViewRendering: true,
       }),
       Sentry.appStartIntegration({