Attach browser context to client SSE

Author: roncohen

packages/browser-sdk/src/client.ts

@@ -1378,6 +1378,7 @@ export class ReflagClient {
       publishableKey: this.publishableKey,
       sdkVersion: this.sdkVersion,
       path: "sse/client",
+      context: this.context,
     });
   }
 

packages/browser-sdk/src/sse.ts

@@ -1,4 +1,5 @@
 import { SDK_VERSION_HEADER_NAME } from "./config";
+import { ReflagContext } from "./context";
 import { Logger, loggerWithPrefix } from "./logger";
 
 export type EventSourceLike = {
@@ -16,6 +17,36 @@ export type PubSubMessage = {
   [key: string]: any;
 };
 
+function withoutUndefinedValues(
+  attributes: Record<string, string | number | undefined> | undefined,
+) {
+  if (!attributes) return undefined;
+
+  const cleaned: Record<string, string | number> = {};
+  for (const [key, value] of Object.entries(attributes)) {
+    if (value !== undefined) {
+      cleaned[key] = value;
+    }
+  }
+
+  return Object.keys(cleaned).length > 0 ? cleaned : undefined;
+}
+
+function serializeContext(context: ReflagContext | undefined) {
+  if (!context) return undefined;
+
+  const payload: Record<string, Record<string, string | number>> = {};
+  const user = withoutUndefinedValues(context.user);
+  const company = withoutUndefinedValues(context.company);
+  const other = withoutUndefinedValues(context.other);
+
+  if (user) payload.user = user;
+  if (company) payload.company = company;
+  if (other) payload.other = other;
+
+  return Object.keys(payload).length > 0 ? JSON.stringify(payload) : undefined;
+}
+
 export class AblySSEChannel {
   private isOpen = false;
   private eventSource: EventSourceLike | null = null;
@@ -31,6 +62,7 @@ export class AblySSEChannel {
     private publishableKey?: string,
     private sdkVersion?: string,
     private path = "sse",
+    private context?: ReflagContext,
   ) {
     this.logger = loggerWithPrefix(logger, "[SSE]");
 
@@ -130,6 +162,10 @@ export class AblySSEChannel {
       if (this.sdkVersion) {
         url.searchParams.append(SDK_VERSION_HEADER_NAME, this.sdkVersion);
       }
+      const serializedContext = serializeContext(this.context);
+      if (serializedContext) {
+        url.searchParams.append("context", serializedContext);
+      }
 
       this.eventSource = this.createEventSource(url.toString()) ?? null;
       if (!this.eventSource) {
@@ -233,6 +269,7 @@ export function openAblySSEChannel({
   publishableKey,
   sdkVersion,
   path,
+  context,
 }: {
   channel?: string;
   channels?: string[];
@@ -243,6 +280,7 @@ export function openAblySSEChannel({
   publishableKey?: string;
   sdkVersion?: string;
   path?: string;
+  context?: ReflagContext;
 }) {
   const subscribedChannels = channels ?? (channel ? [channel] : []);
   const sse = new AblySSEChannel(
@@ -254,6 +292,7 @@ export function openAblySSEChannel({
     publishableKey,
     sdkVersion,
     path,
+    context,
   );
 
   sse.open();

packages/browser-sdk/test/init.test.ts

@@ -164,6 +164,11 @@ describe("init", () => {
       expect(spy.mock.calls[0][0].channels).toEqual([]);
       expect(spy.mock.calls[0][0].publishableKey).toBe(KEY);
       expect(spy.mock.calls[0][0].sdkVersion).toBe("browser-sdk/test");
+      expect(spy.mock.calls[0][0].context).toEqual({
+        user: { id: "foo" },
+        company: undefined,
+        other: {},
+      });
 
       await reflagInstance.stop();
       expect(closeChannel).toHaveBeenCalledTimes(1);

packages/browser-sdk/test/sse.test.ts

@@ -96,6 +96,25 @@ describe("connection handling", () => {
     expect(url.searchParams.get("reflag-sdk-version")).toBe("browser-sdk/test");
   });
 
+  test("includes context as JSON when provided", async () => {
+    openAblySSEChannel({
+      channels: [],
+      callback: vi.fn(),
+      logger: testLogger,
+      sseBaseUrl: sseHost,
+      path: "sse/client",
+      context: {
+        user: { id: 23, name: undefined },
+        other: {},
+      },
+    });
+
+    const url = new URL(vi.mocked(window.EventSource).mock.calls[0][0]);
+    expect(url.searchParams.get("context")).toBe(
+      JSON.stringify({ user: { id: 23 } }),
+    );
+  });
+
   test("passes parsed message envelopes to the callback", async () => {
     const callback = vi.fn();
     const sse = createSSEChannel(callback);