@amplitude/segment-session-replay-plugin-react-native 0.0.1-beta.2 → 0.1.0-beta.1

package/README.md

@@ -49,25 +49,40 @@ await segmentClient.add(createSegmentSessionReplayPlugin(sessionReplayConfig));
 
 ### Plugin Configuration
 
-The plugin accepts a `SessionReplayConfig` object
+The plugin accepts a `SegmentSessionReplayPluginConfig` object: every option from the
+`SessionReplayConfig` of `@amplitude/session-replay-react-native`, plus:
+
+| Option | Default | Description |
+| --- | --- | --- |
+| `autoStart` | `true` | Start recording as soon as the plugin is added to the Segment client. |
+
+Set `autoStart: false` to control when recording begins, then call `start()` from
+`@amplitude/session-replay-react-native` yourself:
+
+```js
+import { start } from '@amplitude/session-replay-react-native';
+
+await segmentClient.add(createSegmentSessionReplayPlugin({ ...sessionReplayConfig, autoStart: false }));
+
+// later, once you're ready to record
+await start();
+```
 
 ### Automatic Integration
 
 The plugin automatically:
 
 1. **Initializes Session Replay**: Sets up Amplitude Session Replay with your configuration
-2. **Syncs Session Data**: Updates session ID and device ID for each Segment event
-3. **Enriches Events**: Adds session replay properties to track and screen events
+2. **Starts Recording**: Begins recording once configured, unless `autoStart` is `false`
+3. **Syncs Session Data**: Updates session ID and device ID for each Segment event
 4. **Manages Lifecycle**: Handles start/stop operations for session replay
 
 ### Event Processing
 
-The plugin processes the following Segment event types:
-- `TrackEvent`: Adds session replay properties to track events
-- `ScreenEvent`: Adds session replay properties to screen events
-
-For these events, the plugin:
+For every event, the plugin:
 - Extracts session ID from event properties or Amplitude integration data
 - Extracts device ID from event context or anonymous ID
-- Adds session replay properties to the event before sending to Segment
+- Forwards both to Session Replay so the recording is attributed correctly
+
+Events are passed through unmodified; the plugin does not add properties to them.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplitude/segment-session-replay-plugin-react-native",
-  "version": "0.0.1-beta.2",
+  "version": "0.1.0-beta.1",
   "description": "Amplitude Segment Session Replay Plugin for React Native",
   "keywords": [
     "analytics",
@@ -26,20 +26,6 @@
     "type": "git",
     "url": "git+https://github.com/amplitude/Amplitude-TypeScript.git"
   },
-  "scripts": {
-    "build": "bob build",
-    "fix": "yarn fix:eslint & yarn fix:prettier",
-    "fix:eslint": "eslint '{src,test}/**/*.ts' --fix",
-    "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
-    "lint": "yarn lint:prettier && yarn lint:eslint",
-    "lint:eslint": "eslint '{src,test}/**/*.ts'",
-    "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
-    "test": "jest",
-    "typecheck": "tsc -p ./tsconfig.json",
-    "version": "yarn version-file && yarn build",
-    "version-file": "node -p \"'export const VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts",
-    "typescript": "tsc --noEmit"
-  },
   "files": [
     "src",
     "!test",
@@ -52,9 +38,9 @@
     "url": "https://github.com/amplitude/Amplitude-TypeScript/issues"
   },
   "devDependencies": {
-    "@amplitude/session-replay-react-native": ">=0.0.1-beta.2 <1.0.0",
     "@segment/analytics-react-native": "2.15.0",
-    "react-native-builder-bob": "^0.20.3"
+    "react-native-builder-bob": "^0.20.3",
+    "@amplitude/session-replay-react-native": "1.0.1"
   },
   "peerDependencies": {
     "@amplitude/session-replay-react-native": "*",
@@ -74,5 +60,18 @@
       ]
     ]
   },
