feat: [REL-10964] add Session Replay capabilities to Toolbar

packages/toolbar/package.json

@@ -67,6 +67,7 @@
     "@codemirror/view": "^6.38.8",
     "@launchpad-ui/components": "^0.17.7",
     "@launchpad-ui/tokens": "^0.15.1",
+    "@launchdarkly/session-replay": "^0.4.9",
     "@lezer/highlight": "^1.2.3",
     "@react-aria/focus": "^3.21.2",
     "@react-stately/flags": "^3.1.2",

packages/toolbar/src/core/tests/InternalClientProvider.test.tsx

@@ -14,11 +14,35 @@ const mockLDClient = {
 
 const mockInitialize = vi.fn();
 
+// Mock Session Replay
+const mockLDRecord = {
+  start: vi.fn(),
+  stop: vi.fn(),
+};
+
+// Create a proper mock class for SessionReplay
+class MockSessionReplay {
+  options: { manualStart: boolean; privacySetting: string };
+
+  constructor(options?: { manualStart?: boolean; privacySetting?: string }) {
+    this.options = {
+      manualStart: options?.manualStart ?? true,
+      privacySetting: options?.privacySetting ?? 'default',
+    };
+  }
+}
+
 // Mock the SDK module
 vi.mock('launchdarkly-js-client-sdk', () => ({
   initialize: mockInitialize,
 }));
 
+// Mock the Session Replay module
+vi.mock('@launchdarkly/session-replay', () => ({
+  default: MockSessionReplay,
+  LDRecord: mockLDRecord,
+}));
+
 import {
   InternalClientProvider,
   useInternalClient,
@@ -61,14 +85,19 @@ describe('InternalClientProvider', () => {
     // Reset all mock functions to default behavior
     mockLDClient.waitForInitialization.mockResolvedValue(undefined);
     mockLDClient.identify.mockResolvedValue(undefined);
-    mockLDClient.variation.mockReturnValue(true);
+    // Return false for session replay flag by default to prevent it from starting
+    mockLDClient.variation.mockReturnValue(false);
     mockLDClient.close.mockImplementation(() => {});
     mockLDClient.on.mockImplementation(() => {});
     mockLDClient.off.mockImplementation(() => {});
     mockLDClient.track.mockImplementation(() => {});
 
     mockInitialize.mockReturnValue(mockLDClient);
 
+    // Clear Session Replay mocks
+    mockLDRecord.start.mockClear();
+    mockLDRecord.stop.mockClear();
+
     // Clear the internal client singleton
     setToolbarFlagClient(null);
 
@@ -130,7 +159,9 @@ describe('InternalClientProvider', () => {
             key: 'toolbar-anonymous',
             anonymous: true,
           },
-          undefined,
+          expect.objectContaining({
+            observabilityPlugins: expect.any(Array),
+          }),
         );
       });
     });
@@ -149,7 +180,13 @@ describe('InternalClientProvider', () => {
       );
 
       await waitFor(() => {
-        expect(mockInitialize).toHaveBeenCalledWith('test-client-id-123', customContext, undefined);
+        expect(mockInitialize).toHaveBeenCalledWith(
+          'test-client-id-123',
+          customContext,
+          expect.objectContaining({
+            observabilityPlugins: expect.any(Array),
+          }),
+        );
       });
     });
 
@@ -203,21 +240,32 @@ describe('InternalClientProvider', () => {
       );
 
       await waitFor(() => {
-        expect(mockInitialize).toHaveBeenCalledWith('test-client-id-123', expect.any(Object), {
-          baseUrl: 'https://app.ld.catamorphic.com',
-        });
+        expect(mockInitialize).toHaveBeenCalledWith(
+          'test-client-id-123',
+          expect.any(Object),
+          expect.objectContaining({
+            baseUrl: 'https://app.ld.catamorphic.com',
+            observabilityPlugins: expect.any(Array),
+          }),
+        );
       });
     });
 
