feat(shared): backport intelligent retries to loadClerkJsScript

Enhanced loadClerkJsScript and loadClerkUiScript with intelligent error detection and retry logic:

- Added hasScriptRequestError() function that uses Performance API to detect failed script loads
  by checking transferSize, decodedBodySize, responseEnd, and responseStatus
- If an existing script has a request error, remove it and retry loading
- If waiting for an existing script times out, remove it and allow retry
- Added error event listener to bail out early on script load failures instead of waiting
  for full timeout
- Cache scriptUrl to check for errors before attempting to wait for existing script

This prevents indefinite hangs when script loads fail and enables automatic recovery
from transient network issues.

Author: nikosdouvlis

packages/shared/src/index.ts

@@ -3,3 +3,4 @@ throw new Error(
 );
 
 export {};
+// Force rebuild for explicit exports (replacing wildcard)

packages/shared/src/loadClerkJsScript.ts

@@ -55,6 +55,51 @@ function isClerkGlobalProperlyLoaded(prop: 'Clerk' | '__internal_ClerkUiCtor'):
 const isClerkProperlyLoaded = () => isClerkGlobalProperlyLoaded('Clerk');
 const isClerkUiProperlyLoaded = () => isClerkGlobalProperlyLoaded('__internal_ClerkUiCtor');
 
