fix: fixes trailing slash error in the js sdk (#24)

* fixes trailing slash erorr in the js sdk

* adds test for invalid app url case

Author: pandeymangg

packages/js/eslint.config.mjs

@@ -71,7 +71,7 @@ export default [
         { "**/*.{ts,tsx}": "KEBAB_CASE" },
         { ignoreMiddleExtensions: true },
       ],
-      "prettier/prettier": "error",
+      "prettier/prettier": ["error", { trailingComma: "es5" }],
     },
   },
 

packages/js/src/index.test.ts

@@ -11,7 +11,7 @@ import { TFormbricks } from "./types/formbricks";
 
 // Get the mocked function
 const mockLoadFormbricksToProxy = vi.mocked(
-  loadFormbricksModule.loadFormbricksToProxy,
+  loadFormbricksModule.loadFormbricksToProxy
 );
 
 describe("formbricks proxy", () => {
@@ -61,7 +61,7 @@ describe("formbricks proxy", () => {
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setAttribute",
       key,
-      value,
+      value
     );
   });
 
@@ -75,7 +75,7 @@ describe("formbricks proxy", () => {
 
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setAttributes",
-      attributes,
+      attributes
     );
   });
 
@@ -86,7 +86,7 @@ describe("formbricks proxy", () => {
 
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setLanguage",
-      language,
+      language
     );
   });
 
@@ -108,7 +108,7 @@ describe("formbricks proxy", () => {
     await formbricks.registerRouteChange();
 
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
-      "registerRouteChange",
+      "registerRouteChange"
     );
   });
 
@@ -142,7 +142,7 @@ describe("formbricks proxy", () => {
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "track",
       trackCode,
-      properties,
+      properties
     );
   });
 
@@ -154,7 +154,7 @@ describe("formbricks proxy", () => {
 
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       customMethod,
-      args[0],
+      args[0]
     );
   });
 
@@ -172,7 +172,7 @@ describe("formbricks proxy", () => {
     mockLoadFormbricksToProxy.mockRejectedValue(error);
 
     await expect(formbricks.setEmail("[email protected]")).rejects.toThrow(
-      "Test error",
+      "Test error"
     );
   });
 
@@ -189,12 +189,12 @@ describe("formbricks proxy", () => {
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledTimes(4);
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setEmail",
-      "[email protected]",
+      "[email protected]"
     );
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setAttribute",
       "userId",
-      "user123",
+      "user123"
     );
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith("track", "event1");
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith("setLanguage", "en");
@@ -225,7 +225,7 @@ describe("proxy behavior", () => {
 
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setUserId",
-      "user123",
+      "user123"
     );
   });
 
@@ -235,7 +235,7 @@ describe("proxy behavior", () => {
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setAttribute",
       "key",
-      "value",
+      "value"
     );
   });
 
@@ -249,7 +249,7 @@ describe("proxy behavior", () => {
 
     expect(mockLoadFormbricksToProxy).toHaveBeenCalledWith(
       "setup",
-      setupConfig,
+      setupConfig
     );
   });
 });

packages/js/src/index.ts

@@ -20,7 +20,7 @@ const formbricksProxyHandler: ProxyHandler<TFormbricks> = {
 
 const formbricks: TFormbricksCore = new Proxy(
   {} as TFormbricks,
-  formbricksProxyHandler,
+  formbricksProxyHandler
 );
 
 export default formbricks;

packages/js/src/lib/load-formbricks.test.ts

@@ -86,7 +86,7 @@ const mockSetTimeoutImmediate = () => {
       }
 
       return 1;
-    },
+    }
   );
   return originalSetTimeout;
 };
@@ -143,11 +143,42 @@ describe("load-formbricks", () => {
             src: `${setupArgs.appUrl}/js/formbricks.umd.cjs`,
             type: "text/javascript",
             async: true,
-          }),
+          })
         );
         expect(mockFormbricks.setup).toHaveBeenCalledWith(setupArgs);
       });
 
