fix(session replay): pr feedback

Author: Kelly Wallach

packages/session-replay-browser/README.md

@@ -47,21 +47,27 @@ sessionReplay.init(API_KEY, {
 });
 ```
 
-### 3. Evaluate targeting and get session replay event properties
-Any event that occurs within the span of a session replay must be passed to the SDK to evaluate against targeting conditions. It must also be tagged with properties that signal to Amplitude to include it in the scope of the replay. The following shows an example of how to use the properties
+### 3. Evaluate targeting (optional)
+Any event that occurs within the span of a session replay must be passed to the SDK to evaluate against targeting conditions. This should be done *before* step 4, getting the event properties. If you are not using the targeting condition logic provided via the Amplitude UI, this step is not required.
 ```typescript
 const sessionTargetingMatch = sessionReplay.evaluateTargetingAndRecord({ event: {
   event_type: EVENT_NAME,
+  time: EVENT_TIMESTAMP,
   event_properties: eventProperties
 } });
+```
+
+### 4. Get session replay event properties
+Any event must be tagged with properties that signal to Amplitude to include it in the scope of the replay. The following shows an example of how to use the properties.
+```typescript
 const sessionReplayProperties = sessionReplay.getSessionReplayProperties();
 track(EVENT_NAME, {
   ...eventProperties,
   ...sessionReplayProperties
 })
 ```
 
-### 4. Update session id
+### 5. Update session id
 Any time that the session id for the user changes, the session replay SDK must be notified of that change. Update the session id via the following method:
 ```typescript
 sessionReplay.setSessionId(UNIX_TIMESTAMP)
@@ -71,7 +77,7 @@ You can optionally pass a new device id as a second argument as well:
 sessionReplay.setSessionId(UNIX_TIMESTAMP, deviceId)
 ```
 
-### 5. Shutdown (optional)
+### 6. Shutdown (optional)
 If at any point you would like to discontinue collection of session replays, for example in a part of your application where you would not like sessions to be collected, you can use the following method to stop collection and remove collection event listeners.
 ```typescript
 sessionReplay.shutdown()

packages/session-replay-browser/src/session-replay.ts

@@ -115,6 +115,11 @@ export class SessionReplay implements AmplitudeSessionReplay {
 
     this.eventsManager = new MultiEventManager<'replay' | 'interaction', string>(...managers);
 
+    this.identifiers.deviceId &&
+      void this.eventsManager.sendStoredEvents({
+        deviceId: this.identifiers.deviceId,
+      });
+
     this.loggerProvider.log('Installing @amplitude/session-replay-browser.');
 
     const globalScope = getGlobalScope();
@@ -126,7 +131,7 @@ export class SessionReplay implements AmplitudeSessionReplay {
     }
 
     if (globalScope && globalScope.document && globalScope.document.hasFocus()) {
-      await this.initialize(true);
+      await this.evaluateTargetingAndRecord();
     }
   }
 
