feat(replay): Add SentryMask and SentryUnmask native components #4224

krystofwoldrich · 2024-10-31T16:22:38Z

📢 Type of change

Bugfix
New feature
Enhancement
Refactoring

📜 Description

This PR adds custom redact/mask components for iOS.

The implementation includes noop fallback for Android and other unsupported platforms and fallback Web implementation. These will be added in a follow up PRs.

import * as Sentry from '@sentry/react-native'

const Example = () => (
  <View>
    <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>
  </View>
);

Device	Replay

Todo

Give feedback

Requires https://github.com/getsentry/sentry-cocoa/releases/tag/8.40.0
internal(replay): Add IgnoreWrapper class for hybrid SDKs sentry-cocoa#4522
iOS Legacy Native Components
iOS New Arch Components
Android Legacy Components (in a follow up PR)
Android New Arch Components (in a follow up PR)
Web Component (in a follow up PR)
Options

💡 Motivation and Context

This is a part of RN Replay GA tasks

[Epic] Mobile Replay: GA sentry#74441

💚 How did you test it?

ci, local,

📝 Checklist

I reviewed submitted code
I added tests to verify changes
No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
All tests passing
No breaking changes

🔮 Next steps

github-actions · 2024-10-31T16:23:07Z

	Messages
📖	Do not forget to update Sentry-docs with your feature once the pull request gets approved.

Generated by 🚫 dangerJS against e0ccb78

github-actions · 2024-10-31T16:33:26Z