+      test("should handle setup call with a trailing slash in the appUrl", async () => {
+        const validAppUrl = "https://app.formbricks.com";
+        const invalidAppUrl = "https://app.formbricks.com/";
+        const environmentId = "env123";
+
+        const invalidSetupArgs = {
+          appUrl: invalidAppUrl,
+          environmentId,
+        };
+
+        const validateSetupArgs = {
+          appUrl: validAppUrl,
+          environmentId,
+        };
+
+        const mockAppendChild = vi
+          .spyOn(document.head, "appendChild")
+          .mockImplementation(createSuccessfulScriptMock());
+
+        await loadFormbricksToProxy("setup", invalidSetupArgs);
+
+        expect(mockAppendChild).toHaveBeenCalledWith(
+          expect.objectContaining({
+            src: `${validAppUrl}/js/formbricks.umd.cjs`,
+            type: "text/javascript",
+            async: true,
+          })
+        );
+        expect(mockFormbricks.setup).toHaveBeenCalledWith(validateSetupArgs);
+      });
+
       test("should log error when appUrl is missing", async () => {
         const consoleSpy = createConsoleErrorSpy();
 
@@ -156,7 +187,7 @@ describe("load-formbricks", () => {
         });
 
         expect(consoleSpy).toHaveBeenCalledWith(
-          "🧱 Formbricks - Error: appUrl is required",
+          "🧱 Formbricks - Error: appUrl is required"
         );
       });
 
@@ -168,7 +199,7 @@ describe("load-formbricks", () => {
         });
 
         expect(consoleSpy).toHaveBeenCalledWith(
-          "🧱 Formbricks - Error: environmentId is required",
+          "🧱 Formbricks - Error: environmentId is required"
         );
       });
 
@@ -199,15 +230,15 @@ describe("load-formbricks", () => {
         };
 
         vi.spyOn(document.head, "appendChild").mockImplementation(
-          createTimeoutScriptMock(),
+          createTimeoutScriptMock()
         );
 
         const originalSetTimeout = mockSetTimeoutImmediate();
 
         await loadFormbricksToProxy("setup", setupArgs);
 
         expect(consoleSpy).toHaveBeenCalledWith(
-          "🧱 Formbricks - Error: Failed to load Formbricks SDK",
+          "🧱 Formbricks - Error: Failed to load Formbricks SDK"
         );
 
         // Restore setTimeout
@@ -222,13 +253,13 @@ describe("load-formbricks", () => {
         };
 
         vi.spyOn(document.head, "appendChild").mockImplementation(
-          createErrorScriptMock(),
+          createErrorScriptMock()
         );
 
         await loadFormbricksToProxy("setup", setupArgs);
 
         expect(consoleSpy).toHaveBeenCalledWith(
-          "🧱 Formbricks - Error: Failed to load Formbricks SDK",
+          "🧱 Formbricks - Error: Failed to load Formbricks SDK"
         );
       });
 
@@ -240,14 +271,14 @@ describe("load-formbricks", () => {
         };
 
         vi.spyOn(document.head, "appendChild").mockImplementation(
-          createSetupFailureMock(),
+          createSetupFailureMock()
         );
 
         await loadFormbricksToProxy("setup", setupArgs);
 
         expect(consoleSpy).toHaveBeenCalledWith(
           "🧱 Formbricks - Error: setup failed",
-          expect.any(Error),
+          expect.any(Error)
         );
       });
     });
@@ -259,7 +290,7 @@ describe("load-formbricks", () => {
         await loadFormbricksToProxy("track", "test-event");
 
         expect(consoleSpy).toHaveBeenCalledWith(
-          "🧱 Formbricks - Warning: Formbricks not initialized. This method will be queued and executed after initialization.",
+          "🧱 Formbricks - Warning: Formbricks not initialized. This method will be queued and executed after initialization."
         );
       });
 