@@ -193,20 +198,28 @@ export class SessionReplay implements AmplitudeSessionReplay {
   };
 
   focusListener = () => {
-    void this.initialize();
+    if (this.sessionTargetingMatch) {
+      this.recordEvents();
+    }
   };
 
   evaluateTargetingAndRecord = async (options?: { event?: Event }) => {
     if (!this.identifiers || !this.identifiers.sessionId || !this.config) {
       this.loggerProvider.error('Session replay init has not been called, cannot evaluate targeting.');
       return false;
     }
-    let eventForTargeting = options?.event;
+    // Return early if a targeting match has already been made
+    if (this.sessionTargetingMatch) {
+      if (!this.recordCancelCallback) {
+        this.recordEvents();
+      }
+      return this.sessionTargetingMatch;
+    }
 
+    let eventForTargeting = options?.event;
     if (
-      [SpecialEventType.GROUP_IDENTIFY, SpecialEventType.IDENTIFY, SpecialEventType.REVENUE].includes(
-        eventForTargeting?.event_type as SpecialEventType,
-      )
+      eventForTargeting &&
+      Object.values(SpecialEventType).includes(eventForTargeting.event_type as SpecialEventType)
     ) {
       eventForTargeting = undefined;
     }
@@ -240,22 +253,6 @@ export class SessionReplay implements AmplitudeSessionReplay {
       this.eventsManager.sendCurrentSequenceEvents({ sessionId: sessionIdToSend, deviceId });
   }
 
-  async initialize(shouldSendStoredEvents = false) {
-    if (!this.identifiers?.sessionId) {
-      this.loggerProvider.log(`Session is not being recorded due to lack of session id.`);
-      return;
-    }
-
-    const deviceId = this.getDeviceId();
-    if (!deviceId) {
-      this.loggerProvider.log(`Session is not being recorded due to lack of device id.`);
-      return;
-    }
-    this.eventsManager && shouldSendStoredEvents && this.eventsManager.sendStoredEvents({ deviceId });
-
-    await this.evaluateTargetingAndRecord();
-  }
-
   shouldOptOut() {
     let identityStoreOptOut: boolean | undefined;
     if (this.config?.instanceName) {

packages/session-replay-browser/src/targeting/targeting-idb-store.ts

@@ -12,90 +12,103 @@ export interface SessionReplayTargetingDB extends DBSchema {
   };
 }
 
-export const createStore = async (dbName: string) => {
-  return await openDB<SessionReplayTargetingDB>(dbName, 1, {
-    upgrade: (db: IDBPDatabase<SessionReplayTargetingDB>) => {
-      if (!db.objectStoreNames.contains('sessionTargetingMatch')) {
-        db.createObjectStore('sessionTargetingMatch', {
-          keyPath: 'sessionId',
-        });
-      }
-    },
-  });
-};
+export class TargetingIDBStore {
+  dbs: { [apiKey: string]: IDBPDatabase<SessionReplayTargetingDB> } | undefined;
 
-const openOrCreateDB = async (apiKey: string) => {
-  const dbName = `${apiKey.substring(0, 10)}_amp_session_replay_targeting`;
-  return await createStore(dbName);
-};
+  createStore = async (dbName: string) => {
+    return await openDB<SessionReplayTargetingDB>(dbName, 1, {
+      upgrade: (db: IDBPDatabase<SessionReplayTargetingDB>) => {
+        if (!db.objectStoreNames.contains('sessionTargetingMatch')) {
+          db.createObjectStore('sessionTargetingMatch', {
+            keyPath: 'sessionId',
+          });
+        }
+      },
+    });
+  };
 
-export const getTargetingMatchForSession = async ({
-  loggerProvider,
-  apiKey,
-  sessionId,
-}: {
-  loggerProvider: ILogger;
-  apiKey: string;
-  sessionId: number;
-}) => {
-  try {
-    const db = await openOrCreateDB(apiKey);
-    const targetingMatchForSession = await db.get<'sessionTargetingMatch'>('sessionTargetingMatch', sessionId);
+  openOrCreateDB = async (apiKey: string) => {
+    if (this.dbs && this.dbs[apiKey]) {
+      return this.dbs[apiKey];
+    }
+    const dbName = `${apiKey.substring(0, 10)}_amp_session_replay_targeting`;
+    const db = await this.createStore(dbName);
+    this.dbs = {
+      ...this.dbs,
+      [apiKey]: db,
+    };
+    return db;
+  };
 
-    return targetingMatchForSession?.targetingMatch;
-  } catch (e) {
-    loggerProvider.warn(`Failed to get targeting match for session id ${sessionId}: ${e as string}`);
-  }
-  return undefined;
-};
+  getTargetingMatchForSession = async ({
+    loggerProvider,
+    apiKey,
+    sessionId,
+  }: {
+    loggerProvider: ILogger;
+    apiKey: string;
+    sessionId: number;
+  }) => {
+    try {
+      const db = await this.openOrCreateDB(apiKey);
+      const targetingMatchForSession = await db.get<'sessionTargetingMatch'>('sessionTargetingMatch', sessionId);
 
-export const storeTargetingMatchForSession = async ({
-  loggerProvider,
-  apiKey,
-  sessionId,
-  targetingMatch,
-}: {
-  loggerProvider: ILogger;
-  apiKey: string;
-  sessionId: number;
-  targetingMatch: boolean;
-}) => {
-  try {
-    const db = await openOrCreateDB(apiKey);
-    const targetingMatchForSession = await db.put<'sessionTargetingMatch'>('sessionTargetingMatch', {
-      targetingMatch,
-      sessionId,
-    });
+      return targetingMatchForSession?.targetingMatch;
+    } catch (e) {
+      loggerProvider.warn(`Failed to get targeting match for session id ${sessionId}: ${e as string}`);
+    }
+    return undefined;
+  };
 
-    return targetingMatchForSession;
-  } catch (e) {
-    loggerProvider.warn(`Failed to store targeting match for session id ${sessionId}: ${e as string}`);
-  }
-  return undefined;
-};
+  storeTargetingMatchForSession = async ({
+    loggerProvider,
+    apiKey,
+    sessionId,
+    targetingMatch,
+  }: {
+    loggerProvider: ILogger;
+    apiKey: string;
+    sessionId: number;
+    targetingMatch: boolean;
+  }) => {
+    try {
+      const db = await this.openOrCreateDB(apiKey);
+      const targetingMatchForSession = await db.put<'sessionTargetingMatch'>('sessionTargetingMatch', {
+        targetingMatch,
+        sessionId,
+      });
 
-export const clearStoreOfOldSessions = async ({
-  loggerProvider,
-  apiKey,
-  currentSessionId,
-}: {
-  loggerProvider: ILogger;
-  apiKey: string;
-  currentSessionId: number;
-}) => {
-  try {
-    const db = await openOrCreateDB(apiKey);
-    const tx = db.transaction<'sessionTargetingMatch', 'readwrite'>('sessionTargetingMatch', 'readwrite');
-    const allTargetingMatchObjs = await tx.store.getAll();
-    for (let i = 0; i < allTargetingMatchObjs.length; i++) {
-      const targetingMatchObj = allTargetingMatchObjs[i];
-      const amountOfTimeSinceSession = Date.now() - targetingMatchObj.sessionId;
-      if (targetingMatchObj.sessionId !== currentSessionId && amountOfTimeSinceSession > MAX_IDB_STORAGE_LENGTH) {
-        await tx.store.delete(targetingMatchObj.sessionId);
+      return targetingMatchForSession;
+    } catch (e) {
+      loggerProvider.warn(`Failed to store targeting match for session id ${sessionId}: ${e as string}`);
+    }
+    return undefined;
+  };
+
+  clearStoreOfOldSessions = async ({
+    loggerProvider,
+    apiKey,
+    currentSessionId,
+  }: {
+    loggerProvider: ILogger;
+    apiKey: string;
+    currentSessionId: number;
+  }) => {
+    try {
+      const db = await this.openOrCreateDB(apiKey);
+      const tx = db.transaction<'sessionTargetingMatch', 'readwrite'>('sessionTargetingMatch', 'readwrite');
+      const allTargetingMatchObjs = await tx.store.getAll();
+      for (let i = 0; i < allTargetingMatchObjs.length; i++) {
+        const targetingMatchObj = allTargetingMatchObjs[i];
+        const amountOfTimeSinceSession = Date.now() - targetingMatchObj.sessionId;
+        if (targetingMatchObj.sessionId !== currentSessionId && amountOfTimeSinceSession > MAX_IDB_STORAGE_LENGTH) {
+          await tx.store.delete(targetingMatchObj.sessionId);
+        }
       }
+      await tx.done;
+    } catch (e) {
+      loggerProvider.warn(`Failed to clear old targeting matches for sessions: ${e as string}`);
     }
-    await tx.done;
-  } catch (e) {
-    loggerProvider.warn(`Failed to clear old targeting matches for sessions: ${e as string}`);
-  }
-};
+  };
+}
+export const targetingIDBStore = new TargetingIDBStore();

packages/session-replay-browser/src/targeting/targeting-manager.ts

@@ -1,6 +1,6 @@
 import { TargetingParameters, evaluateTargeting as evaluateTargetingPackage } from '@amplitude/targeting';
 import { SessionReplayJoinedConfig } from 'src/config/types';
-import * as TargetingIDBStore from './targeting-idb-store';
+import { targetingIDBStore } from './targeting-idb-store';
 
 export const evaluateTargetingAndStore = async ({
   sessionId,
@@ -11,13 +11,13 @@ export const evaluateTargetingAndStore = async ({
   config: SessionReplayJoinedConfig;
   targetingParams?: Pick<TargetingParameters, 'event' | 'userProperties'>;
 }) => {
-  await TargetingIDBStore.clearStoreOfOldSessions({
+  await targetingIDBStore.clearStoreOfOldSessions({
     loggerProvider: config.loggerProvider,
     apiKey: config.apiKey,
     currentSessionId: sessionId,
   });
 
-  const idbTargetingMatch = await TargetingIDBStore.getTargetingMatchForSession({
+  const idbTargetingMatch = await targetingIDBStore.getTargetingMatchForSession({
     loggerProvider: config.loggerProvider,
     apiKey: config.apiKey,
     sessionId: sessionId,
@@ -41,7 +41,7 @@ export const evaluateTargetingAndStore = async ({
       });
       sessionTargetingMatch = targetingResult.sr_targeting_config.key === 'on';
     }
-    void TargetingIDBStore.storeTargetingMatchForSession({
+    void targetingIDBStore.storeTargetingMatchForSession({
       loggerProvider: config.loggerProvider,
       apiKey: config.apiKey,
       sessionId: sessionId,