fix(shared): Retry with exponential backoff if loadScript fails (#4349)

Author: nikosdouvlis

.changeset/forty-laws-swim.md

@@ -0,0 +1,6 @@
+---
+"@clerk/clerk-js": patch
+"@clerk/shared": patch
+---
+
+Retry with exponential backoff if loadScript fails to load the script

packages/shared/src/loadScript.ts

@@ -1,3 +1,5 @@
+import { runWithExponentialBackOff } from './utils';
+
 const NO_DOCUMENT_ERROR = 'loadScript cannot be called when document does not exist';
 const NO_SRC_ERROR = 'loadScript cannot be called without a src';
 
@@ -11,34 +13,39 @@ type LoadScriptOptions = {
 
 export async function loadScript(src = '', opts: LoadScriptOptions): Promise<HTMLScriptElement> {
   const { async, defer, beforeLoad, crossOrigin, nonce } = opts || {};
-  return new Promise((resolve, reject) => {
-    if (!src) {
-      reject(NO_SRC_ERROR);
-    }
 
-    if (!document || !document.body) {
-      reject(NO_DOCUMENT_ERROR);
-    }
+  const load = () => {
+    return new Promise<HTMLScriptElement>((resolve, reject) => {
+      if (!src) {
+        reject(NO_SRC_ERROR);
+      }
 
-    const script = document.createElement('script');
+      if (!document || !document.body) {
+        reject(NO_DOCUMENT_ERROR);
+      }
 
-    crossOrigin && script.setAttribute('crossorigin', crossOrigin);
-    script.async = async || false;
-    script.defer = defer || false;
+      const script = document.createElement('script');
 
-    script.addEventListener('load', () => {
-      script.remove();
-      resolve(script);
-    });
+      crossOrigin && script.setAttribute('crossorigin', crossOrigin);
+      script.async = async || false;
+      script.defer = defer || false;
+
+      script.addEventListener('load', () => {
+        script.remove();
+        resolve(script);
+      });
+
+      script.addEventListener('error', () => {
+        script.remove();
+        reject();
+      });
 
-    script.addEventListener('error', () => {
-      script.remove();
-      reject();
+      script.src = src;
+      script.nonce = nonce;
+      beforeLoad?.(script);
+      document.body.appendChild(script);
     });
+  };
 
-    script.src = src;
-    script.nonce = nonce;
-    beforeLoad?.(script);
-    document.body.appendChild(script);
-  });
+  return runWithExponentialBackOff(load, { shouldRetry: (_, iterations) => iterations < 5 });
 }