feat: Support clicks and custom event tracing

e2e/react-router/src/ldclient.tsx

@@ -11,21 +11,22 @@ const observabilitySettings: ConstructorParameters<typeof Observability>[0] = {
 		recordHeadersAndBody: true,
 	},
 	serviceName: 'ryan-test',
-	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',
 	},
+	productAnalytics: true,
 }
 const sessionReplaySettings: ConstructorParameters<typeof SessionReplay>[0] = {
 	debug: { clientInteractions: true, domRecording: true },
 	privacySetting: 'none',
 	serviceName: 'ryan-test',
-	backendUrl: 'http://localhost:8082/public',
+	backendUrl: 'https://pub.observability.ld-stg.launchdarkly.com/',
 }
 
 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/main.tsx

@@ -12,6 +12,12 @@ import Root from './routes/root'
 import Welcome from './routes/welcome'
 import PrivacyDemo from './routes/privacy-demo'
 import HttpTest from './routes/http-test'
+import LDClientPage, {
+	LDClientPageA,
+	LDClientPageB,
+	LDClientPageC,
+} from './routes/ldclient'
+import LDClientLazyPage from './routes/ldclient-lazy'
 
 function rootAction() {
 	const contact = { name: 'hello' }
@@ -59,6 +65,12 @@ const router = createBrowserRouter(
 			<Route path={'/welcome'} element={<Welcome />} />
 			<Route path={'/privacy'} element={<PrivacyDemo />} />
 			<Route path={'/http-test'} element={<HttpTest />} />
+			<Route path={'/ldclient'} element={<LDClientPage />}>
+				<Route path="page-a" element={<LDClientPageA />} />
+				<Route path="page-b" element={<LDClientPageB />} />
+				<Route path="page-c" element={<LDClientPageC />} />
+			</Route>
+			<Route path={'/ldclient-lazy'} element={<LDClientLazyPage />} />
 		</>,
 	),
 )

e2e/react-router/src/routes/ldclient-lazy.tsx

@@ -0,0 +1,97 @@
+import { LDObserve } from '@launchdarkly/observability'
+import { LDRecord } from '@launchdarkly/session-replay'
+import { useState } from 'react'
+import { client, recordObservability, recordSession } from '../ldclientLazy'
+
+export default function LDClientLazyPage() {
+	const [flags, setFlags] = useState<string>()
+	const [session, setSession] = useState<string>()
+	const [started, setStarted] = useState(false)
+
+	return (
+		<div id="ldclient-lazy-page">
+			<h1>LDClient Lazy (Manual Start)</h1>
+			<p>
+				Uses <code>ldclientLazy.tsx</code> — plugins have{' '}
+				<code>manualStart: true</code> and must be started explicitly.
+			</p>
+			<nav style={{ marginBottom: 16 }}>
+				<a href="/">← Home</a>
+			</nav>
+
+			<div style={{ display: 'flex', flexDirection: 'column', gap: 8, maxWidth: 400 }}>
+				<button
+					onClick={async () => {
+						await recordObservability()
+						await recordSession()
+						setStarted(true)
+					}}
+				>
+					Start plugins (recordObservability + recordSession)
+				</button>
+				{started && <p style={{ color: 'green' }}>Plugins started</p>}
+
+				<button
+					onClick={() => {
+						const url = LDRecord.getSession()?.url
+						setSession(url)
+					}}
+				>
+					Get session URL
+				</button>
+				{session && (
+					<a href={session} target="_blank" rel="noreferrer">
+						{session}
+					</a>
+				)}
+
+				<button
+					onClick={() => {
+						LDObserve.recordLog('hello from ldclient-lazy page', 'info')
+					}}
+				>
+					LDObserve.recordLog
+				</button>
+
+				<button
+					onClick={() => {
+						LDObserve.recordError(new Error('test error from ldclient-lazy page'))
+					}}
+				>
+					LDObserve.recordError
+				</button>
+
+				<button
+					onClick={async () => {
+						await client.identify({ kind: 'user', key: 'ldclient-lazy-test-user' })
+						setFlags(JSON.stringify(client.allFlags(), null, 2))
+					}}
+				>
+					client.identify
+				</button>
+
+				<button
+					onClick={() => {
+						setFlags(JSON.stringify(client.variation('enable-session-card-style'), null, 2))
+					}}
+				>
+					client.variation
+				</button>
+
+				<button
+					onClick={() => {
+						client.track('ldclient-lazy-page-custom-event', { random: Math.random() })
+					}}
+				>
+					client.track
+				</button>
+
+				{flags && (
+					<pre style={{ background: '#f5f5f5', padding: 8, borderRadius: 4 }}>
+						{flags}
+					</pre>
+				)}
+			</div>
+		</div>
+	)
+}