From 5f310022e97d78dcd9500b7849ffc2cbd5616572 Mon Sep 17 00:00:00 2001 From: "izaaz.yunus" Date: Wed, 30 Oct 2024 21:57:10 -0700 Subject: [PATCH 1/3] fix: allow passing sample rate and remote config fetching --- .../PluginSessionReplayReactNativeModule.kt | 6 +++--- .../example/src/App.tsx | 11 +++++++---- .../ios/PluginSessionReplayReactNative.mm | 2 +- .../ios/PluginSessionReplayReactNative.swift | 10 +++++----- .../{AmpMaskView.tsx => app-mask-view.tsx} | 0 .../src/index.tsx | 4 +++- .../src/session-replay-config.tsx | 11 +++++++++++ .../src/session-replay.ts | 19 ++++++++++++++++--- 8 files changed, 46 insertions(+), 17 deletions(-) rename packages/plugin-session-replay-react-native/src/{AmpMaskView.tsx => app-mask-view.tsx} (100%) create mode 100644 packages/plugin-session-replay-react-native/src/session-replay-config.tsx diff --git a/packages/plugin-session-replay-react-native/android/src/main/java/com/amplitude/pluginsessionreplayreactnative/PluginSessionReplayReactNativeModule.kt b/packages/plugin-session-replay-react-native/android/src/main/java/com/amplitude/pluginsessionreplayreactnative/PluginSessionReplayReactNativeModule.kt index 703443a91..c662acebc 100644 --- a/packages/plugin-session-replay-react-native/android/src/main/java/com/amplitude/pluginsessionreplayreactnative/PluginSessionReplayReactNativeModule.kt +++ b/packages/plugin-session-replay-react-native/android/src/main/java/com/amplitude/pluginsessionreplayreactnative/PluginSessionReplayReactNativeModule.kt @@ -19,7 +19,7 @@ class PluginSessionReplayReactNativeModule(private val reactContext: ReactApplic } @ReactMethod - fun setup(apiKey: String, deviceId: String?, sessionId: Double) { + fun setup(apiKey: String, deviceId: String?, sessionId: Double, sampleRate: Double, enableRemoteConfig: Boolean) { LogcatLogger.logger.logMode = Logger.LogMode.DEBUG sessionReplay = SessionReplay( apiKey, @@ -27,8 +27,8 @@ class PluginSessionReplayReactNativeModule(private val reactContext: ReactApplic deviceId ?: "", sessionId.toLong(), logger = LogcatLogger.logger, - sampleRate = 1.0, - enableRemoteConfig = false, + sampleRate = sampleRate, + enableRemoteConfig = enableRemoteConfig, ) } diff --git a/packages/plugin-session-replay-react-native/example/src/App.tsx b/packages/plugin-session-replay-react-native/example/src/App.tsx index aec0486a7..f8bccf818 100644 --- a/packages/plugin-session-replay-react-native/example/src/App.tsx +++ b/packages/plugin-session-replay-react-native/example/src/App.tsx @@ -41,8 +41,7 @@ import { import { LogLevel } from '@amplitude/analytics-types'; import { NavigationContainer } from '@react-navigation/native'; -import { SessionReplayPlugin } from '@amplitude/plugin-session-replay-react-native'; -import { AmpMaskView } from '@amplitude/plugin-session-replay-react-native'; +import { SessionReplayPlugin, AmpMaskView, SessionReplayConfig } from '@amplitude/plugin-session-replay-react-native'; import { createNativeStackNavigator, type NativeStackScreenProps, @@ -239,11 +238,15 @@ const Stack = createNativeStackNavigator(); function App(): React.JSX.Element { useEffect(() => { + const config: SessionReplayConfig = { + enableRemoteConfig: false, + sampleRate: 1 + }; (async () => { - await init('YOUR-API-KEY', 'example_user_id', { + await init('6151e18fcbce1f94010e8791964d2a71', 'example_user_id', { logLevel: LogLevel.Verbose, }).promise; - await add(new SessionReplayPlugin()).promise; + await add(new SessionReplayPlugin(config)).promise; track('test'); await identify(new Identify().set('react-native-test', 'yes')).promise; })(); diff --git a/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.mm b/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.mm index c1dd770a6..2483d7e4f 100644 --- a/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.mm +++ b/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.mm @@ -2,7 +2,7 @@ @interface RCT_EXTERN_MODULE(PluginSessionReplayReactNative, NSObject) -RCT_EXTERN_METHOD(setup:(NSString)apiKey deviceId:(NSString)deviceId sessionId:(nonnull NSNumber)sessionId resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) +RCT_EXTERN_METHOD(setup:(NSString)apiKey deviceId:(NSString)deviceId sessionId:(nonnull NSNumber)sessionId sampleRate:(float)sampleRate enableRemoteConfig:(BOOL)enableRemoteConfig resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) RCT_EXTERN_METHOD(setSessionId:(nonnull NSNumber) resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject) diff --git a/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.swift b/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.swift index 7e5cb7d9f..2f4635d76 100644 --- a/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.swift +++ b/packages/plugin-session-replay-react-native/ios/PluginSessionReplayReactNative.swift @@ -6,15 +6,15 @@ class PluginSessionReplayReactNative: NSObject { var sessionReplay: SessionReplay! - @objc(setup:deviceId:sessionId:resolve:reject:) - func setup(_ apiKey: String, deviceId: String, sessionId: NSNumber, resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) -> Void { - print("setup: \(apiKey) \(deviceId) \(sessionId)") + @objc(setup:deviceId:sessionId:sampleRate:enableRemoteConfig:resolve:reject:) + func setup(_ apiKey: String, deviceId: String, sessionId: NSNumber, sampleRate: Float, enableRemoteConfig: Bool, resolve: RCTPromiseResolveBlock, reject: RCTPromiseRejectBlock) -> Void { + print("setup: API Key: \(apiKey) Device Id: \(deviceId) Session Id: \(sessionId) Sample Rate: \(sampleRate) Enable Remote Config: \(enableRemoteConfig)") sessionReplay = SessionReplay(apiKey:apiKey, deviceId: deviceId, sessionId: sessionId.int64Value, - sampleRate: 1.0, + sampleRate: sampleRate, logger:ConsoleLogger(logLevel: LogLevelEnum.DEBUG.rawValue), - enableRemoteConfig: false) + enableRemoteConfig: enableRemoteConfig) sessionReplay.start() resolve(nil) } diff --git a/packages/plugin-session-replay-react-native/src/AmpMaskView.tsx b/packages/plugin-session-replay-react-native/src/app-mask-view.tsx similarity index 100% rename from packages/plugin-session-replay-react-native/src/AmpMaskView.tsx rename to packages/plugin-session-replay-react-native/src/app-mask-view.tsx diff --git a/packages/plugin-session-replay-react-native/src/index.tsx b/packages/plugin-session-replay-react-native/src/index.tsx index d95c59d5e..555ad80b4 100644 --- a/packages/plugin-session-replay-react-native/src/index.tsx +++ b/packages/plugin-session-replay-react-native/src/index.tsx @@ -1,3 +1,5 @@ export { SessionReplayPlugin } from './session-replay'; -export { AmpMaskView } from './AmpMaskView'; +export { AmpMaskView } from './app-mask-view'; + +export { SessionReplayConfig } from './session-replay-config'; diff --git a/packages/plugin-session-replay-react-native/src/session-replay-config.tsx b/packages/plugin-session-replay-react-native/src/session-replay-config.tsx new file mode 100644 index 000000000..99050b74f --- /dev/null +++ b/packages/plugin-session-replay-react-native/src/session-replay-config.tsx @@ -0,0 +1,11 @@ +export interface SessionReplayConfig { + sampleRate?: number; + enableRemoteConfig?: boolean; +} + +export const getDefaultConfig = () => { + return { + sampleRate: 1, + enableRemoteConfig: true, + }; +} \ No newline at end of file diff --git a/packages/plugin-session-replay-react-native/src/session-replay.ts b/packages/plugin-session-replay-react-native/src/session-replay.ts index e3db7fc36..88c8759cd 100644 --- a/packages/plugin-session-replay-react-native/src/session-replay.ts +++ b/packages/plugin-session-replay-react-native/src/session-replay.ts @@ -7,6 +7,7 @@ import type { EnrichmentPlugin, Event, ReactNativeClient, ReactNativeConfig } fr import { PluginSessionReplayReactNative } from './native-module'; import { VERSION } from './version'; +import { SessionReplayConfig, getDefaultConfig } from './session-replay-config'; export class SessionReplayPlugin implements EnrichmentPlugin { name = '@amplitude/plugin-session-replay-react-native'; @@ -16,14 +17,26 @@ export class SessionReplayPlugin implements EnrichmentPlugin { this.config = config; console.log(`Installing @amplitude/plugin-session-replay-react-native, version ${VERSION}.`); - await PluginSessionReplayReactNative.setup(config.apiKey, config.deviceId, config.sessionId); + await PluginSessionReplayReactNative.setup( + config.apiKey, + config.deviceId, + config.sessionId, + this.sessionReplayConfig.sampleRate ?? 1, + this.sessionReplayConfig.enableRemoteConfig ?? true, + ); } async execute(event: Event): Promise { From 4bba4f43463a4e1ce7050d99194762e1618993ea Mon Sep 17 00:00:00 2001 From: "izaaz.yunus" Date: Thu, 31 Oct 2024 09:54:42 -0700 Subject: [PATCH 2/3] chore: update readme --- packages/plugin-session-replay-react-native/README.md | 7 ++++++- .../src/session-replay-config.tsx | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/plugin-session-replay-react-native/README.md b/packages/plugin-session-replay-react-native/README.md index 10057d79f..82e022a90 100644 --- a/packages/plugin-session-replay-react-native/README.md +++ b/packages/plugin-session-replay-react-native/README.md @@ -16,11 +16,16 @@ import { SessionReplayPlugin } from '@amplitude/plugin-session-replay-react-nati // ... +const config: SessionReplayConfig = { + enableRemoteConfig: true, // default true + sampleRate: 1, // default 0 +}; await init('YOUR_API_KEY').promise; -await add(new SessionReplayPlugin()).promise; +await add(new SessionReplayPlugin(config)).promise; ``` + ## Masking views To maks certain views, add the `AmpMaskView` tag with the mask property `amp-mask` around the section to be masked diff --git a/packages/plugin-session-replay-react-native/src/session-replay-config.tsx b/packages/plugin-session-replay-react-native/src/session-replay-config.tsx index 99050b74f..6d1dcdb3e 100644 --- a/packages/plugin-session-replay-react-native/src/session-replay-config.tsx +++ b/packages/plugin-session-replay-react-native/src/session-replay-config.tsx @@ -5,7 +5,7 @@ export interface SessionReplayConfig { export const getDefaultConfig = () => { return { - sampleRate: 1, + sampleRate: 0, enableRemoteConfig: true, }; } \ No newline at end of file From c5a78b498d2e2c36b1b0beb7dc27ff6c56354177 Mon Sep 17 00:00:00 2001 From: "izaaz.yunus" Date: Thu, 31 Oct 2024 09:55:16 -0700 Subject: [PATCH 3/3] chore: update readme --- packages/plugin-session-replay-react-native/example/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/plugin-session-replay-react-native/example/src/App.tsx b/packages/plugin-session-replay-react-native/example/src/App.tsx index f8bccf818..8a7b52040 100644 --- a/packages/plugin-session-replay-react-native/example/src/App.tsx +++ b/packages/plugin-session-replay-react-native/example/src/App.tsx @@ -243,7 +243,7 @@ function App(): React.JSX.Element { sampleRate: 1 }; (async () => { - await init('6151e18fcbce1f94010e8791964d2a71', 'example_user_id', { + await init('YOUR-API-KEY', 'example_user_id', { logLevel: LogLevel.Verbose, }).promise; await add(new SessionReplayPlugin(config)).promise;