@@ -268,7 +299,7 @@ describe("load-formbricks", () => {
         await loadFormbricksToProxy("track", "queued-event");
         expect(warnSpy).toHaveBeenCalled();
         vi.spyOn(document.head, "appendChild").mockImplementation(
-          createSuccessfulScriptMock(),
+          createSuccessfulScriptMock()
         );
         await loadFormbricksToProxy("setup", {
           appUrl: "https://app.formbricks.com",
@@ -286,7 +317,7 @@ describe("load-formbricks", () => {
         };
 
         vi.spyOn(document.head, "appendChild").mockImplementation(
-          createSuccessfulScriptMock(),
+          createSuccessfulScriptMock()
         );
 
         // First, set up the SDK

packages/js/src/lib/load-formbricks.ts

@@ -11,7 +11,7 @@ let isInitializing = false;
 let isInitialized = false;
 // Load the SDK, return the result
 const loadFormbricksSDK = async (
-  apiHostParam: string,
+  apiHostParam: string
 ): Promise<Result<void>> => {
   if (!(globalThis as unknown as Record<string, unknown>).formbricks) {
     const scriptTag = document.createElement("script");
@@ -50,7 +50,7 @@ const loadFormbricksSDK = async (
 const functionsToProcess: { prop: string; args: unknown[] }[] = [];
 
 const validateSetupArgs = (
-  args: unknown[],
+  args: unknown[]
 ): { appUrl: string; environmentId: string } | null => {
   const argsTyped = args[0] as { appUrl: string; environmentId: string };
   const { appUrl, environmentId } = argsTyped;
@@ -65,7 +65,12 @@ const validateSetupArgs = (
     return null;
   }
 
-  return { appUrl, environmentId };
+  // Removing trailing slash
+  const appUrlWithoutTrailingSlash = appUrl.endsWith("/")
+    ? appUrl.slice(0, -1)
+    : appUrl;
+
+  return { appUrl: appUrlWithoutTrailingSlash, environmentId };
 };
 
 const processQueuedFunctions = (formbricksInstance: TFormbricks): void => {
@@ -76,7 +81,7 @@ const processQueuedFunctions = (formbricksInstance: TFormbricks): void => {
       ] !== "function"
     ) {
       console.error(
-        `🧱 Formbricks - Error: Method ${functionProp} does not exist on formbricks`,
+        `🧱 Formbricks - Error: Method ${functionProp} does not exist on formbricks`
       );
       continue;
     }
@@ -88,7 +93,7 @@ const processQueuedFunctions = (formbricksInstance: TFormbricks): void => {
 const handleSetupCall = async (args: unknown[]): Promise<void> => {
   if (isInitializing) {
     console.warn(
-      "🧱 Formbricks - Warning: Formbricks is already initializing.",
+      "🧱 Formbricks - Warning: Formbricks is already initializing."
     );
     return;
   }
@@ -99,14 +104,12 @@ const handleSetupCall = async (args: unknown[]): Promise<void> => {
     const loadSDKResult = await loadFormbricksSDK(validatedArgs.appUrl);
     const formbricksInstance = (
       globalThis as unknown as Record<string, unknown>
-    ).formbricks;
+    ).formbricks as TFormbricks;
     if (!loadSDKResult.ok || !formbricksInstance) {
       console.error("🧱 Formbricks - Error: Failed to load Formbricks SDK");
       return;
     }
-    // @ts-expect-error -- Required for dynamic function calls
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- Required for dynamic function calls
-    await formbricksInstance.setup(...args);
+    await formbricksInstance.setup({ ...validatedArgs });
     isInitialized = true;
     processQueuedFunctions(formbricks);
   } catch (err) {
@@ -118,7 +121,7 @@ const handleSetupCall = async (args: unknown[]): Promise<void> => {
 
 const executeFormbricksMethod = async (
   prop: string,
-  args: unknown[],
+  args: unknown[]
 ): Promise<void> => {
   const formbricksInstance = (globalThis as unknown as Record<string, unknown>)
     .formbricks;
@@ -140,7 +143,7 @@ export const loadFormbricksToProxy = async (
     await handleSetupCall(args);
   } else {
     console.warn(
-      "🧱 Formbricks - Warning: Formbricks not initialized. This method will be queued and executed after initialization.",
+      "🧱 Formbricks - Warning: Formbricks not initialized. This method will be queued and executed after initialization."
     );
     functionsToProcess.push({ prop, args });
   }

packages/js/src/types/formbricks.ts

@@ -26,7 +26,7 @@ export interface TFormbricks {
     code: string,
     properties?: {
       hiddenFields: Record<string | number, string | number | string[]>;
-    },
+    }
   ) => Promise<void>;
 
   logout: () => Promise<void>;