@hcaptcha/react-hcaptcha 1.8.0 → 1.9.0

package/src/index.js

@@ -1,67 +1,21 @@
 import * as React from 'react';
-import { generateQuery, getFrame, getMountElement } from "./utils.js";
+import { hCaptchaLoader, initSentry } from '@hcaptcha/loader';
 
-const SCRIPT_ID = 'hcaptcha-api-script-id';
-const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
-
-// Prevent loading API script multiple times
-const scripts = [];
-
-// Generate hCaptcha API script
-const mountCaptchaScript = (params={}) => {
-  const element = getMountElement(params.scriptLocation);
-  delete params.scriptLocation;
-
-  const frame = getFrame(element);
-  const script = scripts.find(({ scope }) => scope === frame.window);
-
-  if (frame.document.getElementById(SCRIPT_ID) && script) {
-    // API was already requested
-    return script.promise;
-  }
-
-  const promise = new Promise((resolve, reject) => {
-    // Create global onload callback
-    frame.window[HCAPTCHA_LOAD_FN_NAME] = resolve;
-
-    const domain = params.apihost || "https://js.hcaptcha.com";
-    delete params.apihost;
-
-    const script = frame.document.createElement("script");
-    script.id = SCRIPT_ID;
-    script.src = `${domain}/1/api.js?render=explicit&onload=${HCAPTCHA_LOAD_FN_NAME}`;
-
-    script.async = params.loadAsync !== undefined? params.loadAsync : true;
-    delete params.loadAsync;
-
-    script.onerror = (event) => reject('script-error');
-
-    const query = generateQuery(params);
-    script.src += query !== ""? `&${query}` : "";
-
-    element.appendChild(script);
-  });
-
-  scripts.push({ promise, scope: frame.window });
-
-  return promise;
-};
+import { getFrame, getMountElement } from './utils.js';
+import { breadcrumbMessages, scopeTag } from "./constants";
 
 
 class HCaptcha extends React.Component {
     constructor (props) {
       super(props);
 
-      const element = getMountElement(this.props.scriptLocation);
-      const frame = getFrame(element);
-
       /**
        * Internal reference to track hCaptcha API
        *
        * Required as window is relative to initialization in application
        * not where the script and iFrames have been loaded.
        */
-      this._hcaptcha = frame.window.hcaptcha || undefined;
+      this._hcaptcha = undefined;
 
       // API Methods
       this.renderCaptcha = this.renderCaptcha.bind(this);
@@ -79,14 +33,12 @@ class HCaptcha extends React.Component {
       this.handleClose = this.handleClose.bind(this);
       this.handleChallengeExpired = this.handleChallengeExpired.bind(this);
 
-
-      const isApiReady = typeof this._hcaptcha !== 'undefined';
-
       this.ref = React.createRef();
       this.apiScriptRequested = false;
+      this.sentryHub = null;
 
       this.state = {
-        isApiReady,
+        isApiReady: false,
         isRemoved: false,
         elementId: props.id,
         captchaId: ''
@@ -94,7 +46,18 @@ class HCaptcha extends React.Component {
     }
 
     componentDidMount () { // Once captcha is mounted intialize hCaptcha - hCaptcha
-      const { isApiReady } = this.state;
+      const element = getMountElement(this.props.scriptLocation);
+      const frame = getFrame(element);
+      this._hcaptcha = frame.window.hcaptcha || undefined;
+
+      const isApiReady = typeof this._hcaptcha !== 'undefined';
+
+      this.sentryHub = initSentry(this.props.sentry, scopeTag);
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.mounted,
+      });
 
       /*
        * Check if hCaptcha has already been loaded,
@@ -102,7 +65,14 @@ class HCaptcha extends React.Component {
        * If No, create script tag and wait to render the captcha
        */
       if (isApiReady) {
-        this.renderCaptcha();
+        this.setState(
+          {
+            isApiReady: true
+          },
+          () => {
+            this.renderCaptcha();
+          }
+        );
 
         return;
       }
@@ -121,6 +91,11 @@ class HCaptcha extends React.Component {
       // Reset any stored variables / timers when unmounting
       hcaptcha.reset(captchaId);
       hcaptcha.remove(captchaId);
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.unmounted,
+      });
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -163,26 +138,30 @@ class HCaptcha extends React.Component {
         sentry,
         custom,
         loadAsync,
-        scriptLocation
+        scriptLocation,
+        cleanup = true,
       } = this.props;
       const mountParams = {
+        render: 'explicit',
         apihost,
         assethost,
         endpoint,
         hl,
         host,
         imghost,
-        recaptchacompat: reCaptchaCompat === false? "off" : null,
+        recaptchacompat: reCaptchaCompat === false? 'off' : null,
         reportapi,
         sentry,
         custom,
         loadAsync,
-        scriptLocation
+        scriptLocation,
+        cleanup
       };
 
-      mountCaptchaScript(mountParams)
-        .then(this.handleOnLoad)
-        .catch(this.handleError);
+      hCaptchaLoader(mountParams)
+          .then(this.handleOnLoad, this.handleError)
+          .catch(this.handleError);
+
       this.apiScriptRequested = true;
     }
 
@@ -220,6 +199,11 @@ class HCaptcha extends React.Component {
       }
       // Reset captcha state, removes stored token and unticks checkbox
       hcaptcha.reset(captchaId)
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.reset,
+      });
     }
 
     removeCaptcha(callback) {
@@ -234,21 +218,33 @@ class HCaptcha extends React.Component {
         hcaptcha.remove(captchaId);
         callback && callback()
       });
