fix(clerk-js): Better CAPTCHA widget console error (#3989)

Co-authored-by: Stefanos Anagnostou <[email protected]>
clerk · Aug 20, 2024 · e81d9a5 · e81d9a5
1 parent ca03895
commit e81d9a5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/sour-bulldogs-explode.md b/.changeset/sour-bulldogs-explode.md
@@ -0,0 +1,5 @@
+---
+"@clerk/clerk-js": patch
+---
+
+Improve the Smart CAPTCHA widget console error.
diff --git a/packages/clerk-js/src/utils/captcha/hcaptcha.ts b/packages/clerk-js/src/utils/captcha/hcaptcha.ts
@@ -56,7 +56,9 @@ export const getHCaptchaToken = async (captchaOptions: {
             visibleDiv.style.display = 'block';
             widgetDiv = visibleDiv;
           } else {
-            console.error('Captcha DOM element not found. Using invisible captcha widget.');
+            console.error(
+              'Cannot initialize Smart CAPTCHA widget because the `clerk-captcha` DOM element was not found; falling back to Invisible CAPTCHA widget. If you are using a custom flow, visit https://clerk.com/docs/custom-flows/bot-sign-up-protection for instructions',
+            );
             widgetDiv = createInvisibleDOMElement();
             isInvisibleWidget = true;
             hCaptchaSiteKey = invisibleSiteKey;

diff --git a/packages/clerk-js/src/utils/captcha/turnstile.ts b/packages/clerk-js/src/utils/captcha/turnstile.ts
@@ -127,7 +127,9 @@ export const getTunstileToken = async (captchaOptions: {
             visibleDiv.style.display = 'block';
             widgetDiv = visibleDiv;
           } else {
-            console.error('Captcha DOM element not found. Using invisible captcha widget.');
+            console.error(
+              'Cannot initialize Smart CAPTCHA widget because the `clerk-captcha` DOM element was not found; falling back to Invisible CAPTCHA widget. If you are using a custom flow, visit https://clerk.com/docs/custom-flows/bot-sign-up-protection for instructions',
+            );
             widgetDiv = createInvisibleDOMElement();
             isInvisibleWidget = true;
             turnstileSiteKey = invisibleSiteKey;