Android (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	450.69 ms	441.20 ms	-9.48 ms
Size	17.74 MiB	20.07 MiB	2.34 MiB

Baseline results on branch: main

Startup times

Revision	Plain	With Sentry	Diff
`70e6261`	482.65 ms	495.70 ms	13.05 ms
`76d1baf`+dirty	335.72 ms	355.52 ms	19.80 ms
`22e31b6`	396.48 ms	419.64 ms	23.16 ms
`fe13591`	478.92 ms	480.84 ms	1.92 ms
`d197b5c`+dirty	338.94 ms	354.87 ms	15.93 ms
`ad6c299`	375.94 ms	382.02 ms	6.08 ms
`abb7058`	370.27 ms	389.58 ms	19.31 ms
`2ec71da`	438.14 ms	460.46 ms	22.32 ms
`31fcca2`	391.22 ms	414.78 ms	23.56 ms
`62a750b`	395.96 ms	423.36 ms	27.41 ms

App size

Revision	Plain	With Sentry	Diff
`70e6261`	17.73 MiB	19.94 MiB	2.21 MiB
`76d1baf`+dirty	17.73 MiB	20.04 MiB	2.31 MiB
`22e31b6`	17.73 MiB	19.84 MiB	2.10 MiB
`fe13591`	17.74 MiB	20.07 MiB	2.34 MiB
`d197b5c`+dirty	17.73 MiB	20.04 MiB	2.31 MiB
`ad6c299`	17.73 MiB	19.75 MiB	2.02 MiB
`abb7058`	17.73 MiB	19.83 MiB	2.10 MiB
`2ec71da`	17.73 MiB	20.10 MiB	2.37 MiB
`31fcca2`	17.73 MiB	19.90 MiB	2.17 MiB
`62a750b`	17.73 MiB	19.93 MiB	2.20 MiB

github-actions · 2024-10-31T16:46:25Z

iOS (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1227.00 ms	1238.17 ms	11.17 ms
Size	2.92 MiB	3.64 MiB	743.77 KiB

Baseline results on branch: main

Startup times

Revision	Plain	With Sentry	Diff
`12427f4`+dirty	1224.90 ms	1231.40 ms	6.50 ms
`5446992`+dirty	1249.94 ms	1254.80 ms	4.86 ms
`e73d82f`+dirty	1231.20 ms	1228.81 ms	-2.40 ms
`148f924`+dirty	1220.72 ms	1221.30 ms	0.58 ms
`fe13591`+dirty	1250.69 ms	1246.27 ms	-4.43 ms
`1faf8e3`+dirty	1223.38 ms	1220.56 ms	-2.82 ms
`484813b`+dirty	1225.07 ms	1221.00 ms	-4.07 ms
`4a6664f`+dirty	1218.77 ms	1221.07 ms	2.30 ms
`e5bc97b`+dirty	1229.17 ms	1227.64 ms	-1.54 ms
`15c80ab`+dirty	1248.41 ms	1251.24 ms	2.83 ms

App size

Revision	Plain	With Sentry	Diff
`12427f4`+dirty	2.92 MiB	3.44 MiB	533.29 KiB
`5446992`+dirty	2.92 MiB	3.44 MiB	535.26 KiB
`e73d82f`+dirty	2.92 MiB	3.64 MiB	740.56 KiB
`148f924`+dirty	2.92 MiB	3.60 MiB	701.88 KiB
`fe13591`+dirty	2.92 MiB	3.66 MiB	757.71 KiB
`1faf8e3`+dirty	2.92 MiB	3.64 MiB	742.61 KiB
`484813b`+dirty	2.92 MiB	3.64 MiB	740.56 KiB
`4a6664f`+dirty	2.92 MiB	3.60 MiB	702.09 KiB
`e5bc97b`+dirty	2.92 MiB	3.66 MiB	758.40 KiB
`15c80ab`+dirty	2.92 MiB	3.39 MiB	481.56 KiB

github-actions · 2024-10-31T16:49:29Z

iOS (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1225.12 ms	1220.30 ms	-4.82 ms
Size	2.36 MiB	3.08 MiB	737.88 KiB

Baseline results on branch: main

Startup times

Revision	Plain	With Sentry	Diff
`12427f4`+dirty	1267.15 ms	1271.30 ms	4.15 ms
`5446992`+dirty	1273.28 ms	1276.68 ms	3.40 ms
`e73d82f`+dirty	1207.52 ms	1216.73 ms	9.21 ms
`148f924`+dirty	1214.76 ms	1215.73 ms	0.97 ms
`fe13591`+dirty	1208.25 ms	1219.53 ms	11.28 ms
`1faf8e3`+dirty	1214.87 ms	1222.83 ms	7.97 ms
`484813b`+dirty	1222.45 ms	1220.79 ms	-1.66 ms
`4a6664f`+dirty	1209.49 ms	1208.63 ms	-0.86 ms
`e5bc97b`+dirty	1230.63 ms	1234.83 ms	4.20 ms
`15c80ab`+dirty	1223.74 ms	1228.96 ms	5.22 ms

App size

Revision	Plain	With Sentry	Diff
`12427f4`+dirty	2.36 MiB	2.88 MiB	530.38 KiB
`5446992`+dirty	2.36 MiB	2.88 MiB	531.94 KiB
`e73d82f`+dirty	2.36 MiB	3.08 MiB	734.23 KiB
`148f924`+dirty	2.36 MiB	3.04 MiB	696.25 KiB
`fe13591`+dirty	2.36 MiB	3.10 MiB	752.40 KiB
`1faf8e3`+dirty	2.36 MiB	3.08 MiB	736.75 KiB
`484813b`+dirty	2.36 MiB	3.08 MiB	734.18 KiB
`4a6664f`+dirty	2.36 MiB	3.04 MiB	696.39 KiB
`e5bc97b`+dirty	2.36 MiB	3.10 MiB	753.14 KiB
`15c80ab`+dirty	2.36 MiB	2.83 MiB	474.49 KiB

…-redact-components

…act-components

…-redact-components

…droid

…mponents

github-actions · 2024-11-08T18:42:34Z

Android (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	390.04 ms	454.89 ms	64.85 ms
Size	7.15 MiB	8.35 MiB	1.20 MiB

Baseline results on branch: main

Startup times

Revision	Plain	With Sentry	Diff
`76d1baf`+dirty	339.02 ms	408.65 ms	69.63 ms
`86d6d2c`+dirty	267.21 ms	325.24 ms	58.04 ms
`f06c879`+dirty	361.27 ms	407.88 ms	46.61 ms
`8900e1a`+dirty	371.40 ms	377.70 ms	6.31 ms
`e540498`+dirty	408.56 ms	480.00 ms	71.44 ms
`62a750b`+dirty	370.78 ms	376.73 ms	5.96 ms
`2ec71da`+dirty	375.64 ms	431.59 ms	55.95 ms
`c639edf`+dirty	363.39 ms	414.78 ms	51.39 ms
`acadc0f`+dirty	259.04 ms	304.67 ms	45.63 ms
`27ef4ee`+dirty	296.71 ms	351.00 ms	54.29 ms

App size

Revision	Plain	With Sentry	Diff
`76d1baf`+dirty	7.15 MiB	8.09 MiB	964.41 KiB
`86d6d2c`+dirty	7.15 MiB	8.09 MiB	962.69 KiB
`f06c879`+dirty	7.15 MiB	8.12 MiB	997.78 KiB
`8900e1a`+dirty	7.15 MiB	8.03 MiB	901.79 KiB
`e540498`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`62a750b`+dirty	7.15 MiB	8.21 MiB	1.06 MiB
`2ec71da`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`c639edf`+dirty	7.15 MiB	8.35 MiB	1.20 MiB
`acadc0f`+dirty	7.15 MiB	8.03 MiB	903.20 KiB
`27ef4ee`+dirty	7.15 MiB	8.08 MiB	959.49 KiB

samples/react-native/src/App.tsx

krystofwoldrich · 2024-11-11T09:50:50Z

packages/core/ios/RNSentryReplay.m

 + (NSArray *_Nonnull)getReplayRNRedactClasses:(NSDictionary *_Nullable)replayOptions
 {
    NSMutableArray *_Nonnull classesToRedact = [[NSMutableArray alloc] init];
+    // We can't import RNSentryReplayMask.h here because it's Objective-C++
+    // To avoid typos, we test the class existens in the tests
+    [classesToRedact addObject:@"RNSentryReplayMask"];


For Unmask to work this PR requires changes from getsentry/sentry-cocoa#4522

Add add call of PrivateSentrySDKOnly.setIgnoreWrapperClass(IgnoreWrapper.self)

samples/react-native-macos/src/Screens/PlaygroundScreen.tsx

lucas-zimerman · 2024-11-11T16:49:16Z

packages/core/test/replay/CustomMask.test.ts

+    const { Mask, Unmask } = require('../../src/js/replay/CustomMask');
+
+    expect(Mask).toBeDefined();
+    expect(Unmask).toBeDefined();


Could we also validate that logger.warn was called to make sure they are actually the fallback?
Same for the below tests with fallback.

…getsentry/sentry-react-native into kw/feat/replay-custom-redact-components

Co-authored-by: LucasZF <[email protected]>

packages/core/package.json

lucas-zimerman · 2024-11-11T17:00:24Z

packages/core/ios/RNSentryReplay.m

+ (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


Suggested change

// To avoid typos, we test the class existens in the tests

// To avoid typos, we test the class existent in the tests

lucas-zimerman · 2024-11-11T17:01:23Z

packages/core/ios/RNSentryReplay.m

@@ -56,6 +64,10 @@ + (NSArray *_Nonnull)getReplayRNRedactClasses:(NSDictionary *_Nullable)replayOpt

 + (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


Suggested change

// To avoid typos, we test the class existens in the tests

// To avoid typos, we test the class existent in the tests

lucas-zimerman · 2024-11-11T17:03:22Z

CHANGELOG.md

+  const Example = () => {
+    return (
+      <View>
+        <Sentry.Mask>


Q: for now, <Sentry.Mask> / <Sentry.Unmask> are exclusive to native/ React Native?

antonis · 2024-11-12T10:42:31Z

packages/core/ios/RNSentryReplay.m

    RNSentryReplayBreadcrumbConverter *breadcrumbConverter =
        [[RNSentryReplayBreadcrumbConverter alloc] init];
    [PrivateSentrySDKOnly configureSessionReplayWith:breadcrumbConverter screenshotProvider:nil];
 }

+ (Class) getMaskClass
+{
+    return NSClassFromString(@"RNSentryReplayMask");


l: This is a suggestion since the current approach works as expected and is covered by test cases.
Wdyt of using an objective-c wrapper to get the class names statically? Eg:

// RNSentryReplayWrapper.h @interface RNSentryReplayWrapper : NSObject + (Class) getMaskClass; + (Class) getUnmaskClass @end

// RNSentryReplayWrapper.mm #import "RNSentryReplayWrapper.h" #include "RNSentryReplayMask.h" #include "RNSentryReplayUnmask.h" @implementation MyObjectiveCWrapper + (Class)getMaskClass { return RNSentryReplayMask.class; } + (Class)getUnmaskClass { return RNSentryReplayUnmask.class; } @end

feat(replay): Add SentryMask and SentryUnmask native components

0fc1b42

krystofwoldrich added 8 commits November 4, 2024 14:53

add clang-format

9933a86

apply the formatter

e17ac31

Merge remote-tracking branch 'origin/main' into kw/feat/replay-custom…

534cbce

…-redact-components

Merge remote-tracking branch 'origin/main' into kw/internal/clag-format

ef863a1

Merge branch 'kw/internal/clag-format' into kw/feat/replay-custom-red…

d317e1e

…act-components

fix clang format

eb9d2de

add native architecture masks for ios

cbf400a

Merge remote-tracking branch 'origin/main' into kw/feat/replay-custom…

be04dfc

…-redact-components

krystofwoldrich mentioned this pull request Nov 5, 2024

[Epic] Mobile Replay: GA getsentry/sentry#74441

Open

krystofwoldrich added 6 commits November 5, 2024 18:52

add js tests

77691bd

fix eslint changing the native props interface to type

45374be

Fix mask components for non uikit builds

0a127d2

add changelog

4f5b967

fix typo

eb64e8d

fix ts3.8 type check test

32c45e4

krystofwoldrich mentioned this pull request Nov 6, 2024

test(ts3.8): fix ts3.8 type check test to not include dom types #4238

Merged

Merge branch 'kw/fix/type-check' into kw/feat/replay-custom-redact-an…

691f8f4

…droid

krystofwoldrich changed the base branch from main to kw/fix/type-check November 6, 2024 15:21

krystofwoldrich added 3 commits November 6, 2024 16:57

fix new arch build decoupled replay and replay mask

02bb913

fix missing react native types

5315bb2

Merge branch 'kw/fix/type-check' into kw/feat/replay-custom-redact-co…

f07f155

…mponents

Base automatically changed from kw/fix/type-check to main November 6, 2024 16:35

Merge branch 'main' into kw/feat/replay-custom-redact-components

1b1c435

Update mask sample

cdd3da8

krystofwoldrich added 2 commits November 8, 2024 22:25

fix rn unmask class is added to unmask array

1170838

fix tests for custom classes

3a9e155

krystofwoldrich mentioned this pull request Nov 11, 2024

internal(replay): Add IgnoreWrapper class for hybrid SDKs getsentry/sentry-cocoa#4522

Merged

7 tasks

krystofwoldrich commented Nov 11, 2024

View reviewed changes

samples/react-native/src/App.tsx Outdated Show resolved Hide resolved

Update samples/react-native/src/App.tsx

c02d06c

krystofwoldrich commented Nov 11, 2024

View reviewed changes

krystofwoldrich marked this pull request as ready for review November 11, 2024 09:50

krystofwoldrich requested review from lucas-zimerman and antonis as code owners November 11, 2024 09:51

krystofwoldrich and others added 4 commits November 11, 2024 16:17

update redact example

9fe9c24

fix changelog and macos sample

845c260

fix rnsentry impl

2edaeb0

Merge branch 'main' into kw/feat/replay-custom-redact-components

503c992

lucas-zimerman reviewed Nov 11, 2024

View reviewed changes

samples/react-native-macos/src/Screens/PlaygroundScreen.tsx Outdated Show resolved Hide resolved

lucas-zimerman reviewed Nov 11, 2024

View reviewed changes

krystofwoldrich and others added 3 commits November 11, 2024 17:51

fix class names tests

4f88064

Merge branch 'kw/feat/replay-custom-redact-components' of github.com:…

ddffa75

…getsentry/sentry-react-native into kw/feat/replay-custom-redact-components

Update samples/react-native-macos/src/Screens/PlaygroundScreen.tsx

e0ccb78

Co-authored-by: LucasZF <[email protected]>

lucas-zimerman reviewed Nov 11, 2024

View reviewed changes

packages/core/package.json Show resolved Hide resolved

lucas-zimerman reviewed Nov 11, 2024

View reviewed changes

antonis reviewed Nov 12, 2024

View reviewed changes

This was referenced Nov 12, 2024

feat(replay): Add Mask and Unmask Android implementation #4265

Draft

Add RN Replay Privacy page getsentry/sentry-docs#11798

Open

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

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(replay): Add SentryMask and SentryUnmask native components #4224

feat(replay): Add SentryMask and SentryUnmask native components #4224

krystofwoldrich commented Oct 31, 2024 •

edited

Loading

Todo

github-actions bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

Baseline results on branch: main

Startup times

App size

github-actions bot commented Oct 31, 2024

Baseline results on branch: main

Startup times

App size

github-actions bot commented Oct 31, 2024

Baseline results on branch: main

Startup times

App size

github-actions bot commented Nov 8, 2024 •

edited

Loading

Baseline results on branch: main

Startup times

App size

krystofwoldrich Nov 11, 2024

lucas-zimerman Nov 11, 2024 •

edited

Loading

lucas-zimerman Nov 11, 2024

lucas-zimerman Nov 11, 2024

lucas-zimerman Nov 11, 2024

antonis Nov 12, 2024

	// To avoid typos, we test the class existens in the tests
	// To avoid typos, we test the class existent in the tests

feat(replay): Add SentryMask and SentryUnmask native components #4224

Are you sure you want to change the base?

feat(replay): Add SentryMask and SentryUnmask native components #4224

Conversation

krystofwoldrich commented Oct 31, 2024 • edited Loading

📢 Type of change

📜 Description

Todo

💡 Motivation and Context

💚 How did you test it?

📝 Checklist

🔮 Next steps

github-actions bot commented Oct 31, 2024 • edited Loading

github-actions bot commented Oct 31, 2024 • edited Loading

Android (legacy) Performance metrics 🚀

Baseline results on branch: main

Startup times

App size

github-actions bot commented Oct 31, 2024

iOS (new) Performance metrics 🚀

Baseline results on branch: main

Startup times

App size

github-actions bot commented Oct 31, 2024

iOS (legacy) Performance metrics 🚀

Baseline results on branch: main

Startup times

App size

github-actions bot commented Nov 8, 2024 • edited Loading

Android (new) Performance metrics 🚀

Baseline results on branch: main

Startup times

App size

krystofwoldrich Nov 11, 2024

Choose a reason for hiding this comment

lucas-zimerman Nov 11, 2024 • edited Loading

Choose a reason for hiding this comment

lucas-zimerman Nov 11, 2024

Choose a reason for hiding this comment

lucas-zimerman Nov 11, 2024

Choose a reason for hiding this comment

lucas-zimerman Nov 11, 2024

Choose a reason for hiding this comment

antonis Nov 12, 2024

Choose a reason for hiding this comment

krystofwoldrich commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Oct 31, 2024 •

edited

Loading

github-actions bot commented Nov 8, 2024 •

edited

Loading

lucas-zimerman Nov 11, 2024 •

edited

Loading