@prodact.ai/sdk 0.0.7 → 0.0.9

package/dist/react.mjs

@@ -59,7 +59,8 @@ var DEFAULT_CAPTURE_CONFIG = {
 };
 function mergeConfig(userConfig) {
   return {
-    enabled: userConfig?.enabled ?? false,
+    enabled: userConfig?.enabled ?? true,
+    // Enabled by default!
     samplingRate: userConfig?.samplingRate ?? 1,
     privacy: { ...DEFAULT_PRIVACY_CONFIG, ...userConfig?.privacy },
     performance: { ...DEFAULT_PERFORMANCE_CONFIG, ...userConfig?.performance },
@@ -1071,7 +1072,8 @@ async function captureElementScreenshot(element, maxSize = 200) {
 }
 function mergeConfig2(config) {
   const defaults = {
-    enabled: false,
+    enabled: true,
+    // Enabled by default!
     samplingRate: 1,
     events: {
       clicks: true,
@@ -1196,7 +1198,15 @@ var UserFlowTracker = class {
       console.warn("[UserFlow] Cannot track outside browser environment");
       return null;
     }
+    console.log("[UserFlow] start() called", {
+      enabled: this.config.enabled,
+      samplingRate: this.config.samplingRate,
+      currentState: this.state,
+      apiUrl: this.apiUrl,
+      hasSessionToken: !!this.sessionToken
+    });
     if (!this.config.enabled) {
+      console.warn("[UserFlow] Tracking disabled by config");
       return null;
     }
     if (this.state === "tracking") {
@@ -1542,16 +1552,25 @@ var UserFlowTracker = class {
       // Link to rrweb recording session if available
       linkedRecordingSessionId: this.linkedRecordingSessionId
     };
-    const response = await fetch(endpoint, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...this.sdkKey ? { "X-SDK-Key": this.sdkKey } : {}
-      },
-      body: JSON.stringify(body)
-    });
-    if (!response.ok) {
-      throw new Error(`Failed to start session: ${response.status}`);
+    try {
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...this.sdkKey ? { "X-SDK-Key": this.sdkKey } : {}
+        },
+        body: JSON.stringify(body)
+      });
+      if (!response.ok) {
+        console.error("[UserFlow] Failed to start session:", response.status, response.statusText);
+        console.error("[UserFlow] Endpoint:", endpoint);
+        throw new Error(`Failed to start session: ${response.status}`);
+      }
+      console.log("[UserFlow] Session started successfully:", this.sessionId);
+    } catch (error) {
+      console.error("[UserFlow] Network error starting session:", error);
+      console.error("[UserFlow] Attempted endpoint:", endpoint);
+      throw error;
     }
   }
   /**
@@ -1580,9 +1599,15 @@ var UserFlowTracker = class {
       });
       if (response.ok) {
         this.batchesSent++;
+        console.log(`[UserFlow] Event batch ${this.batchIndex - 1} sent (${eventsToSend.length} events)`);
+      } else {
+        console.error("[UserFlow] Failed to send event batch:", response.status, response.statusText);
+        console.error("[UserFlow] Endpoint:", endpoint);
+        this.events = [...eventsToSend, ...this.events];
       }
     } catch (error) {
-      console.error("[UserFlow] Failed to send event batch:", error);
+      console.error("[UserFlow] Network error sending event batch:", error);
+      console.error("[UserFlow] Endpoint:", endpoint);
       this.events = [...eventsToSend, ...this.events];
     }
   }
@@ -1700,9 +1725,32 @@ var ProduckSDK = class {
     /** User flow tracker instance (optional, isolated module) */
     this.userFlowTracker = null;
     let apiUrl = config.apiUrl;
+    let apiUrlAutoDetected = false;
     if (!apiUrl) {
+      apiUrlAutoDetected = true;
       if (typeof window !== "undefined") {
-        apiUrl = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" ? "http://localhost:4001/api/v1" : `${window.location.protocol}//${window.location.host}/api/v1`;
+        const isLocalhost = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1";
+        if (isLocalhost) {
+          apiUrl = "http://localhost:4001/api/v1";
+        } else {
+          apiUrl = `${window.location.protocol}//${window.location.host}/api/v1`;
+          console.warn(
+            "%c\u26A0\uFE0F Produck SDK Warning: apiUrl not configured!",
+            "background: #fbbf24; color: #000; padding: 4px 8px; font-weight: bold;"
+          );
+          console.warn(
+            `The SDK is auto-detecting apiUrl as: ${apiUrl}
+This is likely WRONG for production. Your backend is probably at a different URL.
+
+To fix this, provide apiUrl in your SDK config:
+
+  createProduck({
+    sdkKey: 'your_sdk_key',
+    apiUrl: 'https://your-backend.com/api/v1',  // <-- Add this!
+  })
+`
+          );
+        }
       } else {
         apiUrl = "http://localhost:4001/api/v1";
       }
@@ -1711,11 +1759,30 @@ var ProduckSDK = class {
       apiUrl,
       ...config
     };
+    if (typeof window !== "undefined") {
+      console.log(
+        "%c\u{1F527} Produck SDK Config",
+        "background: #3b82f6; color: #fff; padding: 2px 6px; border-radius: 3px;",
+        {
+          apiUrl: this.config.apiUrl,
+          apiUrlAutoDetected,
+          sdkKey: this.config.sdkKey ? `${this.config.sdkKey.substring(0, 10)}...` : "not set",
+          guiderId: this.config.guiderId || "not set"
+        }
+      );
+    }
   }
   /**
    * Initialize the SDK and create a chat session
    */
   async init() {
+    if (typeof window !== "undefined") {
+      console.log(
+        "%c\u{1F680} Produck SDK Initializing...",
+        "background: #10b981; color: #fff; padding: 2px 6px; border-radius: 3px;",
+        { endpoint: this.config.apiUrl }
+      );
+    }
     await this.log("info", "SDK Initializing", {
       apiUrl: this.config.apiUrl,
       hasSDKKey: !!this.config.sdkKey,
@@ -1742,20 +1809,43 @@ var ProduckSDK = class {
         headers
       });
       if (!response.ok) {
-        await this.log("error", "Failed to create session", { status: response.status });
+        let errorDetail = "";
+        try {
+          errorDetail = await response.text();
+        } catch {
+          errorDetail = "Could not read response body";
+        }
+        console.error(
+          "%c\u274C Produck SDK: Failed to create session",
+          "background: #ef4444; color: #fff; padding: 2px 6px; border-radius: 3px;"
+        );
+        console.error(`Status: ${response.status} ${response.statusText}`);
+        console.error(`Endpoint: ${endpoint}`);
+        console.error(`Response: ${errorDetail}`);
+        if (response.status === 404) {
+          console.error(
+            `
+\u{1F4A1} Tip: A 404 error usually means the apiUrl is wrong.
+Current apiUrl: ${this.config.apiUrl}
+Make sure your backend is running and the URL is correct.`
+          );
+        }
+        await this.log("error", "Failed to create session", { status: response.status, errorDetail });
         throw new Error(`Failed to create session: ${response.status}`);
       }
       const session = await response.json();
       this.sessionToken = session.session_token;
       this.isReady = true;
       await this.log("info", "SDK initialized successfully", { hasSessionToken: !!this.sessionToken });
-      if (this.config.recording?.enabled) {
+      const recordingEnabled = this.config.recording?.enabled !== false;
+      if (recordingEnabled) {
         await this.initRecording();
       }
       if (this.config.proactive?.enabled) {
         this.initProactive();
       }
-      if (this.config.userFlows?.enabled) {
+      const userFlowsEnabled = this.config.userFlows?.enabled !== false;
+      if (userFlowsEnabled) {
         await this.initUserFlowTracking();
       }
       this.emit("ready", { sessionToken: this.sessionToken });
@@ -1763,7 +1853,27 @@ var ProduckSDK = class {
         await this.sendInitialMessage();
       }
     } catch (error) {
-      await this.log("error", "SDK initialization failed", { error: error instanceof Error ? error.message : String(error) });
+      const errorMessage = error instanceof Error ? error.message : String(error);
+      const isNetworkError = errorMessage.includes("fetch") || errorMessage.includes("network") || errorMessage.includes("Failed to fetch") || errorMessage.includes("NetworkError");
+      console.error(
+        "%c\u274C Produck SDK initialization failed",
+        "background: #ef4444; color: #fff; padding: 4px 8px; font-weight: bold;"
+      );
+      console.error(`Error: ${errorMessage}`);
+      console.error(`API URL: ${this.config.apiUrl}`);
+      if (isNetworkError) {
+        console.error(
+          `
+\u{1F4A1} This looks like a network error. Common causes:
+  1. The apiUrl is incorrect or the backend is not running
+  2. CORS is blocking the request
+  3. The backend server is unreachable
+
+Current apiUrl: ${this.config.apiUrl}
+Check the Network tab in DevTools for more details.`
+        );
+      }
+      await this.log("error", "SDK initialization failed", { error: errorMessage });
       this.emit("error", error);
       throw error;
     }
@@ -2447,6 +2557,15 @@ var ProduckSDK = class {
    */
   async initUserFlowTracking() {
     try {
+      console.log(
+        "%c\u{1F4CA} Initializing User Flow Tracking",
+        "background: #8b5cf6; color: #fff; padding: 2px 6px; border-radius: 3px;",
+        {
+          config: this.config.userFlows,
+          apiUrl: this.config.apiUrl,
+          sdkKey: this.config.sdkKey ? "present" : "missing"
+        }
+      );
       this.userFlowTracker = new UserFlowTracker(this.config.userFlows);
       this.userFlowTracker.initialize(
         this.sessionToken,
@@ -2456,12 +2575,27 @@ var ProduckSDK = class {
       const recordingSessionId = this.recorder?.getSessionId?.() || null;
       const sessionId = await this.userFlowTracker.start(recordingSessionId);
       if (sessionId) {
+        console.log(
+          "%c\u2705 User Flow Tracking Started",
+          "background: #10b981; color: #fff; padding: 2px 6px; border-radius: 3px;",
+          { flowSessionId: sessionId, linkedRecordingSession: recordingSessionId }
+        );
         await this.log("info", "User flow tracking started", {
           flowSessionId: sessionId,
           linkedRecordingSession: recordingSessionId
         });
+      } else {
+        console.warn(
+          "%c\u26A0\uFE0F User Flow Tracking: No session ID returned",
+          "background: #f59e0b; color: #000; padding: 2px 6px; border-radius: 3px;"
+        );
       }
     } catch (error) {
+      console.error(
+        "%c\u274C User Flow Tracking Failed",
+        "background: #ef4444; color: #fff; padding: 2px 6px; border-radius: 3px;",
+        error
+      );
       await this.log("warn", "Failed to initialize user flow tracking", {
         error: error instanceof Error ? error.message : String(error)
       });