fix: [Backport] backports the sdk initialization issues (#7536)

Co-authored-by: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>

apps/web/instrumentation.ts

@@ -1,7 +1,19 @@
 import * as Sentry from "@sentry/nextjs";
+import { type Instrumentation } from "next";
+import { isExpectedError } from "@formbricks/types/errors";
 import { IS_PRODUCTION, PROMETHEUS_ENABLED, SENTRY_DSN } from "@/lib/constants";
 
-export const onRequestError = Sentry.captureRequestError;
+export const onRequestError: Instrumentation.onRequestError = (...args) => {
+  const [error] = args;
+
+  // Skip expected business-logic errors (AuthorizationError, ResourceNotFoundError, etc.)
+  // These are handled gracefully in the UI and don't need server-side Sentry reporting
+  if (error instanceof Error && isExpectedError(error)) {
+    return;
+  }
+
+  Sentry.captureRequestError(...args);
+};
 
 export const register = async () => {
   if (process.env.NEXT_RUNTIME === "nodejs") {

apps/web/modules/projects/settings/tags/loading.tsx

@@ -11,7 +11,7 @@ export const TagsLoading = () => {
   return (
     <PageContentWrapper>
       <PageHeader pageTitle={t("common.workspace_configuration")}>
-        <ProjectConfigNavigation activeId="tags" />
+        <ProjectConfigNavigation activeId="tags" loading />
       </PageHeader>
       <SettingsCard
         title={t("environments.workspace.tags.manage_tags")}

packages/js-core/src/lib/common/setup.ts

@@ -6,7 +6,7 @@ import { Logger } from "@/lib/common/logger";
 import { getIsSetup, setIsSetup } from "@/lib/common/status";
 import { filterSurveys, getIsDebug, isNowExpired, wrapThrows } from "@/lib/common/utils";
 import { fetchEnvironmentState } from "@/lib/environment/state";
-import { closeSurvey } from "@/lib/survey/widget";
+import { closeSurvey, preloadSurveysScript } from "@/lib/survey/widget";
 import { DEFAULT_USER_STATE_NO_USER_ID } from "@/lib/user/state";
 import { sendUpdatesToBackend } from "@/lib/user/update";
 import {
@@ -316,6 +316,9 @@ export const setup = async (
   addEventListeners();
   addCleanupEventListeners();
 
+  // Preload surveys script so it's ready when a survey triggers
+  preloadSurveysScript(configInput.appUrl);
+
   setIsSetup(true);
   logger.debug("Set up complete");
 

packages/js-core/src/lib/survey/widget.ts

@@ -11,6 +11,7 @@ import {
   handleHiddenFields,
   shouldDisplayBasedOnPercentage,
 } from "@/lib/common/utils";
+import { UpdateQueue } from "@/lib/user/update-queue";
 import { type TEnvironmentStateSurvey, type TUserState } from "@/types/config";
 import { type TTrackProperties } from "@/types/survey";
 
@@ -60,6 +61,24 @@ export const renderWidget = async (
 
   setIsSurveyRunning(true);
 
+  // Wait for pending user identification to complete before rendering
+  const updateQueue = UpdateQueue.getInstance();
+  if (updateQueue.hasPendingWork()) {
+    logger.debug("Waiting for pending user identification before rendering survey");
+    const identificationSucceeded = await updateQueue.waitForPendingWork();
+    if (!identificationSucceeded) {
+      const hasSegmentFilters = Array.isArray(survey.segment?.filters) && survey.segment.filters.length > 0;
+
+      if (hasSegmentFilters) {
+        logger.debug("User identification failed. Skipping survey with segment filters.");
+        setIsSurveyRunning(false);
+        return;
+      }
+
+      logger.debug("User identification failed but survey has no segment filters. Proceeding.");
+    }
+  }
+
   if (survey.delay) {
     logger.debug(`Delaying survey "${survey.name}" by ${survey.delay.toString()} seconds.`);
   }
@@ -87,7 +106,15 @@ export const renderWidget = async (
   const overlay = projectOverwrites.overlay ?? project.overlay;
   const placement = projectOverwrites.placement ?? project.placement;
   const isBrandingEnabled = project.inAppSurveyBranding;
-  const formbricksSurveys = await loadFormbricksSurveysExternally();
+
+  let formbricksSurveys: TFormbricksSurveys;
+  try {
+    formbricksSurveys = await loadFormbricksSurveysExternally();
+  } catch (error) {
+    logger.error(`Failed to load surveys library: ${String(error)}`);
+    setIsSurveyRunning(false);
+    return;
+  }
 
   const recaptchaSiteKey = config.get().environment.data.recaptchaSiteKey;
   const isSpamProtectionEnabled = Boolean(recaptchaSiteKey && survey.recaptcha?.enabled);
@@ -200,30 +227,87 @@ export const removeWidgetContainer = (): void => {
   document.getElementById(CONTAINER_ID)?.remove();
 };
 
-const loadFormbricksSurveysExternally = (): Promise<typeof globalThis.window.formbricksSurveys> => {
-  const config = Config.getInstance();
+const SURVEYS_LOAD_TIMEOUT_MS = 10000;
+const SURVEYS_POLL_INTERVAL_MS = 200;
 
+type TFormbricksSurveys = typeof globalThis.window.formbricksSurveys;
+
+let surveysLoadPromise: Promise<TFormbricksSurveys> | null = null;
+
+const waitForSurveysGlobal = (): Promise<TFormbricksSurveys> => {
   return new Promise((resolve, reject) => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- We need to check if the formbricksSurveys object exists
-    if (globalThis.window.formbricksSurveys) {
-      resolve(globalThis.window.formbricksSurveys);
-    } else {
-      const script = document.createElement("script");
-      script.src = `${config.get().appUrl}/js/surveys.umd.cjs`;
-      script.async = true;
-      script.onload = () => {
-        // Apply stored nonce if it was set before surveys package loaded
+    const startTime = Date.now();
+
+    const check = (): void => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
+      if (globalThis.window.formbricksSurveys) {
         const storedNonce = globalThis.window.__formbricksNonce;
         if (storedNonce) {
           globalThis.window.formbricksSurveys.setNonce(storedNonce);
         }
         resolve(globalThis.window.formbricksSurveys);
-      };
-      script.onerror = (error) => {
-        console.error("Failed to load Formbricks Surveys library:", error);
-        reject(new Error(`Failed to load Formbricks Surveys library: ${error as string}`));
-      };
-      document.head.appendChild(script);
-    }
+        return;
+      }
+
+      if (Date.now() - startTime >= SURVEYS_LOAD_TIMEOUT_MS) {
+        reject(new Error("Formbricks Surveys library did not become available within timeout"));
+        return;
+      }
+
+      setTimeout(check, SURVEYS_POLL_INTERVAL_MS);
+    };
+
+    check();
   });
 };
+
+const loadFormbricksSurveysExternally = (): Promise<TFormbricksSurveys> => {
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
+  if (globalThis.window.formbricksSurveys) {
+    return Promise.resolve(globalThis.window.formbricksSurveys);
+  }
+
+  if (surveysLoadPromise) {
+    return surveysLoadPromise;
+  }
+
+  surveysLoadPromise = new Promise<TFormbricksSurveys>((resolve, reject: (error: unknown) => void) => {
+    const config = Config.getInstance();
+    const script = document.createElement("script");
+    script.src = `${config.get().appUrl}/js/surveys.umd.cjs`;
+    script.async = true;
+    script.onload = () => {
+      waitForSurveysGlobal()
+        .then(resolve)
+        .catch((error: unknown) => {
+          surveysLoadPromise = null;
+          console.error("Failed to load Formbricks Surveys library:", error);
+          reject(new Error(`Failed to load Formbricks Surveys library`));
+        });
+    };
+    script.onerror = (error) => {
+      surveysLoadPromise = null;
+      console.error("Failed to load Formbricks Surveys library:", error);
+      reject(new Error(`Failed to load Formbricks Surveys library`));
+    };
+    document.head.appendChild(script);
+  });
+
+  return surveysLoadPromise;
+};
+
+let isPreloaded = false;
+
+export const preloadSurveysScript = (appUrl: string): void => {
+  // Don't preload if already loaded or already preloading
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- Runtime check for surveys package availability
+  if (globalThis.window.formbricksSurveys) return;
+  if (isPreloaded) return;
+
+  isPreloaded = true;
+  const link = document.createElement("link");
+  link.rel = "preload";
+  link.as = "script";
+  link.href = `${appUrl}/js/surveys.umd.cjs`;
+  document.head.appendChild(link);
+};

packages/js-core/src/lib/user/update-queue.ts

@@ -8,7 +8,9 @@ export class UpdateQueue {
   private static instance: UpdateQueue | null = null;
   private updates: TUpdates | null = null;
   private debounceTimeout: NodeJS.Timeout | null = null;
+  private pendingFlush: Promise<void> | null = null;
   private readonly DEBOUNCE_DELAY = 500;
+  private readonly PENDING_WORK_TIMEOUT = 5000;
 
   private constructor() {}
 
@@ -63,17 +65,45 @@ export class UpdateQueue {
     return !this.updates;
   }
 
+  public hasPendingWork(): boolean {
+    return this.updates !== null || this.pendingFlush !== null;
+  }
+
+  public async waitForPendingWork(): Promise<boolean> {
+    if (!this.hasPendingWork()) return true;
+
+    const flush = this.pendingFlush ?? this.processUpdates();
+    try {
+      const succeeded = await Promise.race([
+        flush.then(() => true as const),
+        new Promise<false>((resolve) => {
+          setTimeout(() => {
+            resolve(false);
+          }, this.PENDING_WORK_TIMEOUT);
+        }),
+      ]);
+      return succeeded;
+    } catch {
+      return false;
+    }
+  }
+
   public async processUpdates(): Promise<void> {
     const logger = Logger.getInstance();
     if (!this.updates) {
       return;
     }
 
+    // If a flush is already in flight, reuse it instead of creating a new promise
+    if (this.pendingFlush) {
+      return this.pendingFlush;
+    }
+
     if (this.debounceTimeout) {
       clearTimeout(this.debounceTimeout);
     }
 
-    return new Promise((resolve, reject) => {
+    const flushPromise = new Promise<void>((resolve, reject) => {
       const handler = async (): Promise<void> => {
         try {
           let currentUpdates = { ...this.updates };
@@ -147,8 +177,10 @@ export class UpdateQueue {
           }
 
           this.clearUpdates();
+          this.pendingFlush = null;
           resolve();
         } catch (error: unknown) {
+          this.pendingFlush = null;
           logger.error(
             `Failed to process updates: ${error instanceof Error ? error.message : "Unknown error"}`
           );
@@ -158,5 +190,8 @@ export class UpdateQueue {
 
       this.debounceTimeout = setTimeout(() => void handler(), this.DEBOUNCE_DELAY);
     });
+
+    this.pendingFlush = flushPromise;
+    return flushPromise;
   }
 }

packages/survey-ui/src/components/general/label.tsx

@@ -1,4 +1,4 @@
-import DOMPurify from "isomorphic-dompurify";
+import { sanitize } from "isomorphic-dompurify";
 import * as React from "react";
 import { cn, stripInlineStyles } from "@/lib/utils";
 
@@ -39,7 +39,7 @@ function Label({
   const isHtml = childrenString ? isValidHTML(strippedContent) : false;
   const safeHtml =
     isHtml && strippedContent
-      ? DOMPurify.sanitize(strippedContent, {
+      ? sanitize(strippedContent, {
           ADD_ATTR: ["target"],
           FORBID_ATTR: ["style"],
         })

packages/survey-ui/src/lib/utils.ts

@@ -1,5 +1,5 @@
 import { type ClassValue, clsx } from "clsx";
-import DOMPurify from "isomorphic-dompurify";
+import { sanitize } from "isomorphic-dompurify";
 import { extendTailwindMerge } from "tailwind-merge";
 
 const twMerge = extendTailwindMerge({
@@ -27,14 +27,16 @@ export function cn(...inputs: ClassValue[]): string {
 export const stripInlineStyles = (html: string): string => {
   if (!html) return html;
 
-  // Use DOMPurify to safely remove style attributes
-  // This is more secure than regex-based approaches and handles edge cases properly
-  return DOMPurify.sanitize(html, {
+  // Pre-strip style attributes from the raw string BEFORE DOMPurify parses it.
+  // DOMPurify internally uses innerHTML to parse HTML, which triggers CSP
+  // `style-src` violations at parse time — before FORBID_ATTR can strip them.
+  // The regex is O(n) safe: [^"]* and [^']* are negated classes bounded by
+  // fixed quote delimiters, so no backtracking can occur.
+  const preStripped = html.replaceAll(/ style="[^"]*"| style='[^']*'/gi, "");
+
+  return sanitize(preStripped, {
     FORBID_ATTR: ["style"],
-    // Preserve the target attribute (e.g. target="_blank" on links) which is not
-    // in DOMPurify's default allow-list but is explicitly required downstream.
     ADD_ATTR: ["target"],
-    // Keep other attributes and tags as-is, only remove style attributes
     KEEP_CONTENT: true,
   });
 };

packages/survey-ui/tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "isolatedModules": true,
     "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ES2020", "ES2021.String"],
     "noEmit": true,
     "paths": {
       "@/*": ["./src/*"]

packages/surveys/src/lib/html-utils.ts

@@ -10,14 +10,16 @@ import DOMPurify from "isomorphic-dompurify";
 export const stripInlineStyles = (html: string): string => {
   if (!html) return html;
 
-  // Use DOMPurify to safely remove style attributes
-  // This is more secure than regex-based approaches and handles edge cases properly
-  return DOMPurify.sanitize(html, {
+  // Pre-strip style attributes from the raw string BEFORE DOMPurify parses it.
+  // DOMPurify internally uses innerHTML to parse HTML, which triggers CSP
+  // `style-src` violations at parse time — before FORBID_ATTR can strip them.
+  // The regex is O(n) safe: [^"]* and [^']* are negated classes bounded by
+  // fixed quote delimiters, so no backtracking can occur.
+  const preStripped = html.replaceAll(/ style="[^"]*"| style='[^']*'/gi, "");
+
+  return DOMPurify.sanitize(preStripped, {
     FORBID_ATTR: ["style"],
-    // Preserve the target attribute (e.g. target="_blank" on links) which is not
-    // in DOMPurify's default allow-list but is explicitly required downstream.
     ADD_ATTR: ["target"],
-    // Keep other attributes and tags as-is, only remove style attributes
     KEEP_CONTENT: true,
   });
 };