trigger an error if the api script is not loaded

src/index.js

@@ -1,34 +1,45 @@
 const React = require('react');
 const { generateQuery } = require("./utils.js");
 
- // Create script to init hCaptcha
-let onLoadListeners = [];
-let apiScriptRequested = false;
-
-// Generate hCaptcha API Script
+const SCRIPT_ID = 'hcaptcha-api-script-id';
+const HCAPTCHA_LOAD_FN_NAME = 'hcaptchaOnLoad';
+
+// Prevent loading API script multiple times
+let resolveFn;
+let rejectFn;
+const mountPromise = new Promise((resolve, reject) => {
+  resolveFn = resolve;
+  rejectFn = reject;
+});
+
+// Generate hCaptcha API script
 const mountCaptchaScript = (params={}) => {
-  apiScriptRequested = true;
+  if (document.getElementById(SCRIPT_ID)) {
+    // API was already requested
+    return mountPromise;
+  }
+
   // Create global onload callback
-  window.hcaptchaOnLoad = () => {
-    // Iterate over onload listeners, call each listener
-    onLoadListeners = onLoadListeners.filter(listener => {
-      listener();
-      return false;
-    });
-  };
+  window[HCAPTCHA_LOAD_FN_NAME] = resolveFn;
 
   const domain = params.apihost || "https://js.hcaptcha.com";
   delete params.apihost;
 
   const script = document.createElement("script");
-  script.src = `${domain}/1/api.js?render=explicit&onload=hcaptchaOnLoad`;
+  script.id = SCRIPT_ID;
+  script.src = `${domain}/1/api.js?render=explicit&onload=${HCAPTCHA_LOAD_FN_NAME}`;
   script.async = true;
+  script.onerror = (event) => {
+    console.error('Failed to load api: ' + script.src, event);
+    rejectFn(new Error('Failed to load api'));
+  }
 
   const query = generateQuery(params);
   script.src += query !== ""? `&${query}` : "";
 
   document.head.appendChild(script);
-}
+  return mountPromise;
+};
 
 
 class HCaptcha extends React.Component {
@@ -43,6 +54,7 @@ class HCaptcha extends React.Component {
 
       // Event Handlers
       this.handleOnLoad = this.handleOnLoad.bind(this);
+      this.handleOnLoadingError = this.handleOnLoadingError.bind(this);
       this.handleSubmit = this.handleSubmit.bind(this);
       this.handleExpire = this.handleExpire.bind(this);
       this.handleError  = this.handleError.bind(this);
@@ -62,17 +74,12 @@ class HCaptcha extends React.Component {
       }
     }
 
-    componentDidMount () { //Once captcha is mounted intialize hCaptcha - hCaptcha
+    componentDidMount () { // Once captcha is mounted intialize hCaptcha - hCaptcha
       const { apihost, assethost, endpoint, host, imghost, languageOverride:hl, reCaptchaCompat, reportapi, sentry, custom } = this.props;
       const { isApiReady } = this.state;
 
-      if (!isApiReady) {  //Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
-        if (apiScriptRequested) {
-          return;
-        }
-
-        // Only create the script tag once, use a global variable to track
-        mountCaptchaScript({
+      if (!isApiReady) {  // Check if hCaptcha has already been loaded, if not create script tag and wait to render captcha
+        const mountParams = {
           apihost,
           assethost,
           endpoint,
@@ -83,10 +90,12 @@ class HCaptcha extends React.Component {
           reportapi,
           sentry,
           custom
-        });
+        };
 
-        // Add onload callback to global onload listeners
-        onLoadListeners.push(this.handleOnLoad);
+        // Only create the script tag once, use a global promise to track
+        mountCaptchaScript(mountParams)
+          .then(this.handleOnLoad)
+          .catch(this.handleOnLoadingError);
       } else {
         this.renderCaptcha();
       }
@@ -186,6 +195,12 @@ class HCaptcha extends React.Component {
       });
     }
 
+    handleOnLoadingError (event) {
+      const { onError } = this.props;
+
+      if (onError) onError(event);
+    }
+
     handleSubmit (event) {
       const { onVerify } = this.props;
       const { isRemoved, captchaId } = this.state;

tests/hcaptcha.spec.js

@@ -337,7 +337,7 @@ describe("hCaptcha", () => {
     });
 
 
-    describe("Query parameter", () => {
+    describe("Mount hCaptcha API script", () => {
 
         beforeEach(() => {
             // Setup hCaptcha as undefined to load script
@@ -492,5 +492,25 @@ describe("hCaptcha", () => {
             const script = document.querySelector("head > script");
             expect(script.src).toContain("custom=true");
         });
+
+        it("emits error when script is failed", async () => {
+            const onError = jest.fn();
+
+            instance = ReactTestUtils.renderIntoDocument(<HCaptcha
+                    onError={onError}
+                    sitekey={TEST_PROPS.sitekey}
+                />);
+
+            const script = document.querySelector("head > script");
+            expect(onError.mock.calls.length).toBe(0);
+
+            script.onerror('api-script-failed');
+
+            // simulate microtask
+            await Promise.reject().catch(() => null)
+
+            expect(onError.mock.calls.length).toBe(1);
+            expect(onError.mock.calls[0][0]).toEqual(new Error('Failed to load api'));
+        });
     });
 });