-  "gitHead": "1ff69489af101b6a8780786b54a1caf403a4a425"
-}
+  "scripts": {
+    "build": "bob build",
+    "fix": "pnpm fix:eslint & pnpm fix:prettier",
+    "fix:eslint": "eslint '{src,test}/**/*.ts' --fix",
+    "fix:prettier": "prettier --write \"{src,test}/**/*.ts\"",
+    "lint": "pnpm lint:prettier && pnpm lint:eslint",
+    "lint:eslint": "eslint '{src,test}/**/*.ts'",
+    "lint:prettier": "prettier --check \"{src,test}/**/*.ts\"",
+    "test": "jest",
+    "typecheck": "tsc -p ./tsconfig.json",
+    "version": "pnpm version-file && pnpm build",
+    "version-file": "node -p \"'export const VERSION = \\'' + require('./package.json').version + '\\';'\" > src/version.ts",
+    "typescript": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -1 +1,4 @@
-export { createSegmentSessionReplayPlugin } from './segment-session-replay-plugin';
+export {
+  createSegmentSessionReplayPlugin,
+  type SegmentSessionReplayPluginConfig,
+} from './segment-session-replay-plugin';

package/src/segment-session-replay-plugin.ts

@@ -2,15 +2,31 @@ import { Plugin, PluginType, type SegmentEvent, EventType, SegmentClient } from
 
 import {
   type SessionReplayConfig,
-  getSessionReplayProperties,
   init,
   setDeviceId,
+  setOptOut,
   setSessionId,
   start,
   stop,
+  teardown,
 } from '@amplitude/session-replay-react-native';
 import { VERSION } from './version';
 
+/**
+ * Configuration for the Segment Session Replay plugin.
+ *
+ * Extends the standalone `SessionReplayConfig` with plugin-owned options. The
+ * standalone SDK requires an explicit `start()`, so `autoStart` lives here to
+ * keep "add the plugin and record" working without the caller wiring it up.
+ */
+export interface SegmentSessionReplayPluginConfig extends SessionReplayConfig {
+  /**
+   * Whether to automatically start recording when the plugin is configured
+   * @default true
+   */
+  autoStart?: boolean;
+}
+
 function getSessionId(event: SegmentEvent): number {
   const amplitudeSessionId =
     (event.integrations?.['Actions Amplitude'] as { session_id: number })?.['session_id'] ?? null;
@@ -35,24 +51,29 @@ export class SegmentSessionReplayPlugin extends Plugin {
   version: string = VERSION;
   type: PluginType = PluginType.enrichment;
 
-  private sessionReplayConfig: SessionReplayConfig;
+  private sessionReplayConfig: SegmentSessionReplayPluginConfig;
 
   // @review: This is to ensure the plugin is initialized before the first event is processed.
   // because `configure` is not asynchronous
   private initPromise: Promise<void> | null = null;
 
-  constructor(config: SessionReplayConfig) {
+  constructor(config: SegmentSessionReplayPluginConfig) {
     super();
     this.sessionReplayConfig = config;
   }
 
   async configure(analytics: SegmentClient): Promise<void> {
     super.configure(analytics);
+    const { autoStart = true, ...sessionReplayConfig } = this.sessionReplayConfig;
     this.initPromise = init({
       deviceId: analytics.userInfo.get().anonymousId,
-      ...this.sessionReplayConfig,
+      ...sessionReplayConfig,
     });
     await this.initPromise;
+
+    if (autoStart) {
+      await start();
+    }
   }
 
   async execute(event: SegmentEvent): Promise<SegmentEvent> {
@@ -64,17 +85,13 @@ export class SegmentSessionReplayPlugin extends Plugin {
     await setSessionId(sessionId);
     await setDeviceId(deviceId);
 
-    if (event.type === EventType.TrackEvent || event.type === EventType.ScreenEvent) {
-      const properties = await getSessionReplayProperties();
-      event.properties = { ...event.properties, ...properties };
-    }
-
     return event;
   }
 
   async shutdown(): Promise<void> {
     await this.initPromise;
-    await stop();
+    await teardown();
+    this.initPromise = null;
   }
 
   async start(): Promise<void> {
@@ -86,8 +103,13 @@ export class SegmentSessionReplayPlugin extends Plugin {
     await this.initPromise;
     await stop();
   }
+
+  async setOptOut(optOut: boolean): Promise<void> {
+    await this.initPromise;
+    await setOptOut(optOut);
+  }
 }
 
-export function createSegmentSessionReplayPlugin(config: SessionReplayConfig): Plugin {
+export function createSegmentSessionReplayPlugin(config: SegmentSessionReplayPluginConfig): Plugin {
   return new SegmentSessionReplayPlugin(config);
 }

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '0.0.1-beta.2';
+export const VERSION = '0.1.0-beta.1';