-    test('does not provide options when baseUrl is not specified', async () => {
+    test('includes observabilityPlugins even when baseUrl is not specified', async () => {
       render(
         <InternalClientProvider clientSideId="test-client-id-123">
           <TestConsumer />
         </InternalClientProvider>,
       );
 
       await waitFor(() => {
-        expect(mockInitialize).toHaveBeenCalledWith('test-client-id-123', expect.any(Object), undefined);
+        expect(mockInitialize).toHaveBeenCalledWith(
+          'test-client-id-123',
+          expect.any(Object),
+          expect.objectContaining({
+            observabilityPlugins: expect.any(Array),
+          }),
+        );
       });
     });
   });

packages/toolbar/src/core/ui/Toolbar/context/InternalClientProvider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
 import type { LDClient, LDContext } from 'launchdarkly-js-client-sdk';
 import { setToolbarFlagClient } from '../../../../flags/createToolbarFlagFunction';
+import { enableSessionReplay } from '../../../../flags/toolbarFlags';
 
 export interface AuthState {
   authenticated: boolean;
@@ -97,7 +98,10 @@ export function InternalClientProvider({
         setLoading(true);
         setError(null);
 
-        const { initialize } = await import('launchdarkly-js-client-sdk');
+        const [{ initialize }, SessionReplay] = await Promise.all([
+          import('launchdarkly-js-client-sdk'),
+          import('@launchdarkly/session-replay').then((m) => m.default),
+        ]);
 
         const context = initialContext || {
           kind: 'user',
@@ -112,8 +116,23 @@ export function InternalClientProvider({
               ...(baseUrl && { baseUrl }),
               ...(streamUrl && { streamUrl }),
               ...(eventsUrl && { eventsUrl }),
+              // Add Session Replay plugin with manual start
+              observabilityPlugins: [
+                new SessionReplay({
+                  manualStart: true,
+                  privacySetting: 'default',
+                }),
+              ],
             }
-          : undefined;
+          : {
+              // Add Session Replay plugin with manual start
+              observabilityPlugins: [
+                new SessionReplay({
+                  manualStart: true,
+                  privacySetting: 'default',
+                }),
+              ],
+            };
 
         const ldClient = initialize(clientSideId, context, options);
         clientToCleanup = ldClient;
@@ -149,6 +168,46 @@ export function InternalClientProvider({
     };
   }, [clientSideId, initialContext, baseUrl, streamUrl, eventsUrl]); // Re-initialize if any config changes
 
+  // Monitor Session Replay flag and start/stop recording accordingly
+  useEffect(() => {
+    if (!client) {
+      return;
+    }
+
+    const checkAndUpdateSessionReplay = async () => {
+      try {
+        const shouldEnableReplay = enableSessionReplay();
+
+        if (shouldEnableReplay) {
+          const { LDRecord } = await import('@launchdarkly/session-replay');
+          LDRecord.start({ forceNew: false, silent: false });
+          console.log('[InternalClientProvider] Session Replay started');
+        } else {
+          const { LDRecord } = await import('@launchdarkly/session-replay');
+          LDRecord.stop();
+          console.log('[InternalClientProvider] Session Replay stopped');
+        }
+      } catch (err) {
+        console.error('[InternalClientProvider] Failed to control Session Replay:', err);
+      }
+    };
+
+    // Check initial state
+    checkAndUpdateSessionReplay();
+
+    // Listen for flag changes
+    const flagKey = 'toolbar-enable-session-replay';
+    const handleFlagChange = () => {
+      checkAndUpdateSessionReplay();
+    };
+
+    client.on(`change:${flagKey}`, handleFlagChange);
+
+    return () => {
+      client.off(`change:${flagKey}`, handleFlagChange);
+    };
+  }, [client]);
+
   const value: InternalClientContextValue = {
     client,
     loading,

packages/toolbar/src/flags/toolbarFlags.ts

@@ -10,5 +10,8 @@ import { createToolbarFlagFunction } from './createToolbarFlagFunction';
  * export const myFeature = createToolbarFlagFunction('my-feature-key', defaultValue);
  */
 
-// Placeholder - remove once real toolbar flags are added
-export const __placeholder = createToolbarFlagFunction('__placeholder', false);
+/**
+ * Controls whether Session Replay is enabled for the toolbar.
+ * When enabled, Session Replay will record and send session data to LaunchDarkly.
+ */
+export const enableSessionReplay = createToolbarFlagFunction('toolbar-enable-session-replay', false);