+
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.removed,
+      });
     }
 
-    handleOnLoad () {
+  handleOnLoad () {
       this.setState({ isApiReady: true }, () => {
-        const element = getMountElement(this.props.scriptLocation);
-        const frame = getFrame(element);
+        try {
+          const element = getMountElement(this.props.scriptLocation);
+          const frame = getFrame(element);
+
+          this._hcaptcha = frame.window.hcaptcha;
 
-        this._hcaptcha = frame.window.hcaptcha;
 
-        // render captcha and wait for captcha id
-        this.renderCaptcha(() => {
+          // render captcha and wait for captcha id
+          this.renderCaptcha(() => {
             // trigger onLoad if it exists
+
             const { onLoad } = this.props;
             if (onLoad) onLoad();
-        });
+          });
+        } catch (error) {
+          this.sentryHub.captureException(error);
+        }
       });
     }
 
@@ -276,6 +272,11 @@ class HCaptcha extends React.Component {
       hcaptcha.reset(captchaId) // If hCaptcha runs into error, reset captcha - hCaptcha
 
       if (onExpire) onExpire();
+
+      this.sentryHub.addBreadcrumb({
+        category: scopeTag.value,
+        message: breadcrumbMessages.expired,
+      });
     }
 
     handleError (event) {
@@ -322,18 +323,23 @@ class HCaptcha extends React.Component {
     }
 
     execute (opts = null) {
-      const { captchaId } = this.state;
-      const hcaptcha = this._hcaptcha;
+      try {
+        const { captchaId } = this.state;
+        const hcaptcha = this._hcaptcha;
 
-      if (!this.isReady()) {
-        return;
-      }
 
-      if (opts && typeof opts !== "object") {
-        opts = null;
-      }
+        if (!this.isReady()) {
+            return;
+        }
+
+        if (opts && typeof opts !== "object") {
+            opts = null;
+        }
 
-      return hcaptcha.execute(captchaId, opts);
+        return hcaptcha.execute(captchaId, opts);
+      } catch (error) {
+          this.sentryHub.captureException(error);
+      }
     }
 
     setData (data) {

package/src/utils.js

@@ -1,23 +1,15 @@
-function generateQuery(params) {
-    return Object.entries(params)
-        .filter(([key, value]) => value || value === false)
-        .map(([key, value]) => {
-            return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
-        }).join("&");
-};
-
 function getFrame(element) {
-    const doc = (element && element.ownerDocument) || document;
-    const win = doc.defaultView || doc.parentWindow;
-    return { document: doc, window: win };
+  const doc = (element && element.ownerDocument) || document;
+  const win = doc.defaultView || doc.parentWindow || window;
+
+  return { document: doc, window: win };
 }
 
 function getMountElement(element) {
-    return element || document.head;
+  return element || document.head;
 }
 
 export {
-    generateQuery,
-    getFrame,
-    getMountElement
-};
+  getFrame,
+  getMountElement
+};

package/types/index.d.ts

@@ -30,6 +30,8 @@ interface HCaptchaProps {
   reCaptchaCompat?: boolean;
   loadAsync?: boolean;
   scriptLocation?: HTMLElement | null;
+  sentry?: boolean;
+  cleanup?: boolean;
 }
 
 interface ExecuteResponse {