wip

Author: jacekradko

packages/clerk-js/src/core/__tests__/clerk.test.ts

@@ -222,7 +222,7 @@ describe('Clerk singleton', () => {
       try {
         const loadPromise = sut.load();
 
-        await vi.advanceTimersByTimeAsync(2000);
+        await vi.runAllTimersAsync();
         await loadPromise;
       } finally {
         authCreateSpy.mockRestore();
@@ -254,10 +254,20 @@ describe('Clerk singleton', () => {
 
       try {
         const loadPromise = sut.load();
-        const expectationPromise = expect(loadPromise).rejects.toThrow(/Clerk: Network failure/);
 
-        await vi.advanceTimersByTimeAsync(2000);
-        await expectationPromise;
+        await vi.runAllTimersAsync();
+
+        try {
+          await loadPromise;
+          throw new Error('Expected load to throw');
+        } catch (err) {
+          expect(err).toBeInstanceOf(Error);
+          expect((err as Error).message).toMatch(/Something went wrong initializing Clerk/);
+          const cause = (err as Error).cause as any;
+          expect(cause).toBeDefined();
+          expect(cause.code).toBe('network_error');
+          expect(cause.clerkRuntimeError).toBe(true);
+        }
 
         expect(mountSpy).toHaveBeenCalledTimes(2);
         expect(mockClientFetch).toHaveBeenCalledTimes(2);

packages/clerk-js/src/core/clerk.ts

@@ -136,6 +136,7 @@ import { assertNoLegacyProp } from '../utils/assertNoLegacyProp';
 import { CLERK_ENVIRONMENT_STORAGE_ENTRY, SafeLocalStorage } from '../utils/localStorage';
 import { memoizeListenerCallback } from '../utils/memoizeStateListenerCallback';
 import { RedirectUrls } from '../utils/redirectUrls';
+import { withRetry } from '../utils/retry';
 import { AuthCookieService } from './auth/AuthCookieService';
 import { CaptchaHeartbeat } from './auth/CaptchaHeartbeat';
 import { CLERK_SATELLITE_URL, CLERK_SUFFIXED_COOKIES, CLERK_SYNCED, ERROR_CODES } from './constants';
@@ -2570,124 +2571,109 @@ export class Clerk implements ClerkInterface {
 
     let initializationDegradedCounter = 0;
 
-    const wait = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
+    const initializeClerk = async (): Promise<void> => {
+      const initEnvironmentPromise = Environment.getInstance()
+        .fetch({ touch: shouldTouchEnv })
+        .then(res => this.updateEnvironment(res))
+        .catch(() => {
+          ++initializationDegradedCounter;
+          const environmentSnapshot = SafeLocalStorage.getItem<EnvironmentJSONSnapshot | null>(
+            CLERK_ENVIRONMENT_STORAGE_ENTRY,
+            null,
+          );
 
-    const maxRetries = 2;
-    let retries = 0;
-    while (retries < maxRetries) {
-      try {
-        const initEnvironmentPromise = Environment.getInstance()
-          .fetch({ touch: shouldTouchEnv })
-          .then(res => this.updateEnvironment(res))
-          .catch(() => {
-            ++initializationDegradedCounter;
-            const environmentSnapshot = SafeLocalStorage.getItem<EnvironmentJSONSnapshot | null>(
-              CLERK_ENVIRONMENT_STORAGE_ENTRY,
-              null,
-            );
+          if (environmentSnapshot) {
+            this.updateEnvironment(new Environment(environmentSnapshot));
+          }
+        });
 
-            if (environmentSnapshot) {
-              this.updateEnvironment(new Environment(environmentSnapshot));
+      const initClient = async () => {
+        return Client.getOrCreateInstance()
+          .fetch()
+          .then(res => this.updateClient(res))
+          .catch(async e => {
+            /**
+             * Only handle non 4xx errors, like 5xx errors and network errors.
+             */
+            if (is4xxError(e)) {
+              throw e;
             }
-          });
 
-        const initClient = async () => {
-          return Client.getOrCreateInstance()
-            .fetch()
-            .then(res => this.updateClient(res))
-            .catch(async e => {
-              /**
-               * Only handle non 4xx errors, like 5xx errors and network errors.
-               */
-              if (is4xxError(e)) {
-                // bubble it up
-                throw e;
-              }
-
-              ++initializationDegradedCounter;
-
-              const jwtInCookie = this.#authService?.getSessionCookie();
-              const localClient = createClientFromJwt(jwtInCookie);
-
-              this.updateClient(localClient);
-
-              /**
-               * In most scenarios we want the poller to stop while we are fetching a fresh token during an outage.
-               * We want to avoid having the below `getToken()` retrying at the same time as the poller.
-               */
-              this.#authService?.stopPollingForToken();
-
-              // Attempt to grab a fresh token
-              await this.session
-                ?.getToken({ skipCache: true })
-                // If the token fetch fails, let Clerk be marked as loaded and leave it up to the poller.
-                .catch(() => null)
-                .finally(() => {
-                  this.#authService?.startPollingForToken();
-                });
-
-              // Allows for Clerk to be marked as loaded with the client and session created from the JWT.
-              return null;
-            });
-        };
-
-        const initComponents = () => {
-          if (Clerk.mountComponentRenderer && !this.#componentControls) {
-            this.#componentControls = Clerk.mountComponentRenderer(
-              this,
-              this.environment as Environment,
-              this.#options,
-            );
-          }
-        };
+            ++initializationDegradedCounter;
 
-        const [, clientResult] = await allSettled([initEnvironmentPromise, initClient()]);
+            const jwtInCookie = this.#authService?.getSessionCookie();
+            const localClient = createClientFromJwt(jwtInCookie);
 
-        if (clientResult.status === 'rejected') {
-          const e = clientResult.reason;
+            this.updateClient(localClient);
 
-          if (isError(e, 'requires_captcha')) {
-            initComponents();
-            await initClient();
-          } else {
-            throw e;
-          }
-        }
+            /**
+             * In most scenarios we want the poller to stop while we are fetching a fresh token during an outage.
+             * We want to avoid having the below `getToken()` retrying at the same time as the poller.
+             */
+            this.#authService?.stopPollingForToken();
+
+            await this.session
+              ?.getToken({ skipCache: true })
+              .catch(() => null)
+              .finally(() => {
+                this.#authService?.startPollingForToken();
+              });
 
-        this.#authService?.setClientUatCookieForDevelopmentInstances();
+            return null;
+          });
+      };
 
-        if (await this.#redirectFAPIInitiatedFlow()) {
-          return;
+      const initComponents = () => {
+        if (Clerk.mountComponentRenderer && !this.#componentControls) {
+          this.#componentControls = Clerk.mountComponentRenderer(this, this.environment as Environment, this.#options);
         }
+      };
 
-        initComponents();
+      const [, clientResult] = await allSettled([initEnvironmentPromise, initClient()]);
 
-        break;
-      } catch (err) {
-        if (!isValidBrowserOnline()) {
-          console.warn(err);
-          return;
+      if (clientResult.status === 'rejected') {
+        const e = clientResult.reason;
+
+        if (isError(e, 'requires_captcha')) {
+          initComponents();
+          await initClient();
+        } else {
+          throw e;
         }
+      }
 
-        const isDevBrowserUnauthenticated = isError(err, 'dev_browser_unauthenticated');
-        const isNetworkError = isClerkRuntimeError(err) && err.code === 'network_error';
+      this.#authService?.setClientUatCookieForDevelopmentInstances();
 
-        if (!isDevBrowserUnauthenticated && !isNetworkError) {
-          throw err;
-        }
+      if (await this.#redirectFAPIInitiatedFlow()) {
+        return;
+      }
 
-        retries += 1;
+      initComponents();
+    };
 
-        if (isDevBrowserUnauthenticated) {
-          await this.#authService.handleUnauthenticatedDevBrowser();
-        }
+    try {
+      await withRetry(initializeClerk, {
+        jitter: true,
+        maxAttempts: 2,
+        shouldRetry: async error => {
+          if (!isValidBrowserOnline()) {
+            console.warn(error);
+            return false;
+          }
 
-        if (retries >= maxRetries) {
-          clerkErrorInitFailed(err);
-        }
+          const isDevBrowserUnauthenticated = isError(error as any, 'dev_browser_unauthenticated');
+          const isNetworkError = isClerkRuntimeError(error) && error.code === 'network_error';
 
-        await wait(Math.pow(2, retries) * 1_000);
-      }
+          if (isDevBrowserUnauthenticated && this.#authService) {
+            await this.#authService.handleUnauthenticatedDevBrowser();
+            return true;
+          }
+
+          return isNetworkError;
+        },
+      });
+    } catch (err) {
+      clerkErrorInitFailed(err);
     }
 
     this.#captchaHeartbeat = new CaptchaHeartbeat(this);

packages/clerk-js/src/core/errors.ts

@@ -16,46 +16,8 @@ export function clerkNetworkError(url: string, e: Error): never {
   throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
 
-const formatErrorCause = (cause: unknown): string | null => {
-  if (!cause) {
-    return null;
-  }
-
-  if (cause instanceof Error) {
-    return cause.message;
-  }
-
-  if (typeof cause === 'string') {
-    return cause;
-  }
-
-  if (typeof cause === 'number' || typeof cause === 'bigint' || typeof cause === 'boolean') {
-    return cause.toString();
-  }
-
-  if (typeof cause === 'symbol') {
-    return cause.description ? `Symbol(${cause.description})` : 'Symbol()';
-  }
-
-  if (typeof cause === 'function') {
-    return cause.name ? `[Function ${cause.name}]` : '[Function anonymous]';
-  }
-
-  if (typeof cause === 'object') {
-    try {
-      return JSON.stringify(cause);
-    } catch {
-      return Object.prototype.toString.call(cause);
-    }
-  }
-
-  return '[Unknown cause]';
-};
-
 export function clerkErrorInitFailed(error?: unknown): never {
-  const formattedCause = formatErrorCause(error);
-  const cause = formattedCause ? ` Cause: ${formattedCause}` : '';
-  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.${cause}`);
+  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`, { cause: error });
 }
 
 export function clerkErrorDevInitFailed(msg = ''): never {