fix(highlight-run): buffer worker messages instead of dropping them before initialization

Author: ccschmitz-launchdarkly

e2e/react-router/src/ldclientLazy.tsx

@@ -1,19 +1,31 @@
-import { initialize as init } from 'launchdarkly-js-client-sdk'
+import { initialize as init, type LDContext } from 'launchdarkly-js-client-sdk'
 import Observability, { LDObserve } from '@launchdarkly/observability'
 import SessionReplay, { LDRecord } from '@launchdarkly/session-replay'
 
+const getContextFriendlyName = (context: LDContext): string | undefined => {
+	if (context && 'kind' in context && context.kind === 'multi') {
+		const multiContext = context as {
+			kind: 'multi'
+			user?: { key?: string }
+		}
+		return multiContext.user?.key
+	}
+	return undefined
+}
+
 const observabilitySettings: ConstructorParameters<typeof Observability>[0] = {
 	networkRecording: {
 		enabled: true,
 		recordHeadersAndBody: true,
 	},
 	serviceName: 'ryan-test',
 	version: 'my-version',
-	backendUrl: 'http://localhost:8082/public',
+	backendUrl: 'https://pub.observability.ld-stg.launchdarkly.com/',
 	otel: {
-		otlpEndpoint: 'http://localhost:4318',
+		otlpEndpoint: 'https://otel.observability.ld-stg.launchdarkly.com:4318',
 	},
 	manualStart: true,
+	contextFriendlyName: getContextFriendlyName,
 }
 const sessionReplaySettings: ConstructorParameters<typeof SessionReplay>[0] = {
 	debug: { clientInteractions: true, domRecording: true },
@@ -23,18 +35,19 @@ const sessionReplaySettings: ConstructorParameters<typeof SessionReplay>[0] = {
 	privacySetting: 'none',
 	serviceName: 'ryan-test',
 	version: 'my-version',
-	backendUrl: 'http://localhost:8082/public',
+	backendUrl: 'https://pub.observability.ld-stg.launchdarkly.com/',
 	manualStart: true,
 	enableCanvasRecording: true,
 	samplingStrategy: {
 		canvas: 2, // 2 fps
 		canvasMaxSnapshotDimension: 720, // 720p quality
 	},
+	contextFriendlyName: getContextFriendlyName,
 }
 
 export const client = init(
 	'548f6741c1efad40031b18ae',
-	{ key: 'unknown' },
+	{ kind: 'user', anonymous: true },
 	{
 		// Not including plugins at all would be equivalent to the current LaunchDarkly SDK.
 		plugins: [

e2e/react-router/src/routes/root.tsx

@@ -380,6 +380,58 @@ export default function Root() {
 				</div>
 			</div>
 
+			<div
+				style={{
+					padding: 12,
+					border: '1px solid #ddd',
+					borderRadius: 6,
+					maxWidth: 720,
+				}}
+			>
+				<h3 style={{ marginTop: 0 }}>Identify User</h3>
+				<p>
+					Identify the current user via <code>client.identify()</code>
+					.
+				</p>
+				<textarea
+					id="identify-textarea"
+					style={{
+						width: '100%',
+						minHeight: 120,
+						fontFamily: 'monospace',
+					}}
+					defaultValue={JSON.stringify(
+						{
+							kind: 'multi',
+							user: {
+								key: 'test-user@example.com',
+								name: 'Test User',
+							},
+							organization: {
+								key: 'org-123',
+								name: 'Test Org',
+							},
+						},
+						null,
+						2,
+					)}
+					placeholder='{"kind":"user","key":"user-key"}'
+				/>
+				<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+					<button
+						onClick={() => {
+							const textarea = document.querySelector(
+								'#identify-textarea',
+							) as HTMLTextAreaElement
+							const value = textarea?.value ?? ''
+							client.identify(JSON.parse(value))
+						}}
+					>
+						Identify user
+					</button>
+				</div>
+			</div>
+
 			<div
 				style={{
 					marginTop: 8,
@@ -389,15 +441,16 @@ export default function Root() {
 					maxWidth: 720,
 				}}
 			>
-				<h3>Session Properties</h3>
+				<h3 style={{ marginTop: 0 }}>Session Properties</h3>
 				<p>
 					Add custom session-level attributes via{' '}
 					<code>LDRecord.addSessionProperties</code>.
 				</p>
 				<textarea
+					id="session-props-textarea"
 					style={{
 						width: '100%',
-						minHeight: 120,
+						minHeight: 40,
 						fontFamily: 'monospace',
 					}}
 					defaultValue='{"plan":"pro","favoriteColor":"seafoam"}'
@@ -406,8 +459,10 @@ export default function Root() {
 				<div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
 					<button
 						onClick={() => {
-							const value =
-								document.querySelector('textarea')?.value ?? ''
+							const textarea = document.querySelector(
+								'#session-props-textarea',
+							) as HTMLTextAreaElement
+							const value = textarea?.value ?? ''
 
 							LDRecord.addSessionProperties(JSON.parse(value))
 						}}