fix: docs and issues

- fix cloning of context object due to vue proxy
- updated readme with new sections
- renamed useClientEvent to useOnEvent

Author: Swiftwork

packages/browser-sdk/README.md

@@ -289,7 +289,9 @@ const { isEnabled } = reflagClient.getFlag("huddle");
 
 This eliminates loading states and improves performance by avoiding the initial flags API call.
 
-## Updating user/company/other context
+## Context management
+
+### Updating user/company/other context
 
 Attributes given for the user/company/other context in the ReflagClient constructor can be updated for use in flag targeting evaluation with the `updateUser()`, `updateCompany()` and `updateOtherContext()` methods.
 They return a promise which resolves once the flags have been re-evaluated follow the update of the attributes.
@@ -306,6 +308,57 @@ await reflagClient.updateUser({ voiceHuddleOptIn: (!isEnabled).toString() });
 
 > [!NOTE] > `user`/`company` attributes are also stored remotely on the Reflag servers and will automatically be used to evaluate flag targeting if the page is refreshed.
 
+### setContext()
+
+The `setContext()` method allows you to replace the entire context (user, company, and other attributes) at once. This method is useful when you need to completely change the context, such as when a user logs in or switches between different accounts.
+
+```ts
+await reflagClient.setContext({
+  user: {
+    id: "new-user-123",
+    name: "Jane Doe",
+    email: "jane@example.com",
+    role: "admin",
+  },
+  company: {
+    id: "company-456",
+    name: "New Company Inc",
+    plan: "enterprise",
+  },
+  other: {
+    feature: "beta",
+    locale: "en-US",
+  },
+});
+```
+
+The method will:
+
+- Replace the entire context with the new values
+- Re-evaluate all flags based on the new context
+- Update the user and company information on Reflag servers
+- Return a promise that resolves once the flags have been re-evaluated
+
+### getContext()
+
+The `getContext()` method returns the current context being used for flag evaluation. This is useful for debugging or when you need to inspect the current user, company, and other attributes.
+
+```ts
+const currentContext = reflagClient.getContext();
+console.log(currentContext);
+// {
+//   user: { id: "user-123", name: "John Doe", email: "john@example.com" },
+//   company: { id: "company-456", name: "Acme Inc", plan: "enterprise" },
+//   other: { locale: "en-US", feature: "beta" }
+// }
+```
+
+The returned context object contains:
+
+- `user`: Current user attributes (if any)
+- `company`: Current company attributes (if any)
+- `other`: Additional context attributes not related to user or company
+
 ## Toolbar
 
 The Reflag Toolbar is great for toggling flags on/off for yourself to ensure that everything works both when a flag is on and when it's off.

packages/browser-sdk/src/client.ts

@@ -16,7 +16,12 @@ import {
   RawFlags,
 } from "./flag/flags";
 import { ToolbarPosition } from "./ui/types";
-import { API_BASE_URL, APP_BASE_URL, SSE_REALTIME_BASE_URL } from "./config";
+import {
+  API_BASE_URL,
+  APP_BASE_URL,
+  IS_SERVER,
+  SSE_REALTIME_BASE_URL,
+} from "./config";
 import { ReflagContext, ReflagDeprecatedContext } from "./context";
 import { HookArgs, HooksManager, State } from "./hooksManager";
 import { HttpClient } from "./httpClient";
