feat(shared): Intelligent retries for existing clerk-js script (#6860)

Author: brkalow

.changeset/lazy-items-crash.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': minor
+---
+
+Improve error handling and retry logic when loading `@clerk/clerk-js`.

integration/templates/next-app-router/src/app/clerk-status/page.tsx

@@ -0,0 +1,35 @@
+'use client';
+import { ClerkLoaded, ClerkLoading, ClerkFailed, ClerkDegraded, useClerk } from '@clerk/nextjs';
+
+export default function ClerkStatusPage() {
+  const { loaded, status } = useClerk();
+
+  return (
+    <>
+      <p>Status: {status}</p>
+      <p>{status === 'loading' ? 'Clerk is loading' : null}</p>
+      <p>{status === 'error' ? 'Clerk is out' : null}</p>
+      <p>{status === 'degraded' ? 'Clerk is degraded' : null}</p>
+      <p>{status === 'ready' ? 'Clerk is ready' : null}</p>
+      <p>{status === 'ready' || status === 'degraded' ? 'Clerk is ready or degraded (loaded)' : null}</p>
+      <p>{loaded ? 'Clerk is loaded' : null}</p>
+      <p>{!loaded ? 'Clerk is NOT loaded' : null}</p>
+
+      <ClerkDegraded>
+        <p>(comp) Clerk is degraded</p>
+      </ClerkDegraded>
+
+      <ClerkLoaded>
+        <p>(comp) Clerk is loaded,(ready or degraded)</p>
+      </ClerkLoaded>
+
+      <ClerkFailed>
+        <p>(comp) Something went wrong with Clerk, refresh your page.</p>
+      </ClerkFailed>
+
+      <ClerkLoading>
+        <p>(comp) Waiting for clerk to fail, ready or degraded.</p>
+      </ClerkLoading>
+    </>
+  );
+}

integration/templates/react-vite/src/clerk-status/index.tsx

@@ -27,7 +27,7 @@ export default function ClerkStatusPage() {
       </ClerkFailed>
 
       <ClerkLoading>
-        <p>(comp) Waiting for clerk to fail, ready or regraded.</p>
+        <p>(comp) Waiting for clerk to fail, ready or degraded.</p>
       </ClerkLoading>
     </>
   );