feat(replay): Add Mask and Unmask Wrappers for react-native-web (#4272)

Author: krystofwoldrich

CHANGELOG.md

@@ -10,7 +10,7 @@
 
 ### Features
 
-- Add Replay Custom Masking for iOS and Android ([#4224](https://github.com/getsentry/sentry-react-native/pull/4224), [#4265](https://github.com/getsentry/sentry-react-native/pull/4265))
+- Add Replay Custom Masking for iOS, Android and Web ([#4224](https://github.com/getsentry/sentry-react-native/pull/4224), [#4265](https://github.com/getsentry/sentry-react-native/pull/4265), [#4272](https://github.com/getsentry/sentry-react-native/pull/4272))
 
   ```jsx
   import * as Sentry from '@sentry/react-native';

packages/core/src/js/integrations/exports.ts

@@ -13,6 +13,7 @@ export { viewHierarchyIntegration } from './viewhierarchy';
 export { expoContextIntegration } from './expocontext';
 export { spotlightIntegration } from './spotlight';
 export { mobileReplayIntegration } from '../replay/mobilereplay';
+export { browserReplayIntegration } from '../replay/browserReplay';
 export { appStartIntegration } from '../tracing/integrations/appStart';
 export { nativeFramesIntegration, createNativeFramesIntegrations } from '../tracing/integrations/nativeFrames';
 export { stallTrackingIntegration } from '../tracing/integrations/stalltracking';
@@ -30,5 +31,4 @@ export {
   inboundFiltersIntegration,
   linkedErrorsIntegration as browserLinkedErrorsIntegration,
   rewriteFramesIntegration,
-  replayIntegration as browserReplayIntegration,
 } from '@sentry/react';

packages/core/src/js/replay/CustomMask.web.tsx

@@ -2,17 +2,35 @@ import * as React from 'react';
 import type { ViewProps } from 'react-native';
 import { View } from 'react-native';
 
+// Wrapping children in a View and div can cause styling issues
+// but with the current implementation of react-native-web
+// we can't avoid it.
+//
+// <View unknown-prop /> the prop is dropped by react-native-web
+// https://github.com/necolas/react-native-web/blob/a5ba27c6226aa182979a9cff8cc23c0f5caa4d88/packages/react-native-web/src/exports/View/index.js#L47
+//
+// So we need to wrap the children in a react-dom div.
+// We are using className instead of data-attribute to
+// allow for easier CSS styling adjustments.
+
 const Mask = (props: ViewProps): React.ReactElement => {
-  // We have to ensure that the warning is visible even if the app is running without debug
-  // eslint-disable-next-line no-console
-  console.warn('[SentrySessionReplay] Mask component is not supported on web.');
-  return <View {...props} />;
+  return (
+    <View {...props}>
+      <div className='sentry-react-native-mask'>
+        {props.children}
+      </div>
+    </View>
+  );
 };
+
 const Unmask = (props: ViewProps): React.ReactElement => {
-  // We have to ensure that the warning is visible even if the app is running without debug
-  // eslint-disable-next-line no-console
-  console.warn('[SentrySessionReplay] Unmask component is not supported on web.');
-  return <View {...props} />;
+  return (
+    <View {...props}>
+      <div className='sentry-react-native-unmask'>
+        {props.children}
+      </div>
+    </View>
+  );
 };
 
 export { Mask, Unmask };

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

@@ -0,0 +1,13 @@
+import { replayIntegration } from '@sentry/react';
+
+const browserReplayIntegration = (
+  options: Parameters<typeof replayIntegration>[0] = {},
+): ReturnType<typeof replayIntegration> => {
+  return replayIntegration({
+    ...options,
+    mask: ['.sentry-react-native-mask', ...(options.mask || [])],
+    unmask: ['.sentry-react-native-unmask:not(.sentry-react-native-mask *) > *', ...(options.unmask || [])],
+  });
+};
+
+export { browserReplayIntegration };

packages/core/tsconfig.build.json

@@ -2,7 +2,9 @@
   "extends": "./node_modules/@sentry-internal/typescript/tsconfig.json",
   "include": [
     "./src/js/*.ts",
+    "./src/js/*.tsx",
     "./src/js/**/*.web.ts",
+    "./src/js/**/*.web.tsx",
     "./typings/react-native.d.ts"
   ],
   "exclude": ["node_modules"],

samples/expo/app/(tabs)/two.tsx

@@ -1,4 +1,5 @@
 import { StyleSheet } from 'react-native';
+import * as Sentry from '@sentry/react-native';
 
 import EditScreenInfo from '@/components/EditScreenInfo';
 import { Text, View } from '@/components/Themed';
@@ -8,6 +9,16 @@ export default function TabTwoScreen() {
     <View style={styles.container}>
       <Text style={styles.title}>Tab Two</Text>
       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <Sentry.Unmask>
+        <Text>This is unmasked because it's direct child of Sentry.Unmask (can be masked if Sentry.Masked is used higher in the hierarchy)</Text>
+        <Sentry.Mask>
+          <Text>This is masked always because it's a child of a Sentry.Mask</Text>
+          <Sentry.Unmask>
+            {/* Sentry.Unmask does not override the Sentry.Mask from above in the hierarchy */}
+            <Text>This is masked always because it's a child of Sentry.Mask</Text>
+          </Sentry.Unmask>
+        </Sentry.Mask>
+      </Sentry.Unmask>
       <EditScreenInfo path="app/(tabs)/two.tsx" />
     </View>
   );

samples/expo/app/_layout.tsx

@@ -56,6 +56,7 @@ process.env.EXPO_SKIP_DURING_EXPORT !== 'true' && Sentry.init({
       }),
       navigationIntegration,
       Sentry.reactNativeTracingIntegration(),
+      Sentry.browserReplayIntegration(),
     );
     return integrations.filter(i => i.name !== 'Dedupe');
   },