@@ -393,9 +398,11 @@ export class ReflagClient {
     this.publishableKey = opts.publishableKey;
     this.logger =
       opts?.logger ?? loggerWithPrefix(quietConsoleLogger, "[Reflag]");
+
+    // Create the context object making sure to clone the user and company objects
     this.context = {
-      user: opts?.user?.id ? opts.user : undefined,
-      company: opts?.company?.id ? opts.company : undefined,
+      user: opts?.user?.id ? { ...opts.user } : undefined,
+      company: opts?.company?.id ? { ...opts.company } : undefined,
       other: { ...opts?.otherContext, ...opts?.other },
     };
 
@@ -487,7 +494,7 @@ export class ReflagClient {
     this.setState("initializing");
 
     const start = Date.now();
-    if (this.autoFeedback) {
+    if (this.autoFeedback && !IS_SERVER) {
       // do not block on automated feedback surveys initialization
       this.autoFeedbackInit = this.autoFeedback.initialize().catch((e) => {
         this.logger.error("error initializing automated feedback surveys", e);
@@ -656,22 +663,33 @@ export class ReflagClient {
 
   /**
    * Update the context.
-   * Performs a shallow merge with the existing context.
-   * It will not update the context if nothing has changed.
+   * Replaces the existing context with a new context.
    *
    * @param context The context to update.
    */
-  async updateContext({ otherContext, ...context }: ReflagDeprecatedContext) {
+  async setContext({ otherContext, ...context }: ReflagDeprecatedContext) {
     const userIdChanged =
       context.user?.id && context.user.id !== this.context.user?.id;
+
+    // Create a new context object making sure to clone the user and company objects
     const newContext = {
-      ...this.context,
-      ...context,
-      other: { ...this.context.other, ...otherContext, ...context.other },
+      user: context.user?.id ? { ...context.user } : undefined,
+      company: context.company?.id ? { ...context.company } : undefined,
+      other: { ...otherContext, ...context.other },
     };
 
+    if (!context.user?.id) {
+      this.logger.warn("No user Id provided in context, user will be ignored");
+    }
+    if (!context.company?.id) {
+      this.logger.warn(
+        "No company Id provided in context, company will be ignored",
+      );
+    }
+
     // Nothing has changed, skipping update
     if (deepEqual(this.context, newContext)) return;
+    console.log("diffed");
     this.context = newContext;
 
     if (context.company) {

packages/browser-sdk/src/flag/flags.ts

@@ -271,7 +271,8 @@ export class FlagsClient {
   }
 
   setFetchedFlags(fetchedFlags: RawFlags, triggerEvent = true) {
-    this.fetchedFlags = fetchedFlags;
+    // Create a new fetched flags object making sure to clone the flags
+    this.fetchedFlags = { ...fetchedFlags };
     this.warnMissingFlagContextFields(fetchedFlags);
     this.updateFlags(triggerEvent);
   }

packages/react-sdk/README.md

@@ -744,11 +744,7 @@ import { useClient } from "@reflag/react-sdk";
 function LoggingWrapper({ children }: { children: ReactNode }) {
   const client = useClient();
 
-  useEffect(() => {
-    client.on("check", (evt) => {
-      console.log(`The flag ${evt.key} is ${evt.value} for user.`);
-    });
-  }, [client]);
+  console.log(client.getContext());
 
   return children;
 }
@@ -757,6 +753,7 @@ function LoggingWrapper({ children }: { children: ReactNode }) {
 ### `useIsLoading()`
 
 Returns the loading state of the flags in the `ReflagClient`.
+Initially, the value will be `true` if no bootstrap flags have been provided and the client has not be initialized.
 
 ```tsx
 import { useIsLoading } from "@reflag/react-sdk";
@@ -773,6 +770,22 @@ function LoadingWrapper({ children }: { children: ReactNode }) {
 }
 ```
 
+### `useOnEvent()`
+
+Attach a callback handler to client events to act on changes. It automatically disposes itself on unmount.
+
+```tsx
+import { useOnEvent } from "@reflag/react-sdk";
+
+function LoggingWrapper({ children }: { children: ReactNode }) {
+  useOnEvent("flagsUpdated", (newFlags) => {
+    console.log(newFlags);
+  });
+
+  return children;
+}
+```
+
 ## Migrating from Bucket SDK
 
 If you have been using the Bucket SDKs, the following list will help you migrate to Reflag SDK:

packages/react-sdk/dev/plain/app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 
 import {
   FlagKey,
@@ -12,6 +12,7 @@ import {
   useClient,
   ReflagBootstrappedProvider,
   RawFlags,
+  useOnEvent,
 } from "../../src";
 
 // Extending the Flags interface to define the available features
@@ -231,13 +232,9 @@ function CustomToolbar() {
   const client = useClient();
   const [flags, setFlags] = useState<RawFlags>(client.getFlags() ?? {});
 
-  useEffect(() => {
+  useOnEvent("flagsUpdated", () => {
     setFlags(client.getFlags() ?? {});
-    // Subscribe to updates
-    return client.on("flagsUpdated", () => {
-      setFlags(client.getFlags());
-    });
-  }, [client]);
+  });
 
   return (
     <div>