diff --git a/.changeset/forty-laws-swim.md b/.changeset/forty-laws-swim.md new file mode 100644 index 00000000000..e616edc3190 --- /dev/null +++ b/.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 diff --git a/packages/shared/src/loadScript.ts b/packages/shared/src/loadScript.ts index c10d775328d..9a85ab4e551 100644 --- a/packages/shared/src/loadScript.ts +++ b/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 { 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((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 }); }