+/**
+ * Checks if an existing script has a request error using Performance API.
+ *
+ * @param scriptUrl - The URL of the script to check.
+ * @returns True if the script has failed to load due to a network/HTTP error.
+ */
+function hasScriptRequestError(scriptUrl: string): boolean {
+  if (typeof window === 'undefined' || !window.performance) {
+    return false;
+  }
+
+  const entries = performance.getEntriesByName(scriptUrl, 'resource') as PerformanceResourceTiming[];
+
+  if (entries.length === 0) {
+    return false;
+  }
+
+  const scriptEntry = entries[entries.length - 1];
+
+  // transferSize === 0 with responseEnd === 0 indicates network failure
+  // transferSize === 0 with responseEnd > 0 might be a 4xx/5xx error or blocked request
+  if (scriptEntry.transferSize === 0 && scriptEntry.decodedBodySize === 0) {
+    // If there was no response at all, it's definitely an error
+    if (scriptEntry.responseEnd === 0) {
+      return true;
+    }
+    // If we got a response but no content, likely an HTTP error (4xx/5xx)
+    if (scriptEntry.responseEnd > 0 && scriptEntry.responseStart > 0) {
+      return true;
+    }
+
+    if ('responseStatus' in scriptEntry) {
+      const status = (scriptEntry as any).responseStatus;
+      if (status >= 400) {
+        return true;
+      }
+      if (scriptEntry.responseStatus === 0) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
 /**
  * Hotloads the Clerk JS script with robust failure detection.
  *
@@ -88,20 +133,30 @@ export const loadClerkJsScript = async (opts?: LoadClerkJsScriptOptions): Promis
     return null;
   }
 
-  const existingScript = document.querySelector<HTMLScriptElement>('script[data-clerk-js-script]');
-
-  if (existingScript) {
-    return waitForPredicateWithTimeout(timeout, isClerkProperlyLoaded, rejectWith());
-  }
-
   if (!opts?.publishableKey) {
     errorThrower.throwMissingPublishableKeyError();
     return null;
   }
 
+  const scriptUrl = clerkJsScriptUrl(opts);
+  const existingScript = document.querySelector<HTMLScriptElement>('script[data-clerk-js-script]');
+
+  if (existingScript) {
+    if (hasScriptRequestError(scriptUrl)) {
+      existingScript.remove();
+    } else {
+      try {
+        await waitForPredicateWithTimeout(timeout, isClerkProperlyLoaded, rejectWith(), existingScript);
+        return null;
+      } catch {
+        existingScript.remove();
+      }
+    }
+  }
+
   const loadPromise = waitForPredicateWithTimeout(timeout, isClerkProperlyLoaded, rejectWith());
 
-  loadScript(clerkJsScriptUrl(opts), {
+  loadScript(scriptUrl, {
     async: true,
     crossOrigin: 'anonymous',
     nonce: opts.nonce,
@@ -125,19 +180,30 @@ export const loadClerkUiScript = async (opts?: LoadClerkUiScriptOptions): Promis
     return null;
   }
 
-  const existingScript = document.querySelector<HTMLScriptElement>('script[data-clerk-ui-script]');
-
-  if (existingScript) {
-    return waitForPredicateWithTimeout(timeout, isClerkUiProperlyLoaded, rejectWith());
-  }
-
   if (!opts?.publishableKey) {
     errorThrower.throwMissingPublishableKeyError();
     return null;
   }
 
+  const scriptUrl = clerkUiScriptUrl(opts);
+  const existingScript = document.querySelector<HTMLScriptElement>('script[data-clerk-ui-script]');
+
+  if (existingScript) {
+    if (hasScriptRequestError(scriptUrl)) {
+      existingScript.remove();
+    } else {
+      try {
+        await waitForPredicateWithTimeout(timeout, isClerkUiProperlyLoaded, rejectWith(), existingScript);
+        return null;
+      } catch {
+        existingScript.remove();
+      }
+    }
+  }
+
   const loadPromise = waitForPredicateWithTimeout(timeout, isClerkUiProperlyLoaded, rejectWith());
-  loadScript(clerkUiScriptUrl(opts), {
+
+  loadScript(scriptUrl, {
     async: true,
     crossOrigin: 'anonymous',
     nonce: opts.nonce,
@@ -223,6 +289,7 @@ function waitForPredicateWithTimeout(
   timeoutMs: number,
   predicate: () => boolean,
   rejectWith: Error,
+  existingScript?: HTMLScriptElement,
 ): Promise<HTMLScriptElement | null> {
   return new Promise((resolve, reject) => {
     let resolved = false;
@@ -232,6 +299,12 @@ function waitForPredicateWithTimeout(
       clearInterval(pollInterval);
     };
 
+    // Bail out early if the script fails to load, instead of waiting for the entire timeout
+    existingScript?.addEventListener('error', () => {
+      cleanup(timeoutId, pollInterval);
+      reject(rejectWith);
+    });
+
     const checkAndResolve = () => {
       if (resolved) {
         return;

packages/shared/src/loadScript.ts

@@ -36,8 +36,6 @@ export async function loadScript(src = '', opts: LoadScriptOptions): Promise<HTM
       script.defer = defer || false;
 
       script.addEventListener('load', () => {
-        console.log('this loaded ', src);
-
         script.remove();
         resolve(script);
       });
@@ -56,7 +54,6 @@ export async function loadScript(src = '', opts: LoadScriptOptions): Promise<HTM
 
   return retry(load, {
     shouldRetry: (_, iterations) => {
-      console.log('nikos 3', _, iterations);
       return iterations <= 5;
     },
   });

packages/shared/src/types/environment.ts

@@ -1,6 +1,7 @@
 import type { APIKeysSettingsResource } from './apiKeysSettings';
 import type { AuthConfigResource } from './authConfig';
 import type { CommerceSettingsResource } from './commerceSettings';
+import type { EnableEnvironmentSettingParams } from './devtools';
 import type { DisplayConfigResource } from './displayConfig';
 import type { OrganizationSettingsResource } from './organizationSettings';
 import type { ProtectConfigResource } from './protectConfig';
@@ -23,4 +24,5 @@ export interface EnvironmentResource extends ClerkResource {
   maintenanceMode: boolean;
   clientDebugMode: boolean;
   __internal_toSnapshot: () => EnvironmentJSONSnapshot;
+  __internal_enableEnvironmentSetting: (params: EnableEnvironmentSettingParams) => Promise<void>;
 }